@betaweb/lightbox
Version:
A simple JavaScript class to generate images Lightbox
14 lines • 15.6 kB
JavaScript
parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;c<t.length;c++)try{f(t[c])}catch(e){i||(i=e)}if(t.length){var l=f(t[t.length-1]);"object"==typeof exports&&"undefined"!=typeof module?module.exports=l:"function"==typeof define&&define.amd?define(function(){return l}):n&&(this[n]=l)}if(parcelRequire=f,i)throw i;return f}({"UldJ":[function(require,module,exports) {
"use strict";function t(t,e){var n;return function(){var r=arguments,i=this;clearTimeout(n),n=setTimeout(function(){t.apply(i,r)},e)}}function e(t,e){void 0===e&&(e=0);var r=0,i=0,o=0,a=0;t.constructor===HTMLImageElement?(r=t.naturalWidth,i=t.naturalHeight):(r=t.clientWidth,i=t.clientHeight);var c=n(r,i,window.innerWidth,window.innerHeight),s=c.width,u=c.height;switch(c.orientation){case"landscape":o=e;break;case"portrait":a=e;break;case"even":o=e,a=e}return{width:s-2*o,height:u-2*a}}function n(t,e,n,r){var i=Math.min(n/t,r/e),o="even";t>e?o="landscape":t<e&&(o="portrait");var a=t*i,c=e*i;return(a<=n||c<=r)&&(o="even"),{ratio:i,width:a,height:c,orientation:o}}function r(t){return t.constructor===HTMLImageElement?t.src:t.dataset.src}Object.defineProperty(exports,"__esModule",{value:!0}),exports.getElementSrc=exports.aspectRatioFit=exports.getImageBoundings=exports.debounce=void 0,exports.debounce=t,exports.getImageBoundings=e,exports.aspectRatioFit=n,exports.getElementSrc=r;
},{}],"kzfn":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=function(){function e(e){var t=e.el,n=e.src,r=e.legend,i=e.handler,l=e.group,o=e.index;this._el=null,this._src=null,this._handler=null,this._group=null,this._index=null,this._legend=null,this._el=t,this._src=n,this._handler=i,this._group=l,this._index=o,this._legend=r||null,this._handler=this._handler.bind(this),this.bindEventHandler()}return Object.defineProperty(e.prototype,"el",{get:function(){return this._el},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"src",{get:function(){return this._src},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"handler",{get:function(){return this._handler},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"legend",{get:function(){return this._legend},set:function(e){this._legend=e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"group",{get:function(){return this._group},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"index",{get:function(){return this._index},set:function(e){this._index=e},enumerable:!1,configurable:!0}),e.prototype.removeEvent=function(){return this._el.removeEventListener("click",this._handler),this},e.prototype.bindEventHandler=function(){this._el.addEventListener("click",this._handler)},e}();exports.default=e;
},{}],"zGZK":[function(require,module,exports) {
"use strict";var t=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0});var e=t(require("./LightboxItem")),n=function(){function t(){this.items=[]}return t.prototype.add=function(t){return t instanceof e.default||(t=new e.default(t)),this.items.push(t),t},t.prototype.find=function(t){return this.items[t]||null},t.prototype.findBy=function(t){return this.items.find(function(e){return e.src===t})||null},t.prototype.refresh=function(){this.items.forEach(function(t,e){return t.index=e})},t.prototype.remove=function(t){var e=this.find(t);return null!==e&&(e.removeEvent(),this.items.splice(t,1),this.refresh()),e},t}();exports.default=n;
},{"./LightboxItem":"kzfn"}],"yaJP":[function(require,module,exports) {
"use strict";var t=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0});var e=t(require("./LightboxList")),r=function(){function t(){this.groups={}}return t.prototype.all=function(){return this.groups},t.prototype.has=function(t){return void 0!==this.groups[t]},t.prototype.get=function(t){return this.groups[t]},t.prototype.create=function(t){this.has(t)||(this.groups[t]=new e.default)},t.prototype.addTo=function(t,e){return this.create(t),this.get(t).add(e),e},t.prototype.retrieve=function(t,e){return"string"==typeof e?this.get(t).findBy(e):this.get(t).find(e)},t.prototype.remove=function(t){delete this.groups[t]},t.prototype.size=function(t){try{return this.get(t).items.length}catch(e){return 0}},t.DEFAULT_NAME="_DEFAULT",t}();exports.default=r;
},{"./LightboxList":"zGZK"}],"swik":[function(require,module,exports) {
"use strict";var t=this&&this.__assign||function(){return(t=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var s in e=arguments[n])Object.prototype.hasOwnProperty.call(e,s)&&(t[s]=e[s]);return t}).apply(this,arguments)},e=this&&this.__awaiter||function(t,e,n,i){return new(n||(n=Promise))(function(s,o){function r(t){try{h(i.next(t))}catch(e){o(e)}}function l(t){try{h(i.throw(t))}catch(e){o(e)}}function h(t){var e;t.done?s(t.value):(e=t.value,e instanceof n?e:new n(function(t){t(e)})).then(r,l)}h((i=i.apply(t,e||[])).next())})},n=this&&this.__generator||function(t,e){var n,i,s,o,r={label:0,sent:function(){if(1&s[0])throw s[1];return s[1]},trys:[],ops:[]};return o={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function l(o){return function(l){return function(o){if(n)throw new TypeError("Generator is already executing.");for(;r;)try{if(n=1,i&&(s=2&o[0]?i.return:o[0]?i.throw||((s=i.return)&&s.call(i),0):i.next)&&!(s=s.call(i,o[1])).done)return s;switch(i=0,s&&(o=[2&o[0],s.value]),o[0]){case 0:case 1:s=o;break;case 4:return r.label++,{value:o[1],done:!1};case 5:r.label++,i=o[1],o=[0];continue;case 7:o=r.ops.pop(),r.trys.pop();continue;default:if(!(s=(s=r.trys).length>0&&s[s.length-1])&&(6===o[0]||2===o[0])){r=0;continue}if(3===o[0]&&(!s||o[1]>s[0]&&o[1]<s[3])){r.label=o[1];break}if(6===o[0]&&r.label<s[1]){r.label=s[1],s=o;break}if(s&&r.label<s[2]){r.label=s[2],r.ops.push(o);break}s[2]&&r.ops.pop(),r.trys.pop();continue}o=e.call(t,r)}catch(l){o=[6,l],i=0}finally{n=s=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,l])}}},i=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0});var s=require("./utils"),o=i(require("./LightboxGroup")),r=i(require("./LightboxItem")),l=function(){function i(e){if(void 0===e&&(e={}),this._groups=null,this._lightbox=null,this._lightbox_inner=null,this._lightbox_legend=null,this._image=null,this._nav_prev=null,this._nav_next=null,this._nav_dots=null,this._current=null,this.options=t(t({},i.default_options),e),this.elements=document.querySelectorAll(this.options.selector),0===this.elements.length)throw new Error("Lightbox::constructor - no elements found");this._groups=new o.default,this.hide=this.hide.bind(this),this.prev=this.prev.bind(this),this.next=this.next.bind(this),this.onKeyup=this.onKeyup.bind(this),this.onResize=this.onResize.bind(this),this.attachEvents(),this.options.created(this._groups)}return Object.defineProperty(i,"default_options",{get:function(){return{selector:".lightbox--link",lightbox_class:"lightbox",lightbox_inner_class:"lightbox--inner",lightbox_legend_class:"lightbox--legend",lightbox_visible_class:"visible",image_loading_class:"is-loading",prevent_scroll:!0,prevent_scroll_class:"prevent-scroll",prevent_scroll_element:document.body,inner_offset:30,nav:!0,nav_prev_class:"lightbox--nav-prev",nav_next_class:"lightbox--nav-next",dots:!0,nav_dots_class:"lightbox--nav-dots",created:function(){},onShow:function(){},onHide:function(){},onNav:function(){},onAdd:function(){},onRemove:function(){}}},enumerable:!1,configurable:!0}),i.prototype.show=function(t,e){var n=this.find(t,e);return null!==n&&this.revealImage(n),n},i.prototype.hide=function(){return this._lightbox.classList.remove(this.options.lightbox_visible_class),this.options.prevent_scroll&&this.options.prevent_scroll_element.classList.remove(this.options.prevent_scroll_class),this._lightbox_inner.style.backgroundImage=null,this._image=null,this.options.onHide(this._current),this.setCurrent(null),this},i.prototype.find=function(t,e){var n=null;if(e)n=this._groups.get(e).findBy(t);else{var i=this._groups.all();for(var s in i)if(i.hasOwnProperty(s)&&null!==(n=this._groups.get(s).findBy(t)))break}return n},i.prototype.prev=function(){return this.nav(-1)},i.prototype.next=function(){return this.nav(1)},i.prototype.add=function(t){var e=this.storeElement(t);return this.options.onAdd(e),this},i.prototype.remove=function(t){var e=t.dataset.group||o.default.DEFAULT_NAME,n=this._groups.retrieve(e,s.getElementSrc(t));return null!==n?(this._groups.get(e).remove(n.index),0===this._groups.size(e)&&this._groups.remove(e),this.options.onRemove(n),n):null},i.prototype.refresh=function(e){void 0===e&&(e=null);var n={};if(null===e){var i=this._groups.all();for(var s in i)i.hasOwnProperty(s)&&(n=t(t({},n),this.refreshGroup(s)))}else n=t(t({},n),this.refreshGroup(e));return n},i.prototype.destroy=function(){for(var t in this._groups.all())if(this._groups.hasOwnProperty(t)){var e=Object.values(this._groups[t]);e.length>0&&e.forEach(function(t){t.removeEvent()})}window.removeEventListener("resize",s.debounce(this.onResize,300)),window.removeEventListener("keyup",this.onKeyup),this._nav_prev.removeEventListener("click",this.prev),this._nav_next.removeEventListener("click",this.next),this._lightbox_inner.removeEventListener("click",function(t){return t.stopPropagation()}),this._lightbox_inner.remove(),this._lightbox.removeEventListener("click",this.hide),this._lightbox.remove(),this._lightbox=null,this._lightbox_inner=null,this._image=null,this._groups=null,this._nav_prev=null,this._nav_next=null,this.setCurrent(null)},i.prototype.nav=function(t){var e=this._current,n=e.group,i=e.index,s=this._groups.size(n),o=t<0?i-1<0?s:i:i+1===s?-1:i,r=this._groups.retrieve(n,o+t);return null!==r&&(this.options.onNav(r,t),this.goTo(r)),this},i.prototype.revealImage=function(t){var e=this;this._lightbox.classList.add(this.options.image_loading_class),this._image=new Image,this._image.src=t.src,this._image.onload=function(){e.setInnerBoundings(),e._lightbox_inner.style.backgroundImage="url('"+e._image.src+"')",setTimeout(function(){e._lightbox.classList.remove(e.options.image_loading_class),e.options.onShow(t)},300)},this.options.prevent_scroll&&this.options.prevent_scroll_element.classList.add(this.options.prevent_scroll_class),this._lightbox.classList.add(this.options.lightbox_visible_class),this.displayLegend(t.legend),!0===this.options.dots&&this._nav_dots.childNodes.forEach(function(e){e.classList.toggle("active",parseInt(e.dataset.index,10)===t.index)})},i.prototype.goTo=function(t){this.hide(),this.setCurrent(t),this.revealImage(t)},i.prototype.refreshGroup=function(t){var e,n=this,i=Array.from(document.querySelectorAll(this.options.selector+'[data-group="'+t+'"]')),o=this._groups.get(t),r=o.items,l=[],h=[];return i.length!==r.length&&(l=i.filter(function(t){return!r.map(function(t){return t.src}).includes(s.getElementSrc(t))}),(h=r.filter(function(t){return!i.map(s.getElementSrc).includes(t.src)})).forEach(function(t){var e=t.index;return o.remove(e)}),l.forEach(function(t){return n.storeElement(t)}),o.refresh()),(e={})[t]={added:l,removed:h},e},i.prototype.createLightBox=function(){this._lightbox_legend=document.createElement("div"),this._lightbox_legend.classList.add(this.options.lightbox_legend_class),this._lightbox_inner=document.createElement("div"),this._lightbox_inner.classList.add(this.options.lightbox_inner_class),this._lightbox_inner.appendChild(this._lightbox_legend),this._lightbox=document.createElement("div"),this._lightbox.classList.add(this.options.lightbox_class),this._lightbox.appendChild(this._lightbox_inner),!0===this.options.nav&&(this._nav_prev=document.createElement("div"),this._nav_next=document.createElement("div"),this._nav_prev.classList.add(this.options.nav_prev_class),this._nav_next.classList.add(this.options.nav_next_class),this._nav_prev.addEventListener("click",this.prev),this._nav_next.addEventListener("click",this.next),this._lightbox_inner.appendChild(this._nav_prev),this._lightbox_inner.appendChild(this._nav_next)),!0===this.options.dots&&(this._nav_dots=document.createElement("ul"),this._nav_dots.classList.add(this.options.nav_dots_class),this._lightbox.appendChild(this._nav_dots)),document.body.appendChild(this._lightbox)},i.prototype.attachEvents=function(){var t=this;window.addEventListener("resize",s.debounce(this.onResize,300)),window.addEventListener("keyup",this.onKeyup),this.createLightBox(),this._lightbox.addEventListener("click",this.hide),this._lightbox_inner.addEventListener("click",function(t){return t.stopPropagation()}),this.elements.forEach(function(i){return e(t,void 0,Promise,function(){return n(this,function(t){switch(t.label){case 0:return[4,this.storeElement(i)];case 1:return t.sent(),[2]}})})})},i.prototype.storeElement=function(t){var e=this,n=t.dataset.group||o.default.DEFAULT_NAME;this._groups.create(n);var i=new r.default({el:t,src:s.getElementSrc(t),handler:function(){e.setCurrent(this);var t=e._groups.size(n)<=1;e._nav_prev.classList.toggle("is-hidden",t),e._nav_next.classList.toggle("is-hidden",t),t||e.createNavDots(this),e.revealImage(this)},group:n,index:this._groups.size(n),legend:t.dataset.legend||null});return this._groups.addTo(n,i),i},i.prototype.displayLegend=function(t){this._lightbox_legend.style.display=t?"":"none",this._lightbox_legend.innerHTML=t||""},i.prototype.createNavDots=function(t){var e=this;this._nav_dots.innerHTML="";var n=this._current.group;this._groups.get(n).items.forEach(function(n){var i=document.createElement("li");i.dataset.index=n.index.toString(),n===t&&i.classList.add("active"),i.addEventListener("click",function(t){t.preventDefault(),t.stopPropagation(),e.goTo(n)}),e._nav_dots.appendChild(i)})},i.prototype.onResize=function(){null!==this._image&&this.setInnerBoundings()},i.prototype.onKeyup=function(t){if(t.preventDefault(),null!==this._current){var e=this._groups.size(this._current.group)>1;switch(t.key){case"ArrowLeft":e&&this.prev();break;case"ArrowRight":e&&this.next();break;case"Escape":this.hide()}}},i.prototype.setInnerBoundings=function(){var t=s.getImageBoundings(this._image,this.options.inner_offset),e=t.width,n=t.height;this._lightbox_inner.style.width=e+"px",this._lightbox_inner.style.height=n+"px"},i.prototype.setCurrent=function(t){this._current=t},i}();exports.default=l,window&&document&&(window.Lightbox=l);
},{"./utils":"UldJ","./LightboxGroup":"yaJP","./LightboxItem":"kzfn"}],"Focm":[function(require,module,exports) {
"use strict";var e=t(require("./src/Lightbox"));function t(e){return e&&e.__esModule?e:{default:e}}globalThis.Lightbox=e.default;
},{"./src/Lightbox":"swik"}]},{},["Focm"], null)
//# sourceMappingURL=/lightbox.min.js.map