86 lines
2.7 KiB
Plaintext
86 lines
2.7 KiB
Plaintext
(function() {
|
|
'use strict';
|
|
|
|
window.utils = window.utils || {};
|
|
|
|
// Defines a function to turn an element into an interactive aside-navigation.
|
|
// If the small 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 aboveCollapsedNav = 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;
|
|
}
|
|
aboveCollapsedNav = true;
|
|
window.setTimeout(function() {
|
|
if (aboveCollapsedNav && !document.body.classList.contains('touch-supported')) {
|
|
asideEl.classList.add('pseudo-hover');
|
|
}
|
|
}, 800);
|
|
}, false);
|
|
|
|
asideEl.addEventListener('mouseleave', function(event) {
|
|
aboveCollapsedNav = false;
|
|
asideEl.classList.remove('pseudo-hover');
|
|
}, false);
|
|
}
|
|
};
|
|
})();
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
utils.aside(document.querySelector('.main__aside'));
|
|
|
|
});
|