magic-grid - npm Package Compare versions

Comparing version 3.0.9 to 3.0.10

dist/magic-grid.cjs.js

@@ -19,31 +19,19 @@ 'use strict';
 
-var error = function (prop) {
-  throw new Error(("Missing property '" + prop + "' in MagicGrid config"));
-};
-
 /**
- * Finds the longest column in
- * a column list
+ * Handles invalid configuration object
+ * errors.
  *
- * @param cols - list of columns
- *
- * @return longest column
+ * @param prop - a property with a missing value
  */
-var getMax = function (cols) {
-  var max = cols[0];
-
-  for (var col of cols) {
-    if (col.height > max.height) { max = col; }
-  }
-
-  return max;
+var error = function (prop) {
+  throw new Error(("Missing property '" + prop + "' in MagicGrid config"));
 };
 
 /**
- * Finds the longest column in
- * a column list
+ * Finds the shortest column in
+ * a column list.
  *
  * @param cols - list of columns
  *
- * @return longest column
+ * @return shortest column
  */
@@ -95,2 +83,3 @@ var getMin = function (cols) {
   this.container.style.position = "relative";
+
   for (var i = 0; i < this.items.length; i++) {
@@ -168,2 +157,3 @@ this.items[i].style.position = "absolute";
     var wSpace = ref.wSpace;
+  var maxHeight = 0;
 
@@ -182,5 +172,9 @@ wSpace = Math.floor(wSpace / 2);
     col.height += item.getBoundingClientRect().height + topGutter;
+
+    if(col.height > maxHeight){
+      maxHeight = col.height;
+    }
   }
 
-  this.container.style.height = getMax(cols).height + "px";
+  this.container.style.height = maxHeight + "px";
 };
@@ -232,10 +226,18 @@
   if (this.ready()) {
-    this.positionItems();
+    var timeout;
 
     window.addEventListener("resize", function () {
-      setTimeout(this$1.positionItems(), 200);
+      if (!timeout){
+        timeout = setTimeout(function () {
+          this$1.positionItems();
+          timeout = null;
+        }, 200);
+      }
     });
-  } else { this.getReady(); }
+
+    this.positionItems();
+  }
+  else { this.getReady(); }
 };
 
 module.exports = MagicGrid;

dist/magic-grid.esm.js

@@ -17,31 +17,19 @@ /**
 
-var error = function (prop) {
-  throw new Error(("Missing property '" + prop + "' in MagicGrid config"));
-};
-
 /**
- * Finds the longest column in
- * a column list
+ * Handles invalid configuration object
+ * errors.
  *
- * @param cols - list of columns
- *
- * @return longest column
+ * @param prop - a property with a missing value
  */
-var getMax = function (cols) {
-  var max = cols[0];
-
-  for (var col of cols) {
-    if (col.height > max.height) { max = col; }
-  }
-
-  return max;
+var error = function (prop) {
+  throw new Error(("Missing property '" + prop + "' in MagicGrid config"));
 };
 
 /**
- * Finds the longest column in
- * a column list
+ * Finds the shortest column in
+ * a column list.
  *
  * @param cols - list of columns
  *
- * @return longest column
+ * @return shortest column
  */
@@ -93,2 +81,3 @@ var getMin = function (cols) {
   this.container.style.position = "relative";
+
   for (var i = 0; i < this.items.length; i++) {
@@ -166,2 +155,3 @@ this.items[i].style.position = "absolute";
     var wSpace = ref.wSpace;
+  var maxHeight = 0;
 
@@ -180,5 +170,9 @@ wSpace = Math.floor(wSpace / 2);
     col.height += item.getBoundingClientRect().height + topGutter;
+
+    if(col.height > maxHeight){
+      maxHeight = col.height;
+    }
   }
 
-  this.container.style.height = getMax(cols).height + "px";
+  this.container.style.height = maxHeight + "px";
 };
@@ -230,10 +224,18 @@
   if (this.ready()) {
-    this.positionItems();
+    var timeout;
 
     window.addEventListener("resize", function () {
-      setTimeout(this$1.positionItems(), 200);
+      if (!timeout){
+        timeout = setTimeout(function () {
+          this$1.positionItems();
+          timeout = null;
+        }, 200);
+      }
     });
-  } else { this.getReady(); }
+
+    this.positionItems();
+  }
+  else { this.getReady(); }
 };
 
 export default MagicGrid;

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){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(t){var i=t[0];for(var e of t)e.height<i.height&&(i=e);return i},s=function(i){t(i),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 s.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}},s.prototype.colWidth=function(){return this.items[0].getBoundingClientRect().width+this.gutter},s.prototype.setup=function(){var t=this.container.getBoundingClientRect().width,i=Math.floor(t/this.colWidth())||1,e=[];this.maxColumns&&i>this.maxColumns&&(i=this.maxColumns);for(var n=0;n<i;n++)e[n]={height:0,index:n};return{cols:e,wSpace:t-i*this.colWidth()+this.gutter}},s.prototype.nextCol=function(t,i){return this.useMin?n(t):t[i%t.length]},s.prototype.positionItems=function(){var t=this.setup(),i=t.cols,n=t.wSpace;n=Math.floor(n/2);for(var s=0;s<this.items.length;s++){var o=this.nextCol(i,s),r=o.index*this.colWidth()+n,h=this.items[s],a=o.height?this.gutter:0;h.style.left=r+"px",h.style.top=o.height+a+"px",o.height+=h.getBoundingClientRect().height+a}this.container.style.height=e(i).height+"px"},s.prototype.ready=function(){return!!this.static||this.items.length>=this.size},s.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)},s.prototype.listen=function(){var t=this;this.ready()?(this.positionItems(),window.addEventListener("resize",function(){setTimeout(t.positionItems(),200)})):this.getReady()},s});
+!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){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),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=Math.floor(t/this.colWidth())||1,e=[];this.maxColumns&&i>this.maxColumns&&(i=this.maxColumns);for(var n=0;n<i;n++)e[n]={height:0,index:n};return{cols:e,wSpace:t-i*this.colWidth()+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;e=Math.floor(e/2);for(var s=0;s<this.items.length;s++){var o=this.nextCol(i,s),r=o.index*this.colWidth()+e,h=this.items[s],a=o.height?this.gutter:0;h.style.left=r+"px",h.style.top=o.height+a+"px",o.height+=h.getBoundingClientRect().height+a,o.height>n&&(n=o.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});

package.json

 {
   "name": "magic-grid",
-  "version": "3.0.9",
+  "version": "3.0.10",
   "description": "Super lightweight javascript library for dynamic grid layouts.",
@@ -34,5 +34,4 @@ "main": "dist/magic-grid.cjs.js",
     "rollup-plugin-node-resolve": "^3.4.0",
-    "rollup-plugin-uglify": "^6.0.0",
     "rollup-plugin-uglify-es": "0.0.1"
   }
 }

README.md

@@ -7,3 +7,3 @@ [![MIT License](https://img.shields.io/npm/l/magic-grid.svg?style=for-the-badge)](https://www.npmjs.com/package/magic-grid)
 
-Creating a dynamic grid layout has never been easier. With Magic Grid, all you have to do is specify a container and listen for changes. A few other configuration options are available for convenience but it's all very simple. Check it out live [on JSFIDDLE](https://jsfiddle.net/eolaojo/4pov0rdf/). You can read about the implementaion details [on Codeburst](https://codeburst.io/magic-grid-f8e2221e7cef).
+Creating a dynamic grid layout has never been easier. With Magic Grid, all you have to do is specify a container and listen for changes. A few other configuration options are available for convenience but it's all very simple. Check it out live <b>[on JSFIDDLE](https://jsfiddle.net/eolaojo/4pov0rdf/)</b>. You can read about the implementaion details <b>[on CodeBurst](https://codeburst.io/magic-grid-f8e2221e7cef)</b>.
 
@@ -16,4 +16,14 @@ **Note: Every item in the grid must have the same width**
 
-#### @imlinus has created a Vue.js port of the library. You can check it out [here](https://github.com/imlinus/Vue-Magic-Grid).
+#### [@imlinus](https://github.com/imlinus) has created a Vue.js port of the library. You can check it out [here](https://github.com/imlinus/Vue-Magic-Grid).
 
+### Why not CSS Grid?
+
+This question is addressed in <b>[the article](https://codeburst.io/magic-grid-f8e2221e7cef)</b>:
+
+> Implementing a grid layout can quickly turn into a tricky task. If you have grid items that are always the same height, then you can probably make do with a Flexbox grid or some other CSS grid implementation. However, if you’re dealing with user-generated content, chances are, you don’t have the luxury of equal height components. One longer or shorter component would either stretch the other components in its row, or leave some unpleasant whitespace at the bottom of the row. All of a sudden, our beloved CSS grid has become insufficient.
+
+Check out <b>[CSS Grid AMA's issue #19](https://github.com/rachelandrew/cssgrid-ama/issues/19)</b> for a response from CSS expert <b>[@rachelandrew](https://github.com/rachelandrew)</b>:
+
+> That's not something grid is designed for. Grid is two dimensional so you are always working in both rows and columns at the same time. You can't use grid to do a "masonry" style layout like that. You could place items in that way if you had a lot of rows and managed how many each spanned, but you can't use auto-placement to get that kind of layout.
+
 ### Getting Started
@@ -128,3 +138,3 @@ #### Step 1
 #### .positionItems()
-This function is useful in cases where you have to manually trigger a repositioning; for instance, if a new element is added to the container
+This function is useful in cases where you have to manually trigger a repositioning; for instance, if a new element is added to the container.
 
@@ -131,0 +141,0 @@ ```javascript

src/index.js

@@ -11,3 +11,2 @@ /**
 import {
-  getMax,
   checkParams,
@@ -50,2 +49,3 @@ getMin
     this.container.style.position = "relative";
+
     for (let i = 0; i < this.items.length; i++) {
@@ -121,2 +121,3 @@ this.items[i].style.position = "absolute";
     let { cols, wSpace } = this.setup();
+    let maxHeight = 0;
 
@@ -135,5 +136,9 @@ wSpace = Math.floor(wSpace / 2);
       col.height += item.getBoundingClientRect().height + topGutter;
+
+      if(col.height > maxHeight){
+        maxHeight = col.height;
+      }
     }
 
-    this.container.style.height = getMax(cols).height + "px";
+    this.container.style.height = maxHeight + "px";
   }
@@ -181,8 +186,16 @@
     if (this.ready()) {
-      this.positionItems();
+      let timeout;
 
       window.addEventListener("resize", () => {
-        setTimeout(this.positionItems(), 200);
+        if (!timeout){
+          timeout = setTimeout(() => {
+            this.positionItems();
+            timeout = null;
+          }, 200);
+        }
       });
-    } else this.getReady();
+
+      this.positionItems();
+    }
+    else this.getReady();
   }
@@ -189,0 +202,0 @@ }

src/utils.js

@@ -17,31 +17,19 @@ /**
 
-const error = prop => {
-  throw new Error(`Missing property '${prop}' in MagicGrid config`);
-};
-
 /**
- * Finds the longest column in
- * a column list
+ * Handles invalid configuration object
+ * errors.
  *
- * @param cols - list of columns
- *
- * @return longest column
+ * @param prop - a property with a missing value
  */
-const getMax = cols => {
-  let max = cols[0];
-
-  for (let col of cols) {
-    if (col.height > max.height) max = col;
-  }
-
-  return max;
+const error = prop => {
+  throw new Error(`Missing property '${prop}' in MagicGrid config`);
 };
 
 /**
- * Finds the longest column in
- * a column list
+ * Finds the shortest column in
+ * a column list.
  *
  * @param cols - list of columns
  *
- * @return longest column
+ * @return shortest column
  */
@@ -58,2 +46,2 @@ const getMin = cols => {
 
-export {checkParams, getMax, getMin};
+export {checkParams, getMin};

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

Improved metrics

Total package byte prevSize

28794

increased by13.91%

Dev dependency count

5

decreased by-16.67%

Number of package files

11

increased by10%

Lines of code

782

increased by16.72%

Number of lines in readme file

155

increased by6.9%

No dependency changes