UNPKG

@digipolis-gent/modal

Version:

An accessible modal library as used by the gent_styleguide for the city of Ghent, Belgium.

2 lines 7.65 kB
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("Modal",[],t):"object"==typeof exports?exports.Modal=t():e.Modal=t()}(this,(function(){return function(e){var t={};function o(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)o.d(n,r,function(t){return e[t]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=0)}([function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if(!e||!e.id)return;t||(t={});void 0===t.changeHash&&(t.changeHash=!0);void 0===t.enableEscape&&(t.enableEscape=!0);let o,n,l,a,s,c=[];const d=new r.default(e),u=()=>[].slice.call(e.parentNode.childNodes).filter(t=>1===t.nodeType&&t!==e),f=function(){let r=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];r&&!1!==t.changeHash&&(history.pushState(null,null,"#"+e.id),n="#"+e.id),s=document.querySelector("body > [data-gent-modal]"),s?document.body.replaceChild(e,s):document.body.appendChild(e),e.classList.add("visible"),e.setAttribute("aria-hidden","false");const l=e.dataset.scrollable;(0,i.disableBodyScroll)(l?e.querySelector(l):e,{allowTouchMove:()=>!0});const a=u();a.forEach(e=>e.setAttribute("aria-hidden",!0)),document.addEventListener("keydown",v),o&&o.setAttribute("aria-expanded","true"),requestAnimationFrame(()=>requestAnimationFrame(()=>e.focus()))},h=()=>{if(u().forEach(e=>e.setAttribute("aria-hidden",!1)),e.classList.remove("visible"),e.setAttribute("aria-hidden","true"),s){e.parentNode.replaceChild(s,e),(0,i.enableBodyScroll)(e);const t=s.dataset.scrollable;(0,i.disableBodyScroll)(t?s.querySelector(t):s,{allowTouchMove:!0})}else(0,i.clearAllBodyScrollLocks)(),document.removeEventListener("keydown",v);a.insertBefore(e,l),o&&(o.setAttribute("aria-expanded","false"),location.hash||o.focus())},v=e=>{if(!d||!d.hasFocusables||!e)return;switch(e.keyCode||e.which){case 9:e.shiftKey?d.back(e):d.next(e);break;case 27:t.enableEscape&&(e.preventDefault(),p())}},p=()=>{t.changeHash?history.back():h()},b=()=>{let e;window.addEventListener("resize",()=>{clearTimeout(e),e=setTimeout(()=>t.resizeEvent(f,h),250)})},m=()=>{window.addEventListener("hashchange",()=>{n==="#"+e.id&&h(),n=window.location.hash,n==="#"+e.id&&f(!1)}),n==="#"+e.id&&(history.replaceState(null,null,window.location.href.split("#")[0]),f())};return(()=>{if(c=document.querySelectorAll(`[aria-controls="${e.id}"], [href="#${e.id}"]`),l=e.nextElementSibling,a=e.parentElement,!t.changeHash&&0===c.length)return;e.setAttribute("tabindex","-1"),e.setAttribute("aria-hidden","true"),e.setAttribute("data-gent-modal","true");const r=e=>{o=e.currentTarget,o.hasAttribute("aria-controls")&&f()};for(let e=c.length;e--;)c[e].setAttribute("aria-expanded","false"),c[e].addEventListener("click",r);const i=e.querySelectorAll(t.closeBtns||".modal-close");for(let t=i.length;t--;)i[t].dataset.target&&i[t].dataset.target!==e.id||i[t].addEventListener("click",p);n=window.location.hash,t.changeHash&&m();t.resizeEvent&&(t.resizeEvent(f,h),b())})(),{close:p,open:f}};var n,r=(n=o(1))&&n.__esModule?n:{default:n},i=o(2);e.exports=t.default},function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var n=function(e){let t=o(e);function o(e){let t=e.querySelectorAll('a[href], area[href], input:not([disabled]):not([hidden]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]');return Array.prototype.slice.call(t).filter(n)}function n(e){return e.offsetWidth>0||e.offsetHeight>0||e.getClientRects().length>0}this.setFocusables=function(){t=o(e)},this.next=function(e){this.setFocusables();let o=document.activeElement;o&&o===t[t.length-1]&&(t[0].focus(),e.preventDefault())},this.back=function(e){this.setFocusables();let o=document.activeElement;o&&o===t[0]&&(t[t.length-1].focus(),e.preventDefault())},this.home=function(){this.setFocusables(),t[0].focus()},this.end=function(){this.setFocusables(),t[t.length-1].focus()},this.hasFocusables=t&&t.length>0};t.default=n,e.exports=t.default},function(e,t,o){var n,r,i;r=[t],void 0===(i="function"==typeof(n=function(e){"use strict";function t(e){if(Array.isArray(e)){for(var t=0,o=Array(e.length);t<e.length;t++)o[t]=e[t];return o}return Array.from(e)}Object.defineProperty(e,"__esModule",{value:!0});var o=!1;if("undefined"!=typeof window){var n={get passive(){o=!0}};window.addEventListener("testPassive",null,n),window.removeEventListener("testPassive",null,n)}function r(e){return s.some((function(t){return!(!t.options.allowTouchMove||!t.options.allowTouchMove(e))}))}function i(e){var t=e||window.event;return!!r(t.target)||1<t.touches.length||(t.preventDefault&&t.preventDefault(),!1)}function l(){setTimeout((function(){void 0!==f&&(document.body.style.paddingRight=f,f=void 0),void 0!==u&&(document.body.style.overflow=u,u=void 0)}))}var a="undefined"!=typeof window&&window.navigator&&window.navigator.platform&&(/iP(ad|hone|od)/.test(window.navigator.platform)||"MacIntel"===window.navigator.platform&&1<window.navigator.maxTouchPoints),s=[],c=!1,d=-1,u=void 0,f=void 0;e.disableBodyScroll=function(e,n){if(a){if(!e)return void console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");if(e&&!s.some((function(t){return t.targetElement===e}))){var l={targetElement:e,options:n||{}};s=[].concat(t(s),[l]),e.ontouchstart=function(e){1===e.targetTouches.length&&(d=e.targetTouches[0].clientY)},e.ontouchmove=function(t){var o,n,l,a;1===t.targetTouches.length&&(n=e,a=(o=t).targetTouches[0].clientY-d,r(o.target)||(n&&0===n.scrollTop&&0<a||(l=n)&&l.scrollHeight-l.scrollTop<=l.clientHeight&&a<0?i(o):o.stopPropagation()))},c||(document.addEventListener("touchmove",i,o?{passive:!1}:void 0),c=!0)}}else{v=n,setTimeout((function(){if(void 0===f){var e=!!v&&!0===v.reserveScrollBarGap,t=window.innerWidth-document.documentElement.clientWidth;e&&0<t&&(f=document.body.style.paddingRight,document.body.style.paddingRight=t+"px")}void 0===u&&(u=document.body.style.overflow,document.body.style.overflow="hidden")}));var h={targetElement:e,options:n||{}};s=[].concat(t(s),[h])}var v},e.clearAllBodyScrollLocks=function(){a?(s.forEach((function(e){e.targetElement.ontouchstart=null,e.targetElement.ontouchmove=null})),c&&(document.removeEventListener("touchmove",i,o?{passive:!1}:void 0),c=!1),s=[],d=-1):(l(),s=[])},e.enableBodyScroll=function(e){if(a){if(!e)return void console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");e.ontouchstart=null,e.ontouchmove=null,s=s.filter((function(t){return t.targetElement!==e})),c&&0===s.length&&(document.removeEventListener("touchmove",i,o?{passive:!1}:void 0),c=!1)}else(s=s.filter((function(t){return t.targetElement!==e}))).length||l()}})?n.apply(t,r):n)||(e.exports=i)}])})); //# sourceMappingURL=index.js.map