gridlike - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

index.js

@@ -7,8 +7,3 @@ (function() {
     this.id = null;
-    this.columnCount = null;
-    this.columnWidth = null;
-    this.gutterWidth = null;
-    this.columnColor = 'red';
-    this.opacity = 0.5;
-    this.zIndex = 99999;
+    this.columns = null;
     this.classNames = {
@@ -30,8 +25,3 @@ grid: 'gridlike',
     this.initOptions = function(options) {
-      this.columnCount = options.columnCount || this.columnCount;
-      this.columnWidth = options.columnWidth || this.columnWidth;
-      this.gutterWidth = options.gutterWidth || this.gutterWidth;
-      this.columnColor = options.columnColor || this.columnColor;
-      this.opacity = options.opacity || this.opacity;
-      this.zIndex = options.zIndex || this.zIndex;
+      this.columns = options.columns || this.columns;
 
@@ -46,2 +36,6 @@ var classNames = options.classNames || {};
       document.addEventListener('keydown', function(event) {
+        if (this.isElementAcceptingKeyInput(event.target)) {
+          return;
+        }
+
         if (event.keyCode != 71) {  // 'g'
@@ -52,33 +46,30 @@ return;
         this.isVisible = !this.isVisible;
-        this.grid.style.visibility = this.isVisible ? 'visible' : 'hidden';
+        this.grid.style.display = this.isVisible ? 'block' : 'none';
       }.bind(this));
     }
 
+    this.isElementAcceptingKeyInput = function(element) {
+      var nodeNames = [
+        'INPUT',
+        'TEXTAREA',
+        'SELECT', // <select> and option doesn't seem to trigger a keydown
+        'OPTION'  // event, but we test them just in case.
+      ];
+
+      for (var i = 0; i < nodeNames.length; i++) {
+        if (element.nodeName == nodeNames[i]) {
+          return true;
+        }
+      }
+
+      return false;
+    }
+
     this.createGrid = function() {
       this.grid = this.createElement(this.classNames.grid);
-      this.grid.style.overflow = 'hidden';
-      this.grid.style.visibility = 'hidden',
-      this.grid.style.position = 'fixed';
-      this.grid.style.top = 0;
-      this.grid.style.right = 0;
-      this.grid.style.bottom = 0;
-      this.grid.style.left = 0;
-      this.grid.style.width = this.calcGridWidth() + 'px';
-      this.grid.style.margin = '0 auto';
-      this.grid.style.opacity = this.opacity;
-      this.grid.style.zIndex = this.zIndex;
+      this.grid.style.display = 'none',
       this.grid.style.pointerEvents = 'none';
 
-      for (var i = 0; i < this.columnCount; i++) {
-        var column = this.createElement(this.classNames.column);
-        column.style.float = 'left';
-        column.style.width = this.columnWidth + 'px';
-        column.style.height = '100%';
-        column.style.backgroundColor = this.columnColor;
-
-        if (i > 0) {
-          column.style.marginLeft = this.gutterWidth + 'px';
-        }
-
-        this.grid.appendChild(column);
+      for (var i = 0; i < this.columns; i++) {
+        this.grid.appendChild(this.createElement(this.classNames.column));
       }
@@ -93,12 +84,6 @@ }
 
-    this.calcGridWidth = function(options) {
-      var columnWidths = this.columnWidth * this.columnCount;
-      var gutterWidths = this.gutterWidth * (this.columnCount - 1);
-      return columnWidths + gutterWidths;
-    }
-
     return this.init(options);
   };
 
-  if (module && module.exports && typeof exports === 'object') {
+  if (typeof module !== 'undefined' && typeof module.exports === 'object') {
     module.exports = Gridlike;
@@ -105,0 +90,0 @@ }

package.json

 {
   "name": "gridlike",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Simple tool to show grid guidelines during development",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 # gridlike
+
+Usage:
+```
+new Gridlike({
+    columns: 12,
+    classNames: {
+        grid: 'grid grid--mobile',
+        column: 'grid__column'
+    }
+});
+```
+
+You need to create your own stylesheet to see anything. See `demos/demo.html`.
+
+# TODO
+* Customize keyboard shortcut?
+* Make it possible to disable the keyboard shortcut
+* Expose a `toggle()` method

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

6085

increased by21.72%

Number of package files

5

increased by25%

Number of lines in readme file

19

increased by850%

Worsened metrics

Lines of code

75

decreased by-17.58%

No dependency changes