css-gridish-grid - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

distribution/main/gridish.js

@@ -129,3 +129,3 @@ "use strict";
     Gridish.prototype.parseUnit = function (item) {
-        var _a = /(\d+)(\w+)?/.exec(item.toString()), _ = _a[0], value = _a[1], _b = _a[2], unit = _b === void 0 ? 'px' : _b;
+        var _a = /(\d+)(\w+)?/.exec(item.toString()), _ = _a[0], value = _a[1], _b = _a[2], unit = _b === void 0 ? 'rem' : _b;
         return { value: parseInt(value, 10), unit: unit };
@@ -167,2 +167,3 @@ };
             }
+            console.log(margin);
             var rule = "\n                  @media (min-width: " + (index > 0 ? breakpoint : 0) + "rem) {\n                        ." + prefix + "__columns {\n                            padding: 0 " + margin.value + margin.unit + ";\n                        }          \n                        ." + prefix + "__columns__item {\n                            margin: 0 " + gutter.value / 2 + gutter.unit + ";\n                        }                \n                        ." + prefix + "__columns__item.\\--" + name + " {\n                            display: initial;\n                        }\n                    }\n                  ";
@@ -169,0 +170,0 @@ _this.insertMedia(rule);

distribution/main/gridish.min.js

@@ -1,1 +0,1 @@
-"use strict";var __assign=this&&this.__assign||Object.assign||function(t){for(var e,i=1,o=arguments.length;i<o;i++)for(var n in e=arguments[i])Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t};Object.defineProperty(exports,"__esModule",{value:!0});var Gridish=function(){function t(t){void 0===t&&(t={}),this.sortedBreakPoints=[],this.options={prefix:"grid",breakpoints:{small:{breakpoint:47,columns:2,gutter:"25px",margin:0,rowHeight:2},medium:{breakpoint:64,columns:12,gutter:"30px",margin:0,rowHeight:3},large:{breakpoint:90,columns:12,gutter:"30px",margin:0,rowHeight:4}},rem:16,rows:30,settings:{rows:{fontSize:"0.6em",fontFamily:"sans-serif",color:"darkturquoise",borderBottom:"1px solid darkturquoise"},columns:{borderLeft:"1px solid darkturquoise",borderRight:"1px solid darkturquoise",backgroundColor:"rgba(0,206,209, .2)"}}},this.options=__assign({},this.options,this.convertKeysToCamelCase(t))}return t.prototype.convertKeysToCamelCase=function(t){var e={},i=function(t){return t[1].toUpperCase()};for(var o in t){var n=o.replace(/-([a-z])/g,i);"object"!=typeof t[o]?e[n]=t[o]:e[n]=this.convertKeysToCamelCase(t[o])}return e},t.prototype.init=function(){var t=this;document.addEventListener("keydown",this.listener=function(e){t.toggleChecker(e)},!1),this.overlay=document.createElement("div"),this.overlay.classList.add(this.options.prefix),this.overlay.style.height=document.body.getBoundingClientRect().height+"px",this.overlay.style.position="absolute",this.sortedBreakPoints=this.sortBreakPoints(this.options.breakpoints),this.styles=document.createElement("style"),document.body.insertBefore(this.overlay,document.body.firstChild),this.createGrid(),this.overlay.appendChild(this.styles)},t.prototype.destroy=function(){this.listener&&(document.removeEventListener("keydown",this.listener,!1),document.body.removeChild(this.overlay),this.columns.remove(),this.rows.remove(),this.listener=null,this.styles=null,this.columns=null,this.rows=null)},t.prototype.show=function(){this.overlay.contains(this.columns)||(this.overlay.appendChild(this.columns),this.overlay.appendChild(this.rows))},t.prototype.hide=function(){this.columns.remove(),this.rows.remove()},t.prototype.toggleChecker=function(t){t.ctrlKey&&76===t.keyCode&&(this.overlay.contains(this.columns)?this.hide():this.show())},t.prototype.sortBreakPoints=function(t){var e=this;return Object.keys(t).map(function(i){return __assign({},t[i],{name:i,gutter:e.parseUnit(t[i].gutter),margin:e.parseUnit(t[i].margin)})}).sort(function(t,e){return t.breakpoint-e.breakpoint})},t.prototype.parseUnit=function(t){var e=/(\d+)(\w+)?/.exec(t.toString()),i=(e[0],e[1]),o=e[2],n=void 0===o?"px":o;return{value:parseInt(i,10),unit:n}},t.prototype.createGridColumns=function(){var t=this,e=document.createElement("div"),i=this.options.prefix;e.classList.add(i+"__columns");var o=this.sortedBreakPoints[this.sortedBreakPoints.length-1].breakpoint;return this.insertRule("."+i,{fontSize:this.options.rem+"px",maxWidth:o+"rem",width:"100vw",margin:"0 auto",pointerEvents:"none",position:"absolute",lineHeight:"normal",left:"0",right:"0",top:"0",zIndex:"9999"}),this.insertRule("."+i+"__columns",{display:"flex",boxSizing:"border-box",height:"100%",width:"100%",position:"absolute"}),this.insertRule("."+i+"__columns__item",__assign({},this.options.settings.columns,{display:"none",flex:"1"})),this.sortedBreakPoints.forEach(function(o,n){for(var r=o.breakpoint,s=o.columns,a=o.margin,l=o.name,h=o.gutter,d=s-(n>0?t.sortedBreakPoints[n-1].columns:0),u=0;u<d;u++)e.appendChild(t.createColumn(l));var c="\n                  @media (min-width: "+(n>0?r:0)+"rem) {\n                        ."+i+"__columns {\n                            padding: 0 "+a.value+a.unit+";\n                        }          \n                        ."+i+"__columns__item {\n                            margin: 0 "+h.value/2+h.unit+";\n                        }                \n                        ."+i+"__columns__item.\\--"+l+" {\n                            display: initial;\n                        }\n                    }\n                  ";t.insertMedia(c)}),e},t.prototype.createGridRows=function(){var t=this,e=document.createElement("div"),i=document.createElement("div"),o=this.options.prefix;e.classList.add(o+"__rows"),i.classList.add(o+"__row__item");var n=this.overlay.scrollHeight,r=this.options.settings.rows.fontSize,s=document.createDocumentFragment(),a=this.sortedBreakPoints[this.sortedBreakPoints.length-1].breakpoint;this.insertRule("."+o+"__row__item",__assign({},this.options.settings.rows,{boxSizing:"border-box",position:"relative",display:"none"})),this.insertRule("."+o+"__row__item::before, ."+o+"__row__item::after",{content:"attr(data-key)",position:"absolute",width:"0"}),this.insertRule("."+o+"__row__item::before",{left:"-"+r,direction:"rtl"}),this.insertRule("."+o+"__row__item::after",{right:"-"+r}),this.sortedBreakPoints.forEach(function(e,i){var n=e.breakpoint,s=(e.columns,e.margin,e.name,e.gutter,e.rowHeight),a="\n                  @media (min-width: "+(i>0?n:0)+"rem) {\n                        ."+o+"__row__item {\n                            height: "+s+"rem;\n                            direction: ltr;\n                        }\n                        ."+o+"__row__item::before, ."+o+"__row__item::after{\n                            top: calc("+s/2+"rem - "+r+")\n                        }\n                    }\n                  ";t.insertMedia(a)});var l=0,h=[];this.sortedBreakPoints.sort(function(t,e){return e.rowHeight-t.rowHeight}).forEach(function(e,r,s){var a=e.name,d=e.rowHeight,u=(e.breakpoint,"\n                  @media ("+(r>0?"max-width: "+s[r-1].breakpoint+"rem":"min-width: 0px")+") {\n                        ."+o+"__row__item.\\--"+a+" {\n                            display: block;\n                        }\n                  }\n                  ");t.insertMedia(u);var c=Math.floor(n/(t.options.rem*d)),p=c-l;l=c;for(var m=0;m<p;m++){var _=i.cloneNode();_.dataset.key=(m%t.options.rows+1).toString(),_.classList.add("--"+a),h.push(_)}}),h.forEach(function(t){return s.appendChild(t)});var d="\n                  @media (max-width: "+a+"rem) {\n                        ."+o+"__row__item::before {\n                            left: calc("+r+" * 4);\n                            direction: ltr;\n                        }\n                        ."+o+"__row__item::after {\n                            right: calc("+r+" * 4);\n                            direction: rtl;\n                        }\n                    }\n                  ";return this.insertMedia(d),e.appendChild(s),e},t.prototype.createGrid=function(){this.columns=this.createGridColumns(),this.rows=this.createGridRows()},t.prototype.createColumn=function(t){var e=document.createElement("div");return e.classList.add(this.options.prefix+"__columns__item","--"+t),e},t.prototype.insertMedia=function(t){this.styles.innerHTML+=t},t.prototype.insertRule=function(t,e){this.styles.innerHTML+=t+" {"+this.objectToCss(e)+"}"},t.prototype.objectToCss=function(t){var e=this;return Object.keys(t).map(function(i){return e.camelCaseToHyphenCase(i)+": "+t[i]}).join(";")},t.prototype.camelCaseToHyphenCase=function(t){return t.replace(/([a-zA-Z])(?=[A-Z])/g,"$1-").toLowerCase()},t}();exports.Gridish=Gridish,exports.default=Gridish;
+"use strict";var __assign=this&&this.__assign||Object.assign||function(t){for(var e,i=1,o=arguments.length;i<o;i++)for(var n in e=arguments[i])Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t};Object.defineProperty(exports,"__esModule",{value:!0});var Gridish=function(){function t(t){void 0===t&&(t={}),this.sortedBreakPoints=[],this.options={prefix:"grid",breakpoints:{small:{breakpoint:47,columns:2,gutter:"25px",margin:0,rowHeight:2},medium:{breakpoint:64,columns:12,gutter:"30px",margin:0,rowHeight:3},large:{breakpoint:90,columns:12,gutter:"30px",margin:0,rowHeight:4}},rem:16,rows:30,settings:{rows:{fontSize:"0.6em",fontFamily:"sans-serif",color:"darkturquoise",borderBottom:"1px solid darkturquoise"},columns:{borderLeft:"1px solid darkturquoise",borderRight:"1px solid darkturquoise",backgroundColor:"rgba(0,206,209, .2)"}}},this.options=__assign({},this.options,this.convertKeysToCamelCase(t))}return t.prototype.convertKeysToCamelCase=function(t){var e={},i=function(t){return t[1].toUpperCase()};for(var o in t){var n=o.replace(/-([a-z])/g,i);"object"!=typeof t[o]?e[n]=t[o]:e[n]=this.convertKeysToCamelCase(t[o])}return e},t.prototype.init=function(){var t=this;document.addEventListener("keydown",this.listener=function(e){t.toggleChecker(e)},!1),this.overlay=document.createElement("div"),this.overlay.classList.add(this.options.prefix),this.overlay.style.height=document.body.getBoundingClientRect().height+"px",this.overlay.style.position="absolute",this.sortedBreakPoints=this.sortBreakPoints(this.options.breakpoints),this.styles=document.createElement("style"),document.body.insertBefore(this.overlay,document.body.firstChild),this.createGrid(),this.overlay.appendChild(this.styles)},t.prototype.destroy=function(){this.listener&&(document.removeEventListener("keydown",this.listener,!1),document.body.removeChild(this.overlay),this.columns.remove(),this.rows.remove(),this.listener=null,this.styles=null,this.columns=null,this.rows=null)},t.prototype.show=function(){this.overlay.contains(this.columns)||(this.overlay.appendChild(this.columns),this.overlay.appendChild(this.rows))},t.prototype.hide=function(){this.columns.remove(),this.rows.remove()},t.prototype.toggleChecker=function(t){t.ctrlKey&&76===t.keyCode&&(this.overlay.contains(this.columns)?this.hide():this.show())},t.prototype.sortBreakPoints=function(t){var e=this;return Object.keys(t).map(function(i){return __assign({},t[i],{name:i,gutter:e.parseUnit(t[i].gutter),margin:e.parseUnit(t[i].margin)})}).sort(function(t,e){return t.breakpoint-e.breakpoint})},t.prototype.parseUnit=function(t){var e=/(\d+)(\w+)?/.exec(t.toString()),i=(e[0],e[1]),o=e[2],n=void 0===o?"rem":o;return{value:parseInt(i,10),unit:n}},t.prototype.createGridColumns=function(){var t=this,e=document.createElement("div"),i=this.options.prefix;e.classList.add(i+"__columns");var o=this.sortedBreakPoints[this.sortedBreakPoints.length-1].breakpoint;return this.insertRule("."+i,{fontSize:this.options.rem+"px",maxWidth:o+"rem",width:"100vw",margin:"0 auto",pointerEvents:"none",position:"absolute",lineHeight:"normal",left:"0",right:"0",top:"0",zIndex:"9999"}),this.insertRule("."+i+"__columns",{display:"flex",boxSizing:"border-box",height:"100%",width:"100%",position:"absolute"}),this.insertRule("."+i+"__columns__item",__assign({},this.options.settings.columns,{display:"none",flex:"1"})),this.sortedBreakPoints.forEach(function(o,n){for(var r=o.breakpoint,s=o.columns,a=o.margin,l=o.name,h=o.gutter,c=s-(n>0?t.sortedBreakPoints[n-1].columns:0),d=0;d<c;d++)e.appendChild(t.createColumn(l));console.log(a);var u="\n                  @media (min-width: "+(n>0?r:0)+"rem) {\n                        ."+i+"__columns {\n                            padding: 0 "+a.value+a.unit+";\n                        }          \n                        ."+i+"__columns__item {\n                            margin: 0 "+h.value/2+h.unit+";\n                        }                \n                        ."+i+"__columns__item.\\--"+l+" {\n                            display: initial;\n                        }\n                    }\n                  ";t.insertMedia(u)}),e},t.prototype.createGridRows=function(){var t=this,e=document.createElement("div"),i=document.createElement("div"),o=this.options.prefix;e.classList.add(o+"__rows"),i.classList.add(o+"__row__item");var n=this.overlay.scrollHeight,r=this.options.settings.rows.fontSize,s=document.createDocumentFragment(),a=this.sortedBreakPoints[this.sortedBreakPoints.length-1].breakpoint;this.insertRule("."+o+"__row__item",__assign({},this.options.settings.rows,{boxSizing:"border-box",position:"relative",display:"none"})),this.insertRule("."+o+"__row__item::before, ."+o+"__row__item::after",{content:"attr(data-key)",position:"absolute",width:"0"}),this.insertRule("."+o+"__row__item::before",{left:"-"+r,direction:"rtl"}),this.insertRule("."+o+"__row__item::after",{right:"-"+r}),this.sortedBreakPoints.forEach(function(e,i){var n=e.breakpoint,s=(e.columns,e.margin,e.name,e.gutter,e.rowHeight),a="\n                  @media (min-width: "+(i>0?n:0)+"rem) {\n                        ."+o+"__row__item {\n                            height: "+s+"rem;\n                            direction: ltr;\n                        }\n                        ."+o+"__row__item::before, ."+o+"__row__item::after{\n                            top: calc("+s/2+"rem - "+r+")\n                        }\n                    }\n                  ";t.insertMedia(a)});var l=0,h=[];this.sortedBreakPoints.sort(function(t,e){return e.rowHeight-t.rowHeight}).forEach(function(e,r,s){var a=e.name,c=e.rowHeight,d=(e.breakpoint,"\n                  @media ("+(r>0?"max-width: "+s[r-1].breakpoint+"rem":"min-width: 0px")+") {\n                        ."+o+"__row__item.\\--"+a+" {\n                            display: block;\n                        }\n                  }\n                  ");t.insertMedia(d);var u=Math.floor(n/(t.options.rem*c)),p=u-l;l=u;for(var m=0;m<p;m++){var _=i.cloneNode();_.dataset.key=(m%t.options.rows+1).toString(),_.classList.add("--"+a),h.push(_)}}),h.forEach(function(t){return s.appendChild(t)});var c="\n                  @media (max-width: "+a+"rem) {\n                        ."+o+"__row__item::before {\n                            left: calc("+r+" * 4);\n                            direction: ltr;\n                        }\n                        ."+o+"__row__item::after {\n                            right: calc("+r+" * 4);\n                            direction: rtl;\n                        }\n                    }\n                  ";return this.insertMedia(c),e.appendChild(s),e},t.prototype.createGrid=function(){this.columns=this.createGridColumns(),this.rows=this.createGridRows()},t.prototype.createColumn=function(t){var e=document.createElement("div");return e.classList.add(this.options.prefix+"__columns__item","--"+t),e},t.prototype.insertMedia=function(t){this.styles.innerHTML+=t},t.prototype.insertRule=function(t,e){this.styles.innerHTML+=t+" {"+this.objectToCss(e)+"}"},t.prototype.objectToCss=function(t){var e=this;return Object.keys(t).map(function(i){return e.camelCaseToHyphenCase(i)+": "+t[i]}).join(";")},t.prototype.camelCaseToHyphenCase=function(t){return t.replace(/([a-zA-Z])(?=[A-Z])/g,"$1-").toLowerCase()},t}();exports.Gridish=Gridish,exports.default=Gridish;

distribution/modules/gridish.js

@@ -116,3 +116,3 @@ export default class Gridish {
     parseUnit(item) {
-        const [_, value, unit = 'px'] = /(\d+)(\w+)?/.exec(item.toString());
+        const [_, value, unit = 'rem'] = /(\d+)(\w+)?/.exec(item.toString());
         return { value: parseInt(value, 10), unit };
@@ -152,2 +152,3 @@ }
             }
+            console.log(margin);
             const rule = `
@@ -154,0 +155,0 @@ @media (min-width: ${index > 0 ? breakpoint : 0}rem) {

distribution/modules/gridish.min.js

@@ -1,1 +0,1 @@
-export default class Gridish{constructor(t={}){this.sortedBreakPoints=[],this.options={prefix:"grid",breakpoints:{small:{breakpoint:47,columns:2,gutter:"25px",margin:0,rowHeight:2},medium:{breakpoint:64,columns:12,gutter:"30px",margin:0,rowHeight:3},large:{breakpoint:90,columns:12,gutter:"30px",margin:0,rowHeight:4}},rem:16,rows:30,settings:{rows:{fontSize:"0.6em",fontFamily:"sans-serif",color:"darkturquoise",borderBottom:"1px solid darkturquoise"},columns:{borderLeft:"1px solid darkturquoise",borderRight:"1px solid darkturquoise",backgroundColor:"rgba(0,206,209, .2)"}}},this.options=Object.assign({},this.options,this.convertKeysToCamelCase(t))}convertKeysToCamelCase(t){const e={},i=t=>t[1].toUpperCase();for(let s in t){const o=s.replace(/-([a-z])/g,i);"object"!=typeof t[s]?e[o]=t[s]:e[o]=this.convertKeysToCamelCase(t[s])}return e}init(){document.addEventListener("keydown",this.listener=(t=>{this.toggleChecker(t)}),!1),this.overlay=document.createElement("div"),this.overlay.classList.add(this.options.prefix),this.overlay.style.height=document.body.getBoundingClientRect().height+"px",this.overlay.style.position="absolute",this.sortedBreakPoints=this.sortBreakPoints(this.options.breakpoints),this.styles=document.createElement("style"),document.body.insertBefore(this.overlay,document.body.firstChild),this.createGrid(),this.overlay.appendChild(this.styles)}destroy(){this.listener&&(document.removeEventListener("keydown",this.listener,!1),document.body.removeChild(this.overlay),this.columns.remove(),this.rows.remove(),this.listener=null,this.styles=null,this.columns=null,this.rows=null)}show(){this.overlay.contains(this.columns)||(this.overlay.appendChild(this.columns),this.overlay.appendChild(this.rows))}hide(){this.columns.remove(),this.rows.remove()}toggleChecker(t){t.ctrlKey&&76===t.keyCode&&(this.overlay.contains(this.columns)?this.hide():this.show())}sortBreakPoints(t){return Object.keys(t).map(e=>Object.assign({},t[e],{name:e,gutter:this.parseUnit(t[e].gutter),margin:this.parseUnit(t[e].margin)})).sort((t,e)=>t.breakpoint-e.breakpoint)}parseUnit(t){const[e,i,s="px"]=/(\d+)(\w+)?/.exec(t.toString());return{value:parseInt(i,10),unit:s}}createGridColumns(){const t=document.createElement("div"),{prefix:e}=this.options;t.classList.add(`${e}__columns`);const{breakpoint:i}=this.sortedBreakPoints[this.sortedBreakPoints.length-1];return this.insertRule(`.${e}`,{fontSize:this.options.rem+"px",maxWidth:i+"rem",width:"100vw",margin:"0 auto",pointerEvents:"none",position:"absolute",lineHeight:"normal",left:"0",right:"0",top:"0",zIndex:"9999"}),this.insertRule(`.${e}__columns`,{display:"flex",boxSizing:"border-box",height:"100%",width:"100%",position:"absolute"}),this.insertRule(`.${e}__columns__item`,Object.assign({},this.options.settings.columns,{display:"none",flex:"1"})),this.sortedBreakPoints.forEach(({breakpoint:i,columns:s,margin:o,name:n,gutter:r},a)=>{const l=s-(a>0?this.sortedBreakPoints[a-1].columns:0);for(let e=0;e<l;e++)t.appendChild(this.createColumn(n));const h=`\n                  @media (min-width: ${a>0?i:0}rem) {\n                        .${e}__columns {\n                            padding: 0 ${o.value}${o.unit};\n                        }          \n                        .${e}__columns__item {\n                            margin: 0 ${r.value/2}${r.unit};\n                        }                \n                        .${e}__columns__item.\\--${n} {\n                            display: initial;\n                        }\n                    }\n                  `;this.insertMedia(h)}),t}createGridRows(){const t=document.createElement("div"),e=document.createElement("div"),{prefix:i}=this.options;t.classList.add(`${i}__rows`),e.classList.add(`${i}__row__item`);const s=this.overlay.scrollHeight,{fontSize:o}=this.options.settings.rows,n=document.createDocumentFragment(),{breakpoint:r}=this.sortedBreakPoints[this.sortedBreakPoints.length-1];this.insertRule(`.${i}__row__item`,Object.assign({},this.options.settings.rows,{boxSizing:"border-box",position:"relative",display:"none"})),this.insertRule(`.${i}__row__item::before, .${i}__row__item::after`,{content:"attr(data-key)",position:"absolute",width:"0"}),this.insertRule(`.${i}__row__item::before`,{left:`-${o}`,direction:"rtl"}),this.insertRule(`.${i}__row__item::after`,{right:`-${o}`}),this.sortedBreakPoints.forEach(({breakpoint:t,columns:e,margin:s,name:n,gutter:r,rowHeight:a},l)=>{const h=`\n                  @media (min-width: ${l>0?t:0}rem) {\n                        .${i}__row__item {\n                            height: ${a}rem;\n                            direction: ltr;\n                        }\n                        .${i}__row__item::before, .${i}__row__item::after{\n                            top: calc(${a/2}rem - ${o})\n                        }\n                    }\n                  `;this.insertMedia(h)});let a=0;const l=[];this.sortedBreakPoints.sort((t,e)=>e.rowHeight-t.rowHeight).forEach(({name:t,rowHeight:o,breakpoint:n},r,h)=>{const d=`\n                  @media (${r>0?`max-width: ${h[r-1].breakpoint}rem`:"min-width: 0px"}) {\n                        .${i}__row__item.\\--${t} {\n                            display: block;\n                        }\n                  }\n                  `;this.insertMedia(d);const c=Math.floor(s/(this.options.rem*o)),m=c-a;a=c;for(let i=0;i<m;i++){const s=e.cloneNode();s.dataset.key=(i%this.options.rows+1).toString(),s.classList.add(`--${t}`),l.push(s)}}),l.forEach(t=>n.appendChild(t));const h=`\n                  @media (max-width: ${r}rem) {\n                        .${i}__row__item::before {\n                            left: calc(${o} * 4);\n                            direction: ltr;\n                        }\n                        .${i}__row__item::after {\n                            right: calc(${o} * 4);\n                            direction: rtl;\n                        }\n                    }\n                  `;return this.insertMedia(h),t.appendChild(n),t}createGrid(){this.columns=this.createGridColumns(),this.rows=this.createGridRows()}createColumn(t){const e=document.createElement("div");return e.classList.add(`${this.options.prefix}__columns__item`,`--${t}`),e}insertMedia(t){this.styles.innerHTML+=t}insertRule(t,e){this.styles.innerHTML+=`${t} {${this.objectToCss(e)}}`}objectToCss(t){return Object.keys(t).map(e=>`${this.camelCaseToHyphenCase(e)}: ${t[e]}`).join(";")}camelCaseToHyphenCase(t){return t.replace(/([a-zA-Z])(?=[A-Z])/g,"$1-").toLowerCase()}};export{Gridish};
+export default class Gridish{constructor(t={}){this.sortedBreakPoints=[],this.options={prefix:"grid",breakpoints:{small:{breakpoint:47,columns:2,gutter:"25px",margin:0,rowHeight:2},medium:{breakpoint:64,columns:12,gutter:"30px",margin:0,rowHeight:3},large:{breakpoint:90,columns:12,gutter:"30px",margin:0,rowHeight:4}},rem:16,rows:30,settings:{rows:{fontSize:"0.6em",fontFamily:"sans-serif",color:"darkturquoise",borderBottom:"1px solid darkturquoise"},columns:{borderLeft:"1px solid darkturquoise",borderRight:"1px solid darkturquoise",backgroundColor:"rgba(0,206,209, .2)"}}},this.options=Object.assign({},this.options,this.convertKeysToCamelCase(t))}convertKeysToCamelCase(t){const e={},i=t=>t[1].toUpperCase();for(let s in t){const o=s.replace(/-([a-z])/g,i);"object"!=typeof t[s]?e[o]=t[s]:e[o]=this.convertKeysToCamelCase(t[s])}return e}init(){document.addEventListener("keydown",this.listener=(t=>{this.toggleChecker(t)}),!1),this.overlay=document.createElement("div"),this.overlay.classList.add(this.options.prefix),this.overlay.style.height=document.body.getBoundingClientRect().height+"px",this.overlay.style.position="absolute",this.sortedBreakPoints=this.sortBreakPoints(this.options.breakpoints),this.styles=document.createElement("style"),document.body.insertBefore(this.overlay,document.body.firstChild),this.createGrid(),this.overlay.appendChild(this.styles)}destroy(){this.listener&&(document.removeEventListener("keydown",this.listener,!1),document.body.removeChild(this.overlay),this.columns.remove(),this.rows.remove(),this.listener=null,this.styles=null,this.columns=null,this.rows=null)}show(){this.overlay.contains(this.columns)||(this.overlay.appendChild(this.columns),this.overlay.appendChild(this.rows))}hide(){this.columns.remove(),this.rows.remove()}toggleChecker(t){t.ctrlKey&&76===t.keyCode&&(this.overlay.contains(this.columns)?this.hide():this.show())}sortBreakPoints(t){return Object.keys(t).map(e=>Object.assign({},t[e],{name:e,gutter:this.parseUnit(t[e].gutter),margin:this.parseUnit(t[e].margin)})).sort((t,e)=>t.breakpoint-e.breakpoint)}parseUnit(t){const[e,i,s="rem"]=/(\d+)(\w+)?/.exec(t.toString());return{value:parseInt(i,10),unit:s}}createGridColumns(){const t=document.createElement("div"),{prefix:e}=this.options;t.classList.add(`${e}__columns`);const{breakpoint:i}=this.sortedBreakPoints[this.sortedBreakPoints.length-1];return this.insertRule(`.${e}`,{fontSize:this.options.rem+"px",maxWidth:i+"rem",width:"100vw",margin:"0 auto",pointerEvents:"none",position:"absolute",lineHeight:"normal",left:"0",right:"0",top:"0",zIndex:"9999"}),this.insertRule(`.${e}__columns`,{display:"flex",boxSizing:"border-box",height:"100%",width:"100%",position:"absolute"}),this.insertRule(`.${e}__columns__item`,Object.assign({},this.options.settings.columns,{display:"none",flex:"1"})),this.sortedBreakPoints.forEach(({breakpoint:i,columns:s,margin:o,name:n,gutter:r},a)=>{const l=s-(a>0?this.sortedBreakPoints[a-1].columns:0);for(let e=0;e<l;e++)t.appendChild(this.createColumn(n));console.log(o);const h=`\n                  @media (min-width: ${a>0?i:0}rem) {\n                        .${e}__columns {\n                            padding: 0 ${o.value}${o.unit};\n                        }          \n                        .${e}__columns__item {\n                            margin: 0 ${r.value/2}${r.unit};\n                        }                \n                        .${e}__columns__item.\\--${n} {\n                            display: initial;\n                        }\n                    }\n                  `;this.insertMedia(h)}),t}createGridRows(){const t=document.createElement("div"),e=document.createElement("div"),{prefix:i}=this.options;t.classList.add(`${i}__rows`),e.classList.add(`${i}__row__item`);const s=this.overlay.scrollHeight,{fontSize:o}=this.options.settings.rows,n=document.createDocumentFragment(),{breakpoint:r}=this.sortedBreakPoints[this.sortedBreakPoints.length-1];this.insertRule(`.${i}__row__item`,Object.assign({},this.options.settings.rows,{boxSizing:"border-box",position:"relative",display:"none"})),this.insertRule(`.${i}__row__item::before, .${i}__row__item::after`,{content:"attr(data-key)",position:"absolute",width:"0"}),this.insertRule(`.${i}__row__item::before`,{left:`-${o}`,direction:"rtl"}),this.insertRule(`.${i}__row__item::after`,{right:`-${o}`}),this.sortedBreakPoints.forEach(({breakpoint:t,columns:e,margin:s,name:n,gutter:r,rowHeight:a},l)=>{const h=`\n                  @media (min-width: ${l>0?t:0}rem) {\n                        .${i}__row__item {\n                            height: ${a}rem;\n                            direction: ltr;\n                        }\n                        .${i}__row__item::before, .${i}__row__item::after{\n                            top: calc(${a/2}rem - ${o})\n                        }\n                    }\n                  `;this.insertMedia(h)});let a=0;const l=[];this.sortedBreakPoints.sort((t,e)=>e.rowHeight-t.rowHeight).forEach(({name:t,rowHeight:o,breakpoint:n},r,h)=>{const d=`\n                  @media (${r>0?`max-width: ${h[r-1].breakpoint}rem`:"min-width: 0px"}) {\n                        .${i}__row__item.\\--${t} {\n                            display: block;\n                        }\n                  }\n                  `;this.insertMedia(d);const c=Math.floor(s/(this.options.rem*o)),m=c-a;a=c;for(let i=0;i<m;i++){const s=e.cloneNode();s.dataset.key=(i%this.options.rows+1).toString(),s.classList.add(`--${t}`),l.push(s)}}),l.forEach(t=>n.appendChild(t));const h=`\n                  @media (max-width: ${r}rem) {\n                        .${i}__row__item::before {\n                            left: calc(${o} * 4);\n                            direction: ltr;\n                        }\n                        .${i}__row__item::after {\n                            right: calc(${o} * 4);\n                            direction: rtl;\n                        }\n                    }\n                  `;return this.insertMedia(h),t.appendChild(n),t}createGrid(){this.columns=this.createGridColumns(),this.rows=this.createGridRows()}createColumn(t){const e=document.createElement("div");return e.classList.add(`${this.options.prefix}__columns__item`,`--${t}`),e}insertMedia(t){this.styles.innerHTML+=t}insertRule(t,e){this.styles.innerHTML+=`${t} {${this.objectToCss(e)}}`}objectToCss(t){return Object.keys(t).map(e=>`${this.camelCaseToHyphenCase(e)}: ${t[e]}`).join(";")}camelCaseToHyphenCase(t){return t.replace(/([a-zA-Z])(?=[A-Z])/g,"$1-").toLowerCase()}};export{Gridish};

package.json

 {
   "name": "css-gridish-grid",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Only the Grid from IBM/css-gridish as an NPM module",
@@ -5,0 +5,0 @@ "main": "./distribution/main/gridish.min.js",

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

75292

increased by0.35%

Lines of code

623

increased by0.32%

No dependency changes