MediaWiki:Common.js: Difference between revisions
From Intelligent Materials and Systems Lab
(sidebar bg slider) |
No edit summary |
||
Line 4: | Line 4: | ||
var sidebar = document.getElementById('ims-sidebar'); | var sidebar = document.getElementById('ims-sidebar'); | ||
var hue = window.localStorage.getItem('hue'); // color storage | var hue = Number(window.localStorage.getItem('hue')); // color storage | ||
var slider = document.createElement('input'); | var slider = document.createElement('input'); | ||
Line 14: | Line 14: | ||
// initial setup on pageload | // initial setup on pageload | ||
if (hue) { | if (hue >= 0) { | ||
sidebar.setAttribute('style', 'background: hsl(' + hue + ', 30%, 40%);'); | sidebar.setAttribute('style', 'background: hsl(' + hue + ', 30%, 40%);'); | ||
slider.value = hue; | slider.value = hue; | ||
Line 31: | Line 31: | ||
slider.addEventListener("change", function (e) { | slider.addEventListener("change", function (e) { | ||
window.localStorage.setItem('hue', e.target.value); // to save it on page refreshing | window.localStorage.setItem('hue', Number(e.target.value)); // to save it on page refreshing | ||
sidebar.setAttribute('style', 'background: hsl(' + e.target.value + ', 30%, 40%);'); | sidebar.setAttribute('style', 'background: hsl(' + e.target.value + ', 30%, 40%);'); | ||
}); | }); |
Revision as of 18:24, 30 July 2019
/* Any JavaScript here will be loaded for all users on every page load. */
// sidebar background color dynamic changer
var sidebar = document.getElementById('ims-sidebar');
var hue = Number(window.localStorage.getItem('hue')); // color storage
var slider = document.createElement('input');
slider.id = 'sidebar-bg-slider';
slider.type = 'range';
slider.min = "0";
slider.max = "360";
slider.setAttribute('style', 'width: 100%;');
// initial setup on pageload
if (hue >= 0) {
sidebar.setAttribute('style', 'background: hsl(' + hue + ', 30%, 40%);');
slider.value = hue;
}
var slider_div = document.createElement('div')
slider_div.setAttribute('style', 'margin-top: 1rem;');
var label = document.createElement('h3');
label.innerText = 'Background'
label.setAttribute('style', 'font-size: .5rem; font-weight: 400; letter-spacing: 1.618ex; text-transform: uppercase;');
slider_div.appendChild(label);
slider_div.appendChild(slider);
sidebar.appendChild(slider_div);
slider.addEventListener("change", function (e) {
window.localStorage.setItem('hue', Number(e.target.value)); // to save it on page refreshing
sidebar.setAttribute('style', 'background: hsl(' + e.target.value + ', 30%, 40%);');
});