Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

magic-grid

Package Overview
Dependencies
Maintainers
1
Versions
37
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

magic-grid - npm Package Compare versions

Comparing version 3.1.0 to 3.1.1

test/grid-element.html

12

dist/magic-grid.cjs.js

@@ -14,2 +14,6 @@ 'use strict';

var checkParams = function (config) {
if (!config) {
throw new Error("No config object has been provided.");
}
if (!config.container) { error("container"); }

@@ -121,3 +125,4 @@ if (!config.items && !config.static) { error("items or static"); }

var width = this.container.getBoundingClientRect().width;
var numCols = Math.floor(width / this.colWidth()) || 1;
var colWidth = this.colWidth();
var numCols = Math.floor(width/colWidth) || 1;
var cols = [];

@@ -133,3 +138,3 @@

var wSpace = width - numCols * this.colWidth() + this.gutter;
var wSpace = width - numCols * colWidth + this.gutter;

@@ -166,2 +171,3 @@ return {cols: cols, wSpace: wSpace};

var maxHeight = 0;
var colWidth = this.colWidth();

@@ -172,3 +178,3 @@ wSpace = Math.floor(wSpace / 2);

var col = this.nextCol(cols, i);
var left = col.index * this.colWidth() + wSpace;
var left = col.index * colWidth + wSpace;
var item = this.items[i];

@@ -175,0 +181,0 @@ var topGutter = col.height ? this.gutter : 0;

12

dist/magic-grid.esm.js

@@ -12,2 +12,6 @@ /**

var checkParams = function (config) {
if (!config) {
throw new Error("No config object has been provided.");
}
if (!config.container) { error("container"); }

@@ -119,3 +123,4 @@ if (!config.items && !config.static) { error("items or static"); }

var width = this.container.getBoundingClientRect().width;
var numCols = Math.floor(width / this.colWidth()) || 1;
var colWidth = this.colWidth();
var numCols = Math.floor(width/colWidth) || 1;
var cols = [];

@@ -131,3 +136,3 @@

var wSpace = width - numCols * this.colWidth() + this.gutter;
var wSpace = width - numCols * colWidth + this.gutter;

@@ -164,2 +169,3 @@ return {cols: cols, wSpace: wSpace};

var maxHeight = 0;
var colWidth = this.colWidth();

@@ -170,3 +176,3 @@ wSpace = Math.floor(wSpace / 2);

var col = this.nextCol(cols, i);
var left = col.index * this.colWidth() + wSpace;
var left = col.index * colWidth + wSpace;
var item = this.items[i];

@@ -173,0 +179,0 @@ var topGutter = col.height ? this.gutter : 0;

2

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(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=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});
!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});

2

package.json
{
"name": "magic-grid",
"version": "3.1.0",
"version": "3.1.1",
"description": "Super lightweight javascript library for dynamic grid layouts.",

@@ -5,0 +5,0 @@ "main": "dist/magic-grid.cjs.js",

4

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 <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>.
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 implementation details <b>[on CodeBurst](https://codeburst.io/magic-grid-f8e2221e7cef)</b>.

@@ -114,3 +114,3 @@ **Note: Every item in the grid must have the same width**

gutter: 30, // Optional. Space between items. Default: 25(px).
maxColumns: 5, // Maximum number of colums. Default: Infinite.
maxColumns: 5, // Maximum number of columns. Default: Infinite.
useMin: true, // Append next element to the shortest column. Default: false.

@@ -117,0 +117,0 @@ animate: true, // Animate item positioning. Default: false.

8

src/index.js

@@ -86,3 +86,4 @@ /**

let width = this.container.getBoundingClientRect().width;
let numCols = Math.floor(width / this.colWidth()) || 1;
let colWidth = this.colWidth();
let numCols = Math.floor(width/colWidth) || 1;
let cols = [];

@@ -98,3 +99,3 @@

let wSpace = width - numCols * this.colWidth() + this.gutter;
let wSpace = width - numCols * colWidth + this.gutter;

@@ -129,2 +130,3 @@ return {cols, wSpace};

let maxHeight = 0;
let colWidth = this.colWidth();

@@ -135,3 +137,3 @@ wSpace = Math.floor(wSpace / 2);

let col = this.nextCol(cols, i);
let left = col.index * this.colWidth() + wSpace;
let left = col.index * colWidth + wSpace;
let item = this.items[i];

@@ -138,0 +140,0 @@ let topGutter = col.height ? this.gutter : 0;

4

src/utils.js

@@ -12,2 +12,6 @@ /**

const checkParams = config => {
if (!config) {
throw new Error("No config object has been provided.");
}
if (!config.container) error("container");

@@ -14,0 +18,0 @@ if (!config.items && !config.static) error("items or static");

test/grid-htmlelement.html
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc