86 lines
2.6 KiB
JavaScript
86 lines
2.6 KiB
JavaScript
(function () {
|
|
'use strict';
|
|
|
|
const create = ({ contentRoot, bodyClass, hostClass, hostDataAttribute, drawerDataAttribute, backdropSelector, backMarkup, historyKey }) => {
|
|
let host = null;
|
|
let drawer = null;
|
|
let trigger = null;
|
|
let open = false;
|
|
|
|
const restore = () => {
|
|
if (host && host.parentNode) {
|
|
const mobileDrawer = host.querySelector('[' + drawerDataAttribute + ']');
|
|
if (mobileDrawer) {
|
|
contentRoot.appendChild(mobileDrawer);
|
|
mobileDrawer.removeAttribute(drawerDataAttribute);
|
|
mobileDrawer.dataset.open = 'false';
|
|
mobileDrawer.setAttribute('aria-hidden', 'true');
|
|
}
|
|
host.parentNode.removeChild(host);
|
|
}
|
|
|
|
if (trigger) {
|
|
trigger.setAttribute('aria-expanded', 'false');
|
|
}
|
|
const backdrops = backdropSelector
|
|
? [contentRoot.querySelector(backdropSelector)].filter(Boolean)
|
|
: Array.from(contentRoot.querySelectorAll('.sg-card-list-page-drawer-backdrop'));
|
|
backdrops.forEach((backdrop) => {
|
|
backdrop.dataset.open = 'false';
|
|
backdrop.setAttribute('aria-hidden', 'true');
|
|
});
|
|
|
|
host = null;
|
|
drawer = null;
|
|
trigger = null;
|
|
open = false;
|
|
document.body.classList.remove(bodyClass);
|
|
document.body.classList.remove('sg-card-list-page-drawer-open');
|
|
};
|
|
|
|
const mount = (sourceDrawer, detailTrigger, existingHost = null) => {
|
|
restore();
|
|
if (!sourceDrawer) {
|
|
return null;
|
|
}
|
|
|
|
host = existingHost || document.createElement('div');
|
|
host.className = hostClass;
|
|
host.setAttribute(hostDataAttribute, 'true');
|
|
if (!existingHost) {
|
|
host.innerHTML = backMarkup;
|
|
}
|
|
drawer = sourceDrawer;
|
|
trigger = detailTrigger;
|
|
drawer.setAttribute(drawerDataAttribute, 'true');
|
|
drawer.dataset.open = 'true';
|
|
drawer.setAttribute('aria-hidden', 'false');
|
|
host.appendChild(drawer);
|
|
document.body.appendChild(host);
|
|
document.body.classList.add(bodyClass);
|
|
open = true;
|
|
|
|
if (historyKey) {
|
|
window.history.pushState({ ...(window.history.state || {}), [historyKey]: 'detail' }, '', window.location.href);
|
|
}
|
|
|
|
return { host, drawer, trigger: detailTrigger };
|
|
};
|
|
|
|
const close = () => {
|
|
if (!open) {
|
|
return;
|
|
}
|
|
if (window.history.state && window.history.state[historyKey] === 'detail') {
|
|
window.history.back();
|
|
return;
|
|
}
|
|
restore();
|
|
};
|
|
|
|
return { mount, restore, close, isOpen: () => open, getHost: () => host, getDrawer: () => drawer };
|
|
};
|
|
|
|
window.SharedMobileDetail = { create };
|
|
}());
|