Permalink
Browse files

docs : added BIG graph layout mode

just like http://big.dk
  • Loading branch information...
desandro committed Dec 6, 2011
1 parent 7aaf583 commit 499120ce2e6e54ffd875556b4f00d209cdcf3bc9
Showing with 297 additions and 0 deletions.
  1. +196 −0 _posts/custom-layout-modes/2011-12-05-big-graph.html
  2. +58 −0 css/style.css
  3. +43 −0 js/make-big-graph-projects.js
@@ -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>
View
@@ -754,6 +754,64 @@ code .nd { color: #9FAD7E; } /* CSS pseudo selector */
font-size: 20px;
}
+/**** BIG Graph ****/
+
+.big-graph {
+ background: white;
+ height: 600px;
+ margin: 20px auto;
+}
+
+.big-graph .project {
+ width: 45px;
+ height: 45px;
+ float: left;
+}
+
+.big-graph .project .icon {
+ pointer-events: none;
+ width: 31px;
+ height: 31px;
+ background: white;
+ margin-left: 7px;
+ -webkit-transition: -webkit-transform 0.25s;
+ -moz-transition: -moz-transform 0.25s;
+ -ms-transition: -ms-transform 0.25s;
+ -o-transition: -o-transform 0.25s;
+ transition: transform 0.25s;
+}
+
+.big-graph .project:hover {
+ z-index: 5;
+
+}
+
+.big-graph .project:hover .icon {
+ -webkit-transform: scale(3);
+ -moz-transform: scale(3);
+ -ms-transform: scale(3);
+ -o-transform: scale(3);
+ transform: scale(3);
+}
+
+.big-graph .project.commercial .icon { background: #6B6B6B; }
+.big-graph .project.urbanism .icon { background: #00CF00; }
+.big-graph .project.public-space .icon { background: #FF8D00; }
+.big-graph .project.culture .icon { background: #D61919; }
+.big-graph .project.body-culture .icon { background: #00ECFF; }
+.big-graph .project.health .icon { background: #FF2251; }
+.big-graph .project.education .icon { background: #00A700; }
+.big-graph .project.housing .icon { background: #FF02FF; }
+.big-graph .project.hotel .icon { background: #0000C3; }
+.big-graph .project.media .icon { background: #292929; }
+
+.big-graph .project p {
+ line-height: 14px;
+ font-size: 10.5px;
+ color: black;
+ margin-left: 7px;
+}
+
/**** Infinite Scroll ****/
#infscr-loading {
@@ -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;
+}

0 comments on commit 499120c

Please sign in to comment.