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 e4caa7e..2d1abba 100644 --- a/jquery.isotope.js +++ b/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 ) { diff --git a/jquery.isotope.min.js b/jquery.isotope.min.js index 684565c..2227fab 100644 --- a/jquery.isotope.min.js +++ b/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;bh?1:gh?1:g

' + 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