Last active
October 3, 2019 14:50
-
-
Save bmbrands/002393552a476ebbbb7acb690dd54c1b to your computer and use it in GitHub Desktop.
Custom JavaScript to remember input range state
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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