75 lines
2.5 KiB
JavaScript
75 lines
2.5 KiB
JavaScript
(function (root, factory) {
|
|
if (typeof module === 'object' && module.exports) module.exports = factory;
|
|
else root.createMobileInsights = factory;
|
|
})(typeof self !== 'undefined' ? self : this, function (o) {
|
|
const route = '#/insights';
|
|
let active = false;
|
|
let previous = '#/my-work';
|
|
|
|
function attr(element, name, value) {
|
|
if (value === null) element.removeAttribute(name);
|
|
else element.setAttribute(name, value);
|
|
}
|
|
|
|
function render(open, focus = false) {
|
|
active = Boolean(open && o.mediaQuery.matches);
|
|
attr(o.root, 'data-mobile-open', active ? 'true' : null);
|
|
attr(o.root, 'role', active ? 'dialog' : null);
|
|
attr(o.root, 'aria-modal', active ? 'true' : null);
|
|
attr(o.root, 'aria-hidden', active || !o.mediaQuery.matches ? null : 'true');
|
|
o.root.inert = !active && o.mediaQuery.matches;
|
|
o.backgrounds.forEach(element => { element.inert = active; });
|
|
o.dock.hidden = active;
|
|
attr(o.hud, 'data-overlay-hidden', active ? 'true' : null);
|
|
if (active) o.closeButton.focus();
|
|
else if (focus) o.launcher.focus();
|
|
}
|
|
|
|
function url(hash) {
|
|
return (o.location.pathname || '') + (o.location.search || '') + hash;
|
|
}
|
|
|
|
function open() {
|
|
if (!o.mediaQuery.matches || active) return false;
|
|
previous = o.location.hash && o.location.hash !== route ? o.location.hash : '#/my-work';
|
|
if (o.menu) o.menu.open = false;
|
|
o.history.pushState({ ...(o.history.state || {}), mobileInsights:true, previousHash:previous }, '', url(route));
|
|
render(true);
|
|
return true;
|
|
}
|
|
|
|
function sync() {
|
|
render(o.location.hash === route, active && o.location.hash !== route);
|
|
}
|
|
|
|
function close() {
|
|
if (!active) return false;
|
|
if (o.history.state?.mobileInsights) o.history.back();
|
|
else {
|
|
const state = { ...(o.history.state || {}) };
|
|
delete state.mobileInsights;
|
|
delete state.previousHash;
|
|
o.history.replaceState(state, '', url(previous));
|
|
render(false, true);
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function start() {
|
|
o.launcher.addEventListener('click', open);
|
|
o.closeButton.addEventListener('click', close);
|
|
o.eventTarget.addEventListener('popstate', sync);
|
|
o.eventTarget.addEventListener('hashchange', sync);
|
|
o.eventTarget.addEventListener('keydown', event => {
|
|
if (active && event.key === 'Escape') {
|
|
event.preventDefault?.();
|
|
close();
|
|
}
|
|
});
|
|
o.mediaQuery.addEventListener?.('change', sync);
|
|
sync();
|
|
}
|
|
|
|
return { start, open, close, current:() => active };
|
|
});
|