Comparing version 0.1.0 to 0.1.1
71
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 @@ } |
{ | ||
"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", |
# 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 |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
6085
5
19
75