Skip to content

Instantly share code, notes, and snippets.

@nicdaCosta

nicdaCosta/gridBuilder.css

Created August 6, 2012 09:38
Show Gist options
  • Save nicdaCosta/3272773 to your computer and use it in GitHub Desktop.
Save nicdaCosta/3272773 to your computer and use it in GitHub Desktop.
Download ZIP
This was something i quickly created in "response" to Mootool's JavaScript weekly challenge ( # 1 ) [ http://mootools.net/blog/2012/07/25/javascript-challenge-1/ ] to build a spiraling grid. A live examaple can be seen here - http://jsfiddle.net/TpfCL/
Raw
gridBuilder.css
.block{
position:fixed;
display:inline-block;
width:3em;
height:3em;
padding:1em;
margin:0;
background:pink;
border:0.1em solid black;
text-align:center;
box-sizing:border-box;
}
.whack-me{
background:lime!important;
cursor:pointer;
}
Raw
gridBuilder.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Grid Automator</title>
</head>
<body>
<ul id="gridContainer">
</ul>
<script src="gridBuilder.js"></script>
</body>
</html>
​
Raw
gridBuilder.js
var spiralGrid = (function( window , document ){
'use strict';
var Block = function(){
this.options = {};
this.options.width = '';
this.options.height = '';
this.options.cssClass = '';
},
objGrid = {
options : {
noRows : 4,
noColumns : 4,
cssClass : 'block'
},
elements : [],
init : function(){
if( this.elements.length ) {
return;
}
var dimensions = 3,
count = this.options.noRows * this.options.noColumns,
dx = this.options.noRows,
dy = this.options.noColumns - 1,
dxi = dx,
dyi = ( dy ),
doc = document.createDocumentFragment(),
dirs = [
{ side : "left" , modifier : 1 } ,
{ side : "top" , modifier : 1 } ,
{ side : "left" , modifier : -1 } ,
{ side : "top" , modifier : -1 }
],
di = 0,
d = dirs[di],
currentTop = 0,
currentLeft = 0,
bgStart = 240,
bgStep = 128 / count,
bgHex,
bgColor,
left = 2,
top = 2,
i = 0;
for ( i ; i < count ; i++ ) {
d = dirs[di]; // change direction
var side = d.side, modifier = d.modifier; // if direction counter hits 0, change direction
if (side === 'left') {
left += modifier * dimensions;
dxi--;
if (dxi === 0) {
di++;
dx--;
dxi = dx;
}
}
if (side === 'top') {
top += modifier * dimensions;
dyi--;
if (dyi === 0) {
di++;
dy--;
dyi = dy;
}
}
if ( di === dirs.length ) {
// If directipon has itterated through all, then reset
di = 0;
}
bgHex = Math.round(bgStart - i * bgStep);
bgHex = bgHex.toString(16);
bgColor = '#' + bgHex + bgHex + bgHex;
var block = new Block(),
objLi;
spiralgrid.extend( this.options, block.options , false );
// add further options to block
block.options.top = top;
block.options.left = left;
block.options.bgColor = bgColor;
block.options.text = i + 1;
objLi = block.Build();
this.elements.push( objLi );
doc.appendChild( objLi );
}
document.querySelector( '#gridContainer' ).appendChild( doc );
}
},
spiralgrid = {
buildGrid : function( options , callback ){
options = options || {};
if ( typeof( options ) === "object" ) {
this.extend( options , objGrid.options , true);
}
// Checks to see if the grid already exists
if (!objGrid.elements.length ){
objGrid.init();
}
if (callback && typeof( callback ) === "function"){
callback();
}
},
extend : function(from,to,create){
from = from || {};
to = to || {};
for( var prop in from ){
var hasProp = to.hasOwnProperty( prop ) && to[ prop ] !== "undefined";
// set variables for objGrid, is used in building of grid
if ( create || hasProp ){
if ( typeof( prop ) === "Object" ) {
this.extend( from[ prop ], to[ prop ] , create );
}
else{
to[ prop ] = from[ prop ];
}
}
}
}
};
Block.prototype.Build = function(){
var e = document.createElement( 'li' ); // create element
e.className = this.options.cssClass;
e.style.top = this.options.top + 'em';
e.style.left = this.options.left + 'em';
e.style.backgroundColor = this.options.bgColor;
e.innerHTML = this.options.text;
return e; // add to spiral
};
return spiralgrid;
}( window , document ));
spiralGrid.buildGrid( { noRows : 3 , noColumns : 3 } , function(){ console.log( "done" ); } );​
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment