Permalink
Browse files

refactored.

  • Loading branch information...
e-oj committed Nov 14, 2018
1 parent df040ac commit c112d18bb14fcfda8040e84392267b33685cb766
Showing with 191 additions and 179 deletions.
  1. +34 −0 .eslintrc.js
  2. +4 −4 README.md
  3. +30 −38 dist/magic-grid.cjs.js
  4. +30 −38 dist/magic-grid.esm.js
  5. +1 −1 dist/magic-grid.umd.js
  6. +1 −1 package.json
  7. +18 −16 rollup.config.js
  8. +58 −66 src/index.js
  9. +14 −14 src/utils.js
  10. +1 −1 test/grid.html
@@ -0,0 +1,34 @@
module.exports = {
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": [
"eslint:recommended",
],
"parserOptions": {
"ecmaVersion": 8,
"sourceType": "module"
},
"rules": {
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"double",
{"allowTemplateLiterals": true}
],
"semi": [
"error",
"always"
],
"no-console": 0
}
};
@@ -32,7 +32,7 @@ Import Magic Grid:
or (minified)
```html
<script src="node_modules/magic-grid/dist/magic-grid.umd.js">
<script src="node_modules/magic-grid/dist/magic-grid.min.js">
```
or
@@ -90,7 +90,7 @@ let magicGrid = new MagicGrid({
gutter: 30, // Optional. Space between items. Default: 25(px)
maxColumns: 5, // Maximum number of colums. Default: Infinite
useMin: true, // Append next element to the shortest column. Default: false.
animate: true, // Animate item positioning. Default: false.
animate: true, items
});
```
@@ -122,8 +122,8 @@ let magicGrid = new MagicGrid({
magicGrid.listen();
// get new item from api
// append item to dom
items
items
// reposition
magicGrid.positionItems();
@@ -11,13 +11,13 @@
* @param config - configuration object
*/
var checkParams = function (config) {
if (!config.container) { error('container'); }
if (!config.items && !config.static) { error('items or static'); }
if (!config.container) { error("container"); }
if (!config.items && !config.static) { error("items or static"); }
};


var error = function (prop) {
throw new Error(("Missing property '" + prop + "' in MagicGrid config"))
throw new Error(("Missing property '" + prop + "' in MagicGrid config"));
};

/**
@@ -35,7 +35,7 @@ var getMax = function (cols) {
if (col.height > max.height) { max = col; }
}

return max
return max;
};

/**
@@ -53,7 +53,7 @@ var getMin = function (cols) {
if (col.height < min.height) { min = col; }
}

return min
return min;
};

/**
@@ -70,7 +70,7 @@ var MagicGrid = function MagicGrid (config) {

this.containerClass = config.container;
this.container = document.querySelector(config.container);
this.item = this.container.children;
this.items = this.container.children;
this.static = config.static || false;
this.size = config.items;
this.gutter = config.gutter || 25;
@@ -88,14 +88,14 @@ var MagicGrid = function MagicGrid (config) {
* @private
*/
MagicGrid.prototype.init = function init () {
if (!this.ready() || this.started) { return }
if (!this.ready() || this.started) { return; }

this.container.style.position = 'relative';
for (var i = 0; i < this.item.length; i++) {
this.item[i].style.position = 'absolute';
this.container.style.position = "relative";
for (var i = 0; i < this.items.length; i++) {
this.items[i].style.position = "absolute";

if (this.animate) {
this.item[i].style.transition = 'top,left 0.2s ease';
this.items[i].style.transition = "top,left 0.2s ease";
}
}

@@ -109,7 +109,7 @@ MagicGrid.prototype.init = function init () {
* @private
*/
MagicGrid.prototype.colWidth = function colWidth () {
return this.item[0].getBoundingClientRect().width + this.gutter
return this.items[0].getBoundingClientRect().width + this.gutter;
};

/**
@@ -129,19 +129,12 @@ MagicGrid.prototype.setup = function setup () {
}

for (var i = 0; i < numCols; i++) {
cols[i] = {
height: 0,
top: 0,
index: i
};
cols[i] = {height: 0, index: i};
}

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

return {
cols: cols,
wSpace: wSpace
}
return {cols: cols, wSpace: wSpace};
};

/**
@@ -155,14 +148,14 @@ MagicGrid.prototype.setup = function setup () {
*/
MagicGrid.prototype.nextCol = function nextCol (cols, i) {
if (this.useMin) {
return getMin(cols)
return getMin(cols);
}

return cols[i % cols.length]
return cols[i % cols.length];
};

/**
* Position each item in the container
* Position each items in the container
* based on their corresponding columns
* values.
*/
@@ -173,30 +166,29 @@ MagicGrid.prototype.positionItems = function positionItems () {

wSpace = Math.floor(wSpace / 2);

for (var i = 0; i < this.item.length; i++) {
var min = this.nextCol(cols, i);
var left = min.index * this.colWidth() + wSpace;
var item = this.item[i];
for (var i = 0; i < this.items.length; i++) {
var col = this.nextCol(cols, i);
var left = col.index * this.colWidth() + wSpace;
var item = this.items[i];

item.style.left = left + 'px';
item.style.top = min.height + min.top + 'px';
item.style.left = left + "px";
item.style.top = col.height + this.gutter + "px";

min.height += min.top + item.getBoundingClientRect().height;
min.top = this.gutter;
col.height += item.getBoundingClientRect().height + this.gutter;
}

this.container.style.height = getMax(cols).height;
};

/**
* Checks if every item has been loaded
* Checks if every items has been loaded
* in the dom.
*
* @return {Boolean} true if every item is present
* @return {Boolean} true if every items is present
*/
MagicGrid.prototype.ready = function ready () {
if (this.static) { return true }
return this.container.length > 0 && this.item.length === this.size
if (this.static) { return true; }
return this.container.length > 0 && this.items.length === this.size;
};

/**
@@ -212,7 +204,7 @@ MagicGrid.prototype.getReady = function getReady () {

var interval = setInterval(function () {
this$1.container = document.querySelector(this$1.containerClass);
this$1.item = this$1.container.children;
this$1.items = this$1.container.children;

if (this$1.ready()) {
clearInterval(interval);
@@ -234,7 +226,7 @@ MagicGrid.prototype.listen = function listen () {
if (this.ready()) {
this.positionItems();

window.addEventListener('resize', function () {
window.addEventListener("resize", function () {
setTimeout(this$1.positionItems(), 200);
});
} else { this.getReady(); }
Oops, something went wrong.

0 comments on commit c112d18

Please sign in to comment.