5bed8f56d4
* adds focusTrap wrapper to preact Modal component * add view specific code for focus trap in admin add nav link * add script to return a focustrap toggle, use in add nav link modal partial * add trap to edit nav link modal * add handlers for sign up modal * update modal controller for admin section, update nav link modals to use * update other admin modals with new data values for trap * remove unneeded erb script file * remove unneeded target * refactor to remove extra unneeded param * remove duplicate code, store getFocusTrapToggle in window * trap focus in comment and bookmark showModal instances for not logged in user * remove need for activator id * clean up id refs no longer needed * remove custom code and re-use focsu-trap lib * update storybook docs * update default export in focusTrap * prevent close button click triggering a modal toggle twice * ensure if user navigates from a modal the trap is deactivated * add jsdoc comments and add dynamic import * ensure admin controller modal traps are cleaned up on disconnect * update sign up modal to use crayons * update modal controller and admin nav links modals to use preact modal * update profile fields modals for new controller * tweak styling of sign up and admin modals to match previous * update listings modal to use crayons modal, adapt focus trap to work with click outside * memoize deactivate callback to ensure modal can be presented on first page load * add missed focustrap changes * fix focus trap issues in onboarding flow * refactor onboarding focus trap, remove getFocusTrapToggle * tweaks for styling and article modal toggle * add click outside tests to modal * add cypress tests for the login modal * update liquid tag tests affected by change * refactors to address review comments * fix issue with login modal presented twice on comment add * change ids to selectors in admin modals * small pr comment refactors * add listings e2e tests * add nav link modal tests * fix issue with help modal * tweak to fix ui bug from merge * remove context from showLoginModal * rename toggleModal * rename state property for clarity Co-authored-by: Nick Taylor <nick@dev.to>
72 lines
1.9 KiB
JavaScript
72 lines
1.9 KiB
JavaScript
import {
|
|
initializeMobileMenu,
|
|
setCurrentPageIconLink,
|
|
getInstantClick,
|
|
initializeTouchDevice,
|
|
} from '../topNavigation/utilities';
|
|
|
|
window.showModal = async ({
|
|
title,
|
|
contentSelector,
|
|
overlay = false,
|
|
size = 's',
|
|
}) => {
|
|
const [{ Modal }, { render, h }] = await Promise.all([
|
|
import('@crayons/Modal'),
|
|
import('preact'),
|
|
]);
|
|
|
|
const modalRoot = document.createElement('div');
|
|
document.body.appendChild(modalRoot);
|
|
|
|
render(
|
|
<Modal
|
|
overlay={overlay}
|
|
title={title}
|
|
onClose={() => {
|
|
render(null, modalRoot);
|
|
}}
|
|
size={size}
|
|
>
|
|
<div
|
|
// eslint-disable-next-line react/no-danger
|
|
dangerouslySetInnerHTML={{
|
|
__html: document.querySelector(contentSelector).innerHTML,
|
|
}}
|
|
/>
|
|
</Modal>,
|
|
modalRoot,
|
|
);
|
|
};
|
|
|
|
function getPageEntries() {
|
|
return Object.entries({
|
|
'notifications-index': document.getElementById('notifications-link'),
|
|
'chat_channels-index': document.getElementById('connect-link'),
|
|
'moderations-index': document.getElementById('moderation-link'),
|
|
'stories-search': document.getElementById('search-link'),
|
|
});
|
|
}
|
|
|
|
const menuTriggers = [
|
|
...document.querySelectorAll(
|
|
'.js-hamburger-trigger, .hamburger a:not(.js-nav-more-trigger)',
|
|
),
|
|
];
|
|
const moreMenus = [...document.getElementsByClassName('js-nav-more-trigger')];
|
|
|
|
getInstantClick().then((spa) => {
|
|
spa.on('change', () => {
|
|
const { currentPage } = document.getElementById('page-content').dataset;
|
|
|
|
setCurrentPageIconLink(currentPage, getPageEntries());
|
|
});
|
|
});
|
|
|
|
const { currentPage } = document.getElementById('page-content').dataset;
|
|
const memberMenu = document.getElementById('crayons-header__menu');
|
|
const menuNavButton = document.getElementById('member-menu-button');
|
|
|
|
setCurrentPageIconLink(currentPage, getPageEntries());
|
|
initializeMobileMenu(menuTriggers, moreMenus);
|
|
initializeTouchDevice(memberMenu, menuNavButton);
|