--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/enmi12/glossaire/_posts/custom-layout-modes/2011-12-05-big-graph.html	Wed Nov 06 03:21:17 2013 +0000
@@ -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>