UNPKG

@stormid/modal

Version:

Accessible modal dialog

3 lines (2 loc) 4.66 kB
function e(){return e=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)({}).hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},e.apply(null,arguments)}var t={onClassName:"is--active",toggleSelectorAttribute:"data-modal-toggle",callback:!1,startOpen:!1,delay:0},n=["button","a"],o=["a[href]","area[href]","input:not([disabled]):not([type=hidden])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","iframe","object","embed","[contenteditable]",'[tabindex]:not([tabindex="-1"])'],a=function(e,t){return function(){var n=new CustomEvent(e,{bubbles:!0,detail:{getState:t.getState}});window.document.dispatchEvent(n)}},i=function(e){return e.querySelector("[role=dialog]")||e.querySelector("[role=alertdialog]")||console.warn("No dialog or alertdialog found in modal node")},r=function(e,t){var o,a=e.getAttribute(t.toggleSelectorAttribute),i=a&&[].slice.call(document.querySelectorAll((o=a,n.map(function(e){return e+"."+o}).join(", "))));if(i)return i;console.warn("Modal cannot be initialised, no modal toggle elements found. Does the modal have a "+t.toggleSelectorAttribute+" attribute that identifies toggle buttons or links?")},l=function(e){return[].slice.call(e.querySelectorAll(o.join(",")))},u=function(t){return function(n){var o=t.getState(),a=o.isOpen;a&&27===n.keyCode&&(n.preventDefault(),t.update(e({},t.getState(),{isOpen:!a}),[s(t)])),a&&9===n.keyCode&&c(o)(n)}},c=function(e){return function(t){var n=e.focusableChildren.indexOf(document.activeElement);t.shiftKey&&0===n?(t.preventDefault(),e.focusableChildren[e.focusableChildren.length-1].focus()):t.shiftKey||n!==e.focusableChildren.length-1||(t.preventDefault(),e.focusableChildren[0].focus())}},d=function(e){e.node[e.isOpen?"removeAttribute":"setAttribute"]("hidden","hidden"),[].slice.call(document.querySelectorAll("body > *")).forEach(function(t){return t!==e.node&&t[e.isOpen?"setAttribute":"removeAttribute"]("aria-hidden","true")}),e.node.classList.toggle(e.settings.onClassName),document.documentElement.classList.toggle("is--modal")},s=function(e){return function(t){t.isOpen?function(e){return function(){var t=e.getState();t.dialog.hasAttribute("aria-hidden")&&t.dialog.removeAttribute("aria-hidden");var n=document.body.firstElementChild||null;n!==t.node&&document.body.insertBefore(t.node,n),document.addEventListener("keydown",t.keyListener),d(t);var o=function(){return t.focusableChildren.length>0&&t.focusableChildren[0].focus()};t.settings.delay?window.setTimeout(o,t.settings.delay):o(),a("modal.open",e)()}}(e)():function(e){return function(){var t=e.getState();document.removeEventListener("keydown",t.keyListener),d(t),t.lastFocused.focus(),a("modal.close",e)()}}(e)(t),"function"==typeof t.settings.callback&&t.settings.callback.call(t)}},f=function(e){return function(t){var n=t.dialog,o=t.toggles;n&&o&&(t.node.setAttribute("hidden","hidden"),n.getAttribute("aria-label")||n.getAttribute("aria-labelledby")&&document.querySelector("#"+n.getAttribute("aria-labelledby"))||console.warn("The modal dialog should have an aria-labelledby attribute that matches the id of an element that contains text, or an aria-label attribute."),"alertdialog"!==n.getAttribute("role")||n.getAttribute("aria-describedby")&&document.querySelector("#"+n.getAttribute("aria-describedby"))||console.warn("The alertdialog should have an aria-describedby attribute that matches the id of an element that contains text"),o.forEach(function(t){t.addEventListener("click",function(t){t.preventDefault(),b(e)})}))}},b=function(t){return t.update(e({},t.getState(),{isOpen:!t.getState().isOpen,lastFocused:t.getState().isOpen?t.getState().lastFocused:document.activeElement}),[s(t)])},g=function(n,o){var a=function(e){return"string"==typeof e?[].slice.call(document.querySelectorAll(e)):e instanceof Array?e:Object.prototype.isPrototypeOf.call(NodeList.prototype,e)?[].slice.call(e):e instanceof HTMLElement?[e]:[]}(n);return 0===a.length?console.warn("Modal not initialised, no elements found for selector '"+n+"'"):a.map(function(n){return Object.create(function(e){var t,n=e.node,o=e.settings,a=(t={},{update:function(e,n){t=null!=e?e:t,n&&n.forEach(function(e){return e(t)})},getState:function(){return t}});return a.update({settings:o,node:n,dialog:i(n),toggles:r(n,o),focusableChildren:l(n),keyListener:u(a),lastFocused:!1,isOpen:!1},[f(a),function(){return o.startOpen&&b(a)}]),{getState:a.getState,open:function(){a.getState().isOpen||b(a)},close:function(){a.getState().isOpen&&b(a)}}}({settings:e({},t,n.dataset,o),node:n}))})};export{g as default}; //# sourceMappingURL=index.modern.js.map