mirror of https://github.com/metafizzy/isotope
David DeSandro
13 years ago
6 changed files with 302 additions and 5 deletions
@ -0,0 +1,196 @@
|
||||
--- |
||||
title: BIG Graph |
||||
layout: default |
||||
category: custom-layout-modes |
||||
--- |
||||
|
||||
<section id="copy"> |
||||
<p><a href="../docs/extending-isotope.html">Custom layout mode</a> to replicate the Flash interface of <a href="http://big.dk">big.dk</a>. Similiar to <a href="category-rows.html">Category rows</a>, item elements are grouped by their sorting data into columns.</p> |
||||
|
||||
{% highlight javascript %} |
||||
|
||||
$container.isotope({ |
||||
layoutMode: 'bigGraph', |
||||
bigGraph: { |
||||
columnWidth: 45, // size of item |
||||
rowHeight: 45, // size of item |
||||
maxRows: 11, // max number of items vertically |
||||
gutterWidth: { // width of gutter, needs to match getSortData names |
||||
year: 0, |
||||
scale: 60, |
||||
program: 40, |
||||
status: 60, |
||||
title: 0 |
||||
} |
||||
}, |
||||
// options... |
||||
}); |
||||
|
||||
{% endhighlight %} |
||||
|
||||
<p>To use this layout mode, grab the <code>$.Isotope.prototype</code> methods from the script at the bottom of this page's source.</p> |
||||
|
||||
</section> |
||||
|
||||
<section id="options" class="clearfix"> |
||||
|
||||
<h3>Sort</h3> |
||||
|
||||
<ul id="sort-by" class="option-set clearfix" data-option-key="sortBy"> |
||||
<li><a href="#sortBy=year" data-option-value="year" class="selected" data>Chronological</a></li> |
||||
<li><a href="#sortBy=title" data-option-value="title">Alphabetical</a></li> |
||||
<li><a href="#sortBy=program" data-option-value="program">Programmatic</a></li> |
||||
<li><a href="#sortBy=scale" data-option-value="scale">Scale</a></li> |
||||
<li><a href="#sortBy=status" data-option-value="status">Status</a></li> |
||||
</ul> |
||||
|
||||
</section> <!-- #options --> |
||||
|
||||
<div id="container" class="big-graph clearfix"> |
||||
|
||||
</div> <!-- #container --> |
||||
|
||||
|
||||
<script src="../{{ site.jquery_js }}"></script> |
||||
<script src="../{{ site.isotope_js }}"></script> |
||||
<script src="../js/make-big-graph-projects.js"></script> |
||||
<script> |
||||
|
||||
// categoryRows custom layout mode |
||||
$.extend( $.Isotope.prototype, { |
||||
|
||||
_bigGraphReset : function() { |
||||
this.bigGraph = { |
||||
x : 0, |
||||
y : 0, |
||||
height : 0, |
||||
column: 0, |
||||
row: 0, |
||||
gutter: 0, |
||||
currentCategory : null |
||||
}; |
||||
}, |
||||
|
||||
_bigGraphLayout : function( $elems ) { |
||||
var instance = this, |
||||
containerWidth = this.element.width(), |
||||
bigGraphOpts = this.options.bigGraph, |
||||
sortBy = this.options.sortBy, |
||||
elemsGroup = {}, |
||||
props = this.bigGraph; |
||||
|
||||
// group item elements into categories based on their sorting data |
||||
$elems.each( function() { |
||||
var category = $.data( this, 'isotope-sort-data' )[ sortBy ]; |
||||
elemsGroup[ category ] = elemsGroup[ category ] || []; |
||||
elemsGroup[ category ].push( this ); |
||||
}); |
||||
|
||||
var group, groupName, groupMaxRows, groupLen, |
||||
gutterWidth = bigGraphOpts.gutterWidth[ sortBy ], |
||||
x, y; |
||||
// for each group... |
||||
for ( groupName in elemsGroup ) { |
||||
group = elemsGroup[ groupName ]; |
||||
groupLen = group.length; |
||||
// make groups look nice, by limiting rows, makes for blockier blocks |
||||
groupMaxRows = groupLen / Math.ceil( groupLen / bigGraphOpts.maxRows ); |
||||
|
||||
$.each( group, function( i, elem ) { |
||||
x = props.column * bigGraphOpts.columnWidth + props.gutter * gutterWidth; |
||||
y = (bigGraphOpts.maxRows - props.row - 1) * bigGraphOpts.rowHeight; |
||||
instance._pushPosition( $(elem), x, y ); |
||||
|
||||
if ( props.row >= groupMaxRows - 1 ) { |
||||
// start a new column |
||||
props.row = 0; |
||||
props.column++; |
||||
} else { |
||||
props.row++; |
||||
} |
||||
}); |
||||
// start a new group |
||||
if ( props.row > 0 ) { |
||||
props.row = 0; |
||||
props.column++; |
||||
} |
||||
props.gutter++; |
||||
} |
||||
props.gutter--; |
||||
props.width = props.column * bigGraphOpts.columnWidth + props.gutter * gutterWidth; |
||||
}, |
||||
|
||||
_bigGraphGetContainerSize : function () { |
||||
bigGraphOpts = this.options.bigGraph; |
||||
this.bigGraph.column++; |
||||
return { |
||||
width: this.bigGraph.width, |
||||
height: bigGraphOpts.maxRows * bigGraphOpts.rowHeight |
||||
}; |
||||
}, |
||||
|
||||
_bigGraphResizeChanged : function() { |
||||
return false; |
||||
} |
||||
|
||||
}); |
||||
|
||||
|
||||
$(function(){ |
||||
|
||||
// -------- dynamically create items ---------------- // |
||||
|
||||
var i = 120, |
||||
projects = []; |
||||
|
||||
while (i--) { |
||||
projects.push( makeBigGraphProject() ); |
||||
} |
||||
|
||||
var $container = $('#container'); |
||||
|
||||
$container.append( $( projects.join('') ) ); |
||||
|
||||
// -------- isotope ---------------- // |
||||
|
||||
$container.isotope({ |
||||
itemSelector: '.project', |
||||
layoutMode: 'bigGraph', |
||||
bigGraph: { |
||||
columnWidth: 45, // size of item |
||||
rowHeight: 45, // size of item |
||||
maxRows: 11, // max number of items vertically |
||||
gutterWidth: { // width of gutter, needs to match getSortData names |
||||
year: 0, |
||||
scale: 0, |
||||
program: 35, |
||||
status: 80, |
||||
title: 0 |
||||
} |
||||
}, |
||||
sortBy: 'year', |
||||
getSortData: { |
||||
year: function( $elem ) { |
||||
return $elem.attr('data-year'); |
||||
}, |
||||
scale: function( $elem ) { |
||||
return $elem.attr('data-scale'); |
||||
}, |
||||
program: function( $elem ) { |
||||
return $elem.attr('data-program'); |
||||
}, |
||||
status: function( $elem ) { |
||||
return $elem.attr('data-status'); |
||||
}, |
||||
title: function( $elem ) { |
||||
var chara = $elem.find('p').text()[0]; |
||||
return isNaN( parseInt( chara ) ) ? chara : '0'; |
||||
} |
||||
} |
||||
}); |
||||
|
||||
{% include option-set-buttons.js %} |
||||
|
||||
|
||||
}); |
||||
</script> |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,43 @@
|
||||
var programs = 'commercial urbanism public-space culture body-culture health education housing hotel media'.split(' '), |
||||
programsLen = programs.length, |
||||
statuses = 'idea in-progress under-construction completed'.split(' '), |
||||
statusesLen = statuses.length; |
||||
|
||||
function randInt(num) { |
||||
return Math.floor( Math.random() * num ); |
||||
} |
||||
|
||||
function getChar() { |
||||
var code; |
||||
if ( Math.random() < 0.05 ) { |
||||
// number
|
||||
code = randInt(10) + 48; |
||||
} else { |
||||
// alpha
|
||||
code = randInt(24) + 65; |
||||
} |
||||
return String.fromCharCode(code); |
||||
} |
||||
|
||||
function makeBigGraphProject() { |
||||
var year = 2001 + randInt(11), |
||||
i = Math.floor( Math.random() * 2 + 3 ), |
||||
title = ''; |
||||
while (i--) { |
||||
title += getChar(); |
||||
} |
||||
var program = programs[ randInt( programsLen ) ]; |
||||
status = statuses[ randInt( statusesLen ) ]; |
||||
scale = randInt(20); |
||||
|
||||
project = '<div class="project ' + program + '" ' +
|
||||
'data-year="' + year + '" ' + |
||||
'data-program="' + program + '" ' + |
||||
'data-scale="' + scale + '" ' + |
||||
'data-status="' + status + '" ' + |
||||
'><div class="icon"></div>' +
|
||||
'<p class="title">' + title + '</p>' + |
||||
'</div>'; |
||||
|
||||
return project; |
||||
} |
||||
Loading…
Reference in new issue