Skip to content

Instantly share code, notes, and snippets.

@bmbrands
Last active October 3, 2019 14:50
Show Gist options
  • Save bmbrands/002393552a476ebbbb7acb690dd54c1b to your computer and use it in GitHub Desktop.
Save bmbrands/002393552a476ebbbb7acb690dd54c1b to your computer and use it in GitHub Desktop.
Custom JavaScript to remember input range state
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
crossorigin="anonymous"></script>
<script type="text/javascript">
var SELECTORS = {
LABELS: '.modtype_label',
RANGES: 'input[type="range"]'
};
var registerEventListeners = function(root) {
var labelActivities = root.find(SELECTORS.LABELS);
var rangeValues = getStorage();
labelActivities.each(function(aindex, activity) {
var ranges = $(activity).find(SELECTORS.RANGES);
var activityId = $(activity).attr('id');
ranges.each(function(rindex, range) {
var value = $(range).val();
var rangeIdentifyer = activityId + '-range-' + rindex;
if (rangeValues.hasOwnProperty(rangeIdentifyer)) {
$(range).val(rangeValues[rangeIdentifyer]);
}
$(range).attr('data-value', value);
$(range).attr('id', rangeIdentifyer);
})
$(activity).on('change', SELECTORS.RANGES, function() {
var value = $(this).val();
var rangeid = $(this).attr('id');
setStorage(rangeid, value);
})
});
};
var setStorage = function(rangeid, value) {
var inputranges = {};
if (storedValue = localStorage.getItem('cie-input-ranges')) {
if (IsJsonString(storedValue)) {
var inputranges = JSON.parse(storedValue);
}
}
inputranges[rangeid] = value;
localStorage.setItem('cie-input-ranges', JSON.stringify(inputranges));
}
var getStorage = function() {
var storedValue = {};
var storedObject = localStorage.getItem('cie-input-ranges');
if (IsJsonString(storedObject)) {
storedValue = JSON.parse(storedObject);
}
return storedValue;
}
var IsJsonString = function(str) {
if (str === null) {
return false;
}
try {
JSON.parse(str);
} catch (e) {
localStorage.removeItem('cie-input-ranges');
return false;
}
return true;
}
var root = $('.course-content');
registerEventListeners(root);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment