82 lines
2.4 KiB
Plaintext
82 lines
2.4 KiB
Plaintext
(function() {
|
|
'use strict';
|
|
|
|
window.utils = window.utils || {};
|
|
|
|
window.utils.aside = function(asideEl, topNav) {
|
|
var collapsed = false;
|
|
var collClass = 'main__aside--collapsed';
|
|
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;
|
|
if (topNav) {
|
|
topNav.style.paddingLeft = '90px';
|
|
window.setTimeout(function() {
|
|
topNav.classList.add('navbar--animated');
|
|
}, 200);
|
|
}
|
|
} else if (topNav) {
|
|
topNav.classList.add('navbar--animated');
|
|
}
|
|
}
|
|
|
|
function check() {
|
|
if (collapsed && !hasClass() || !collapsed && hasClass()) {
|
|
asideEl.classList.add(animClass);
|
|
asideEl.classList.toggle(collClass, collapsed);
|
|
if (topNav) {
|
|
topNav.style.paddingLeft = collapsed ? '90px' : '';
|
|
}
|
|
window.localStorage.setItem('asidenavCollapsed', collapsed);
|
|
}
|
|
}
|
|
|
|
function hasClass() {
|
|
return asideEl.classList.contains(collClass);
|
|
}
|
|
|
|
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 (!collapsed) {
|
|
return false;
|
|
}
|
|
aboveCollapsedNav = true;
|
|
console.log(event);
|
|
window.setTimeout(function() {
|
|
if (aboveCollapsedNav && !document.body.classList.contains('touch-supported')) {
|
|
asideEl.classList.add('pseudo-hover');
|
|
}
|
|
}, 430);
|
|
}, false);
|
|
asideEl.addEventListener('mouseleave', function(event) {
|
|
aboveCollapsedNav = false;
|
|
asideEl.classList.remove('pseudo-hover');
|
|
}, false);
|
|
};
|
|
})();
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
utils.aside(document.querySelector('.main__aside'), document.querySelector('.navbar'));
|
|
|
|
});
|