Theme utilizes heavily modified version of CSSUI for modals, drawers and accordions. These components were chosen due to their capability of functioning without JavaScript. We only use JavaScript to enhance the basic functionalities; for example trapping focus on the container or by disabling body scrolls.
See drawer-cart.liquid or password-page-modal.liquid for reference. Accordions are done with details HTML5 element.
Modals and Drawers JavaScript
Theme's global.js includes Woolman.ModalsAndDrawers object which enriches basic functionality of modals and drawers. Methods:
Woolman.ModalsAndDrawers.init()
If a link contains word modal or drawer, this function tries to locate element with matching id to initialize as modal or drawer. E.g. link with href="#drawer-menu" tries to initialize element with id="drawer-menu" as a drawer.
Woolman.ModalsAndDrawers.showModalOrDrawer(targetId)
This function opens modal or drawer with provided id.
Woolman.ModalsAndDrawers.closeModalOrDrawer(targetId)
This function closes modal or drawer with provided id.