lightgallery/plugins/justified/lg-justified.min.js

lightGallery is a feature-rich, modular JavaScript gallery plugin for building beautiful image and video galleries for the web and the mobile

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).lgJustified=e()}(this,function(){"use strict";const t=180,e=8,i=1.75;function s(s){const{containerWidth:r,targetRowHeight:o=t,gap:a=e,lastRow:n="start",maxScale:h=i}=s,l=function(t){let e=!1;return t.map(t=>Number.isFinite(t)&&t>0?t:(e||"undefined"==typeof console||(e=!0,console.warn("lightGallery justified layout: invalid aspect ratio, treating as 1 (square). See https://www.lightgalleryjs.com/docs/justified-layout/")),1))}(s.ratios),d=new Array(l.length),c=o*h,g=t=>(r-a*(t.length-1))/t.reduce((t,e)=>t+e,0);let u=0,f=[],p=0;const y=(t,e)=>{const i=function(t){const{row:e,firstIndex:i,top:s,containerWidth:r,gap:o,fill:a,boxes:n}=t,h=Math.round(t.height);let l=0;return e.forEach((t,d)=>{let c=Math.round(t*h);a&&d===e.length-1&&(c=r-l),n[i+d]={top:s,start:l,width:c,height:h},l+=c+o}),h}({row:f,firstIndex:p,top:u,height:Math.min(t,c),containerWidth:r,gap:a,fill:e&&t<=c,boxes:d});u+=i+a,p+=f.length,f=[]};return l.forEach(t=>{f.push(t);const e=g(f);if(e>o)return;const i=f.length>1?g(f.slice(0,-1)):null;if(null!==i&&i-o<o-e){const t=f.pop();y(i,!0),f=[t],g(f)<=o&&y(g(f),!0)}else y(e,!0)}),f.length>0&&("hide"===n?f.forEach((t,e)=>{d[p+e]={top:0,start:0,width:0,height:0}}):"justify"===n?y(g(f),!0):y(o,!1)),{boxes:d,containerHeight:p>0||f.length>0?Math.max(u-a,0):0}}const r="lgUpdateSlides",o={justified:!0,justifiedRowHeight:180,justifiedGap:8,justifiedLastRow:"start",justifiedMaxScale:1.75,justifiedReveal:"row"};var a=Object.defineProperty,n=Object.getOwnPropertySymbols,h=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable,d=(t,e,i)=>e in t?a(t,e,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[e]=i,c=(t,e)=>{for(var i in e||(e={}))h.call(e,i)&&d(t,i,e[i]);if(n)for(var i of n(e))l.call(e,i)&&d(t,i,e[i]);return t};return class{constructor(t,e){return this.triggers=[],this.ratios=[],this.layoutWidth=0,this.pendingLoads=[],this.rows=[],this.loaded=new Set,this.loadWatchers=new Map,this.originalContainerStyle="",this.originalTriggerStyles=new Map,this.core=t,this.$LG=e,this.settings=c(c({},o),this.core.settings),this}init(){this.settings.justified&&!this.core.settings.dynamic&&(this.collectTriggers(),this.triggers.length&&(this.originalContainerStyle=this.core.el.getAttribute("style")||"",this.core.el.classList.add("lg-justified","lg-justified-reveal"),this.resolveRatios(),this.layout(),this.core.LGel.on(`${r}.justified`,()=>{this.pendingLoads.forEach(t=>t()),this.pendingLoads=[],this.cancelLoadWatchers(),this.collectTriggers(),this.resolveRatios(),this.layout()}),"undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver(()=>{this.core.el.clientWidth!==this.layoutWidth&&this.layout()}),this.resizeObserver.observe(this.core.el))))}collectTriggers(){this.triggers=Array.prototype.slice.call(this.core.items),this.triggers.forEach(t=>{this.originalTriggerStyles.has(t)||this.originalTriggerStyles.set(t,t.getAttribute("style")||""),t.classList.add("lg-justified-item")})}resolveRatios(){this.ratios=this.triggers.map((t,e)=>{const i=function(t,e){if(!t)return;let i=t;const s=t.split(",");if(s[1])for(let n=0;n<s.length;n++){const t=s[n].trim();if(parseInt(t.split("-")[2],10)>e){i=t;break}n===s.length-1&&(i=t)}const r=i.trim().split("-"),o=parseInt(r[0],10),a=parseInt(r[1],10);return Number.isFinite(o)&&Number.isFinite(a)?{width:o,height:a}:void 0}(t.getAttribute("data-lg-size")||void 0,window.innerWidth);if(i)return i.width/i.height;const s=t.querySelector("img");if(!s)return 1;const r=parseInt(s.getAttribute("width")||"",10),o=parseInt(s.getAttribute("height")||"",10);return r>0&&o>0?r/o:s.complete&&s.naturalWidth>0?s.naturalWidth/s.naturalHeight:(this.watchImageLoad(s,e),null)})}watchImageLoad(t,e){const i=()=>{t.removeEventListener("load",s),t.removeEventListener("error",s)},s=()=>{i(),this.pendingLoads=this.pendingLoads.filter(t=>t!==i),this.ratios[e]=t.naturalWidth>0?t.naturalWidth/t.naturalHeight:1,this.ratios.every(t=>null!==t)&&this.layout()};t.addEventListener("load",s),t.addEventListener("error",s),this.pendingLoads.push(i)}layout(){const t=this.core.el.clientWidth;if(!t)return;this.layoutWidth=t;const{boxes:e,containerHeight:i}=s({ratios:this.ratios.map(t=>null!=t?t:1),containerWidth:t,targetRowHeight:this.settings.justifiedRowHeight,gap:this.settings.justifiedGap,lastRow:this.settings.justifiedLastRow,maxScale:this.settings.justifiedMaxScale}),r="rtl"===this.core.settings.direction?"right":"left",o="left"===r?"right":"left";this.core.el.style.height=`${i}px`,this.triggers.forEach((t,i)=>{const s=e[i],a=0===s.width&&0===s.height;if(t.classList.toggle("lg-justified-item-hidden",a),a)return;t.style.top=`${s.top}px`,t.style[r]=`${s.start}px`,t.style[o]="auto",t.style.width=`${s.width}px`,t.style.height=`${s.height}px`;const n=t.querySelector("img");n&&n.hasAttribute("srcset")&&n.setAttribute("sizes",`${s.width}px`),this.watchLoad(t,n)}),this.rows=function(t){const e=[];let i=-1;return t.forEach((t,s)=>{0===t.width&&0===t.height||(e.length&&t.top===i||(e.push([]),i=t.top),e[e.length-1].push(s))}),e}(e).map(t=>t.map(t=>this.triggers[t])),this.reveal()}watchLoad(t,e){if(this.loaded.has(t)||this.loadWatchers.has(t))return;if(!e||e.complete)return void this.loaded.add(t);const i=()=>{s(),this.loaded.add(t),this.reveal()},s=()=>{e.removeEventListener("load",i),e.removeEventListener("error",i),this.loadWatchers.delete(t)};e.addEventListener("load",i),e.addEventListener("error",i),this.loadWatchers.set(t,s)}reveal(){(function(t,e,i){if("image"===i)return[].concat(...t).filter(e);const s=[];for(const r of t){if(!r.every(e))break;s.push(...r)}return s})(this.rows,t=>this.loaded.has(t),this.settings.justifiedReveal).forEach(t=>{t.classList.add("lg-justified-item-visible")})}cancelLoadWatchers(){Array.from(this.loadWatchers.values()).forEach(t=>t())}closeGallery(){}destroy(){var t;null==(t=this.resizeObserver)||t.disconnect(),this.pendingLoads.forEach(t=>t()),this.pendingLoads=[],this.cancelLoadWatchers(),this.loaded.clear(),this.rows=[],this.triggers.length&&(this.core.LGel.off(".justified"),this.core.el.classList.remove("lg-justified","lg-justified-reveal"),this.originalContainerStyle?this.core.el.setAttribute("style",this.originalContainerStyle):this.core.el.removeAttribute("style"),this.triggers.forEach(t=>{t.classList.remove("lg-justified-item","lg-justified-item-hidden","lg-justified-item-visible");const e=this.originalTriggerStyles.get(t);e?t.setAttribute("style",e):t.removeAttribute("style")}))}}});