You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
14 KiB
JavaScript
1 line
14 KiB
JavaScript
"use strict";(globalThis.webpackChunkweb_stories_wp=globalThis.webpackChunkweb_stories_wp||[]).push([[2443],{72443:(t,n,o)=>{o.d(n,{default:()=>PhotoAlbum});var e=o(67294);function r({width:t,height:n}){return t/n}function i(t,n=0){const o=10**n;return Math.round((t+Number.EPSILON)*o)/o}class MinHeap{constructor(t){this.comparator=t,this.heap=[],this.n=0}greater(t,n){return this.comparator(this.heap[t],this.heap[n])<0}swap(t,n){const o=this.heap[t];this.heap[t]=this.heap[n],this.heap[n]=o}swim(t){let n=t,o=Math.floor(n/2);for(;n>1&&this.greater(o,n);)this.swap(o,n),n=o,o=Math.floor(n/2)}sink(t){let n=t,o=2*n;for(;o<=this.n&&(o<this.n&&this.greater(o,o+1)&&(o+=1),this.greater(n,o));)this.swap(n,o),n=o,o=2*n}push(t){this.n+=1,this.heap[this.n]=t,this.swim(this.n)}pop(){if(0===this.n)return;this.swap(1,this.n),this.n-=1;const t=this.heap.pop();return this.sink(1),t}size(){return this.n}}function s(t,n,o){const e=function(t,n,o){const e=new Map,r=new Set,i=new Map;i.set(n,0);const s=new MinHeap((a=t=>t.weight,(t,n)=>a(n)-a(t)));var a;for(s.push({id:n,weight:0});s.size()>0;){const{id:n,weight:o}=s.pop();if(!r.has(n)){const a=t(n);r.add(n),a.forEach(((t,r)=>{const a=o+t,l=e.get(r),c=i.get(r);(void 0===c||c>a&&(c/a>1.005||void 0!==l&&l<n))&&(i.set(r,a),s.push({id:r,weight:a}),e.set(r,n))}))}}return i.has(o)?e:void 0}(t,n,o);return e?function(t,n){const o=[];for(let e=n;void 0!==e;e=t.get(e))o.push(e);return o.reverse()}(e,o):void 0}function a(t,n,o,e){return(n-(t.length-1)*o-2*e*t.length)/t.reduce(((t,n)=>t+r(n)),0)}function l(t,n,o,e,r,i,s){const l=t.slice(n,o),c=a(l,e,i,s);return c>0?(c-r)**2*l.length:void 0}function c({photos:t,layoutOptions:n}){const{spacing:o,padding:e,containerWidth:c,targetRowHeight:u,rowConstraints:h}=n,p=function({photos:t,targetRowHeight:n,containerWidth:o}){return i(o/n/t.reduce(((t,n)=>Math.min(r(n),t)),Number.MAX_VALUE))+2}({photos:t,containerWidth:c,targetRowHeight:u}),d=function({photos:t,layoutOptions:n,targetRowHeight:o,limitNodeSearch:e,rowConstraints:r}){return i=>{var s,a;const{containerWidth:c,spacing:u,padding:h}=n,p=new Map;p.set(i,0);const d=null!=(s=null==r?void 0:r.minPhotos)?s:1,m=Math.min(e,null!=(a=null==r?void 0:r.maxPhotos)?a:1/0);for(let n=i+d;n<t.length+1&&!(n-i>m);n+=1){const e=l(t,i,n,c,o,u,h);if(void 0===e)break;p.set(n,e)}return p}}({photos:t,layoutOptions:n,targetRowHeight:u,limitNodeSearch:p,rowConstraints:h}),m=s(d,0,t.length);if(void 0===m)return;const g=[];for(let n=1;n<m.length;n+=1){const i=t.map(((t,n)=>({photo:t,index:n}))).slice(m[n-1],m[n]),s=a(i.map((({photo:t})=>t)),c,o,e);g.push(i.map((({photo:t,index:n},o)=>({photo:t,layout:{height:s,width:s*r(t),index:n,photoIndex:o,photosCount:i.length}}))))}return g}function u(...t){return[...t].filter((t=>Boolean(t))).join(" ")}function h(t,{width:n,photosCount:o},{spacing:e,padding:r,containerWidth:s}){const a=e*(o-1)+2*r*o;return`calc((${t} - ${a}px) / ${i((s-a)/n,5)})`}function p(t,n){return"rows"!==n.layout?`calc(100% - ${2*n.padding}px)`:h("100%",t,n)}function d(t,n,o){var e,r;return h(null!=(r=null==(e=t.match(/calc\((.*)\)/))?void 0:e[1])?r:t,n,o)}function m(t,n,o){let e,r;const i=t.srcSet||t.images;return i&&i.length>0&&(e=i.concat(i.find((({width:n})=>n===t.width))?[]:[{src:t.src,width:t.width,height:t.height}]).sort(((t,n)=>t.width-n.width)).map((t=>`${t.src} ${t.width}w`)).join(", ")),o.sizes?r=(o.sizes.sizes||[]).map((({viewport:t,size:e})=>`${t} ${d(e,n,o)}`)).concat(d(o.sizes.size,n,o)).join(", "):e&&(r=`${Math.ceil(n.width/o.containerWidth*100)}vw`),{srcSet:e,sizes:r}}function PhotoRenderer(t){var n,o;const{photo:r,layout:i,layoutOptions:s,imageProps:{style:a,className:l,...c}={},renderPhoto:h}=t,{onClick:d}=s,g={display:"block",boxSizing:"content-box",width:p(i,s),height:"auto",aspectRatio:`${r.width} / ${r.height}`,...s.padding?{padding:`${s.padding}px`}:null,...("columns"===s.layout||"masonry"===s.layout)&&i.photoIndex<i.photosCount-1?{marginBottom:`${s.spacing}px`}:null,...d?{cursor:"pointer"}:null,...a},f=d?t=>{d({event:t,photo:r,index:i.index})}:void 0,w={src:r.src,alt:null!=(n=r.alt)?n:"",title:r.title,onClick:f,style:g,className:u("react-photo-album--photo",l),loading:"lazy",decoding:"async",...m(r,i,s),...c},y=t=>{const{src:n,alt:o,srcSet:r,sizes:i,style:s,...a}=w;return e.createElement("img",{alt:o,...r?{srcSet:r,sizes:i}:null,src:n,style:(null==t?void 0:t.wrapped)?{display:"block",width:"100%",height:"100%"}:s,...a})},C=(({display:t,boxSizing:n,width:o,aspectRatio:e,padding:r,marginBottom:i,cursor:s})=>({display:t,boxSizing:n,width:o,aspectRatio:e,padding:r,marginBottom:i,cursor:s}))(g);return e.createElement(e.Fragment,null,null!=(o=null==h?void 0:h({photo:r,layout:i,layoutOptions:s,imageProps:w,renderDefaultPhoto:y,wrapperStyle:C}))?o:y())}function g({rowContainerProps:t,children:n}){return e.createElement("div",{...t},n)}function RowContainerRenderer(t){const{layoutOptions:n,rowIndex:o,rowsCount:r,renderRowContainer:i,rowContainerProps:{style:s,className:a,...l}={},children:c}=t,h={className:u("react-photo-album--row",a),style:{display:"flex",flexDirection:"row",flexWrap:"nowrap",alignItems:"flex-start",justifyContent:"space-between",...o<r-1?{marginBottom:`${n.spacing}px`}:null,...s},...l};return e.createElement(e.Fragment,null,(null!=i?i:g)({layoutOptions:n,rowIndex:o,rowsCount:r,rowContainerProps:h,children:c}))}function RowsLayout(t){const{photos:n,layoutOptions:o,renderPhoto:r,renderRowContainer:i,componentsProps:{imageProps:s,rowContainerProps:a}}=t,l=c({photos:n,layoutOptions:o});return l?e.createElement(e.Fragment,null,l.map(((t,n)=>e.createElement(RowContainerRenderer,{key:`row-${n}`,layoutOptions:o,rowIndex:n,rowsCount:l.length,renderRowContainer:i,rowContainerProps:a},t.map((({photo:t,layout:n})=>e.createElement(PhotoRenderer,{key:t.key||t.src,photo:t,layout:n,layoutOptions:o,renderPhoto:r,imageProps:s}))))))):null}function f(t,n,o,e){return function(t,n,o){const e=[o];for(let r=o,i=n;i>0;i-=1)r=t.get(r)[i].node,e.push(r);return e.reverse()}(function(t,n,o,e){const r=new Map,i=new Set;i.add(o);for(let o=0;o<n;o+=1){const s=[...i.keys()];i.clear(),s.forEach((s=>{const a=o>0?r.get(s)[o].weight:0;t(s).forEach((({neighbor:t,weight:l})=>{let c=r.get(t);c||(c=[],r.set(t,c));const u=a+l,h=c[o+1];(!h||h.weight>u&&(h.weight/u>1.0001||s<h.node))&&(c[o+1]={node:s,weight:u}),o<n-1&&t!==e&&i.add(t)}))}))}return r}(t,n,o,e),n,e)}function w({path:t,photos:n,containerWidth:o,columnsGaps:e,columnsRatios:i,spacing:s,padding:a}){const l=[],c=i.reduce(((t,n)=>t+n),0);for(let u=0;u<t.length-1;u+=1){const h=n.map(((t,n)=>({photo:t,index:n}))).slice(t[u],t[u+1]),p=i.reduce(((t,n,o)=>t+(e[u]-e[o])*n),0),d=(o-(t.length-2)*s-2*(t.length-1)*a-p)*i[u]/c;l.push(h.map((({photo:t,index:n},o)=>({photo:t,layout:{width:d,height:d/r(t),index:n,photoIndex:o,photosCount:h.length}}))))}return l}function y({photos:t,layoutOptions:n,targetColumnWidth:o}){const{columns:e,spacing:i,padding:s,containerWidth:a}=n,l=[],c=[];if(t.length<=e){const n=t.length>0?t.reduce(((t,n)=>t+r(n)),0)/t.length:1;for(let o=0;o<e;o+=1)l[o]=2*s,c[o]=o<t.length?r(t[o]):n;return{columnsGaps:l,columnsRatios:c,columnsModel:w({path:Array.from({length:e+1}).map(((n,o)=>Math.min(o,t.length))),photos:t,columnsRatios:c,columnsGaps:l,containerWidth:a,spacing:i,padding:s})}}const u=(t.reduce(((t,n)=>t+o/r(n)),0)+i*(t.length-e)+2*s*t.length)/e,h=function({photos:t,spacing:n,padding:o,targetColumnWidth:e,targetColumnHeight:i}){return s=>{const a=[],l=1.5*i;let c=e/r(t[s])+2*o;for(let u=s+1;u<t.length+1&&(a.push({neighbor:u,weight:(i-c)**2}),!(c>l||u===t.length));u+=1)c+=e/r(t[u])+n+2*o;return a}}({photos:t,targetColumnWidth:o,targetColumnHeight:u,spacing:i,padding:s}),p=f(h,e,0,t.length);for(let n=0;n<p.length-1;n+=1){const o=t.slice(p[n],p[n+1]);l[n]=i*(o.length-1)+2*s*o.length,c[n]=1/o.reduce(((t,n)=>t+1/r(n)),0)}return{columnsGaps:l,columnsRatios:c,columnsModel:w({path:p,photos:t,columnsRatios:c,columnsGaps:l,containerWidth:a,spacing:i,padding:s})}}function C(t){const{photos:n,layoutOptions:o}=t,{columns:e,spacing:r,padding:i,containerWidth:s}=o,a=(s-r*(e-1)-2*i*e)/e,{columnsGaps:l,columnsRatios:c,columnsModel:u}=y({photos:n,layoutOptions:o,targetColumnWidth:a});return u.findIndex((t=>t.findIndex((({layout:{width:t,height:n}})=>t<0||n<0))>=0))>=0?e>1?C({photos:n,layoutOptions:{...o,columns:e-1}}):void 0:{columnsModel:u,columnsGaps:l,columnsRatios:c}}function P({photos:t,layoutOptions:n}){return C({photos:t,layoutOptions:n})}function R({columnContainerProps:t,children:n}){return e.createElement("div",{...t},n)}function x(t){const{layoutOptions:n,columnIndex:o,columnsCount:e,columnsGaps:r,columnsRatios:s}=t,{layout:a,spacing:l,padding:c}=n;if("masonry"===a||!r||!s)return`calc((100% - ${l*(e-1)}px) / ${e})`;const u=s.reduce(((t,n)=>t+n),0);return`calc((100% - ${i((e-1)*l+2*e*c+s.reduce(((t,n,e)=>t+(r[o]-r[e])*n),0),3)}px) * ${i(s[o]/u,5)} + ${2*c}px)`}function ColumnContainerRenderer(t){const{layoutOptions:n,renderColumnContainer:o,children:r,columnContainerProps:{style:i,className:s,...a}={},...l}=t,c={className:u("react-photo-album--column",s),style:{display:"flex",flexDirection:"column",flexWrap:"nowrap",alignItems:"flex-start",width:x(t),justifyContent:"columns"===n.layout?"space-between":"flex-start",...i},...a};return e.createElement(e.Fragment,null,(null!=o?o:R)({layoutOptions:n,columnContainerProps:c,children:r,...l}))}function ColumnsLayout(t){const{photos:n,layoutOptions:o,renderPhoto:r,renderColumnContainer:i,componentsProps:{imageProps:s,columnContainerProps:a}}=t,l=P({photos:n,layoutOptions:o});if(!l)return null;const{columnsModel:c,columnsRatios:u,columnsGaps:h}=l;return e.createElement(e.Fragment,null,c.map(((t,n)=>e.createElement(ColumnContainerRenderer,{key:`column-${n}`,layoutOptions:o,columnIndex:n,columnsCount:c.length,columnsGaps:h,columnsRatios:u,renderColumnContainer:i,columnContainerProps:a},t.map((({photo:t,layout:n})=>e.createElement(PhotoRenderer,{key:t.key||t.src,photo:t,layout:n,layoutOptions:o,renderPhoto:r,imageProps:s})))))))}function v(t){const{photos:n,layoutOptions:o}=t,{columns:e,spacing:i,padding:s,containerWidth:a}=o,l=(a-i*(e-1)-2*s*e)/e;if(l<=0)return e>1?v({...t,layoutOptions:{...o,columns:e-1}}):void 0;const c=[];for(let t=0;t<e;t+=1)c[t]=0;return n.reduce(((t,n,o)=>{const e=c.reduce(((t,n,o)=>n<c[t]-1?o:t),0);return c[e]=c[e]+l/r(n)+i+2*s,t[e].push({photo:n,index:o}),t}),Array.from({length:e}).map((()=>[]))).map((t=>t.map((({photo:n,index:o},e)=>({photo:n,layout:{width:l,height:l/r(n),index:o,photoIndex:e,photosCount:t.length}})))))}function MasonryLayout(t){const{photos:n,layoutOptions:o,renderPhoto:r,renderColumnContainer:i,componentsProps:{imageProps:s,columnContainerProps:a}}=t,l=v({photos:n,layoutOptions:o});return l?e.createElement(e.Fragment,null,l.map(((t,n)=>e.createElement(ColumnContainerRenderer,{key:`masonry-column-${n}`,layoutOptions:o,columnsCount:l.length,columnIndex:n,renderColumnContainer:i,columnContainerProps:a},t.map((({photo:t,layout:n})=>e.createElement(PhotoRenderer,{key:t.key||t.src,photo:t,layout:n,layoutOptions:o,renderPhoto:r,imageProps:s}))))))):null}function W({containerProps:t,children:n,containerRef:o}){return e.createElement("div",{ref:o,...t},n)}function ContainerRenderer(t){const{layout:n,renderContainer:o,children:r,containerRef:i,containerProps:{style:s,className:a,...l}={}}=t,c={className:u("react-photo-album",`react-photo-album--${n}`,a),style:{display:"flex",flexWrap:"nowrap",justifyContent:"space-between",flexDirection:"rows"===n?"column":"row",...s},...l};return e.createElement(e.Fragment,null,(null!=o?o:W)({containerProps:c,containerRef:i,layout:n,children:r}))}function b(t,{newContainerWidth:n,newScrollbarWidth:o}){const{containerWidth:e,scrollbarWidth:r}=t;return void 0!==e&&void 0!==r&&void 0!==n&&void 0!==o&&n>e&&n-e<=20&&o<r?{containerWidth:e,scrollbarWidth:o}:e!==n||r!==o?{containerWidth:n,scrollbarWidth:o}:t}function O(t,n){let o=null==t?void 0:t.clientWidth;if(void 0!==o&&n&&n.length>0){const t=[...n.filter((t=>t>0))].sort(((t,n)=>n-t));t.push(Math.floor(t[t.length-1]/2));const e=o;o=t.find(((n,o)=>n<=e||o===t.length-1))}return o}const E=Object.freeze([1200,600,300,0]);function M(t,n){return"function"==typeof t?t(n):t}function k(t,n){return void 0!==t?M(t,n):void 0}function $(t,n,o,e=0){const r=k(t,n);return Math.round(Math.max(void 0===r?function(t,n){const o=E.findIndex((t=>t<=n));return M(t[o>=0?o:0],n)}(o,n):r,e))}function PhotoAlbum(t){const{photos:n,layout:o,renderContainer:r,defaultContainerWidth:i,breakpoints:s}=t,{containerRef:a,containerWidth:l}=function(t,n){const[{containerWidth:o},r]=e.useReducer(b,{containerWidth:n}),i=e.useRef(null),s=e.useRef();return{containerRef:e.useCallback((n=>{var o;null==(o=s.current)||o.disconnect(),s.current=void 0,i.current=n;const e=()=>r({newContainerWidth:O(i.current,t),newScrollbarWidth:window.innerWidth-document.documentElement.clientWidth});e(),n&&"undefined"!=typeof ResizeObserver&&(s.current=new ResizeObserver(e),s.current.observe(n))}),[t]),containerWidth:o}}(function(t){const n=e.useRef(t);return t&&n.current&&t.join()===n.current.join()||(n.current=t),n.current}(s),i);if(!o||!["rows","columns","masonry"].includes(o)||!Array.isArray(n))return null;const c=l?function({layout:t,onClick:n,containerWidth:o,targetRowHeight:e,rowConstraints:r,columns:i,spacing:s,padding:a,sizes:l}){return{layout:t,onClick:n,containerWidth:o,columns:$(i,o,[5,4,3,2],1),spacing:$(s,o,[20,15,10,5]),padding:$(a,o,[0,0,0,0,0]),targetRowHeight:$(e,o,[t=>t/5,t=>t/4,t=>t/3,t=>t/2]),rowConstraints:k(r,o),sizes:l}}({containerWidth:l,...t}):void 0,u=function(t,n,o){const{photos:e,componentsProps:r}=t,i=M(r,n)||{};if(o){const{layout:t,spacing:n,padding:r,rowConstraints:s}=o;if("rows"===t){const{singleRowMaxHeight:t}=s||{};if(t){const o=Math.floor(e.reduce(((n,{width:o,height:e})=>n+o/e*t-2*r),r*e.length*2+n*(e.length-1)));o>0&&(i.containerProps=i.containerProps||{},i.containerProps.style={maxWidth:o,...i.containerProps.style})}}}return i}(t,l,c);return e.createElement(ContainerRenderer,{layout:o,containerRef:a,renderContainer:r,containerProps:u.containerProps},c&&function(t,n,o){const{photos:r,layout:i,renderPhoto:s,renderRowContainer:a,renderColumnContainer:l}=t,c={photos:r,renderPhoto:s,componentsProps:n};return"rows"===i?e.createElement(RowsLayout,{layoutOptions:o,renderRowContainer:a,...c}):"columns"===i?e.createElement(ColumnsLayout,{layoutOptions:o,renderColumnContainer:l,...c}):e.createElement(MasonryLayout,{layoutOptions:o,renderColumnContainer:l,...c})}(t,u,c))}}}]); |