/*! jGrid Plugin - v0.1.0 - 2012-09-03
* https://github.com/dpiatek/jgrid
* Copyright (c) 2012 Dominik Piatek; Licensed MIT */
(function($) {
var jGrid = {
// Todo
// - press ctrl-shift-l for jgrid box
// - remove button submits and make them more CSS-safe
// - add opacity adjustment
// - make hide button a bit out of the box, like a pull down
// - add position fixed to col-width
// - add hide button for menu or maybe go straight to drag&drop ?
// - clean-up plugin
// - comment code
// - make readme
// - push to github
// - live on / off
// - make this library agnostic
// Initialize plugin
init: function( setup ){
this.self = this;
window.updateID = null;
this.keylistener();
this.addmenu();
this.updateGrid();
$('#jgrid-setup, #jgrid-overlay, #jgrid-col-width').hide();
},
// Add styles to head and append menu to body
addmenu: function () {
$('head').append('<style>#jgrid-setup {position:fixed; top:0; right:0; width:85px; height:370px; background-color:#DDD; padding:0 10px; border-radius:0 0 0 5px; border-left:1px solid #999; border-bottom:1px solid #999; z-index:999; } #show-hide {display:block; width:80px; height:30px; text-transform:uppercase; border:0; border-radius:3px; margin:10px 0 10px; padding:0; color:#fff; cursor:pointer; text-align:center; line-height:30px; background-color:#929292; } #jgrid-form { font-family: sans-serif; color:#222; font-size:14px; } #jgrid-form label { display:block; padding:0; margin:10px 0; cursor:pointer; } #jgrid-form input { padding:0; margin:0; border:3px solid #FFF; border-radius:3px; } #jgrid-form input[type=number] { width:60px; height:22px;} #jgrid-form input[type=checkbox] { margin-right:3px; } #jgrid-overlay {position:fixed; top:0; left:0; width:100%; height:100%; background-color:#000; opacity:0.2; z-index:997; } #jgrid-wrapper { width:960px; margin:0 auto; background-color:rgb(255, 192, 203); height:100%; z-index:998; } #jgrid-wrapper > span {width:70px; margin-right:10px; height:100%; background-color:#000; opacity:0.3; display:block; float:left; } #jgrid-wrapper > span:last-child { margin-right:5px; } #jgrid-wrapper > span:first-child { margin-left:5px; } #jgrid-col-width {position:fixed; top:5px; left:5px; color: #EEE; background-color: #555; border-radius: 5px; height: 63px; width: 105px; display: block; font-size: 16px; padding: 5px; }</style>');
$('body').append('<div id="jgrid-setup"><form method="get" accept-charset="utf-8" id="jgrid-form"><label for="wrapper">Wrapper</label><input type="number" name="wrapper" placeholder="960" required pattern="^[0-9]+$" title="Only integer values"><span>px</span><label for="columns">Columns</label><input type="number" name="columns" placeholder="12" required pattern="^[0-9]+$" title="Only integer values"><label for="gutter">Gutter</label><input type="number" name="gutter" placeholder="5" required pattern="^[0-9]+$" title="Only integer values"><span>px</span><label for="marLeft">Margin left</label><input type="number" name="marLeft" required pattern="^[0-9]+$" title="Only integer values"><label for="marRight">Margin right</label><input type="number" name="marRight" required pattern="^[0-9]+$" title="Only integer values"><span id="show-hide">Hide</span></form></div>');
},
// Listen for Ctrl + Alt + l to toggle grid display
keylistener: function ( ) {
var isCtrl = false,
isShift = false,
that = this.self;
$('body').on('keyup', function(e) {
if (e.which === 16) { isShift = false; }
if (e.which === 17) { isCtrl = false; }
});
$('body').on('keydown', that , function(e) {
if(e.which === 17) { isCtrl = true; }
if(e.which === 16) { isShift = true; }
if(e.which === 76 && isCtrl && isShift) {
window.clearTimeout(that.updateID);
// console.log(window.updateID);
$('#jgrid-setup, #jgrid-overlay, #jgrid-col-width').toggle();
if ($('#jgrid-setup').css('display') !== 'none') {
that.updateGrid();
}
}
});
},
setupGrid: function( colWidth , setup ) {
var cols = '',
wrapper = null;
if (!($('#jgrid-overlay').length)) {
$('body').append('<div id="jgrid-overlay"><div id="jgrid-wrapper"></div></div>');
$('#jgrid-wrapper').width( setup.wrapper );
}
wrapper = $('#jgrid-wrapper');
wrapper.empty();
for (var i = 0; i < setup.columns; i++) {
cols += '<span></span>';
}
wrapper.width( setup.wrapper );
wrapper.append(cols);
wrapper.find('span').width(colWidth).css('margin-right', setup.gutter);
wrapper.find('span:first-child').css('margin-left', setup.marLeft);
wrapper.find('span:last-child').css('margin-right', setup.marRight);
},
calculateGrid: function( setup ) {
var colWidth = ( setup.wrapper - setup.marLeft - setup.marRight - ( (setup.columns - 1) * setup.gutter ) ) / setup.columns;
var checkWidth = (setup.columns * colWidth) + ( (setup.columns - 1) * setup.gutter ) + setup.marLeft + setup.marRight;
var percentage = ( Math.round((colWidth / setup.wrapper) * 10000) / 1000 );
this.setupGrid( colWidth , setup );
this.updateColWidth( colWidth , percentage );
},
getDimensions: function () {
var setup = {};
setup.wrapper = parseInt($('input[name=wrapper]').val(),10) || 0;
setup.columns = parseInt($('input[name=columns]').val(),10) || 1;
setup.gutter = parseInt($('input[name=gutter]').val(),10) || 0;
setup.marLeft = parseInt($('input[name=marLeft]').val(),10) || 0;
setup.marRight = parseInt($('input[name=marRight]').val(),10) || 0;
// console.log(setup);
this.calculateGrid( setup );
},
updateColWidth: function ( colWidth , percentage ) {
var widthDisplay = $('#jgrid-col-width');
if ( !(widthDisplay.length) ) {
$('body').append('<span id="jgrid-col-width"></span>');
widthDisplay = $('#jgrid-col-width');
}
if (!(typeof colWidth === 'number' && (colWidth % 1 === 0) )) {
colWidth = Math.round( colWidth*100 ) / 100;
widthDisplay.css('color','#F55');
} else {
colWidth = colWidth + 'px';
widthDisplay.css('color','#DDD');
}
// console.log(isNaN(percentage));
percentage = isNaN(percentage) ? '0%' : percentage + '%';
widthDisplay.text( 'Column width: ' + colWidth );
widthDisplay.append( '<br>' + percentage );
},
updateGrid: function () {
var that = this.self;
this.getDimensions();
this.updateID = window.setTimeout(function ( ) {
that.updateGrid();
}, 1000, that);
}
};
jGrid.init();
// return $.initGrid = jGrid.calculateGrid({ wrapper:960, columns:12, gutter:10, marLeft:5, marRight:5 });
}(jQuery));