src & docs : add reloadItems method; add Prepending docs; add fakeElement.getGroup method;

_includes/add-buttons.js

@@ -1,23 +1,14 @@
       $('#insert a').click(function(){
-        var i = Math.ceil( Math.random()*3 + 1 ),
+        var $newEls = $( fakeElement.getGroup() );
-            newEls = '';
-        while ( i-- ) {
-          newEls += fakeElement.create();
-        }
-        var $newEls = $( newEls )
         $container.isotope( 'insert', $newEls );
 
         return false;
       });
 
       $('#append a').click(function(){
-        var i = Math.ceil( Math.random()*3 + 1 ),
+        var $newEls = $( fakeElement.getGroup() );
-            newEls = '';
-        while ( i-- ) {
-          newEls += fakeElement.create();
-        }
-        var $newEls = $( newEls )
         $container.append( $newEls ).isotope( 'appended', $newEls );
 
         return false;
-      });
+      });
+      

_posts/demos/2011-01-02-adding-items.html

@@ -8,6 +8,7 @@ related: methods
   <section id="copy">
     <p>The <code>insert</code> method will append, add items to the widget, filter, sort, and then layout all items</p>
     <p>The <code>appended</code> method adds items to the widget, and then lays out only the new items.</p>
+    <p>The <code>reloadItems</code> method re-collects all items in their current order in the DOM, which can be useful for prepending items.</p>
     <p>See docs on <a href="../docs/adding-items.html">adding items</a>.</p>
   </section>
 
@@ -15,6 +16,7 @@ related: methods
     <ul class="floated clearfix">
       <li id="insert"><a href="#insert">Insert new elements</a></li>
       <li id="append"><a href='#append'>Append new elements</a></li>
+      <li id="prepend"><a href='#prepend'>Prepend</a></li>
     </ul>
   </section>
 
@@ -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({

_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 %}

_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 = $('<div class="item" /><div class="item" /><div class="item" />');
+$('#container').prepend( $newItems)
+  .isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' });
+
+{% endhighlight %}

jquery.isotope.js

@@ -386,9 +386,8 @@
 
       this.options.getSortData = $.extend( this.options.getSortData, originalOrderSorter );
 
-      
       // need to get atoms
-      this.$allAtoms = this._getAtoms( this.element.children() );
+      this.reloadItems();
       
       // get top left position of where the bricks should be
       var $cursor   = $( document.createElement('div') );
@@ -702,6 +701,11 @@
       });
     },
     
+    // gathers all atoms
+    reloadItems : function() {
+      this.$allAtoms = this._getAtoms( this.element.children() );
+    },
+    
     // removes elements from Isotope widget
     remove : function( $content ) {
 

jquery.isotope.min.js

@@ -15,14 +15,14 @@ a[0]+"px, "+a[1]+"px) "},scale:function(a){return"scale("+a+") "}},u=function(a,
 a.now+a.unit)};f.cssNumber.translate=true;f.cssHooks.translate={set:function(a,b){u(a,"translate",b)},get:function(a){return(a=f.data(a,"isoTransform"))&&a.translate?a.translate:[0,0]}}}var q=f.event,r;q.special.smartresize={setup:function(){f(this).bind("resize",q.special.smartresize.handler)},teardown:function(){f(this).unbind("resize",q.special.smartresize.handler)},handler:function(a,b){var c=this,d=arguments;a.type="smartresize";r&&clearTimeout(r);r=setTimeout(function(){jQuery.event.handle.apply(c,
 d)},b==="execAsap"?0:100)}};f.fn.smartresize=function(a){return a?this.bind("smartresize",a):this.trigger("smartresize",["execAsap"])};f.Isotope=function(a,b){this.element=f(b);this._create(a);this._init()};var l=["overflow","position","width","height"];f.Isotope.settings={resizable:true,layoutMode:"masonry",containerClass:"isotope",itemClass:"isotope-item",hiddenClass:"isotope-hidden",hiddenStyle:Modernizr.csstransforms&&!f.browser.opera?{opacity:0,scale:0.0010}:{opacity:0},visibleStyle:Modernizr.csstransforms&&
 !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;b<c;b++){var d=l[b];this.originalStyle[d]=
-a[d]||null}this.element.css({overflow:"hidden",position:"relative"});this._updateAnimationEngine();this._updateUsingTransforms();this.options.getSortData=f.extend(this.options.getSortData,{"original-order":function(g,h){return h.elemCount}});this.$allAtoms=this._getAtoms(this.element.children());a=f(document.createElement("div"));this.element.prepend(a);this.posTop=Math.round(a.position().top);this.posLeft=Math.round(a.position().left);a.remove();var e=this;setTimeout(function(){e.element.addClass(e.options.containerClass)},
+a[d]||null}this.element.css({overflow:"hidden",position:"relative"});this._updateAnimationEngine();this._updateUsingTransforms();this.options.getSortData=f.extend(this.options.getSortData,{"original-order":function(g,h){return h.elemCount}});this.reloadItems();a=f(document.createElement("div"));this.element.prepend(a);this.posTop=Math.round(a.position().top);this.posLeft=Math.round(a.position().left);a.remove();var e=this;setTimeout(function(){e.element.addClass(e.options.containerClass)},0);this.options.resizable&&
-0);this.options.resizable&&f(k).bind("smartresize.isotope",function(){e.element.isotope("resize")})},_getAtoms:function(a){var b=this.options.itemSelector;a=b?a.filter(b).add(a.find(b)):a;b={position:"absolute"};if(this.usingTransforms){b.left=0;b.top=0}a.css(b).addClass(this.options.itemClass);this.updateSortData(a,true);return a},_init:function(a){this.$filteredAtoms=this._filter(this.$allAtoms);this._sort();this.reLayout(a)},option:function(a,b){if(f.isPlainObject(a)){this.options=f.extend(true,
+f(k).bind("smartresize.isotope",function(){e.element.isotope("resize")})},_getAtoms:function(a){var b=this.options.itemSelector;a=b?a.filter(b).add(a.find(b)):a;b={position:"absolute"};if(this.usingTransforms){b.left=0;b.top=0}a.css(b).addClass(this.options.itemClass);this.updateSortData(a,true);return a},_init:function(a){this.$filteredAtoms=this._filter(this.$allAtoms);this._sort();this.reLayout(a)},option:function(a,b){if(f.isPlainObject(a)){this.options=f.extend(true,this.options,a);for(var c in a)this._updateOption(c)}else if(a&&
-this.options,a);for(var c in a)this._updateOption(c)}else if(a&&typeof b==="undefined")return this.options[a];else{this.options[a]=b;this._updateOption(a)}return this},_updateOption:function(a){a="_update"+a.charAt(0).toUpperCase()+a.slice(1);if(this[a])this[a]()},_updateAnimationEngine:function(){switch(this.options.animationEngine.toLowerCase().replace(/[ _\-]/g,"")){case "css":case "none":this.isUsingJQueryAnimation=false;break;case "jquery":this.isUsingJQueryAnimation=true;break;default:this.isUsingJQueryAnimation=
+typeof b==="undefined")return this.options[a];else{this.options[a]=b;this._updateOption(a)}return this},_updateOption:function(a){a="_update"+a.charAt(0).toUpperCase()+a.slice(1);if(this[a])this[a]()},_updateAnimationEngine:function(){switch(this.options.animationEngine.toLowerCase().replace(/[ _\-]/g,"")){case "css":case "none":this.isUsingJQueryAnimation=false;break;case "jquery":this.isUsingJQueryAnimation=true;break;default:this.isUsingJQueryAnimation=!Modernizr.csstransitions}this._updateUsingTransforms()},
-!Modernizr.csstransitions}this._updateUsingTransforms()},_updateTransformsEnabled:function(){this._updateUsingTransforms()},_updateUsingTransforms:function(){this.getPositionStyles=(this.usingTransforms=this.options.transformsEnabled&&Modernizr.csstransforms&&Modernizr.csstransitions&&!this.isUsingJQueryAnimation)?this._translate:this._positionAbs},_filter:function(a){var b=this.options.filter===""?"*":this.options.filter;if(b){var c=this.options.hiddenClass,d="."+c,e=a.not(d),g=a.filter(d);d=g;a=
+_updateTransformsEnabled:function(){this._updateUsingTransforms()},_updateUsingTransforms:function(){this.getPositionStyles=(this.usingTransforms=this.options.transformsEnabled&&Modernizr.csstransforms&&Modernizr.csstransitions&&!this.isUsingJQueryAnimation)?this._translate:this._positionAbs},_filter:function(a){var b=this.options.filter===""?"*":this.options.filter;if(b){var c=this.options.hiddenClass,d="."+c,e=a.not(d),g=a.filter(d);d=g;a=a.filter(b);if(b!=="*"){d=g.filter(b);b=e.not(b).toggleClass(c);
-a.filter(b);if(b!=="*"){d=g.filter(b);b=e.not(b).toggleClass(c);b.addClass(c);this.styleQueue.push({$el:b,style:this.options.hiddenStyle})}this.styleQueue.push({$el:d,style:this.options.visibleStyle});d.removeClass(c)}return a},updateSortData:function(a,b){var c=this,d=this.options.getSortData,e,g;a.each(function(){e=f(this);g={};for(var h in d)g[h]=d[h](e,c);e.data("isotope-sort-data",g);b&&c.elemCount++})},_sort:function(){var a=this.options.sortBy,b=this._getSorter,c=this.options.sortAscending?
+b.addClass(c);this.styleQueue.push({$el:b,style:this.options.hiddenStyle})}this.styleQueue.push({$el:d,style:this.options.visibleStyle});d.removeClass(c)}return a},updateSortData:function(a,b){var c=this,d=this.options.getSortData,e,g;a.each(function(){e=f(this);g={};for(var h in d)g[h]=d[h](e,c);e.data("isotope-sort-data",g);b&&c.elemCount++})},_sort:function(){var a=this.options.sortBy,b=this._getSorter,c=this.options.sortAscending?1:-1;this.$filteredAtoms.sort(function(d,e){var g=b(d,a),h=b(e,
-1:-1;this.$filteredAtoms.sort(function(d,e){var g=b(d,a),h=b(e,a);if(g===h&&a!=="original-order"){g=b(d,"original-order");h=b(e,"original-order")}return(g>h?1:g<h?-1:0)*c});return this},_getSorter:function(a,b){return f(a).data("isotope-sort-data")[b]},_translate:function(a,b){return{translate:[a,b]}},_positionAbs:function(a,b){return{left:a,top:b}},_pushPosition:function(a,b,c){var d=this.getPositionStyles(b,c);this.styleQueue.push({$el:a,style:d});this.options.itemPositionDataEnabled&&a.data("isotope-item-position",
+a);if(g===h&&a!=="original-order"){g=b(d,"original-order");h=b(e,"original-order")}return(g>h?1:g<h?-1:0)*c});return this},_getSorter:function(a,b){return f(a).data("isotope-sort-data")[b]},_translate:function(a,b){return{translate:[a,b]}},_positionAbs:function(a,b){return{left:a,top:b}},_pushPosition:function(a,b,c){var d=this.getPositionStyles(b,c);this.styleQueue.push({$el:a,style:d});this.options.itemPositionDataEnabled&&a.data("isotope-item-position",{x:b,y:c})},layout:function(a,b){var c=this.options.layoutMode;
-{x:b,y:c})},layout:function(a,b){var c=this.options.layoutMode;this["_"+c+"Layout"](a);this.options.resizesContainer&&this.styleQueue.push({$el:this.element,style:this["_"+c+"GetContainerSize"]()});var d=!this.isLaidOut?"css":this.isUsingJQueryAnimation?"animate":"css",e=this.options.animationOptions;f.each(this.styleQueue,function(g,h){h.$el[d](h.style,e)});this.styleQueue=[];b&&b.call(a);this.isLaidOut=true;return this},resize:function(){return this["_"+this.options.layoutMode+"Resize"]()},reLayout:function(a){return this["_"+
+this["_"+c+"Layout"](a);this.options.resizesContainer&&this.styleQueue.push({$el:this.element,style:this["_"+c+"GetContainerSize"]()});var d=!this.isLaidOut?"css":this.isUsingJQueryAnimation?"animate":"css",e=this.options.animationOptions;f.each(this.styleQueue,function(g,h){h.$el[d](h.style,e)});this.styleQueue=[];b&&b.call(a);this.isLaidOut=true;return this},resize:function(){return this["_"+this.options.layoutMode+"Resize"]()},reLayout:function(a){return this["_"+this.options.layoutMode+"Reset"]().layout(this.$filteredAtoms,
-this.options.layoutMode+"Reset"]().layout(this.$filteredAtoms,a)},addItems:function(a,b){var c=this._getAtoms(a);this.$allAtoms=this.$allAtoms.add(c);b&&b(c)},insert:function(a,b){this.element.append(a);var c=this;this.addItems(a,function(d){d=c._filter(d);c.$filteredAtoms=c.$filteredAtoms.add(d)});this._sort().reLayout(b)},appended:function(a,b){var c=this;this.addItems(a,function(d){c.$filteredAtoms=c.$filteredAtoms.add(d);c.layout(d,b)})},remove:function(a){this.$allAtoms=this.$allAtoms.not(a);
+a)},addItems:function(a,b){var c=this._getAtoms(a);this.$allAtoms=this.$allAtoms.add(c);b&&b(c)},insert:function(a,b){this.element.append(a);var c=this;this.addItems(a,function(d){d=c._filter(d);c.$filteredAtoms=c.$filteredAtoms.add(d)});this._sort().reLayout(b)},appended:function(a,b){var c=this;this.addItems(a,function(d){c.$filteredAtoms=c.$filteredAtoms.add(d);c.layout(d,b)})},reloadItems:function(){this.$allAtoms=this._getAtoms(this.element.children())},remove:function(a){this.$allAtoms=this.$allAtoms.not(a);
 this.$filteredAtoms=this.$filteredAtoms.not(a);a.remove()},_shuffleArray:function(a){var b,c,d=a.length;if(d)for(;--d;){c=~~(Math.random()*(d+1));b=a[c];a[c]=a[d];a[d]=b}return a},shuffle:function(a){this.options.sortBy="shuffle";this.$allAtoms=this._shuffleArray(this.$allAtoms);this.$filteredAtoms=this._filter(this.$allAtoms);return this.reLayout(a)},destroy:function(){var a=this.usingTransforms;this.$allAtoms.removeClass(this.options.hiddenClass+" "+this.options.itemClass).each(function(){this.style.position=
 null;this.style.top=null;this.style.left=null;this.style.opacity=null;if(a)this.style[n]=null});for(var b=this.element[0].style,c=0,d=l.length;c<d;c++){var e=l[c];b[e]=this.originalStyle[e]}this.element.unbind(".isotope").removeClass(this.options.containerClass).removeData("isotope");f(k).unbind(".isotope")},_getSegments:function(a,b){var c=b?"rowHeight":"columnWidth",d=b?"height":"width",e=b?"Height":"Width",g=b?"rows":"cols";this[d]=this.element[d]();e=this.options[a]&&this.options[a][c]||this.$filteredAtoms["outer"+
 e](true)||this[d];d=Math.floor(this[d]/e);d=Math.max(d,1);this[a][g]=d;this[a][c]=e;return this},_masonryPlaceBrick:function(a,b,c){b=Math.min.apply(Math,c);for(var d=b+a.outerHeight(true),e=c.length,g=e,h=this.masonry.cols+1-e;e--;)if(c[e]===b)g=e;this._pushPosition(a,this.masonry.columnWidth*g+this.posLeft,b);for(e=0;e<h;e++)this.masonry.colYs[g+e]=d},_masonryLayout:function(a){var b=this;a.each(function(){var c=f(this),d=Math.ceil(c.outerWidth(true)/b.masonry.columnWidth);d=Math.min(d,b.masonry.cols);

js/fake-element.js

@@ -26,4 +26,13 @@ fakeElement.create = function() {
     '" data-category="' + category + '"><p class="number">' + number + 
     '</p><h3 class="symbol">' + symbol + '</h3><h2 class="name">' + name + 
     '</h2><p class="weight">' + weight + '</p></div>';
+};
+
+fakeElement.getGroup = function() {
+  var i = Math.ceil( Math.random()*3 + 1 ),
+      newEls = '';
+  while ( i-- ) {
+    newEls += fakeElement.create();
+  }
+  return newEls;
 };