magic-grid - npm Package Compare versions

Comparing version 3.1.2 to 3.1.3

dist/magic-grid.cjs.js

@@ -200,2 +200,6 @@ 'use strict';
   if (this.static) { return true; }
+
+  this.container = document.querySelector(this.containerClass);
+  this.items = this.container.children;
+
   return this.items.length >= this.size;
@@ -216,5 +220,2 @@ };
   var interval = setInterval(function () {
-    this$1.container = document.querySelector(this$1.containerClass);
-    this$1.items = this$1.container.children;
-
     if (this$1.ready()) {
@@ -221,0 +222,0 @@ clearInterval(interval);

dist/magic-grid.esm.js

@@ -198,2 +198,6 @@ /**
   if (this.static) { return true; }
+
+  this.container = document.querySelector(this.containerClass);
+  this.items = this.container.children;
+
   return this.items.length >= this.size;
@@ -214,5 +218,2 @@ };
   var interval = setInterval(function () {
-    this$1.container = document.querySelector(this$1.containerClass);
-    this$1.items = this$1.container.children;
-
     if (this$1.ready()) {
@@ -219,0 +220,0 @@ clearInterval(interval);

dist/magic-grid.min.js

@@ -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.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});
+!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});

package.json

 {
   "name": "magic-grid",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "description": "Super lightweight javascript library for dynamic grid layouts.",
@@ -5,0 +5,0 @@ "main": "dist/magic-grid.cjs.js",

README.md

@@ -30,3 +30,3 @@ [![MIT License](https://img.shields.io/npm/l/magic-grid.svg?style=for-the-badge)](https://www.npmjs.com/package/magic-grid)
 
-Get Magic Grid:
+Get Magic Grid via NPM:
 
@@ -37,4 +37,12 @@ ```
 
-#### Step 2
+Or CDN
+```html
+<script src="https://unpkg.com/magic-grid/dist/magic-grid.cjs.js"></script>
 
+<!-- or (minified) -->
+<script src="https://unpkg.com/magic-grid/dist/magic-grid.min.js"></script>
+```
+
+#### Step 2 (skip if using CDN)
+
 Import Magic Grid:
@@ -52,12 +60,3 @@
 
-CDN
 ```html
-<script src="https://unpkg.com/magic-grid/dist/magic-grid.cjs.js"></script>
-
-<!-- or (minified) -->
-<script src="https://unpkg.com/magic-grid/dist/magic-grid.min.js"></script>
-```
-
-NPM 
-```html
 <script src="node_modules/magic-grid/dist/magic-grid.cjs.js"></script>
@@ -84,3 +83,3 @@
 let magicGrid = new MagicGrid({
-  container: "#container", // Required. Can be class, id selector or HTMLElement.
+  container: "#container", // Required. Can be a class, id, or an HTMLElement.
   static: true, // Required for static content.
@@ -97,3 +96,3 @@ animate: true, // Optional.
 let magicGrid = new MagicGrid({
-  container: "#container", // Required. Can be class, id selector or HTMLElement.
+  container: "#container", // Required. Can be a class, id, or an HTMLElement.
   items: 20, // For a grid with 20 items. Required for dynamic content.
@@ -114,3 +113,3 @@ animate: true, // Optional.
 let magicGrid = new MagicGrid({
-  container: "#container", // Required. Can be class or id of the container or HTMLElement.
+  container: "#container", // Required. Can be a class, id, or an HTMLElement
   static: false, // Required for static content. Default: false.
@@ -131,3 +130,3 @@ items: 30, // Required for dynamic content. Initial number of items in the container.
 let magicGrid = new MagicGrid({
-  container: "#container", // Required. Can be class, id selector or HTMLElement.
+  container: "#container", // Required. Can be a class, id, or an HTMLElement
   static: true, // Required for static content.
@@ -147,3 +146,3 @@ animate: true, // Optional.
 let magicGrid = new MagicGrid({
-  container: "#container", // Required. Can be class, id selector or HTMLElement
+  container: "#container", // Required. Can be a class, id, or an HTMLElement
   items: 30, // Required for dynamic content.
@@ -150,0 +149,0 @@ animate: true, // Optional

src/index.js

@@ -160,2 +160,6 @@ /**
     if (this.static) return true;
+
+    this.container = document.querySelector(this.containerClass);
+    this.items = this.container.children;
+
     return this.items.length >= this.size;
@@ -174,5 +178,2 @@ }
     let interval = setInterval(() => {
-      this.container = document.querySelector(this.containerClass);
-      this.items = this.container.children;
-
       if (this.ready()) {
@@ -179,0 +180,0 @@ clearInterval(interval);

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

32650

decreased by-0.04%

Number of lines in readme file

154

decreased by-0.65%

No dependency changes