generator-nitro
Version:
Yeoman generator for the nitro frontend framework
54 lines (50 loc) • 2.92 kB
JavaScript
import { addKeyboardAction, getFromLocalStorage, setToLocalStorage } from './developHelpers';
// config
const gridMarkup = [
'<div class="container" style="height:100%">',
'<div class="row" style="height:100%;outline:none">',
'<div class="col-1" style="height: 100%;background:rgba(0,109,115,0.1);outline:none"><div style="height:100%;background:rgba(107,186,195,0.4)"></div></div>',
'<div class="col-1" style="height: 100%;background:rgba(0,109,115,0.1);outline:none"><div style="height:100%;background:rgba(107,186,195,0.4)"></div></div>',
'<div class="col-1" style="height: 100%;background:rgba(0,109,115,0.1);outline:none"><div style="height:100%;background:rgba(107,186,195,0.4)"></div></div>',
'<div class="col-1" style="height: 100%;background:rgba(0,109,115,0.1);outline:none"><div style="height:100%;background:rgba(107,186,195,0.4)"></div></div>',
'<div class="col-1" style="height: 100%;background:rgba(0,109,115,0.1);outline:none"><div style="height:100%;background:rgba(107,186,195,0.4)"></div></div>',
'<div class="col-1" style="height: 100%;background:rgba(0,109,115,0.1);outline:none"><div style="height:100%;background:rgba(107,186,195,0.4)"></div></div>',
'<div class="col-1" style="height: 100%;background:rgba(0,109,115,0.1);outline:none"><div style="height:100%;background:rgba(107,186,195,0.4)"></div></div>',
'<div class="col-1" style="height: 100%;background:rgba(0,109,115,0.1);outline:none"><div style="height:100%;background:rgba(107,186,195,0.4)"></div></div>',
'<div class="col-1" style="height: 100%;background:rgba(0,109,115,0.1);outline:none"><div style="height:100%;background:rgba(107,186,195,0.4)"></div></div>',
'<div class="col-1" style="height: 100%;background:rgba(0,109,115,0.1);outline:none"><div style="height:100%;background:rgba(107,186,195,0.4)"></div></div>',
'<div class="col-1" style="height: 100%;background:rgba(0,109,115,0.1);outline:none"><div style="height:100%;background:rgba(107,186,195,0.4)"></div></div>',
'<div class="col-1" style="height: 100%;background:rgba(0,109,115,0.1);outline:none"><div style="height:100%;background:rgba(107,186,195,0.4)"></div></div>',
'</div>',
'</div>',
].join('');
// toggle grid helper on CTRL+2 / ALT+2
(function gridHelper() {
const div = document.createElement('div');
div.innerHTML = gridMarkup;
div.setAttribute(
'style',
[
'position:fixed',
'top:0',
'left:0',
'display:none',
'right:0',
'bottom: 0',
'pointer-events:none',
'z-index: 2147483647',
].join(';'),
);
document.body.appendChild(div);
function toggleGrid() {
const visible = div.style.display === 'none';
div.style.display = visible ? 'block' : 'none';
setToLocalStorage('dev-helper-grid', visible);
}
// 50 = keycode for 2
addKeyboardAction(50, toggleGrid);
// Local Storage
if (getFromLocalStorage('dev-helper-grid')) {
toggleGrid();
}
})();