Adds isotope custom layout modes.
authordsc <dsc@wikimedia.org>
Mon, 9 Apr 2012 03:27:12 +0000 (20:27 -0700)
committerdsc <dsc@wikimedia.org>
Mon, 9 Apr 2012 03:27:12 +0000 (20:27 -0700)
static/vendor/jquery.isotope.category-cols.js [new file with mode: 0644]
static/vendor/jquery.isotope.category-cols.min.js [new file with mode: 0644]
static/vendor/jquery.isotope.category-rows.js [new file with mode: 0644]
static/vendor/jquery.isotope.category-rows.min.js [new file with mode: 0644]

diff --git a/static/vendor/jquery.isotope.category-cols.js b/static/vendor/jquery.isotope.category-cols.js
new file mode 100644 (file)
index 0000000..fe512fa
--- /dev/null
@@ -0,0 +1,117 @@
+/* Category Columns -- Isotop custom layout mode */
+// 
+// See: http://isotope.metafizzy.co/custom-layout-modes/big-graph.html
+// Usage:
+//     $container.isotope({
+//         itemSelector: '.element',
+//         layoutMode: 'categoryCols',
+//         categoryCols: {
+//             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';
+//             }
+//         }
+//     });
+
+$.extend($.Isotope.prototype, {
+    
+    _categoryColsReset: function() {
+        this.categoryCols = {
+            x      : 0,
+            y      : 0,
+            height : 0,
+            column : 0,
+            row    : 0,
+            gutter : 0,
+            currentCategory : null
+        };
+    },
+    
+    _categoryColsLayout: function($elems) {
+        var instance       = this,
+            containerWidth = this.element.width(),
+            opts           = this.options.categoryCols,
+            sortBy         = this.options.sortBy,
+            elemsGroup     = {},
+            props          = this.categoryCols;
+        
+        // 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 = opts.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 / opts.maxRows);
+            
+            $.each(group, function(i, elem) {
+                x = props.column * opts.columnWidth + props.gutter * gutterWidth;
+                y = (opts.maxRows - props.row - 1) * opts.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 * opts.columnWidth + props.gutter * gutterWidth;
+    },
+    
+    _categoryColsGetContainerSize: function() {
+        opts = this.options.categoryCols;
+        this.categoryCols.column++;
+        return {
+            width: this.categoryCols.width,
+            height: opts.maxRows * opts.rowHeight
+        };
+    },
+    
+    _categoryColsResizeChanged: function() {
+        return false;
+    }
+
+});
diff --git a/static/vendor/jquery.isotope.category-cols.min.js b/static/vendor/jquery.isotope.category-cols.min.js
new file mode 100644 (file)
index 0000000..3c72fa9
--- /dev/null
@@ -0,0 +1,39 @@
+/* Category Columns -- Isotop custom layout mode */// 
+// See: http://isotope.metafizzy.co/custom-layout-modes/big-graph.html
+// Usage:
+//     $container.isotope({
+//         itemSelector: '.element',
+//         layoutMode: 'categoryCols',
+//         categoryCols: {
+//             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';
+//             }
+//         }
+//     });
+$.extend($.Isotope.prototype,{_categoryColsReset:function(){this.categoryCols={x:0,y:0,height:0,column:0,row:0,gutter:0,currentCategory:null}},_categoryColsLayout:function(a){var b=this,c=this.element.width(),d=this.options.categoryCols,e=this.options.sortBy,f={},g=this.categoryCols;a.each(function(){var a=$.data(this,"isotope-sort-data")[e];f[a]=f[a]||[],f[a].push(this)});var h,i,j,k,l=d.gutterWidth[e],m,n;for(i in f)h=f[i],k=h.length,j=k/Math.ceil(k/d.maxRows),$.each(h,function(a,c){m=g.column*d.columnWidth+g.gutter*l,n=(d.maxRows-g.row-1)*d.rowHeight,b._pushPosition($(c),m,n),g.row>=j-1?(g.row=0,g.column++):g.row++}),g.row>0&&(g.row=0,g.column++),g.gutter++;g.gutter--,g.width=g.column*d.columnWidth+g.gutter*l},_categoryColsGetContainerSize:function(){return opts=this.options.categoryCols,this.categoryCols.column++,{width:this.categoryCols.width,height:opts.maxRows*opts.rowHeight}},_categoryColsResizeChanged:function(){return!1}});
\ No newline at end of file
diff --git a/static/vendor/jquery.isotope.category-rows.js b/static/vendor/jquery.isotope.category-rows.js
new file mode 100644 (file)
index 0000000..7e9d514
--- /dev/null
@@ -0,0 +1,73 @@
+/* Category Rows -- Isotope custom layout mode */
+// 
+// See: http://isotope.metafizzy.co/custom-layout-modes/category-rows.html
+// Usage:
+//     $container.isotope({
+//         itemSelector : '.element',
+//         layoutMode : 'categoryRows',
+//         categoryRows : {
+//             gutter : 20
+//         },
+//         getSortData : {
+//             category : function( $elem ) {
+//                 return $elem.attr('data-category');
+//             }
+//         },
+//         sortBy: 'category'
+//     });
+
+$.extend($.Isotope.prototype, {
+    
+    _categoryRowsReset: function() {
+        this.categoryRows = {
+            x: 0,
+            y: 0,
+            height: 0,
+            currentCategory: null
+        };
+    },
+    
+    _categoryRowsLayout: function($elems) {
+        var instance = this,
+            containerWidth = this.element.width(),
+            sortBy = this.options.sortBy,
+            props = this.categoryRows;
+        
+        $elems.each(function() {
+            var $this = $(this),
+                atomW = $this.outerWidth(true),
+                atomH = $this.outerHeight(true),
+                category = $.data(this, 'isotope-sort-data')[sortBy],
+                x, y;
+            
+            if (category !== props.currentCategory) {
+                // new category, new row
+                props.x = 0;
+                props.height += props.currentCategory ? instance.options.categoryRows.gutter : 0;
+                props.y = props.height;
+                props.currentCategory = category;
+            } else if (props.x !== 0 && atomW + props.x > containerWidth) {
+                // if this element cannot fit in the current row
+                props.x = 0;
+                props.y = props.height;
+            }
+            
+            // position the atom
+            instance._pushPosition($this, props.x, props.y);
+            
+            props.height = Math.max(props.y + atomH, props.height);
+            props.x += atomW;
+        });
+    },
+    
+    _categoryRowsGetContainerSize: function() {
+        return {
+            height: this.categoryRows.height
+        };
+    },
+    
+    _categoryRowsResizeChanged: function() {
+        return true;
+    }
+
+});
diff --git a/static/vendor/jquery.isotope.category-rows.min.js b/static/vendor/jquery.isotope.category-rows.min.js
new file mode 100644 (file)
index 0000000..e06ffe4
--- /dev/null
@@ -0,0 +1,17 @@
+/* Category Rows -- Isotope custom layout mode *///
+// Example:
+//
+// $container.isotope({
+//     itemSelector : '.element',
+//     layoutMode : 'categoryRows',
+//     categoryRows : {
+//         gutter : 20
+//     },
+//     getSortData : {
+//         category : function( $elem ) {
+//             return $elem.attr('data-category');
+//         }
+//     },
+//     sortBy: 'category'
+// });
+$.extend($.Isotope.prototype,{_categoryRowsReset:function(){this.categoryRows={x:0,y:0,height:0,currentCategory:null}},_categoryRowsLayout:function(a){var b=this,c=this.element.width(),d=this.options.sortBy,e=this.categoryRows;a.each(function(){var a=$(this),f=a.outerWidth(!0),g=a.outerHeight(!0),h=$.data(this,"isotope-sort-data")[d],i,j;h!==e.currentCategory?(e.x=0,e.height+=e.currentCategory?b.options.categoryRows.gutter:0,e.y=e.height,e.currentCategory=h):e.x!==0&&f+e.x>c&&(e.x=0,e.y=e.height),b._pushPosition(a,e.x,e.y),e.height=Math.max(e.y+g,e.height),e.x+=f})},_categoryRowsGetContainerSize:function(){return{height:this.categoryRows.height}},_categoryRowsResizeChanged:function(){return!0}});
\ No newline at end of file