9 lines
2.8 KiB
JavaScript
9 lines
2.8 KiB
JavaScript
/*!
|
|
App Connect Masonry
|
|
Version: 2.0.2
|
|
(c) 2024 Wappler.io
|
|
@build 2024-06-19 16:06:31
|
|
*/
|
|
dmx.Component("masonry",{extends:"repeat",attributes:{breakpoints:{type:Object,default:{}},columns:{type:Number,default:4},columnsSm:{type:Number,default:null},columnsMd:{type:Number,default:null},columnsLg:{type:Number,default:null},columnsXl:{type:Number,default:null},columnsXxl:{type:Number,default:null},gutter:{type:Number,default:15},gutterSm:{type:Number,default:null},gutterMd:{type:Number,default:null},gutterLg:{type:Number,default:null},gutterXl:{type:Number,default:null},gutterXxl:{type:Number,default:null},preserveOrder:{type:Boolean,default:!1},animated:{type:Boolean,default:!1},animationDuration:{type:Number,default:400}},methods:{reflow(){this._reflow()}},init(e){this._breakpoints={sm:480,md:768,lg:992,xl:1200,xxl:1400},this._reflow=dmx.debounce(this._reflow.bind(this)),this._resizeObserver=new ResizeObserver(this._reflow),this._resizeObserver.observe(e),window.addEventListener("resize",this._reflow),dmx.Component("repeat").prototype.init.call(this,e)},render(e){e.style.setProperty("position","relative"),this._reflow()},performUpdate(e){(e.has("repeat")||e.has("key"))&&dmx.Component("repeat").prototype.performUpdate.call(this,e),this._reflow()},destroy(){this._resizeObserver.disconnect(),window.removeEventListener("resize",this._reflow)},_reflow(e){if(e&&e.dmxMasonry)return;if(!this.children.length)return;this.$node.querySelectorAll("img").forEach((e=>{e.dmxMasonry||(e.addEventListener("load",this._reflow,{once:!0}),e.src&&(e.src=e.src),e.dmxMasonry=!0)}));let{breakpoints:t,columns:r,gutter:s}=this.props;t=Object.assign({},this._breakpoints,t),["sm","md","lg","xl","xxl"].forEach((e=>{if(window.innerWidth>=t[e]){const t=e[0].toUpperCase()+e.slice(1);r=this.props["columns"+t]||r,s=this.props["gutter"+t]||s}}));const o=Array.from(this.$node.children),n=window.getComputedStyle(this.$node),i=parseInt(n.paddingLeft)||0,l=parseInt(n.paddingRight)||0,a=Math.floor((this.$node.clientWidth-i-l-(r-1)*s)/r);for(const e of o)e.style.setProperty("box-sizing","border-box"),e.style.setProperty("width",a+"px");const p=new Event("resize");p.dmxMasonry=!0,window.dispatchEvent(p);const d=Array(r).fill(0),u=o.map((e=>e.clientHeight));o.forEach(((e,t)=>{const o=this.props.preserveOrder?t%r:d.indexOf(Math.min.apply(Math,d)),n=o*a+o*s,i=d[o];e.style.setProperty("transform",`translate3d(${n}px, ${i}px, 0px)`),u[t]&&(e.dmxMasonryInit||(e.style.setProperty("position","absolute"),this.props.animated&&e.style.setProperty("transition",`transform ${this.props.animationDuration}ms`),requestAnimationFrame((()=>e.style.setProperty("visibility","visible"))),e.dmxMasonryInit=!0,this._resizeObserver.observe(e)),d[o]+=u[t]+s)})),this.$node.style.setProperty("height",Math.max.apply(Math,d)-s+"px")}});
|
|
//# sourceMappingURL=dmxMasonry.js.map
|