Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@stormid/modal-gallery

Package Overview
Dependencies
Maintainers
5
Versions
9
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@stormid/modal-gallery - npm Package Compare versions

Comparing version 1.0.0-alpha.7 to 1.0.0-alpha.9

2

dist/index.js

@@ -1,2 +0,2 @@

function e(){return(e=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var l in n)Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l])}return e}).apply(this,arguments)}var t={TAB:9,ESC:27,LEFT:37,RIGHT:39},n=["click","keydown"],l=["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","iframe","object","embed","[contenteditable]",'[tabindex]:not([tabindex="-1"])'],i=function(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")},r={fullscreen:!1,preload:!1,totals:!0,scrollable:!1,single:!1,templates:{__proto__:null,overlay:function(){var e=document.createElement("div");return e.className="modal-gallery__outer js-modal-gallery__outer",e.setAttribute("role","dialog"),e.setAttribute("tabindex","-1"),e.setAttribute("aria-hidden",!0),e},overlayInner:function(e,t){return'<div class="modal-gallery__inner js-modal-gallery__inner" role="group" aria-roledescription="carousel">\n <div class="modal-gallery__content js-modal-gallery__content" aria-atomic="false" aria-live="polite">\n '+t+"\n </div>\n </div>\n "+e+'\n <button class="js-modal-gallery__close modal-gallery__close" aria-label="Close">\n <svg focusable="false" aria-hidden="true" width="30" height="30" stroke="#fff">\n <g stroke-width="4">\n <line x1="5" y1="5" x2="25" y2="25"/>\n <line x1="5" y1="25" x2="25" y2="5"/>\n </g>\n </svg>\n </button>\n <div class="modal-gallery__total js-gallery-totals"></div>'},buttons:function(){return'<button class="js-modal-gallery__next modal-gallery__next" aria-label="Next">\n <svg focusable="false" aria-hidden="true" width="44" height="60" stroke="#fff">\n <polyline points="14 10 34 30 14 50" stroke-width="4" stroke-linecap="butt" fill="none" stroke-linejoin="round"/>\n </svg>\n </button>\n <button class="js-modal-gallery__previous modal-gallery__previous" aria-label="Previous">\n <svg focusable="false" aria-hidden="true" width="44" height="60" stroke="#fff">\n <polyline points="30 10 10 30 30 50" stroke-width="4" stroke-linecap="butt" fill="none" stroke-linejoin="round"/>\n </svg>\n</button>'},item:function(e){return function(t,n){return'<div class="modal-gallery__item js-modal-gallery__item" role="group" aria-roledescription="slide" aria-label="Image '+(n+1)+" of "+e.length+(e[n].title?", "+e[n].title:"")+'">\n <div class="modal-gallery__img-container js-modal-gallery__img-container"></div>\n '+t+"\n </div>"}},details:function(e){return e.title||e.description?'<div class="modal-gallery__details">\n '+(e.title?'<h1 class="modal-gallery__title">'+i(e.title)+"</h1>":"")+"\n "+(e.description?'<div class="modal-gallery__description">'+i(e.description)+"</div>":"")+"\n </div>":""}}},a=function(e){return function(l){var i=l.items,r=l.settings;i.map(function(l,i){l.trigger&&n.map(function(n){l.trigger.addEventListener(n,function(n){n.keyCode&&n.keyCode!==t.ENTER||n.which&&3===n.which||(n.preventDefault(),_(e)(i))})})}),r.preload&&i.map(o(e))}},o=function(e){return function(t,n){try{var l=new Image,i=function(){var t=e.getState().imageCache;t[n]=l,e.dispatch({imageCache:t}),u(e.getState(),n)};l.onload=i,l.src=t.src,l.complete&&i()}catch(e){console.warn(e)}}},s=function(e){return function(t){var n=e.getState(),i=n.settings,r=n.items,a=n.keyListener,o=document.body.appendChild(i.templates.overlay()),s=r.length>2?i.templates.buttons():"";o.insertAdjacentHTML("beforeend",i.templates.overlayInner(s,r.map(i.templates.details).map(i.templates.item(r)).join("")));var u,m=[].slice.call(o.querySelectorAll(".js-modal-gallery__item")),g=o.querySelector(".js-gallery-totals");e.dispatch({dom:{overlay:o,items:m,totals:g,focusableChildren:(u=o,[].slice.call(u.querySelectorAll(l.join(",")))),lastFocused:document.activeElement}},[c(e),d(e),function(){return document.addEventListener("keydown",a)},f(e),v])}},c=function(e){return function(t){var n=e.getState(),l=n.imageCache,i=n.current;l.length===n.items.length?l.map(function(e,n){u(t,n)}):function(e){return function(t){var n=e.getState(),l=n.imageCache,i=n.items,r=n.dom,a=[t];i.length>1&&a.push(0===t?i.length-1:t-1),i.length>2&&a.push(t===i.length-1?0:t+1),a.forEach(function(t){void 0===l[t]&&(r.items[t].classList.add("loading"),o(e)(i[t],t))})}}(e)(i)}},u=function(e,t){var n=e.dom,l=e.settings,i=e.items;if(n){var r=n.items[t].querySelector(".js-modal-gallery__img-container");r.querySelector(".modal-gallery__img")||(r.innerHTML='<img class="'+(l.scrollable?"modal-gallery__img modal-gallery__img--scrollable":"modal-gallery__img")+'" src="'+i[t].src+'" alt="'+i[t].title+'"'+(n.items[t].srcset?' srcset="'+n.items[t].srcset+'"':"")+(n.items[t].sizes?' sizes="'+n.items[t].sizes+'"':"")+">",n.items[t].classList.remove("loading"))}},d=function(e){return function(l){var i=e.getState().dom,r=i.overlay.querySelector(".js-modal-gallery__close");n.forEach(function(n){r.addEventListener(n,function(n){n.keyCode&&n.keyCode!==t.ENTER||n.which&&3===n.which||b(e)})});var a=i.overlay.querySelector(".js-modal-gallery__previous"),o=i.overlay.querySelector(".js-modal-gallery__next");(a||o)&&n.forEach(function(n){a&&a.addEventListener(n,function(n){n.keyCode&&n.keyCode!==t.ENTER||h(e)}),o&&o.addEventListener(n,function(n){n.keyCode&&n.keyCode!==t.ENTER||p(e)})})}},m=function(e){return function(n){if(e.getState().isOpen)switch(n.keyCode){case t.ESC:b(e);break;case t.TAB:g(e,n);break;case t.LEFT:h(e);break;case t.RIGHT:p(e)}}},g=function(e,t){var n=e.getState().dom,l=n.focusableChildren.indexOf(document.activeElement);t.shiftKey&&0===l&&(t.preventDefault(),n.focusableChildren[n.focusableChildren.length-1].focus()),t.shiftKey||l!==n.focusableChildren.length-1||(t.preventDefault(),n.focusableChildren[0].focus())},f=function(e){return function(t){var n=e.getState(),l=n.dom,i=n.current,r=n.isOpen,a=n.settings;l.overlay.classList.toggle("is--active"),l.overlay.setAttribute("aria-hidden",!r),l.overlay.setAttribute("tabindex",r?"0":"-1"),null!==r&&l.items[i].classList.add("is--active"),l.focusableChildren&&l.focusableChildren.length>0&&window.setTimeout(function(){l.focusableChildren[0].focus()},0),a.fullscreen&&y(t)}},v=function(e){e.settings.totals&&(e.dom.totals.innerHTML=e.current+1+"/"+e.items.length)},y=function(e){var t=e.dom;e.isOpen?(t.overlay.requestFullscreen&&t.overlay.requestFullscreen(),t.overlay.webkitRequestFullscreen&&t.overlay.webkitRequestFullscreen(),t.overlay.mozRequestFullScreen&&t.overlay.mozRequestFullScreen()):(document.exitFullscreen&&document.exitFullscreen(),document.mozCancelFullScreen&&document.mozCancelFullScreen(),document.webkitExitFullscreen&&document.webkitExitFullscreen())},h=function(e){var t=e.getState(),n=t.current,l=t.dom,i=0===n?l.items.length-1:n-1;e.dispatch({current:i},[function(){return l.items[n].classList.remove("is--active")},function(){return l.items[i].classList.add("is--active")},c(e),v])},p=function(e){var t=e.getState(),n=t.current,l=t.dom,i=n===l.items.length-1?0:n+1;e.dispatch({current:i},[function(){return l.items[n].classList.remove("is--active")},function(){return l.items[i].classList.add("is--active")},c(e),v])},b=function(e){var t=e.getState(),n=t.keyListener,l=t.lastFocused,i=t.dom;e.dispatch({current:null,isOpen:!1},[function(){return document.removeEventListener("keydown",n)},function(){l&&l.focus()},function(){return i.overlay.parentNode.removeChild(i.overlay)}])},_=function(e){return function(t){void 0===t&&(t=0),e.dispatch({current:t,isOpen:!0},[s(e)])}},k=function(t,n){return Object.create((l={items:t,settings:e({},r,n)},i={},(o={dispatch:function(t,n){i=t?e({},i,t):i,n&&n.forEach(function(e){return e(i)})},getState:function(){return i}}).dispatch({settings:l.settings,items:l.items,imageCache:[],isOpen:!1,current:null,keyListener:m(o)},[a(o)]),{getState:o.getState,open:_(o)}));var l,i,o};module.exports=function(e,t){if(e.length)return t&&t.single?function(e,t){var n=[].slice.call(document.querySelectorAll(e));if(n.length)return n.map(function(e){return k([{trigger:e,src:e.getAttribute("href"),srcset:e.getAttribute("data-srcset")||null,sizes:e.getAttribute("data-sizes")||null,title:e.getAttribute("data-title")||"",description:e.getAttribute("data-description")||""}],t)});console.warn("Modal Gallery cannot be initialised, no images found")}(e,t):function(e,t){var n;if("string"==typeof e){var l=[].slice.call(document.querySelectorAll(e));if(!l.length)return void console.warn("Modal Gallery cannot be initialised, no images found");n=l.map(function(e){return{trigger:e,src:e.getAttribute("href"),srcset:e.getAttribute("data-srcset")||null,sizes:e.getAttribute("data-sizes")||null,title:e.getAttribute("data-title")||"",description:e.getAttribute("data-description")||""}})}else n=e;return k(n,t)}(e,t);console.warn("Modal Gallery cannot be initialised, no images found")};
function e(){return e=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},e.apply(this,arguments)}var t={TAB:9,ESC:27,LEFT:37,RIGHT:39},n=["click","keydown"],i=["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","iframe","object","embed","[contenteditable]",'[tabindex]:not([tabindex="-1"])'],l=function(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")},r={fullscreen:!1,preload:!1,totals:!0,scrollable:!1,single:!1,templates:{__proto__:null,overlay:function(){var e=document.createElement("div");return e.className="modal-gallery__outer js-modal-gallery__outer",e.setAttribute("role","dialog"),e.setAttribute("tabindex","-1"),e.setAttribute("aria-hidden",!0),e},overlayInner:function(e,t){return'<div class="modal-gallery__inner js-modal-gallery__inner" role="group" aria-roledescription="carousel">\n <div class="modal-gallery__content js-modal-gallery__content" aria-atomic="false" aria-live="polite">\n '+t+"\n </div>\n </div>\n "+e+'\n <button class="js-modal-gallery__close modal-gallery__close" aria-label="Close">\n <svg focusable="false" aria-hidden="true" width="30" height="30" stroke="#fff">\n <g stroke-width="4">\n <line x1="5" y1="5" x2="25" y2="25"/>\n <line x1="5" y1="25" x2="25" y2="5"/>\n </g>\n </svg>\n </button>\n <div class="modal-gallery__total js-gallery-totals"></div>'},buttons:function(){return'<button class="js-modal-gallery__next modal-gallery__next" aria-label="Next">\n <svg focusable="false" aria-hidden="true" width="44" height="60" stroke="#fff">\n <polyline points="14 10 34 30 14 50" stroke-width="4" stroke-linecap="butt" fill="none" stroke-linejoin="round"/>\n </svg>\n </button>\n <button class="js-modal-gallery__previous modal-gallery__previous" aria-label="Previous">\n <svg focusable="false" aria-hidden="true" width="44" height="60" stroke="#fff">\n <polyline points="30 10 10 30 30 50" stroke-width="4" stroke-linecap="butt" fill="none" stroke-linejoin="round"/>\n </svg>\n</button>'},item:function(e){return function(t,n){return'<div class="modal-gallery__item js-modal-gallery__item" role="group" aria-roledescription="slide" aria-label="Image '+(n+1)+" of "+e.length+(e[n].title?", "+e[n].title:"")+'">\n <div class="modal-gallery__img-container js-modal-gallery__img-container"></div>\n '+t+"\n </div>"}},details:function(e){return e.title||e.description?'<div class="modal-gallery__details">\n '+(e.title?'<h1 class="modal-gallery__title">'+l(e.title)+"</h1>":"")+"\n "+(e.description?'<div class="modal-gallery__description">'+l(e.description)+"</div>":"")+"\n </div>":""}}},a=function(e){return function(i){var l=i.items,r=i.settings;l.map(function(i,l){i.trigger&&n.map(function(n){i.trigger.addEventListener(n,function(n){n.keyCode&&n.keyCode!==t.ENTER||n.which&&3===n.which||(n.preventDefault(),_(e)(l))})})}),r.preload&&l.map(o(e))}},o=function(e){return function(t,n){try{var i=new Image,l=function(){var t=e.getState().imageCache;t[n]=i,e.dispatch({imageCache:t}),u(e.getState(),n)};i.onload=l,i.src=t.src,i.complete&&l()}catch(e){console.warn(e)}}},s=function(e){return function(t){var n=e.getState(),l=n.settings,r=n.items,a=n.keyListener,o=document.body.appendChild(l.templates.overlay()),s=r.length>2?l.templates.buttons():"";o.insertAdjacentHTML("beforeend",l.templates.overlayInner(s,r.map(l.templates.details).map(l.templates.item(r)).join("")));var u,m=[].slice.call(o.querySelectorAll(".js-modal-gallery__item")),g=o.querySelector(".js-gallery-totals");e.dispatch({dom:{overlay:o,items:m,totals:g,focusableChildren:(u=o,[].slice.call(u.querySelectorAll(i.join(",")))),lastFocused:document.activeElement}},[c(e),d(e),function(){return document.addEventListener("keydown",a)},f(e),y])}},c=function(e){return function(t){var n=e.getState(),i=n.imageCache,l=n.items,r=n.current;Object.keys(i).length===l.length?i.map(function(e,n){u(t,n)}):function(e){return function(t){var n=e.getState(),i=n.imageCache,l=n.items,r=n.dom,a=[t];l.length>1&&a.push(0===t?l.length-1:t-1),l.length>2&&a.push(t===l.length-1?0:t+1),a.forEach(function(t){void 0===i[t]&&(r.items[t].classList.add("loading"),o(e)(l[t],t))})}}(e)(r)}},u=function(e,t){var n=e.dom,i=e.settings,l=e.items;if(n){var r=n.items[t].querySelector(".js-modal-gallery__img-container");r.querySelector(".modal-gallery__img")||(r.innerHTML='<img class="'+(i.scrollable?"modal-gallery__img modal-gallery__img--scrollable":"modal-gallery__img")+'" src="'+l[t].src+'" alt="'+l[t].title+'"'+(n.items[t].srcset?' srcset="'+n.items[t].srcset+'"':"")+(n.items[t].sizes?' sizes="'+n.items[t].sizes+'"':"")+">",n.items[t].classList.remove("loading"))}},d=function(e){return function(i){var l=e.getState().dom,r=l.overlay.querySelector(".js-modal-gallery__close");n.forEach(function(n){r.addEventListener(n,function(n){n.keyCode&&n.keyCode!==t.ENTER||n.which&&3===n.which||b(e)})});var a=l.overlay.querySelector(".js-modal-gallery__previous"),o=l.overlay.querySelector(".js-modal-gallery__next");(a||o)&&n.forEach(function(n){a&&a.addEventListener(n,function(n){n.keyCode&&n.keyCode!==t.ENTER||h(e)}),o&&o.addEventListener(n,function(n){n.keyCode&&n.keyCode!==t.ENTER||p(e)})})}},m=function(e){return function(n){if(e.getState().isOpen)switch(n.keyCode){case t.ESC:b(e);break;case t.TAB:g(e,n);break;case t.LEFT:h(e);break;case t.RIGHT:p(e)}}},g=function(e,t){var n=e.getState().dom,i=n.focusableChildren.indexOf(document.activeElement);t.shiftKey&&0===i&&(t.preventDefault(),n.focusableChildren[n.focusableChildren.length-1].focus()),t.shiftKey||i!==n.focusableChildren.length-1||(t.preventDefault(),n.focusableChildren[0].focus())},f=function(e){return function(t){var n=e.getState(),i=n.dom,l=n.current,r=n.isOpen,a=n.settings;i.overlay.classList.toggle("is--active"),i.overlay.setAttribute("aria-hidden",!r),i.overlay.setAttribute("tabindex",r?"0":"-1"),null!==r&&i.items[l].classList.add("is--active"),i.focusableChildren&&i.focusableChildren.length>0&&window.setTimeout(function(){i.focusableChildren[0].focus()},0),a.fullscreen&&v(t)}},y=function(e){e.settings.totals&&(e.dom.totals.innerHTML=e.current+1+"/"+e.items.length)},v=function(e){var t=e.dom;e.isOpen?(t.overlay.requestFullscreen&&t.overlay.requestFullscreen(),t.overlay.webkitRequestFullscreen&&t.overlay.webkitRequestFullscreen(),t.overlay.mozRequestFullScreen&&t.overlay.mozRequestFullScreen()):(document.exitFullscreen&&document.exitFullscreen(),document.mozCancelFullScreen&&document.mozCancelFullScreen(),document.webkitExitFullscreen&&document.webkitExitFullscreen())},h=function(e){var t=e.getState(),n=t.current,i=t.dom,l=0===n?i.items.length-1:n-1;e.dispatch({current:l},[function(){return i.items[n].classList.remove("is--active")},function(){return i.items[l].classList.add("is--active")},c(e),y])},p=function(e){var t=e.getState(),n=t.current,i=t.dom,l=n===i.items.length-1?0:n+1;e.dispatch({current:l},[function(){return i.items[n].classList.remove("is--active")},function(){return i.items[l].classList.add("is--active")},c(e),y])},b=function(e){var t=e.getState(),n=t.keyListener,i=t.lastFocused,l=t.dom;e.dispatch({current:null,isOpen:!1},[function(){return document.removeEventListener("keydown",n)},function(){i&&i.focus()},function(){return l.overlay.parentNode.removeChild(l.overlay)}])},_=function(e){return function(t){void 0===t&&(t=0),e.dispatch({current:t,isOpen:!0},[s(e)])}},k=function(t,n){return Object.create((i={items:t,settings:e({},r,n)},l={},(o={dispatch:function(t,n){l=t?e({},l,t):l,n&&n.forEach(function(e){return e(l)})},getState:function(){return l}}).dispatch({settings:i.settings,items:i.items,imageCache:[],isOpen:!1,current:null,keyListener:m(o)},[a(o)]),{getState:o.getState,open:_(o)}));var i,l,o},C=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]:[]};module.exports=function(e,t){if(e)return t&&t.single?function(e,t){var n=C(e);if(n.length)return n.map(function(e){return k([{trigger:e,src:e.getAttribute("href"),srcset:e.getAttribute("data-srcset")||null,sizes:e.getAttribute("data-sizes")||null,title:e.getAttribute("data-title")||"",description:e.getAttribute("data-description")||""}],t)});console.warn("Modal Gallery cannot be initialised, no images found")}(e,t):function(e,t){var n=C(e);if(n.length){var i=n.map(function(e){return e instanceof HTMLElement?{trigger:e,src:e.getAttribute("href"),srcset:e.getAttribute("data-srcset")||null,sizes:e.getAttribute("data-sizes")||null,title:e.getAttribute("data-title")||"",description:e.getAttribute("data-description")||""}:e});return k(i,t)}console.warn("Modal Gallery cannot be initialised, no images found")}(e,t);console.warn("Modal Gallery cannot be initialised, no images found")};
//# sourceMappingURL=index.js.map

2

dist/index.modern.js

@@ -1,2 +0,2 @@

const e={TAB:9,ESC:27,LEFT:37,RIGHT:39},t=["click","keydown"],l=["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","iframe","object","embed","[contenteditable]",'[tabindex]:not([tabindex="-1"])'],s=e=>e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");var a={fullscreen:!1,preload:!1,totals:!0,scrollable:!1,single:!1,templates:{__proto__:null,overlay:()=>{const e=document.createElement("div");return e.className="modal-gallery__outer js-modal-gallery__outer",e.setAttribute("role","dialog"),e.setAttribute("tabindex","-1"),e.setAttribute("aria-hidden",!0),e},overlayInner:(e,t)=>`<div class="modal-gallery__inner js-modal-gallery__inner" role="group" aria-roledescription="carousel">\n <div class="modal-gallery__content js-modal-gallery__content" aria-atomic="false" aria-live="polite">\n ${t}\n </div>\n </div>\n ${e}\n <button class="js-modal-gallery__close modal-gallery__close" aria-label="Close">\n <svg focusable="false" aria-hidden="true" width="30" height="30" stroke="#fff">\n <g stroke-width="4">\n <line x1="5" y1="5" x2="25" y2="25"/>\n <line x1="5" y1="25" x2="25" y2="5"/>\n </g>\n </svg>\n </button>\n <div class="modal-gallery__total js-gallery-totals"></div>`,buttons:()=>'<button class="js-modal-gallery__next modal-gallery__next" aria-label="Next">\n <svg focusable="false" aria-hidden="true" width="44" height="60" stroke="#fff">\n <polyline points="14 10 34 30 14 50" stroke-width="4" stroke-linecap="butt" fill="none" stroke-linejoin="round"/>\n </svg>\n </button>\n <button class="js-modal-gallery__previous modal-gallery__previous" aria-label="Previous">\n <svg focusable="false" aria-hidden="true" width="44" height="60" stroke="#fff">\n <polyline points="30 10 10 30 30 50" stroke-width="4" stroke-linecap="butt" fill="none" stroke-linejoin="round"/>\n </svg>\n</button>',item:e=>(t,l)=>`<div class="modal-gallery__item js-modal-gallery__item" role="group" aria-roledescription="slide" aria-label="Image ${l+1} of ${e.length}${e[l].title?", "+e[l].title:""}">\n <div class="modal-gallery__img-container js-modal-gallery__img-container"></div>\n ${t}\n </div>`,details:e=>e.title||e.description?`<div class="modal-gallery__details">\n ${e.title?`<h1 class="modal-gallery__title">${s(e.title)}</h1>`:""}\n ${e.description?`<div class="modal-gallery__description">${s(e.description)}</div>`:""}\n </div>`:""}};const i=l=>s=>{const{items:a,settings:i}=s;a.map((s,a)=>{s.trigger&&t.map(t=>{s.trigger.addEventListener(t,t=>{t.keyCode&&t.keyCode!==e.ENTER||t.which&&3===t.which||(t.preventDefault(),_(l)(a))})})}),i.preload&&a.map(n(l))},n=e=>(t,l)=>{try{const s=new Image,a=()=>{const{imageCache:t}=e.getState();t[l]=s,e.dispatch({imageCache:t}),c(e.getState(),l)};s.onload=a,s.src=t.src,s.complete&&a()}catch(e){console.warn(e)}},r=e=>t=>{const{settings:s,items:a,keyListener:i}=e.getState(),n=document.body.appendChild(s.templates.overlay()),r=a.length>2?s.templates.buttons():"";n.insertAdjacentHTML("beforeend",s.templates.overlayInner(r,a.map(s.templates.details).map(s.templates.item(a)).join("")));const c=[].slice.call(n.querySelectorAll(".js-modal-gallery__item")),u=n.querySelector(".js-gallery-totals");var m;e.dispatch({dom:{overlay:n,items:c,totals:u,focusableChildren:(m=n,[].slice.call(m.querySelectorAll(l.join(",")))),lastFocused:document.activeElement}},[o(e),d(e),()=>document.addEventListener("keydown",i),g(e),y])},o=e=>t=>{const{imageCache:l,items:s,current:a}=e.getState();l.length===s.length?l.map((e,l)=>{c(t,l)}):(e=>t=>{const{imageCache:l,items:s,dom:a}=e.getState(),i=[t];s.length>1&&i.push(0===t?s.length-1:t-1),s.length>2&&i.push(t===s.length-1?0:t+1),i.forEach(t=>{void 0===l[t]&&(a.items[t].classList.add("loading"),n(e)(s[t],t))})})(e)(a)},c=(e,t)=>{const{dom:l,settings:s,items:a}=e;if(!l)return;const i=l.items[t].querySelector(".js-modal-gallery__img-container");i.querySelector(".modal-gallery__img")||(i.innerHTML=`<img class="${s.scrollable?"modal-gallery__img modal-gallery__img--scrollable":"modal-gallery__img"}" src="${a[t].src}" alt="${a[t].title}"${l.items[t].srcset?` srcset="${l.items[t].srcset}"`:""}${l.items[t].sizes?` sizes="${l.items[t].sizes}"`:""}>`,l.items[t].classList.remove("loading"))},d=l=>s=>{const{dom:a}=l.getState(),i=a.overlay.querySelector(".js-modal-gallery__close");t.forEach(t=>{i.addEventListener(t,t=>{t.keyCode&&t.keyCode!==e.ENTER||t.which&&3===t.which||b(l)})});const n=a.overlay.querySelector(".js-modal-gallery__previous"),r=a.overlay.querySelector(".js-modal-gallery__next");(n||r)&&t.forEach(t=>{n&&n.addEventListener(t,t=>{t.keyCode&&t.keyCode!==e.ENTER||v(l)}),r&&r.addEventListener(t,t=>{t.keyCode&&t.keyCode!==e.ENTER||p(l)})})},u=t=>l=>{const{isOpen:s}=t.getState();if(s)switch(l.keyCode){case e.ESC:b(t);break;case e.TAB:m(t,l);break;case e.LEFT:v(t);break;case e.RIGHT:p(t)}},m=(e,t)=>{const{dom:l}=e.getState(),s=l.focusableChildren.indexOf(document.activeElement);t.shiftKey&&0===s&&(t.preventDefault(),l.focusableChildren[l.focusableChildren.length-1].focus()),t.shiftKey||s!==l.focusableChildren.length-1||(t.preventDefault(),l.focusableChildren[0].focus())},g=e=>t=>{const{dom:l,current:s,isOpen:a,settings:i}=e.getState();l.overlay.classList.toggle("is--active"),l.overlay.setAttribute("aria-hidden",!a),l.overlay.setAttribute("tabindex",a?"0":"-1"),null!==a&&l.items[s].classList.add("is--active"),l.focusableChildren&&l.focusableChildren.length>0&&window.setTimeout(()=>{l.focusableChildren[0].focus()},0),i.fullscreen&&h(t)},y=({dom:e,current:t,items:l,settings:s})=>{s.totals&&(e.totals.innerHTML=`${t+1}/${l.length}`)},h=({isOpen:e,dom:t})=>{e?(t.overlay.requestFullscreen&&t.overlay.requestFullscreen(),t.overlay.webkitRequestFullscreen&&t.overlay.webkitRequestFullscreen(),t.overlay.mozRequestFullScreen&&t.overlay.mozRequestFullScreen()):(document.exitFullscreen&&document.exitFullscreen(),document.mozCancelFullScreen&&document.mozCancelFullScreen(),document.webkitExitFullscreen&&document.webkitExitFullscreen())},v=e=>{const{current:t,dom:l}=e.getState(),s=0===t?l.items.length-1:t-1;e.dispatch({current:s},[()=>l.items[t].classList.remove("is--active"),()=>l.items[s].classList.add("is--active"),o(e),y])},p=e=>{const{current:t,dom:l}=e.getState(),s=t===l.items.length-1?0:t+1;e.dispatch({current:s},[()=>l.items[t].classList.remove("is--active"),()=>l.items[s].classList.add("is--active"),o(e),y])},b=e=>{const{keyListener:t,lastFocused:l,dom:s}=e.getState();e.dispatch({current:null,isOpen:!1},[()=>document.removeEventListener("keydown",t),()=>{l&&l.focus()},()=>s.overlay.parentNode.removeChild(s.overlay)])},_=e=>(t=0)=>{e.dispatch({current:t,isOpen:!0},[r(e)])},f=(e,t)=>Object.create((({items:e,settings:t})=>{const l=(()=>{let e={};return{dispatch:(t,l)=>{e=t?{...e,...t}:e,l&&l.forEach(t=>t(e))},getState:()=>e}})();return l.dispatch({settings:t,items:e,imageCache:[],isOpen:!1,current:null,keyListener:u(l)},[i(l)]),{getState:l.getState,open:_(l)}})({items:e,settings:{...a,...t}}));export default(e,t)=>{if(e.length)return t&&t.single?((e,t)=>{let l=[].slice.call(document.querySelectorAll(e));if(l.length)return l.map(e=>f([{trigger:e,src:e.getAttribute("href"),srcset:e.getAttribute("data-srcset")||null,sizes:e.getAttribute("data-sizes")||null,title:e.getAttribute("data-title")||"",description:e.getAttribute("data-description")||""}],t));console.warn("Modal Gallery cannot be initialised, no images found")})(e,t):((e,t)=>{let l;if("string"==typeof e){const t=[].slice.call(document.querySelectorAll(e));if(!t.length)return void console.warn("Modal Gallery cannot be initialised, no images found");l=t.map(e=>({trigger:e,src:e.getAttribute("href"),srcset:e.getAttribute("data-srcset")||null,sizes:e.getAttribute("data-sizes")||null,title:e.getAttribute("data-title")||"",description:e.getAttribute("data-description")||""}))}else l=e;return f(l,t)})(e,t);console.warn("Modal Gallery cannot be initialised, no images found")};
function e(){return e=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var l=arguments[t];for(var a in l)Object.prototype.hasOwnProperty.call(l,a)&&(e[a]=l[a])}return e},e.apply(this,arguments)}const t={TAB:9,ESC:27,LEFT:37,RIGHT:39},l=["click","keydown"],a=["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","iframe","object","embed","[contenteditable]",'[tabindex]:not([tabindex="-1"])'],s=e=>e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");var i={fullscreen:!1,preload:!1,totals:!0,scrollable:!1,single:!1,templates:{__proto__:null,overlay:()=>{const e=document.createElement("div");return e.className="modal-gallery__outer js-modal-gallery__outer",e.setAttribute("role","dialog"),e.setAttribute("tabindex","-1"),e.setAttribute("aria-hidden",!0),e},overlayInner:(e,t)=>`<div class="modal-gallery__inner js-modal-gallery__inner" role="group" aria-roledescription="carousel">\n <div class="modal-gallery__content js-modal-gallery__content" aria-atomic="false" aria-live="polite">\n ${t}\n </div>\n </div>\n ${e}\n <button class="js-modal-gallery__close modal-gallery__close" aria-label="Close">\n <svg focusable="false" aria-hidden="true" width="30" height="30" stroke="#fff">\n <g stroke-width="4">\n <line x1="5" y1="5" x2="25" y2="25"/>\n <line x1="5" y1="25" x2="25" y2="5"/>\n </g>\n </svg>\n </button>\n <div class="modal-gallery__total js-gallery-totals"></div>`,buttons:()=>'<button class="js-modal-gallery__next modal-gallery__next" aria-label="Next">\n <svg focusable="false" aria-hidden="true" width="44" height="60" stroke="#fff">\n <polyline points="14 10 34 30 14 50" stroke-width="4" stroke-linecap="butt" fill="none" stroke-linejoin="round"/>\n </svg>\n </button>\n <button class="js-modal-gallery__previous modal-gallery__previous" aria-label="Previous">\n <svg focusable="false" aria-hidden="true" width="44" height="60" stroke="#fff">\n <polyline points="30 10 10 30 30 50" stroke-width="4" stroke-linecap="butt" fill="none" stroke-linejoin="round"/>\n </svg>\n</button>',item:e=>(t,l)=>`<div class="modal-gallery__item js-modal-gallery__item" role="group" aria-roledescription="slide" aria-label="Image ${l+1} of ${e.length}${e[l].title?`, ${e[l].title}`:""}">\n <div class="modal-gallery__img-container js-modal-gallery__img-container"></div>\n ${t}\n </div>`,details:e=>e.title||e.description?`<div class="modal-gallery__details">\n ${e.title?`<h1 class="modal-gallery__title">${s(e.title)}</h1>`:""}\n ${e.description?`<div class="modal-gallery__description">${s(e.description)}</div>`:""}\n </div>`:""}};const n=e=>a=>{const{items:s,settings:i}=a;s.map((a,s)=>{a.trigger&&l.map(l=>{a.trigger.addEventListener(l,l=>{l.keyCode&&l.keyCode!==t.ENTER||l.which&&3===l.which||(l.preventDefault(),_(e)(s))})})}),i.preload&&s.map(r(e))},r=e=>(t,l)=>{try{const a=new Image,s=()=>{const{imageCache:t}=e.getState();t[l]=a,e.dispatch({imageCache:t}),d(e.getState(),l)};a.onload=s,a.src=t.src,a.complete&&s()}catch(e){console.warn(e)}},o=e=>t=>{const{settings:l,items:s,keyListener:i}=e.getState(),n=document.body.appendChild(l.templates.overlay()),r=s.length>2?l.templates.buttons():"";n.insertAdjacentHTML("beforeend",l.templates.overlayInner(r,s.map(l.templates.details).map(l.templates.item(s)).join("")));const o=[].slice.call(n.querySelectorAll(".js-modal-gallery__item")),d=n.querySelector(".js-gallery-totals");var m;e.dispatch({dom:{overlay:n,items:o,totals:d,focusableChildren:(m=n,[].slice.call(m.querySelectorAll(a.join(",")))),lastFocused:document.activeElement}},[c(e),u(e),()=>document.addEventListener("keydown",i),y(e),h])},c=e=>t=>{const{imageCache:l,items:a,current:s}=e.getState();Object.keys(l).length===a.length?l.map((e,l)=>{d(t,l)}):(e=>t=>{const{imageCache:l,items:a,dom:s}=e.getState(),i=[t];a.length>1&&i.push(0===t?a.length-1:t-1),a.length>2&&i.push(t===a.length-1?0:t+1),i.forEach(t=>{void 0===l[t]&&(s.items[t].classList.add("loading"),r(e)(a[t],t))})})(e)(s)},d=(e,t)=>{const{dom:l,settings:a,items:s}=e;if(!l)return;const i=l.items[t].querySelector(".js-modal-gallery__img-container");i.querySelector(".modal-gallery__img")||(i.innerHTML=`<img class="${a.scrollable?"modal-gallery__img modal-gallery__img--scrollable":"modal-gallery__img"}" src="${s[t].src}" alt="${s[t].title}"${l.items[t].srcset?` srcset="${l.items[t].srcset}"`:""}${l.items[t].sizes?` sizes="${l.items[t].sizes}"`:""}>`,l.items[t].classList.remove("loading"))},u=e=>a=>{const{dom:s}=e.getState(),i=s.overlay.querySelector(".js-modal-gallery__close");l.forEach(l=>{i.addEventListener(l,l=>{l.keyCode&&l.keyCode!==t.ENTER||l.which&&3===l.which||f(e)})});const n=s.overlay.querySelector(".js-modal-gallery__previous"),r=s.overlay.querySelector(".js-modal-gallery__next");(n||r)&&l.forEach(l=>{n&&n.addEventListener(l,l=>{l.keyCode&&l.keyCode!==t.ENTER||v(e)}),r&&r.addEventListener(l,l=>{l.keyCode&&l.keyCode!==t.ENTER||b(e)})})},m=e=>l=>{const{isOpen:a}=e.getState();if(a)switch(l.keyCode){case t.ESC:f(e);break;case t.TAB:g(e,l);break;case t.LEFT:v(e);break;case t.RIGHT:b(e)}},g=(e,t)=>{const{dom:l}=e.getState(),a=l.focusableChildren.indexOf(document.activeElement);t.shiftKey&&0===a&&(t.preventDefault(),l.focusableChildren[l.focusableChildren.length-1].focus()),t.shiftKey||a!==l.focusableChildren.length-1||(t.preventDefault(),l.focusableChildren[0].focus())},y=e=>t=>{const{dom:l,current:a,isOpen:s,settings:i}=e.getState();l.overlay.classList.toggle("is--active"),l.overlay.setAttribute("aria-hidden",!s),l.overlay.setAttribute("tabindex",s?"0":"-1"),null!==s&&l.items[a].classList.add("is--active"),l.focusableChildren&&l.focusableChildren.length>0&&window.setTimeout(()=>{l.focusableChildren[0].focus()},0),i.fullscreen&&p(t)},h=({dom:e,current:t,items:l,settings:a})=>{a.totals&&(e.totals.innerHTML=`${t+1}/${l.length}`)},p=({isOpen:e,dom:t})=>{e?(t.overlay.requestFullscreen&&t.overlay.requestFullscreen(),t.overlay.webkitRequestFullscreen&&t.overlay.webkitRequestFullscreen(),t.overlay.mozRequestFullScreen&&t.overlay.mozRequestFullScreen()):(document.exitFullscreen&&document.exitFullscreen(),document.mozCancelFullScreen&&document.mozCancelFullScreen(),document.webkitExitFullscreen&&document.webkitExitFullscreen())},v=e=>{const{current:t,dom:l}=e.getState(),a=0===t?l.items.length-1:t-1;e.dispatch({current:a},[()=>l.items[t].classList.remove("is--active"),()=>l.items[a].classList.add("is--active"),c(e),h])},b=e=>{const{current:t,dom:l}=e.getState(),a=t===l.items.length-1?0:t+1;e.dispatch({current:a},[()=>l.items[t].classList.remove("is--active"),()=>l.items[a].classList.add("is--active"),c(e),h])},f=e=>{const{keyListener:t,lastFocused:l,dom:a}=e.getState();e.dispatch({current:null,isOpen:!1},[()=>document.removeEventListener("keydown",t),()=>{l&&l.focus()},()=>a.overlay.parentNode.removeChild(a.overlay)])},_=e=>(t=0)=>{e.dispatch({current:t,isOpen:!0},[o(e)])},k=(t,l)=>Object.create((({items:t,settings:l})=>{const a=(()=>{let t={};return{dispatch:(l,a)=>{t=l?e({},t,l):t,a&&a.forEach(e=>e(t))},getState:()=>t}})();return a.dispatch({settings:l,items:t,imageCache:[],isOpen:!1,current:null,keyListener:m(a)},[n(a)]),{getState:a.getState,open:_(a)}})({items:t,settings:e({},i,l)})),C=e=>"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]:[];var S=(e,t)=>{if(e)return t&&t.single?((e,t)=>{let l=C(e);if(l.length)return l.map(e=>k([{trigger:e,src:e.getAttribute("href"),srcset:e.getAttribute("data-srcset")||null,sizes:e.getAttribute("data-sizes")||null,title:e.getAttribute("data-title")||"",description:e.getAttribute("data-description")||""}],t));console.warn("Modal Gallery cannot be initialised, no images found")})(e,t):((e,t)=>{let l=C(e);if(!l.length)return void console.warn("Modal Gallery cannot be initialised, no images found");let a=l.map(e=>e instanceof HTMLElement?{trigger:e,src:e.getAttribute("href"),srcset:e.getAttribute("data-srcset")||null,sizes:e.getAttribute("data-sizes")||null,title:e.getAttribute("data-title")||"",description:e.getAttribute("data-description")||""}:e);return k(a,t)})(e,t);console.warn("Modal Gallery cannot be initialised, no images found")};export{S as default};
//# sourceMappingURL=index.modern.js.map

2

dist/index.umd.js

@@ -1,2 +0,2 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).ModalGallery=t()}(this,function(){function e(){return(e=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var l in n)Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l])}return e}).apply(this,arguments)}var t={TAB:9,ESC:27,LEFT:37,RIGHT:39},n=["click","keydown"],l=["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","iframe","object","embed","[contenteditable]",'[tabindex]:not([tabindex="-1"])'],i=function(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")},r={fullscreen:!1,preload:!1,totals:!0,scrollable:!1,single:!1,templates:{__proto__:null,overlay:function(){var e=document.createElement("div");return e.className="modal-gallery__outer js-modal-gallery__outer",e.setAttribute("role","dialog"),e.setAttribute("tabindex","-1"),e.setAttribute("aria-hidden",!0),e},overlayInner:function(e,t){return'<div class="modal-gallery__inner js-modal-gallery__inner" role="group" aria-roledescription="carousel">\n <div class="modal-gallery__content js-modal-gallery__content" aria-atomic="false" aria-live="polite">\n '+t+"\n </div>\n </div>\n "+e+'\n <button class="js-modal-gallery__close modal-gallery__close" aria-label="Close">\n <svg focusable="false" aria-hidden="true" width="30" height="30" stroke="#fff">\n <g stroke-width="4">\n <line x1="5" y1="5" x2="25" y2="25"/>\n <line x1="5" y1="25" x2="25" y2="5"/>\n </g>\n </svg>\n </button>\n <div class="modal-gallery__total js-gallery-totals"></div>'},buttons:function(){return'<button class="js-modal-gallery__next modal-gallery__next" aria-label="Next">\n <svg focusable="false" aria-hidden="true" width="44" height="60" stroke="#fff">\n <polyline points="14 10 34 30 14 50" stroke-width="4" stroke-linecap="butt" fill="none" stroke-linejoin="round"/>\n </svg>\n </button>\n <button class="js-modal-gallery__previous modal-gallery__previous" aria-label="Previous">\n <svg focusable="false" aria-hidden="true" width="44" height="60" stroke="#fff">\n <polyline points="30 10 10 30 30 50" stroke-width="4" stroke-linecap="butt" fill="none" stroke-linejoin="round"/>\n </svg>\n</button>'},item:function(e){return function(t,n){return'<div class="modal-gallery__item js-modal-gallery__item" role="group" aria-roledescription="slide" aria-label="Image '+(n+1)+" of "+e.length+(e[n].title?", "+e[n].title:"")+'">\n <div class="modal-gallery__img-container js-modal-gallery__img-container"></div>\n '+t+"\n </div>"}},details:function(e){return e.title||e.description?'<div class="modal-gallery__details">\n '+(e.title?'<h1 class="modal-gallery__title">'+i(e.title)+"</h1>":"")+"\n "+(e.description?'<div class="modal-gallery__description">'+i(e.description)+"</div>":"")+"\n </div>":""}}},a=function(e){return function(l){var i=l.items,r=l.settings;i.map(function(l,i){l.trigger&&n.map(function(n){l.trigger.addEventListener(n,function(n){n.keyCode&&n.keyCode!==t.ENTER||n.which&&3===n.which||(n.preventDefault(),_(e)(i))})})}),r.preload&&i.map(o(e))}},o=function(e){return function(t,n){try{var l=new Image,i=function(){var t=e.getState().imageCache;t[n]=l,e.dispatch({imageCache:t}),u(e.getState(),n)};l.onload=i,l.src=t.src,l.complete&&i()}catch(e){console.warn(e)}}},s=function(e){return function(t){var n=e.getState(),i=n.settings,r=n.items,a=n.keyListener,o=document.body.appendChild(i.templates.overlay()),s=r.length>2?i.templates.buttons():"";o.insertAdjacentHTML("beforeend",i.templates.overlayInner(s,r.map(i.templates.details).map(i.templates.item(r)).join("")));var u,m=[].slice.call(o.querySelectorAll(".js-modal-gallery__item")),f=o.querySelector(".js-gallery-totals");e.dispatch({dom:{overlay:o,items:m,totals:f,focusableChildren:(u=o,[].slice.call(u.querySelectorAll(l.join(",")))),lastFocused:document.activeElement}},[c(e),d(e),function(){return document.addEventListener("keydown",a)},g(e),v])}},c=function(e){return function(t){var n=e.getState(),l=n.imageCache,i=n.current;l.length===n.items.length?l.map(function(e,n){u(t,n)}):function(e){return function(t){var n=e.getState(),l=n.imageCache,i=n.items,r=n.dom,a=[t];i.length>1&&a.push(0===t?i.length-1:t-1),i.length>2&&a.push(t===i.length-1?0:t+1),a.forEach(function(t){void 0===l[t]&&(r.items[t].classList.add("loading"),o(e)(i[t],t))})}}(e)(i)}},u=function(e,t){var n=e.dom,l=e.settings,i=e.items;if(n){var r=n.items[t].querySelector(".js-modal-gallery__img-container");r.querySelector(".modal-gallery__img")||(r.innerHTML='<img class="'+(l.scrollable?"modal-gallery__img modal-gallery__img--scrollable":"modal-gallery__img")+'" src="'+i[t].src+'" alt="'+i[t].title+'"'+(n.items[t].srcset?' srcset="'+n.items[t].srcset+'"':"")+(n.items[t].sizes?' sizes="'+n.items[t].sizes+'"':"")+">",n.items[t].classList.remove("loading"))}},d=function(e){return function(l){var i=e.getState().dom,r=i.overlay.querySelector(".js-modal-gallery__close");n.forEach(function(n){r.addEventListener(n,function(n){n.keyCode&&n.keyCode!==t.ENTER||n.which&&3===n.which||b(e)})});var a=i.overlay.querySelector(".js-modal-gallery__previous"),o=i.overlay.querySelector(".js-modal-gallery__next");(a||o)&&n.forEach(function(n){a&&a.addEventListener(n,function(n){n.keyCode&&n.keyCode!==t.ENTER||h(e)}),o&&o.addEventListener(n,function(n){n.keyCode&&n.keyCode!==t.ENTER||p(e)})})}},m=function(e){return function(n){if(e.getState().isOpen)switch(n.keyCode){case t.ESC:b(e);break;case t.TAB:f(e,n);break;case t.LEFT:h(e);break;case t.RIGHT:p(e)}}},f=function(e,t){var n=e.getState().dom,l=n.focusableChildren.indexOf(document.activeElement);t.shiftKey&&0===l&&(t.preventDefault(),n.focusableChildren[n.focusableChildren.length-1].focus()),t.shiftKey||l!==n.focusableChildren.length-1||(t.preventDefault(),n.focusableChildren[0].focus())},g=function(e){return function(t){var n=e.getState(),l=n.dom,i=n.current,r=n.isOpen,a=n.settings;l.overlay.classList.toggle("is--active"),l.overlay.setAttribute("aria-hidden",!r),l.overlay.setAttribute("tabindex",r?"0":"-1"),null!==r&&l.items[i].classList.add("is--active"),l.focusableChildren&&l.focusableChildren.length>0&&window.setTimeout(function(){l.focusableChildren[0].focus()},0),a.fullscreen&&y(t)}},v=function(e){e.settings.totals&&(e.dom.totals.innerHTML=e.current+1+"/"+e.items.length)},y=function(e){var t=e.dom;e.isOpen?(t.overlay.requestFullscreen&&t.overlay.requestFullscreen(),t.overlay.webkitRequestFullscreen&&t.overlay.webkitRequestFullscreen(),t.overlay.mozRequestFullScreen&&t.overlay.mozRequestFullScreen()):(document.exitFullscreen&&document.exitFullscreen(),document.mozCancelFullScreen&&document.mozCancelFullScreen(),document.webkitExitFullscreen&&document.webkitExitFullscreen())},h=function(e){var t=e.getState(),n=t.current,l=t.dom,i=0===n?l.items.length-1:n-1;e.dispatch({current:i},[function(){return l.items[n].classList.remove("is--active")},function(){return l.items[i].classList.add("is--active")},c(e),v])},p=function(e){var t=e.getState(),n=t.current,l=t.dom,i=n===l.items.length-1?0:n+1;e.dispatch({current:i},[function(){return l.items[n].classList.remove("is--active")},function(){return l.items[i].classList.add("is--active")},c(e),v])},b=function(e){var t=e.getState(),n=t.keyListener,l=t.lastFocused,i=t.dom;e.dispatch({current:null,isOpen:!1},[function(){return document.removeEventListener("keydown",n)},function(){l&&l.focus()},function(){return i.overlay.parentNode.removeChild(i.overlay)}])},_=function(e){return function(t){void 0===t&&(t=0),e.dispatch({current:t,isOpen:!0},[s(e)])}},k=function(t,n){return Object.create((l={items:t,settings:e({},r,n)},i={},(o={dispatch:function(t,n){i=t?e({},i,t):i,n&&n.forEach(function(e){return e(i)})},getState:function(){return i}}).dispatch({settings:l.settings,items:l.items,imageCache:[],isOpen:!1,current:null,keyListener:m(o)},[a(o)]),{getState:o.getState,open:_(o)}));var l,i,o};return function(e,t){if(e.length)return t&&t.single?function(e,t){var n=[].slice.call(document.querySelectorAll(e));if(n.length)return n.map(function(e){return k([{trigger:e,src:e.getAttribute("href"),srcset:e.getAttribute("data-srcset")||null,sizes:e.getAttribute("data-sizes")||null,title:e.getAttribute("data-title")||"",description:e.getAttribute("data-description")||""}],t)});console.warn("Modal Gallery cannot be initialised, no images found")}(e,t):function(e,t){var n;if("string"==typeof e){var l=[].slice.call(document.querySelectorAll(e));if(!l.length)return void console.warn("Modal Gallery cannot be initialised, no images found");n=l.map(function(e){return{trigger:e,src:e.getAttribute("href"),srcset:e.getAttribute("data-srcset")||null,sizes:e.getAttribute("data-sizes")||null,title:e.getAttribute("data-title")||"",description:e.getAttribute("data-description")||""}})}else n=e;return k(n,t)}(e,t);console.warn("Modal Gallery cannot be initialised, no images found")}});
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e||self).ModalGallery=t()}(this,function(){function e(){return e=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},e.apply(this,arguments)}var t={TAB:9,ESC:27,LEFT:37,RIGHT:39},n=["click","keydown"],i=["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","iframe","object","embed","[contenteditable]",'[tabindex]:not([tabindex="-1"])'],l=function(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")},r={fullscreen:!1,preload:!1,totals:!0,scrollable:!1,single:!1,templates:{__proto__:null,overlay:function(){var e=document.createElement("div");return e.className="modal-gallery__outer js-modal-gallery__outer",e.setAttribute("role","dialog"),e.setAttribute("tabindex","-1"),e.setAttribute("aria-hidden",!0),e},overlayInner:function(e,t){return'<div class="modal-gallery__inner js-modal-gallery__inner" role="group" aria-roledescription="carousel">\n <div class="modal-gallery__content js-modal-gallery__content" aria-atomic="false" aria-live="polite">\n '+t+"\n </div>\n </div>\n "+e+'\n <button class="js-modal-gallery__close modal-gallery__close" aria-label="Close">\n <svg focusable="false" aria-hidden="true" width="30" height="30" stroke="#fff">\n <g stroke-width="4">\n <line x1="5" y1="5" x2="25" y2="25"/>\n <line x1="5" y1="25" x2="25" y2="5"/>\n </g>\n </svg>\n </button>\n <div class="modal-gallery__total js-gallery-totals"></div>'},buttons:function(){return'<button class="js-modal-gallery__next modal-gallery__next" aria-label="Next">\n <svg focusable="false" aria-hidden="true" width="44" height="60" stroke="#fff">\n <polyline points="14 10 34 30 14 50" stroke-width="4" stroke-linecap="butt" fill="none" stroke-linejoin="round"/>\n </svg>\n </button>\n <button class="js-modal-gallery__previous modal-gallery__previous" aria-label="Previous">\n <svg focusable="false" aria-hidden="true" width="44" height="60" stroke="#fff">\n <polyline points="30 10 10 30 30 50" stroke-width="4" stroke-linecap="butt" fill="none" stroke-linejoin="round"/>\n </svg>\n</button>'},item:function(e){return function(t,n){return'<div class="modal-gallery__item js-modal-gallery__item" role="group" aria-roledescription="slide" aria-label="Image '+(n+1)+" of "+e.length+(e[n].title?", "+e[n].title:"")+'">\n <div class="modal-gallery__img-container js-modal-gallery__img-container"></div>\n '+t+"\n </div>"}},details:function(e){return e.title||e.description?'<div class="modal-gallery__details">\n '+(e.title?'<h1 class="modal-gallery__title">'+l(e.title)+"</h1>":"")+"\n "+(e.description?'<div class="modal-gallery__description">'+l(e.description)+"</div>":"")+"\n </div>":""}}},a=function(e){return function(i){var l=i.items,r=i.settings;l.map(function(i,l){i.trigger&&n.map(function(n){i.trigger.addEventListener(n,function(n){n.keyCode&&n.keyCode!==t.ENTER||n.which&&3===n.which||(n.preventDefault(),_(e)(l))})})}),r.preload&&l.map(o(e))}},o=function(e){return function(t,n){try{var i=new Image,l=function(){var t=e.getState().imageCache;t[n]=i,e.dispatch({imageCache:t}),u(e.getState(),n)};i.onload=l,i.src=t.src,i.complete&&l()}catch(e){console.warn(e)}}},s=function(e){return function(t){var n=e.getState(),l=n.settings,r=n.items,a=n.keyListener,o=document.body.appendChild(l.templates.overlay()),s=r.length>2?l.templates.buttons():"";o.insertAdjacentHTML("beforeend",l.templates.overlayInner(s,r.map(l.templates.details).map(l.templates.item(r)).join("")));var u,f=[].slice.call(o.querySelectorAll(".js-modal-gallery__item")),m=o.querySelector(".js-gallery-totals");e.dispatch({dom:{overlay:o,items:f,totals:m,focusableChildren:(u=o,[].slice.call(u.querySelectorAll(i.join(",")))),lastFocused:document.activeElement}},[c(e),d(e),function(){return document.addEventListener("keydown",a)},g(e),y])}},c=function(e){return function(t){var n=e.getState(),i=n.imageCache,l=n.items,r=n.current;Object.keys(i).length===l.length?i.map(function(e,n){u(t,n)}):function(e){return function(t){var n=e.getState(),i=n.imageCache,l=n.items,r=n.dom,a=[t];l.length>1&&a.push(0===t?l.length-1:t-1),l.length>2&&a.push(t===l.length-1?0:t+1),a.forEach(function(t){void 0===i[t]&&(r.items[t].classList.add("loading"),o(e)(l[t],t))})}}(e)(r)}},u=function(e,t){var n=e.dom,i=e.settings,l=e.items;if(n){var r=n.items[t].querySelector(".js-modal-gallery__img-container");r.querySelector(".modal-gallery__img")||(r.innerHTML='<img class="'+(i.scrollable?"modal-gallery__img modal-gallery__img--scrollable":"modal-gallery__img")+'" src="'+l[t].src+'" alt="'+l[t].title+'"'+(n.items[t].srcset?' srcset="'+n.items[t].srcset+'"':"")+(n.items[t].sizes?' sizes="'+n.items[t].sizes+'"':"")+">",n.items[t].classList.remove("loading"))}},d=function(e){return function(i){var l=e.getState().dom,r=l.overlay.querySelector(".js-modal-gallery__close");n.forEach(function(n){r.addEventListener(n,function(n){n.keyCode&&n.keyCode!==t.ENTER||n.which&&3===n.which||b(e)})});var a=l.overlay.querySelector(".js-modal-gallery__previous"),o=l.overlay.querySelector(".js-modal-gallery__next");(a||o)&&n.forEach(function(n){a&&a.addEventListener(n,function(n){n.keyCode&&n.keyCode!==t.ENTER||h(e)}),o&&o.addEventListener(n,function(n){n.keyCode&&n.keyCode!==t.ENTER||p(e)})})}},f=function(e){return function(n){if(e.getState().isOpen)switch(n.keyCode){case t.ESC:b(e);break;case t.TAB:m(e,n);break;case t.LEFT:h(e);break;case t.RIGHT:p(e)}}},m=function(e,t){var n=e.getState().dom,i=n.focusableChildren.indexOf(document.activeElement);t.shiftKey&&0===i&&(t.preventDefault(),n.focusableChildren[n.focusableChildren.length-1].focus()),t.shiftKey||i!==n.focusableChildren.length-1||(t.preventDefault(),n.focusableChildren[0].focus())},g=function(e){return function(t){var n=e.getState(),i=n.dom,l=n.current,r=n.isOpen,a=n.settings;i.overlay.classList.toggle("is--active"),i.overlay.setAttribute("aria-hidden",!r),i.overlay.setAttribute("tabindex",r?"0":"-1"),null!==r&&i.items[l].classList.add("is--active"),i.focusableChildren&&i.focusableChildren.length>0&&window.setTimeout(function(){i.focusableChildren[0].focus()},0),a.fullscreen&&v(t)}},y=function(e){e.settings.totals&&(e.dom.totals.innerHTML=e.current+1+"/"+e.items.length)},v=function(e){var t=e.dom;e.isOpen?(t.overlay.requestFullscreen&&t.overlay.requestFullscreen(),t.overlay.webkitRequestFullscreen&&t.overlay.webkitRequestFullscreen(),t.overlay.mozRequestFullScreen&&t.overlay.mozRequestFullScreen()):(document.exitFullscreen&&document.exitFullscreen(),document.mozCancelFullScreen&&document.mozCancelFullScreen(),document.webkitExitFullscreen&&document.webkitExitFullscreen())},h=function(e){var t=e.getState(),n=t.current,i=t.dom,l=0===n?i.items.length-1:n-1;e.dispatch({current:l},[function(){return i.items[n].classList.remove("is--active")},function(){return i.items[l].classList.add("is--active")},c(e),y])},p=function(e){var t=e.getState(),n=t.current,i=t.dom,l=n===i.items.length-1?0:n+1;e.dispatch({current:l},[function(){return i.items[n].classList.remove("is--active")},function(){return i.items[l].classList.add("is--active")},c(e),y])},b=function(e){var t=e.getState(),n=t.keyListener,i=t.lastFocused,l=t.dom;e.dispatch({current:null,isOpen:!1},[function(){return document.removeEventListener("keydown",n)},function(){i&&i.focus()},function(){return l.overlay.parentNode.removeChild(l.overlay)}])},_=function(e){return function(t){void 0===t&&(t=0),e.dispatch({current:t,isOpen:!0},[s(e)])}},k=function(t,n){return Object.create((i={items:t,settings:e({},r,n)},l={},(o={dispatch:function(t,n){l=t?e({},l,t):l,n&&n.forEach(function(e){return e(l)})},getState:function(){return l}}).dispatch({settings:i.settings,items:i.items,imageCache:[],isOpen:!1,current:null,keyListener:f(o)},[a(o)]),{getState:o.getState,open:_(o)}));var i,l,o},C=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]:[]};return function(e,t){if(e)return t&&t.single?function(e,t){var n=C(e);if(n.length)return n.map(function(e){return k([{trigger:e,src:e.getAttribute("href"),srcset:e.getAttribute("data-srcset")||null,sizes:e.getAttribute("data-sizes")||null,title:e.getAttribute("data-title")||"",description:e.getAttribute("data-description")||""}],t)});console.warn("Modal Gallery cannot be initialised, no images found")}(e,t):function(e,t){var n=C(e);if(n.length){var i=n.map(function(e){return e instanceof HTMLElement?{trigger:e,src:e.getAttribute("href"),srcset:e.getAttribute("data-srcset")||null,sizes:e.getAttribute("data-sizes")||null,title:e.getAttribute("data-title")||"",description:e.getAttribute("data-description")||""}:e});return k(i,t)}console.warn("Modal Gallery cannot be initialised, no images found")}(e,t);console.warn("Modal Gallery cannot be initialised, no images found")}});
//# sourceMappingURL=index.umd.js.map

4

package.json
{
"name": "@stormid/modal-gallery",
"version": "1.0.0-alpha.7",
"version": "1.0.0-alpha.9",
"description": "Accessible modal image gallery",

@@ -31,3 +31,3 @@ "author": "stormid",

},
"gitHead": "f864818d5903b3ac46efe2b0c79ab4417c405aaf"
"gitHead": "5a78d93bb9f509d1af5dcf4d3b3f30bb2cd1583f"
}

8

README.md

@@ -30,5 +30,5 @@ # Modal Gallery

```
import modaGallery from '@stormid/modal-gallery';
import modalGallery from '@stormid/modal-gallery';
const [ gallery ] = modaGallery('.js-modal-gallery');
const [ gallery ] = modalGallery('.js-modal-gallery');
```

@@ -115,5 +115,5 @@

```
import modaGallery from '@stormid/modal-gallery';
import modalGallery from '@stormid/modal-gallery';
const [ gallery ] = modaGallery([
const [ gallery ] = modalGallery([
{

@@ -120,0 +120,0 @@ src: '//placehold.it/500x500',

dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/index.modern.js.map

Sorry, the diff of this file is not supported yet

dist/index.modern.mjs

Sorry, the diff of this file is not supported yet

dist/index.modern.mjs.map

Sorry, the diff of this file is not supported yet

dist/index.umd.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc