mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
1 line
4.5 KiB
JavaScript
1 line
4.5 KiB
JavaScript
(()=>(t,e)=>{const i=function(t){const e=25;if(!t){throw new Error("No config object has been provided.")}if(typeof t.useTransform!=="boolean"){t.useTransform=true}if(typeof t.gutter!=="number"){t.gutter=e}if(!t.container){s("container")}if(!t.items&&!t.static){s("items or static")}};const s=function(t){throw new Error("Missing property '"+t+"' in MagicGrid config")};const n=function(t){let e=t[0];for(const i of t){if(i.height<e.height){e=i}}return e};class o{constructor(t){i(t);if(t.container instanceof HTMLElement){this.container=t.container;this.containerClass=t.container.className}else{this.containerClass=t.container;this.container=document.querySelector(t.container)}this.items=this.container.children;this.static=t.static||false;this.size=t.items;this.gutter=t.gutter;this.maxColumns=t.maxColumns||false;this.useMin=t.useMin||false;this.useTransform=t.useTransform;this.animate=t.animate||false;this.started=false;this.init()}init(){if(!this.ready()||this.started){return}this.container.style.position="relative";for(let t=0;t<this.items.length;t++){const e=this.items[t].style;e.position="absolute";if(this.animate){e.transition=(this.useTransform?"transform":"top, left")+" 0.2s ease"}}this.started=true}colWidth(){return this.items[0].getBoundingClientRect().width+this.gutter}setup(){const t=this.container.getBoundingClientRect().width;const e=this.colWidth();let i=Math.floor(t/e)||1;const s=[];if(this.maxColumns&&i>this.maxColumns){i=this.maxColumns}for(let t=0;t<i;t++){s[t]={height:0,index:t}}const n=t-i*e+this.gutter;return{cols:s,wSpace:n}}nextCol(t,e){if(this.useMin){return n(t)}return t[e%t.length]}positionItems(){const t=this.setup();const e=t.cols;let i=t.wSpace;let s=0;const n=this.colWidth();i=Math.floor(i/2);for(let t=0;t<this.items.length;t++){const o=this.nextCol(e,t);const h=this.items[t];const r=o.height?this.gutter:0;const a=o.index*n+i+"px";const l=o.height+r+"px";if(this.useTransform){h.style.transform="translate("+a+", "+l+")"}else{h.style.top=l;h.style.left=a}o.height+=h.getBoundingClientRect().height+r;if(o.height>s){s=o.height}}this.container.style.height=s+"px"}ready(){if(this.static){return true}return this.items.length>=this.size}getReady(){const t=setInterval((()=>{this.container=document.querySelector(this.containerClass);this.items=this.container.children;if(this.ready()){clearInterval(t);this.init();this.listen()}}),100)}listen(){if(this.ready()){let t;window.addEventListener("resize",(()=>{if(!t){t=setTimeout((()=>{this.positionItems();t=null}),200)}}));this.positionItems()}else{this.getReady()}}}const h={template:`\n<div :class="[wrapper]">\n<slot></slot>\n</div>\n`,name:"magic-grid",props:{wrapper:{type:String,default:"wrapper"},gap:{type:Number,default:32},maxCols:{type:Number,default:5},maxColWidth:{type:Number,default:280},animate:{type:Boolean,default:true},useMin:{type:Boolean,default:false}},data(){return{started:false,items:[]}},mounted(){this.waitUntilReady()},updated(){this.positionItems()},methods:{waitUntilReady(){if(this.isReady()){this.positionItems()}else this.getReady()},isReady(){return this.$el&&this.items.length>0},getReady(){let t=setInterval((()=>{this.items=this.$el.children;if(this.isReady()){clearInterval(t);this.init()}}),100)},init(){if(!this.isReady()||this.started)return;this.$el.style.position="relative";Array.prototype.forEach.call(this.items,(t=>{t.style.position="absolute";t.style.maxWidth=this.maxColWidth+"px";if(this.animate)t.style.transition="top, left 0.2s ease"}));this.started=true;this.waitUntilReady()},colWidth(){return this.items[0].getBoundingClientRect().width+this.gap},setup(){let t=this.$el.getBoundingClientRect().width;let e=Math.floor(t/this.colWidth())||1;let i=[];if(this.maxCols&&e>this.maxCols){e=this.maxCols}for(let t=0;t<e;t++){i[t]={height:0,top:0,index:t}}let s=t-e*this.colWidth()+this.gap;return{cols:i,wSpace:s}},nextCol(t,e){if(this.useMin)return this.getMin(t);return t[e%t.length]},positionItems(){let{cols:t,wSpace:e}=this.setup();e=Math.floor(e/2);Array.prototype.forEach.call(this.items,((i,s)=>{i.style.position="absolute";i.style.maxWidth=this.maxColWidth+"px";if(this.animate)i.style.transition="top, left 0.2s ease";let n=this.nextCol(t,s);let o=n.index*this.colWidth()+e;i.style.left=o+"px";i.style.top=n.height+n.top+"px";n.height+=n.top+i.getBoundingClientRect().height;n.top=this.gap}));this.$el.style.height=this.getMax(t).height+"px"},getMax(t){let e=t[0];for(let i of t){if(i.height>e.height)e=i}return e},getMin(t){let e=t[0];for(let i of t){if(i.height<e.height)e=i}return e}}};return{export:{MagicGrid:o,MagicGridComponent:h}}})(); |