docs : added BIG graph layout mode

just like http://big.dk

_posts/custom-layout-modes/2011-12-05-big-graph.html

@@ -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>

css/style.css

@@ -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 {

js/make-big-graph-projects.js

@@ -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;
+}