Merge pull request #18 from e-oj/master

update

Author: e-oj

README.md

@@ -12,8 +12,6 @@ Creating a dynamic grid layout has never been easier. With Magic Grid, all you h
 
 <img src="http://drive.google.com/uc?export=view&id=172ESPZDwQIf7vLMelun-_4RaWD_-j94-" alt="demo" width="850"></img>
 
-#### [@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>:
@@ -24,6 +22,13 @@ Check out <b>[CSS Grid AMA's issue #19](https://github.com/rachelandrew/cssgrid-
 
 > 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.
 
+### Ports
+
+| Repo | Author |
+|:--------|:-------|
+| [Vue-Magic-Grid](https://github.com/imlinus/Vue-Magic-Grid) | [@imlinus](https://github.com/imlinus) |
+| [Magic-Grid-React](https://github.com/IniZio/Magic-Grid-React) | [@IniZio](https://github.com/IniZio) |
+
 ### Getting Started
 #### Step 1
 
@@ -109,9 +114,10 @@ let magicGrid = new MagicGrid({
   static: false, // Required for static content. Default: false.
   items: 30, // Required for dynamic content. Initial number of items in the container.
   gutter: 30, // Optional. Space between items. Default: 25(px).
-  maxColumns: 5, // Maximum number of columns. Default: Infinite.
-  useMin: true, // Prioritize shorter columns when placing items in the grid. Default: false.
-  animate: true, // Animate item positioning. Default: false.
+  maxColumns: 5, // Optional. Maximum number of columns. Default: Infinite.
+  useMin: true, // Optional. Prioritize shorter columns when positioning items. Default: false.
+  useTransform: true // Optional. Position items using CSS transform. Default: True.
+  animate: true, // Optional. Animate item positioning. Default: false.
 });
 ```
 

dist/magic-grid.cjs.js

@@ -15,6 +15,10 @@ var checkParams = function (config) {
     throw new Error("No config object has been provided.");
   }
 
+  if(typeof config.useTransform !== "boolean"){
+    config.useTransform = true;
+  }
+
   if (!config.container) { error("container"); }
   if (!config.items && !config.static) { error("items or static"); }
 };
@@ -75,6 +79,7 @@ var MagicGrid = function MagicGrid (config) {
   this.gutter = config.gutter || 25;
   this.maxColumns = config.maxColumns || false;
   this.useMin = config.useMin || false;
+  this.useTransform = config.useTransform;
   this.animate = config.animate || false;
   this.started = false;
 
@@ -92,10 +97,12 @@ MagicGrid.prototype.init = function init () {
   this.container.style.position = "relative";
 
   for (var i = 0; i < this.items.length; i++) {
-    this.items[i].style.position = "absolute";
+    var style = this.items[i].style;
+
+    style.position = "absolute";
 
     if (this.animate) {
-      this.items[i].style.transition = "transform 0.2s ease";
+      style.transition = (this.useTransform ? "transform" : "top, left") + " 0.2s ease";
     }
   }
 
@@ -174,10 +181,16 @@ MagicGrid.prototype.positionItems = function positionItems () {
     var col = this.nextCol(cols, i);
     var item = this.items[i];
     var topGutter = col.height ? this.gutter : 0;
-    var left = col.index * colWidth + wSpace;
-    var top = col.height + topGutter;
+    var left = col.index * colWidth + wSpace + "px";
+    var top = col.height + topGutter + "px";
 
-    item.style.transform = "translate(" + left + "px, " + top + "px)";
+    if(this.useTransform){
+      item.style.transform = "translate(" + left + ", " + top + ")";
+    }
+    else{
+      item.style.top = top;
+      item.style.left = left;
+    }
 
     col.height += item.getBoundingClientRect().height + topGutter;
 

dist/magic-grid.esm.js

@@ -13,6 +13,10 @@ var checkParams = function (config) {
     throw new Error("No config object has been provided.");
   }
 
+  if(typeof config.useTransform !== "boolean"){
+    config.useTransform = true;
+  }
+
   if (!config.container) { error("container"); }
   if (!config.items && !config.static) { error("items or static"); }
 };
@@ -73,6 +77,7 @@ var MagicGrid = function MagicGrid (config) {
   this.gutter = config.gutter || 25;
   this.maxColumns = config.maxColumns || false;
   this.useMin = config.useMin || false;
+  this.useTransform = config.useTransform;
   this.animate = config.animate || false;
   this.started = false;
 
@@ -90,10 +95,12 @@ MagicGrid.prototype.init = function init () {
   this.container.style.position = "relative";
 
   for (var i = 0; i < this.items.length; i++) {
-    this.items[i].style.position = "absolute";
+    var style = this.items[i].style;
+
+    style.position = "absolute";
 
     if (this.animate) {
-      this.items[i].style.transition = "transform 0.2s ease";
+      style.transition = (this.useTransform ? "transform" : "top, left") + " 0.2s ease";
     }
   }
 
@@ -172,10 +179,16 @@ MagicGrid.prototype.positionItems = function positionItems () {
     var col = this.nextCol(cols, i);
     var item = this.items[i];
     var topGutter = col.height ? this.gutter : 0;
-    var left = col.index * colWidth + wSpace;
-    var top = col.height + topGutter;
+    var left = col.index * colWidth + wSpace + "px";
+    var top = col.height + topGutter + "px";
 
-    item.style.transform = "translate(" + left + "px, " + top + "px)";
+    if(this.useTransform){
+      item.style.transform = "translate(" + left + ", " + top + ")";
+    }
+    else{
+      item.style.top = top;
+      item.style.left = left;
+    }
 
     col.height += item.getBoundingClientRect().height + topGutter;
 

dist/magic-grid.min.js

@@ -1,6 +1,6 @@
 {
   "name": "magic-grid",
-  "version": "3.1.5",
+  "version": "3.2.0",
   "description": "Super lightweight javascript library for dynamic grid layouts.",
   "main": "dist/magic-grid.cjs.js",
   "module": "dist/magic-grid.esm.js",

package-lock.json

@@ -37,6 +37,7 @@ class MagicGrid {
     this.gutter = config.gutter || 25;
     this.maxColumns = config.maxColumns || false;
     this.useMin = config.useMin || false;
+    this.useTransform = config.useTransform;
     this.animate = config.animate || false;
     this.started = false;
 
@@ -54,10 +55,12 @@ class MagicGrid {
     this.container.style.position = "relative";
 
     for (let i = 0; i < this.items.length; i++) {
-      this.items[i].style.position = "absolute";
+      let style = this.items[i].style;
+
+      style.position = "absolute";
 
       if (this.animate) {
-        this.items[i].style.transition = "transform 0.2s ease";
+        style.transition = `${this.useTransform ? "transform" : "top, left"} 0.2s ease`;
       }
     }
 
@@ -134,10 +137,16 @@ class MagicGrid {
       let col = this.nextCol(cols, i);
       let item = this.items[i];
       let topGutter = col.height ? this.gutter : 0;
-      let left = col.index * colWidth + wSpace;
-      let top = col.height + topGutter;
+      let left = col.index * colWidth + wSpace + "px";
+      let top = col.height + topGutter + "px";
 
-      item.style.transform = `translate(${left}px, ${top}px)`;
+      if(this.useTransform){
+        item.style.transform = `translate(${left}, ${top})`;
+      }
+      else{
+        item.style.top = top;
+        item.style.left = left;
+      }
 
       col.height += item.getBoundingClientRect().height + topGutter;
 

package.json

@@ -13,6 +13,10 @@ const checkParams = config => {
     throw new Error("No config object has been provided.");
   }
 
+  if(typeof config.useTransform !== "boolean"){
+    config.useTransform = true;
+  }
+
   if (!config.container) error("container");
   if (!config.items && !config.static) error("items or static");
 };