122 lines
3.6 KiB
Plaintext
122 lines
3.6 KiB
Plaintext
(function() {
|
|
'use strict';
|
|
|
|
window.utils = window.utils || {};
|
|
|
|
// Defines a function to turn an element into an interactive aside-navigation.
|
|
// If the screen is smaller than 999px the navigation is automatically
|
|
// collapsed - even when dynamically resized (e.g. switching from portatit
|
|
// to landscape).
|
|
// The can user may also manually collapse and expand the navigation by
|
|
// using the little arrow at the bottom.
|
|
window.utils.aside = function(asideEl) {
|
|
var collapsed = false;
|
|
var collClass = 'main__aside--collapsed';
|
|
// animClass used to enable transitions only when needed so that
|
|
// (potentially happening) initial collapse of the asidenav
|
|
// goes unnoticed by the user.
|
|
var animClass = 'main__aside--transitioning';
|
|
var hoveringAboveCollapsedNav = false;
|
|
|
|
init();
|
|
function init() {
|
|
var collLS = window.localStorage.getItem('asidenavCollapsed') === 'true';
|
|
if (document.body.getBoundingClientRect().width < 999 || collLS) {
|
|
asideEl.classList.add(collClass);
|
|
collapsed = true;
|
|
}
|
|
addListener();
|
|
}
|
|
|
|
function check() {
|
|
if (collapsed && !hasCollapsedClass() || !collapsed && hasCollapsedClass()) {
|
|
asideEl.classList.add(animClass);
|
|
asideEl.classList.toggle(collClass, collapsed);
|
|
window.localStorage.setItem('asidenavCollapsed', collapsed);
|
|
}
|
|
}
|
|
|
|
function hasCollapsedClass() {
|
|
return asideEl.classList.contains(collClass);
|
|
}
|
|
|
|
function addListener() {
|
|
|
|
asideEl.querySelector('.asidenav__toggler').addEventListener('click', function(event) {
|
|
collapsed = !collapsed;
|
|
check();
|
|
}, false);
|
|
|
|
asideEl.addEventListener('transitionend', function(event) {
|
|
if (event.propertyName === 'opacity') {
|
|
asideEl.classList.remove(animClass);
|
|
}
|
|
}, false);
|
|
|
|
window.addEventListener('resize', function() {
|
|
collapsed = document.body.getBoundingClientRect().width < 999;
|
|
check();
|
|
}, false);
|
|
|
|
asideEl.addEventListener('mouseover', function(event) {
|
|
if (!hasCollapsedClass()) {
|
|
return false;
|
|
}
|
|
hoveringAboveCollapsedNav = true;
|
|
window.setTimeout(function() {
|
|
if (hoveringAboveCollapsedNav && !document.body.classList.contains('touch-supported')) {
|
|
asideEl.classList.add('pseudo-hover');
|
|
}
|
|
}, 200);
|
|
}, false);
|
|
|
|
asideEl.addEventListener('mouseleave', function(event) {
|
|
hoveringAboveCollapsedNav = false;
|
|
window.setTimeout(function() {
|
|
if (!hoveringAboveCollapsedNav) {
|
|
asideEl.classList.remove('pseudo-hover');
|
|
}
|
|
}, 200);
|
|
}, false);
|
|
}
|
|
};
|
|
})();
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
utils.aside(document.querySelector('.main__aside'));
|
|
|
|
// remove me before flight:
|
|
// EXPERIMENTAL
|
|
var selector = document.querySelector('#theme-selector');
|
|
var options = Array.from(selector.querySelectorAll('option'))
|
|
.reduce(function(acc, optEl) {
|
|
if (!acc.includes(optEl.value)) {
|
|
acc.push(optEl.value);
|
|
}
|
|
return acc;
|
|
},
|
|
[]);
|
|
|
|
selector.addEventListener('change', function(event) {
|
|
setTheme(event.target.value);
|
|
});
|
|
|
|
function setTheme(theme) {
|
|
document.body.className = 'theme--' + theme;
|
|
}
|
|
|
|
// random theme on loading and again every 20 seconds
|
|
// setInterval(function() {
|
|
// setTheme(randomOption());
|
|
// }, 20000);
|
|
|
|
// function randomOption() {
|
|
// return options[Math.floor(Math.random() * options.length)];
|
|
// }
|
|
|
|
// // initial theme
|
|
// setTheme(randomOption());
|
|
|
|
});
|