diff --git a/_includes/add-buttons.js b/_includes/add-buttons.js index 9ff999e..62e2797 100644 --- a/_includes/add-buttons.js +++ b/_includes/add-buttons.js @@ -1,23 +1,14 @@ $('#insert a').click(function(){ - var i = Math.ceil( Math.random()*3 + 1 ), - newEls = ''; - while ( i-- ) { - newEls += fakeElement.create(); - } - var $newEls = $( newEls ) + var $newEls = $( fakeElement.getGroup() ); $container.isotope( 'insert', $newEls ); return false; }); $('#append a').click(function(){ - var i = Math.ceil( Math.random()*3 + 1 ), - newEls = ''; - while ( i-- ) { - newEls += fakeElement.create(); - } - var $newEls = $( newEls ) + var $newEls = $( fakeElement.getGroup() ); $container.append( $newEls ).isotope( 'appended', $newEls ); return false; - }); \ No newline at end of file + }); + \ No newline at end of file diff --git a/_posts/demos/2011-01-02-adding-items.html b/_posts/demos/2011-01-02-adding-items.html index cea2327..8412211 100644 --- a/_posts/demos/2011-01-02-adding-items.html +++ b/_posts/demos/2011-01-02-adding-items.html @@ -8,6 +8,7 @@ related: methods

The insert method will append, add items to the widget, filter, sort, and then layout all items

The appended method adds items to the widget, and then lays out only the new items.

+

The reloadItems method re-collects all items in their current order in the DOM, which can be useful for prepending items.

See docs on adding items.

@@ -15,6 +16,7 @@ related: methods @@ -34,6 +36,16 @@ related: methods {% include add-buttons.js %} + $('#prepend a').click(function(){ + var $newEls = $( fakeElement.getGroup() ); + $container + .prepend( $newEls ).isotope('reloadItems').isotope({ sortBy: 'original-order' }) + // set sort back to symbol for inserting + .isotope('option', { sortBy: 'symbol' }); + + return false; + }); + $(function(){ $container.isotope({ diff --git a/_posts/docs/2010-12-04-methods.mdown b/_posts/docs/2010-12-04-methods.mdown index c9048a5..df21c13 100644 --- a/_posts/docs/2010-12-04-methods.mdown +++ b/_posts/docs/2010-12-04-methods.mdown @@ -12,6 +12,7 @@ toc: - { title: layout, anchor: layout } - { title: option, anchor: option } - { title: reLayout, anchor: relayout } + - { title: reloadItems, anchor: reloaditems } - { title: remove, anchor: remove } - { title: updateSortData, anchor: updatesortdata } @@ -120,6 +121,18 @@ Resets layout properties and lays-out every item element. [**See Demo: reLayout**](../demos/relayout.html) +## reloadItems + +{% highlight javascript %} + +.isotope( 'reloadItems' ) + +{% endhighlight %} + +Re-collects all item elements in their current order in the DOM. Useful for prepending. + +[**See Demo: Adding items**](../demos/adding-items.html). + ## remove {% highlight javascript %} diff --git a/_posts/docs/2010-12-10-adding-items.mdown b/_posts/docs/2010-12-10-adding-items.mdown index 392b2f4..360b89d 100644 --- a/_posts/docs/2010-12-10-adding-items.mdown +++ b/_posts/docs/2010-12-10-adding-items.mdown @@ -8,6 +8,7 @@ toc: - { title: addItems method, anchor: additems_method } - { title: insert method, anchor: insert_method } - { title: appended method, anchor: appended_method } + - { title: Prepending method, anchor: prepending } --- @@ -44,3 +45,15 @@ The [`appended` method](methods.html#appended) is a convenience method triggers [**See Demo: Infinite Scroll**](../demos/infinite-scroll.html). See also [Infinite Scroll with filtering or sorting](troubleshooting.html#infinite_scroll_with_filtering_or_sorting) + +## Prepending + +Because of Isotope's sorting functionality, prepending isn't as straight forward as might expect. However, it can be replicated fairly easy. After prepending new content to the container, you can re-collect all the item elements and update their sorting order with the [`reloadItems` method](methods.html#reloaditems). Then trigger a re-layout, with the original DOM order. + +{% highlight javascript %} + +var $newItems = $('
'); +$('#container').prepend( $newItems) + .isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' }); + +{% endhighlight %} \ No newline at end of file diff --git a/jquery.isotope.js b/jquery.isotope.js index fadf380..2d1abba 100644 --- a/jquery.isotope.js +++ b/jquery.isotope.js @@ -1,5 +1,5 @@ /** - * Isotope v1.2.110513 + * Isotope v1.2.110516 * An exquisite jQuery plugin for magical layouts * http://isotope.metafizzy.co * @@ -9,6 +9,9 @@ * Copyright 2011 David DeSandro / Metafizzy */ +/*jshint forin: false */ +/*global jQuery: true, Modernizr: true */ + (function( window, $, undefined ){ // ========================= getStyleProperty by kangax =============================== @@ -24,7 +27,9 @@ prefixed; // test standard property first - if (typeof style[propName] == 'string') return propName; + if (typeof style[propName] === 'string') { + return propName; + } // capitalize propName = propName.charAt(0).toUpperCase() + propName.slice(1); @@ -32,7 +37,9 @@ // test vendor specific properties for (var i=0, l=prefixes.length; ih?1:gb.width){b.fitRows.x=0;b.fitRows.y=b.fitRows.height}b._pushPosition(c,b.fitRows.x+b.posLeft,b.fitRows.y+b.posTop);b.fitRows.height= -Math.max(b.fitRows.y+e,b.fitRows.height);b.fitRows.x+=d});return this},_fitRowsReset:function(){this.fitRows={x:0,y:0,height:0};return this},_fitRowsGetContainerSize:function(){return{height:this.fitRows.height}},_fitRowsResize:function(){return this.reLayout()},_cellsByRowReset:function(){this.cellsByRow={};this._getSegments("cellsByRow");this.cellsByRow.rowHeight=this.options.cellsByRow.rowHeight||this.$allAtoms.outerHeight(true);return this},_cellsByRowLayout:function(a){var b=this,c=this.cellsByRow.cols; -this.cellsByRow.atomsLen=a.length;a.each(function(d){var e=f(this),g=(d%c+0.5)*b.cellsByRow.columnWidth-e.outerWidth(true)/2+b.posLeft;d=(~~(d/c)+0.5)*b.cellsByRow.rowHeight-e.outerHeight(true)/2+b.posTop;b._pushPosition(e,g,d)});return this},_cellsByRowGetContainerSize:function(){return{height:Math.ceil(this.cellsByRow.atomsLen/this.cellsByRow.cols)*this.cellsByRow.rowHeight+this.posTop}},_cellsByRowResize:function(){var a=this.cellsByRow.cols;this._getSegments("cellsByRow");this.cellsByRow.cols!== -a&&this.reLayout();return this},_straightDownReset:function(){this.straightDown={y:0};return this},_straightDownLayout:function(a){var b=this;a.each(function(){var c=f(this);b._pushPosition(c,b.posLeft,b.straightDown.y+b.posTop);b.straightDown.y+=c.outerHeight(true)});return this},_straightDownGetContainerSize:function(){return{height:this.straightDown.y+this.posTop}},_straightDownResize:function(){this.reLayout();return this},_masonryHorizontalPlaceBrick:function(a,b,c){b=Math.min.apply(Math,c); -for(var d=b+a.outerWidth(true),e=c.length,g=e,h=this.masonryHorizontal.rows+1-e;e--;)if(c[e]===b)g=e;this._pushPosition(a,b,this.masonryHorizontal.rowHeight*g+this.posTop);for(e=0;eb.height){b.fitColumns.x=b.fitColumns.width; -b.fitColumns.y=0}b._pushPosition(c,b.fitColumns.x+b.posLeft,b.fitColumns.y+b.posTop);b.fitColumns.width=Math.max(b.fitColumns.x+d,b.fitColumns.width);b.fitColumns.y+=e});return this},_fitColumnsGetContainerSize:function(){return{width:this.fitColumns.width}},_fitColumnsResize:function(){return this.reLayout()},_cellsByColumnReset:function(){this.cellsByColumn={};this._getSegments("cellsByColumn",true);this.cellsByColumn.columnWidth=this.options.cellsByColumn.columnWidth||this.$allAtoms.outerHeight(true); -return this},_cellsByColumnLayout:function(a){var b=this,c=this.cellsByColumn.rows;this.cellsByColumn.atomsLen=a.length;a.each(function(d){var e=f(this),g=(~~(d/c)+0.5)*b.cellsByColumn.columnWidth-e.outerWidth(true)/2+b.posLeft;d=(d%c+0.5)*b.cellsByColumn.rowHeight-e.outerHeight(true)/2+b.posTop;b._pushPosition(e,g,d)});return this},_cellsByColumnGetContainerSize:function(){return{width:Math.ceil(this.cellsByColumn.atomsLen/this.cellsByColumn.rows)*this.cellsByColumn.columnWidth+this.posLeft}},_cellsByColumnResize:function(){var a= -this.cellsByColumn.rows;this._getSegments("cellsByColumn",true);this.cellsByColumn.rows!==a&&this.reLayout();return this}};f.fn.imagesLoaded=function(a){var b=this.find("img"),c=b.length,d=this;b.length||a.call(this);b.bind("load",function(){--c<=0&&a.call(d)}).each(function(){if(this.complete||this.complete===s){var e=this.src;this.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";this.src=e}});return this};f.widget=f.widget||{};f.widget.bridge=f.widget.bridge||function(a, -b){f.fn[a]=function(c){var d=typeof c==="string",e=Array.prototype.slice.call(arguments,1),g=this;c=!d&&e.length?f.extend.apply(null,[true,c].concat(e)):c;if(d&&c.charAt(0)==="_")return g;d?this.each(function(){var h=f.data(this,a);if(!h)return f.error("cannot call methods on "+a+" prior to initialization; attempted to call method '"+c+"'");if(!f.isFunction(h[c]))return f.error("no such method '"+c+"' for "+a+" widget instance");var i=h[c].apply(h,e);if(i!==h&&i!==s){g=i;return false}}):this.each(function(){var h= -f.data(this,a);h?h.option(c||{})._init():f.data(this,a,new b(c,this))});return g}};f.widget.bridge("isotope",f.Isotope)})(window,jQuery); +!f.browser.opera?{opacity:1,scale:1}:{opacity:1},animationEngine:f.browser.opera?"jquery":"best-available",animationOptions:{queue:false,duration:800},sortBy:"original-order",sortAscending:true,resizesContainer:true,transformsEnabled:true,itemPositionDataEnabled:false};f.Isotope.prototype={_create:function(a){this.options=f.extend(true,{},f.Isotope.settings,a);this.styleQueue=[];this.elemCount=0;a=this.element[0].style;this.originalStyle={};for(var b=0,c=l.length;bh?1:gb.width){b.fitRows.x=0;b.fitRows.y=b.fitRows.height}b._pushPosition(c,b.fitRows.x+b.posLeft,b.fitRows.y+b.posTop);b.fitRows.height=Math.max(b.fitRows.y+e,b.fitRows.height);b.fitRows.x+=d});return this},_fitRowsReset:function(){this.fitRows= +{x:0,y:0,height:0};return this},_fitRowsGetContainerSize:function(){return{height:this.fitRows.height}},_fitRowsResize:function(){return this.reLayout()},_cellsByRowReset:function(){this.cellsByRow={};this._getSegments("cellsByRow");this.cellsByRow.rowHeight=this.options.cellsByRow.rowHeight||this.$allAtoms.outerHeight(true);return this},_cellsByRowLayout:function(a){var b=this,c=this.cellsByRow.cols;this.cellsByRow.atomsLen=a.length;a.each(function(d){var e=f(this),g=(d%c+0.5)*b.cellsByRow.columnWidth- +e.outerWidth(true)/2+b.posLeft;d=(~~(d/c)+0.5)*b.cellsByRow.rowHeight-e.outerHeight(true)/2+b.posTop;b._pushPosition(e,g,d)});return this},_cellsByRowGetContainerSize:function(){return{height:Math.ceil(this.cellsByRow.atomsLen/this.cellsByRow.cols)*this.cellsByRow.rowHeight+this.posTop}},_cellsByRowResize:function(){var a=this.cellsByRow.cols;this._getSegments("cellsByRow");this.cellsByRow.cols!==a&&this.reLayout();return this},_straightDownReset:function(){this.straightDown={y:0};return this},_straightDownLayout:function(a){var b= +this;a.each(function(){var c=f(this);b._pushPosition(c,b.posLeft,b.straightDown.y+b.posTop);b.straightDown.y+=c.outerHeight(true)});return this},_straightDownGetContainerSize:function(){return{height:this.straightDown.y+this.posTop}},_straightDownResize:function(){this.reLayout();return this},_masonryHorizontalPlaceBrick:function(a,b,c){b=Math.min.apply(Math,c);for(var d=b+a.outerWidth(true),e=c.length,g=e,h=this.masonryHorizontal.rows+1-e;e--;)if(c[e]===b)g=e;this._pushPosition(a,b,this.masonryHorizontal.rowHeight* +g+this.posTop);for(e=0;eb.height){b.fitColumns.x=b.fitColumns.width;b.fitColumns.y=0}b._pushPosition(c,b.fitColumns.x+b.posLeft,b.fitColumns.y+b.posTop);b.fitColumns.width=Math.max(b.fitColumns.x+d,b.fitColumns.width); +b.fitColumns.y+=e});return this},_fitColumnsGetContainerSize:function(){return{width:this.fitColumns.width}},_fitColumnsResize:function(){return this.reLayout()},_cellsByColumnReset:function(){this.cellsByColumn={};this._getSegments("cellsByColumn",true);this.cellsByColumn.columnWidth=this.options.cellsByColumn.columnWidth||this.$allAtoms.outerHeight(true);return this},_cellsByColumnLayout:function(a){var b=this,c=this.cellsByColumn.rows;this.cellsByColumn.atomsLen=a.length;a.each(function(d){var e= +f(this),g=(~~(d/c)+0.5)*b.cellsByColumn.columnWidth-e.outerWidth(true)/2+b.posLeft;d=(d%c+0.5)*b.cellsByColumn.rowHeight-e.outerHeight(true)/2+b.posTop;b._pushPosition(e,g,d)});return this},_cellsByColumnGetContainerSize:function(){return{width:Math.ceil(this.cellsByColumn.atomsLen/this.cellsByColumn.rows)*this.cellsByColumn.columnWidth+this.posLeft}},_cellsByColumnResize:function(){var a=this.cellsByColumn.rows;this._getSegments("cellsByColumn",true);this.cellsByColumn.rows!==a&&this.reLayout(); +return this}};f.fn.imagesLoaded=function(a){var b=this.find("img"),c=b.length,d=this;b.length||a.call(this);b.bind("load",function(){--c<=0&&a.call(d)}).each(function(){if(this.complete||this.complete===v){var e=this.src;this.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";this.src=e}});return this};f.fn.isotope=function(a){if(typeof a==="string"){var b=Array.prototype.slice.call(arguments,1);return this.each(function(){var c=f.data(this,"isotope");if(!c)return f.error("cannot call methods on isotope prior to initialization; attempted to call method '"+ +a+"'");if(!f.isFunction(c[a])||a.charAt(0)==="_")return f.error("no such method '"+a+"' for isotope instance");c[a].apply(c,b)})}else return this.each(function(){var c=f.data(this,"isotope");c?c.option(a||{})._init():f.data(this,"isotope",new f.Isotope(a,this))})}})(window,jQuery); diff --git a/js/fake-element.js b/js/fake-element.js index b6e556c..8a3eaa0 100644 --- a/js/fake-element.js +++ b/js/fake-element.js @@ -26,4 +26,13 @@ fakeElement.create = function() { '" data-category="' + category + '">

' + number + '

' + symbol + '

' + name + '

' + weight + '

'; +}; + +fakeElement.getGroup = function() { + var i = Math.ceil( Math.random()*3 + 1 ), + newEls = ''; + while ( i-- ) { + newEls += fakeElement.create(); + } + return newEls; }; \ No newline at end of file