Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
magic-grid
Advanced tools
magic-grid - npm Package Compare versions
Comparing version 3.1.3 to 3.1.5
@@ -98,3 +98,3 @@ 'use strict'; | ||
| if (this.animate) { | ||
| this.items[i].style.transition = "top,left 0.2s ease"; | ||
| this.items[i].style.transition = "transform 0.2s ease"; | ||
| } | ||
@@ -176,8 +176,8 @@ } | ||
| var col = this.nextCol(cols, i); | ||
| var left = col.index * colWidth + wSpace; | ||
| var item = this.items[i]; | ||
| var topGutter = col.height ? this.gutter : 0; | ||
| var left = col.index * colWidth + wSpace; | ||
| var top = col.height + topGutter; | ||
| item.style.left = left + "px"; | ||
| item.style.top = col.height + topGutter + "px"; | ||
| item.style.transform = "translate(" + left + "px, " + top + "px)"; | ||
@@ -202,6 +202,2 @@ col.height += item.getBoundingClientRect().height + topGutter; | ||
| if (this.static) { return true; } | ||
| this.container = document.querySelector(this.containerClass); | ||
| this.items = this.container.children; | ||
| return this.items.length >= this.size; | ||
@@ -222,2 +218,5 @@ }; | ||
| var interval = setInterval(function () { | ||
| this$1.container = document.querySelector(this$1.containerClass); | ||
| this$1.items = this$1.container.children; | ||
| if (this$1.ready()) { | ||
@@ -224,0 +223,0 @@ clearInterval(interval); |
@@ -96,3 +96,3 @@ /** | ||
| if (this.animate) { | ||
| this.items[i].style.transition = "top,left 0.2s ease"; | ||
| this.items[i].style.transition = "transform 0.2s ease"; | ||
| } | ||
@@ -174,8 +174,8 @@ } | ||
| var col = this.nextCol(cols, i); | ||
| var left = col.index * colWidth + wSpace; | ||
| var item = this.items[i]; | ||
| var topGutter = col.height ? this.gutter : 0; | ||
| var left = col.index * colWidth + wSpace; | ||
| var top = col.height + topGutter; | ||
| item.style.left = left + "px"; | ||
| item.style.top = col.height + topGutter + "px"; | ||
| item.style.transform = "translate(" + left + "px, " + top + "px)"; | ||
@@ -200,6 +200,2 @@ col.height += item.getBoundingClientRect().height + topGutter; | ||
| if (this.static) { return true; } | ||
| this.container = document.querySelector(this.containerClass); | ||
| this.items = this.container.children; | ||
| return this.items.length >= this.size; | ||
@@ -220,2 +216,5 @@ }; | ||
| var interval = setInterval(function () { | ||
| this$1.container = document.querySelector(this$1.containerClass); | ||
| this$1.items = this$1.container.children; | ||
| if (this$1.ready()) { | ||
@@ -222,0 +221,0 @@ clearInterval(interval); |
@@ -1,1 +0,1 @@ | ||
| !function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):t.MagicGrid=i()}(this,function(){"use strict";var t=function(t){if(!t)throw new Error("No config object has been provided.");t.container||i("container"),t.items||t.static||i("items or static")},i=function(t){throw new Error("Missing property '"+t+"' in MagicGrid config")},e=function(t){var i=t[0];for(var e of t)e.height<i.height&&(i=e);return i},n=function(i){t(i),i.container instanceof HTMLElement?(this.container=i.container,this.containerClass=i.container.className):(this.containerClass=i.container,this.container=document.querySelector(i.container)),this.items=this.container.children,this.static=i.static||!1,this.size=i.items,this.gutter=i.gutter||25,this.maxColumns=i.maxColumns||!1,this.useMin=i.useMin||!1,this.animate=i.animate||!1,this.started=!1,this.init()};return n.prototype.init=function(){if(this.ready()&&!this.started){this.container.style.position="relative";for(var t=0;t<this.items.length;t++)this.items[t].style.position="absolute",this.animate&&(this.items[t].style.transition="top,left 0.2s ease");this.started=!0}},n.prototype.colWidth=function(){return this.items[0].getBoundingClientRect().width+this.gutter},n.prototype.setup=function(){var t=this.container.getBoundingClientRect().width,i=this.colWidth(),e=Math.floor(t/i)||1,n=[];this.maxColumns&&e>this.maxColumns&&(e=this.maxColumns);for(var s=0;s<e;s++)n[s]={height:0,index:s};return{cols:n,wSpace:t-e*i+this.gutter}},n.prototype.nextCol=function(t,i){return this.useMin?e(t):t[i%t.length]},n.prototype.positionItems=function(){var t=this.setup(),i=t.cols,e=t.wSpace,n=0,s=this.colWidth();e=Math.floor(e/2);for(var o=0;o<this.items.length;o++){var r=this.nextCol(i,o),h=r.index*s+e,a=this.items[o],c=r.height?this.gutter:0;a.style.left=h+"px",a.style.top=r.height+c+"px",r.height+=a.getBoundingClientRect().height+c,r.height>n&&(n=r.height)}this.container.style.height=n+"px"},n.prototype.ready=function(){return!!this.static||(this.container=document.querySelector(this.containerClass),this.items=this.container.children,this.items.length>=this.size)},n.prototype.getReady=function(){var t=this,i=setInterval(function(){t.ready()&&(clearInterval(i),t.init(),t.listen())},100)},n.prototype.listen=function(){var t=this;if(this.ready()){var i;window.addEventListener("resize",function(){i||(i=setTimeout(function(){t.positionItems(),i=null},200))}),this.positionItems()}else this.getReady()},n}); | ||
| !function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):t.MagicGrid=i()}(this,function(){"use strict";var t=function(t){if(!t)throw new Error("No config object has been provided.");t.container||i("container"),t.items||t.static||i("items or static")},i=function(t){throw new Error("Missing property '"+t+"' in MagicGrid config")},e=function(t){var i=t[0];for(var e of t)e.height<i.height&&(i=e);return i},n=function(i){t(i),i.container instanceof HTMLElement?(this.container=i.container,this.containerClass=i.container.className):(this.containerClass=i.container,this.container=document.querySelector(i.container)),this.items=this.container.children,this.static=i.static||!1,this.size=i.items,this.gutter=i.gutter||25,this.maxColumns=i.maxColumns||!1,this.useMin=i.useMin||!1,this.animate=i.animate||!1,this.started=!1,this.init()};return n.prototype.init=function(){if(this.ready()&&!this.started){this.container.style.position="relative";for(var t=0;t<this.items.length;t++)this.items[t].style.position="absolute",this.animate&&(this.items[t].style.transition="transform 0.2s ease");this.started=!0}},n.prototype.colWidth=function(){return this.items[0].getBoundingClientRect().width+this.gutter},n.prototype.setup=function(){var t=this.container.getBoundingClientRect().width,i=this.colWidth(),e=Math.floor(t/i)||1,n=[];this.maxColumns&&e>this.maxColumns&&(e=this.maxColumns);for(var s=0;s<e;s++)n[s]={height:0,index:s};return{cols:n,wSpace:t-e*i+this.gutter}},n.prototype.nextCol=function(t,i){return this.useMin?e(t):t[i%t.length]},n.prototype.positionItems=function(){var t=this.setup(),i=t.cols,e=t.wSpace,n=0,s=this.colWidth();e=Math.floor(e/2);for(var o=0;o<this.items.length;o++){var r=this.nextCol(i,o),h=this.items[o],a=r.height?this.gutter:0,c=r.index*s+e,u=r.height+a;h.style.transform="translate("+c+"px, "+u+"px)",r.height+=h.getBoundingClientRect().height+a,r.height>n&&(n=r.height)}this.container.style.height=n+"px"},n.prototype.ready=function(){return!!this.static||this.items.length>=this.size},n.prototype.getReady=function(){var t=this,i=setInterval(function(){t.container=document.querySelector(t.containerClass),t.items=t.container.children,t.ready()&&(clearInterval(i),t.init(),t.listen())},100)},n.prototype.listen=function(){var t=this;if(this.ready()){var i;window.addEventListener("resize",function(){i||(i=setTimeout(function(){t.positionItems(),i=null},200))}),this.positionItems()}else this.getReady()},n}); |
| { | ||
| "name": "magic-grid", | ||
| "version": "3.1.3", | ||
| "version": "3.1.5", | ||
| "description": "Super lightweight javascript library for dynamic grid layouts.", | ||
@@ -5,0 +5,0 @@ "main": "dist/magic-grid.cjs.js", |
@@ -60,3 +60,3 @@ /** | ||
| if (this.animate) { | ||
| this.items[i].style.transition = "top,left 0.2s ease"; | ||
| this.items[i].style.transition = "transform 0.2s ease"; | ||
| } | ||
@@ -136,8 +136,8 @@ } | ||
| let col = this.nextCol(cols, i); | ||
| let left = col.index * colWidth + wSpace; | ||
| let item = this.items[i]; | ||
| let topGutter = col.height ? this.gutter : 0; | ||
| let left = col.index * colWidth + wSpace; | ||
| let top = col.height + topGutter; | ||
| item.style.left = left + "px"; | ||
| item.style.top = col.height + topGutter + "px"; | ||
| item.style.transform = `translate(${left}px, ${top}px)`; | ||
@@ -162,6 +162,2 @@ col.height += item.getBoundingClientRect().height + topGutter; | ||
| if (this.static) return true; | ||
| this.container = document.querySelector(this.containerClass); | ||
| this.items = this.container.children; | ||
| return this.items.length >= this.size; | ||
@@ -180,2 +176,5 @@ } | ||
| let interval = setInterval(() => { | ||
| this.container = document.querySelector(this.containerClass); | ||
| this.items = this.container.children; | ||
| if (this.ready()) { | ||
@@ -182,0 +181,0 @@ clearInterval(interval); |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.26%
32734
No dependency changes