css-gridish-grid - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

distribution/main/gridish.js

@@ -148,3 +148,3 @@ "use strict";
             right: '0',
-            top: '0',
+            top: '1px',
             zIndex: '9999'
@@ -248,2 +248,2 @@ });
 exports.default = Gridish;
-//# sourceMappingURL=gridish.js.map
+//# sourceMappingURL=gridish.js.map

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?"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:"100%",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:"100%",margin:"0 auto",pointerEvents:"none",position:"absolute",lineHeight:"normal",left:"0",right:"0",top:"1px",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;

distribution/modules/gridish.js

@@ -134,3 +134,3 @@ export default class Gridish {
             right: '0',
-            top: '0',
+            top: '1px',
             zIndex: '9999'
@@ -266,2 +266,2 @@ });
 export { Gridish };
-//# sourceMappingURL=gridish.js.map
+//# sourceMappingURL=gridish.js.map

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="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:"100%",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:"100%",margin:"0 auto",pointerEvents:"none",position:"absolute",lineHeight:"normal",left:"0",right:"0",top:"1px",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};

package.json

 {
   "name": "css-gridish-grid",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Only the Grid from IBM/css-gridish as an NPM module",
@@ -22,3 +22,3 @@ "main": "./distribution/main/gridish.min.js",
     "build:main": "tsc --module commonjs --target es5 --outDir $MAIN_DIR && npm run minify -- -o $MAIN_DIR/$LIB.min.js -- $MAIN_DIR/$LIB.js",
-    "prepare-distribution": "for file in distribution/**/*; do sed -i \"s/$LIB.js/${LIB,,}.js/g\" $file && mv -v $file `echo ${file,,}`; done;",
+    "prepare-distribution": "for file in distribution/**/*; do sed -i '' \"s/$LIB.js/${LIB,,}.js/g\" $file && mv -v $file `echo ${file,,}`; done;",
     "minify": "uglifyjs --compress --mangle --source-map",
@@ -29,5 +29,2 @@ "start": "babel source/Gridish.ts -x .ts --watch --out-file dev/Gridish.js --source-maps inline | http-server dev -o"
   "license": "MIT",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
   "devDependencies": {
@@ -45,4 +42,4 @@ "@babel/cli": "^7.0.0-beta.40",
     "typescript": "^2.7.2",
-    "uglify-es": "3.3.9"
+    "uglify-es": "^3.3.9"
   }
 }

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

Lines of code

621

increased by8.57%

Worsened metrics

Total package byte prevSize

75041

decreased by-0.1%

No dependency changes