MediaWiki:Common.js: Difference between revisions
From Intelligent Materials and Systems Lab
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* Any JavaScript here will be loaded for all users on every page load. */ | /* Any JavaScript here will be loaded for all users on every page load. */ | ||
// sidebar background color dynamic changer | // // sidebar background color dynamic changer | ||
// | |||
var sidebar = document.getElementById('ims-sidebar'); | // var sidebar = document.getElementById('ims-sidebar'); | ||
var hue = Number(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'); | ||
slider.id = 'sidebar-bg-slider'; | // slider.id = 'sidebar-bg-slider'; | ||
slider.type = 'range'; | // slider.type = 'range'; | ||
slider.min = "0"; | // slider.min = "0"; | ||
slider.max = "360"; | // slider.max = "360"; | ||
slider.setAttribute('style', 'width: 100%;'); | // slider.setAttribute('style', 'width: 100%;'); | ||
// | |||
// initial setup on pageload | // // initial setup on pageload | ||
if (hue >= 0) { | // 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; | ||
} | // } | ||
// | |||
var slider_div = document.createElement('div') | // var slider_div = document.createElement('div') | ||
slider_div.setAttribute('style', 'margin-top: 1rem;'); | // slider_div.setAttribute('style', 'margin-top: 1rem;'); | ||
// | |||
var label = document.createElement('h3'); | // var label = document.createElement('h3'); | ||
label.innerText = 'Background' | // label.innerText = 'Background' | ||
label.setAttribute('style', 'font-size: .5rem; font-weight: 400; letter-spacing: 1.618ex; text-transform: uppercase;'); | // label.setAttribute('style', 'font-size: .5rem; font-weight: 400; letter-spacing: 1.618ex; text-transform: uppercase;'); | ||
// | |||
slider_div.appendChild(label); | // slider_div.appendChild(label); | ||
slider_div.appendChild(slider); | // slider_div.appendChild(slider); | ||
sidebar.appendChild(slider_div); | // sidebar.appendChild(slider_div); | ||
// | |||
slider.addEventListener("change", function (e) { | // slider.addEventListener("change", function (e) { | ||
window.localStorage.setItem('hue', Number(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:49, 31 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%);');
});//