Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Updated plato.js grid for new event listening pattern
  • Loading branch information
JonHMChan committed Jul 19, 2016
1 parent f262c34 commit 9be0097
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 54 deletions.
76 changes: 40 additions & 36 deletions dist/plato.js
Expand Up @@ -170,13 +170,14 @@ var Plato = function () {
var _this = this;

return Object.assign(this.clearfix(), {
"_listeners": [[window, "resize"]],
"box-sizing": "border-box",
"margin-left": function marginLeft() {
return window.innerWidth >= _this.layout.wrappers.mobile ? 0 : _this.layout.grid.fixedGutter;
},
"margin-right": function marginRight() {
return window.innerWidth >= _this.layout.wrappers.mobile ? 0 : _this.layout.grid.fixedGutter;
"$(window).resize": {
"margin-left": function marginLeft() {
return window.innerWidth >= _this.layout.wrappers.mobile ? 0 : _this.layout.grid.fixedGutter;
},
"margin-right": function marginRight() {
return window.innerWidth >= _this.layout.wrappers.mobile ? 0 : _this.layout.grid.fixedGutter;
}
}
});
}
Expand All @@ -186,16 +187,17 @@ var Plato = function () {
var _this2 = this;

return Object.assign(this.clearfix(), {
"_listeners": [[window, "resize"]],
"display": function display() {
return window.innerWidth >= _this2.layout.wrappers.mobile ? "table" : "block";
},
"box-sizing": "border-box",
"margin-left": function marginLeft() {
return window.innerWidth >= _this2.layout.wrappers.mobile ? 0 : _this2.layout.grid.fixedGutter;
},
"margin-right": function marginRight() {
return window.innerWidth >= _this2.layout.wrappers.mobile ? 0 : _this2.layout.grid.fixedGutter;
"$(window).resize": {
"margin-left": function marginLeft() {
return window.innerWidth >= _this2.layout.wrappers.mobile ? 0 : _this2.layout.grid.fixedGutter;
},
"margin-right": function marginRight() {
return window.innerWidth >= _this2.layout.wrappers.mobile ? 0 : _this2.layout.grid.fixedGutter;
},
"display": function display() {
return window.innerWidth >= _this2.layout.wrappers.mobile ? "table" : "block";
}
}
});
}
Expand All @@ -219,19 +221,20 @@ var Plato = function () {
return n * ((100 - (c - 1) * g) / c) + (n - 1) * g;
};
return {
"_listeners": [[window, "resize"]],
"float": function float() {
return window.innerWidth >= _this3.layout.wrappers.mobile ? "left" : "none";
},
"box-sizing": "border-box",
"width": function width() {
return window.innerWidth >= _this3.layout.wrappers.mobile ? calc(num, columns, gutter).toString() + "%" : "100%";
},
"margin-right": function marginRight(_) {
return _.nextElementSibling === null ? 0 : gutter.toString() + "%";
},
"margin-bottom": function marginBottom(_) {
return window.innerWidth >= _this3.layout.wrappers.mobile ? 0 : _this3.layout.grid.fixedGutter;
"$(window).resize": {
"width": function width() {
return window.innerWidth >= _this3.layout.wrappers.mobile ? calc(num, columns, gutter).toString() + "%" : "100%";
},
"margin-right": function marginRight(_) {
return _.nextElementSibling === null ? 0 : gutter.toString() + "%";
},
"margin-bottom": function marginBottom(_) {
return window.innerWidth >= _this3.layout.wrappers.mobile ? 0 : _this3.layout.grid.fixedGutter;
},
"float": function float() {
return window.innerWidth >= _this3.layout.wrappers.mobile ? "left" : "none";
}
}
};
}
Expand All @@ -250,16 +253,17 @@ var Plato = function () {
return n * ((100 - (c - 1) * g) / c) + (n - 1) * g;
};
return {
"_listeners": [[window, "resize"]],
"display": function display() {
return window.innerWidth >= _this4.layout.wrappers.mobile ? "table-cell" : "block";
},
"box-sizing": "border-box",
"width": function width() {
return window.innerWidth >= _this4.layout.wrappers.mobile ? (calc(num, columns, gutter) + gutter).toString() + "%" : "100%";
},
"margin-bottom": function marginBottom(_) {
return window.innerWidth >= _this4.layout.wrappers.mobile ? 0 : _this4.layout.grid.fixedGutter;
"$(window).resize": {
"display": function display() {
return window.innerWidth >= _this4.layout.wrappers.mobile ? "table-cell" : "block";
},
"width": function width() {
return window.innerWidth >= _this4.layout.wrappers.mobile ? (calc(num, columns, gutter) + gutter).toString() + "%" : "100%";
},
"margin-bottom": function marginBottom(_) {
return window.innerWidth >= _this4.layout.wrappers.mobile ? 0 : _this4.layout.grid.fixedGutter;
}
}
};
}
Expand Down
40 changes: 22 additions & 18 deletions src/plato.js
Expand Up @@ -127,22 +127,24 @@ class Plato {
// Used as part of the grid, applies resets and clearfixes
row() {
return Object.assign(this.clearfix(), {
"_listeners": [[window, "resize"]],
"box-sizing": "border-box",
"margin-left": () => { return (window.innerWidth >= this.layout.wrappers.mobile) ? 0 : this.layout.grid.fixedGutter },
"margin-right": () => { return (window.innerWidth >= this.layout.wrappers.mobile) ? 0 : this.layout.grid.fixedGutter }
"$(window).resize": {
"margin-left": () => { return (window.innerWidth >= this.layout.wrappers.mobile) ? 0 : this.layout.grid.fixedGutter },
"margin-right": () => { return (window.innerWidth >= this.layout.wrappers.mobile) ? 0 : this.layout.grid.fixedGutter },
}
})
}

tableRow() {
return Object.assign(this.clearfix(), {
"_listeners": [[window, "resize"]],
"display": () => {
return (window.innerWidth >= this.layout.wrappers.mobile) ? "table" : "block"
},
"box-sizing": "border-box",
"margin-left": () => { return (window.innerWidth >= this.layout.wrappers.mobile) ? 0 : this.layout.grid.fixedGutter },
"margin-right": () => { return (window.innerWidth >= this.layout.wrappers.mobile) ? 0 : this.layout.grid.fixedGutter }
"$(window).resize": {
"margin-left": () => { return (window.innerWidth >= this.layout.wrappers.mobile) ? 0 : this.layout.grid.fixedGutter },
"margin-right": () => { return (window.innerWidth >= this.layout.wrappers.mobile) ? 0 : this.layout.grid.fixedGutter },
"display": () => {
return (window.innerWidth >= this.layout.wrappers.mobile) ? "table" : "block"
}
}
})
}

Expand All @@ -152,23 +154,25 @@ class Plato {
col(num = 1, offset = 0, columns = this.layout.grid.columns, gutter = this.layout.grid.gutter) {
const calc = (n, c, g) => { return ((n*((100-((c-1)*g))/c))+((n-1)*g)) }
return {
"_listeners": [[window, "resize"]],
"float": () => { return (window.innerWidth >= this.layout.wrappers.mobile) ? "left" : "none" },
"box-sizing": "border-box",
"width": () => { return (window.innerWidth >= this.layout.wrappers.mobile) ? calc(num,columns,gutter).toString() + "%" : "100%" },
"margin-right": (_) => { return (_.nextElementSibling === null) ? 0 : (gutter.toString() + "%") },
"margin-bottom": (_) => { return (window.innerWidth >= this.layout.wrappers.mobile) ? 0 : this.layout.grid.fixedGutter }
"$(window).resize": {
"width": () => { return (window.innerWidth >= this.layout.wrappers.mobile) ? calc(num,columns,gutter).toString() + "%" : "100%" },
"margin-right": (_) => { return (_.nextElementSibling === null) ? 0 : (gutter.toString() + "%") },
"margin-bottom": (_) => { return (window.innerWidth >= this.layout.wrappers.mobile) ? 0 : this.layout.grid.fixedGutter },
"float": () => { return (window.innerWidth >= this.layout.wrappers.mobile) ? "left" : "none" }
}
}
}

tableCol(num = 1, offset = 0, columns = this.layout.grid.columns, gutter = this.layout.grid.gutter) {
const calc = (n, c, g) => { return ((n*((100-((c-1)*g))/c))+((n-1)*g)) }
return {
"_listeners": [[window, "resize"]],
"display": () => { return (window.innerWidth >= this.layout.wrappers.mobile) ? "table-cell" : "block" },
"box-sizing": "border-box",
"width": () => { return (window.innerWidth >= this.layout.wrappers.mobile) ? (calc(num,columns,gutter) + gutter).toString() + "%" : "100%" },
"margin-bottom": (_) => { return (window.innerWidth >= this.layout.wrappers.mobile) ? 0 : this.layout.grid.fixedGutter }
"$(window).resize": {
"display": () => { return (window.innerWidth >= this.layout.wrappers.mobile) ? "table-cell" : "block" },
"width": () => { return (window.innerWidth >= this.layout.wrappers.mobile) ? (calc(num,columns,gutter) + gutter).toString() + "%" : "100%" },
"margin-bottom": (_) => { return (window.innerWidth >= this.layout.wrappers.mobile) ? 0 : this.layout.grid.fixedGutter }
}
}
}
}

0 comments on commit 9be0097

Please sign in to comment.