From 7117369b43447edd3ef8f269273d9aed9ff6a275 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 16 May 2011 20:46:00 -0400 Subject: [PATCH 1/4] src : revise plugin bridge. Mix of @jsor and jQuery UI --- jquery.isotope.js | 103 ++++++++++++++++-------------------------- jquery.isotope.min.js | 17 ++++--- 2 files changed, 46 insertions(+), 74 deletions(-) diff --git a/jquery.isotope.js b/jquery.isotope.js index fadf380..30b4ae3 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 * @@ -1232,69 +1232,42 @@ -// ======================= jQuery Widget bridge =============================== - - -/*! - * jQuery UI Widget 1.8.5 - * - * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) - * Dual licensed under the MIT or GPL Version 2 licenses. - * http://jquery.org/license - * - * http://docs.jquery.com/UI/Widget - */ - - $.widget = $.widget || {}; - - $.widget.bridge = $.widget.bridge || function( name, object ) { - $.fn[ name ] = function( options ) { - var isMethodCall = typeof options === "string", - args = Array.prototype.slice.call( arguments, 1 ), - returnValue = this; - - // allow multiple hashes to be passed on init - options = !isMethodCall && args.length ? - $.extend.apply( null, [ true, options ].concat(args) ) : - options; - - // prevent calls to internal methods - if ( isMethodCall && options.charAt( 0 ) === "_" ) { - return returnValue; - } - - if ( isMethodCall ) { - this.each(function() { - var instance = $.data( this, name ); - if ( !instance ) { - return $.error( "cannot call methods on " + name + " prior to initialization; " + - "attempted to call method '" + options + "'" ); - } - if ( !$.isFunction( instance[options] ) ) { - return $.error( "no such method '" + options + "' for " + name + " widget instance" ); - } - var methodValue = instance[ options ].apply( instance, args ); - if ( methodValue !== instance && methodValue !== undefined ) { - returnValue = methodValue; - return false; - } - }); - } else { - this.each(function() { - var instance = $.data( this, name ); - if ( instance ) { - instance.option( options || {} )._init(); - } else { - $.data( this, name, new object( options, this ) ); - } - }); - } - - return returnValue; - }; + // ======================= Plugin bridge =============================== + // leverages data method to either create or return $.Isotope constructor + // A bit from jQuery UI + // https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.widget.js + // A bit from jcarousel + // https://github.com/jsor/jcarousel/blob/master/lib/jquery.jcarousel.js + + $.fn.isotope = function( options ) { + if ( typeof options === 'string' ) { + // call method + var args = Array.prototype.slice.call( arguments, 1 ); + + return this.each(function(){ + var instance = $.data( this, 'isotope' ); + if ( !instance ) { + return $.error( "cannot call methods on isotope prior to initialization; " + + "attempted to call method '" + options + "'" ); + } + if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) { + return $.error( "no such method '" + options + "' for isotope instance" ); + } + // apply method + instance[ options ].apply( instance, args ); + }); + } else { + return this.each(function() { + var instance = $.data( this, 'isotope' ); + if ( instance ) { + // apply options & init + instance.option( options || {} )._init(); + } else { + // initialize new instance + $.data( this, 'isotope', new $.Isotope( options, this ) ); + } + }); + } }; - - - $.widget.bridge( 'isotope', $.Isotope ); -})( window, jQuery ); +})( window, jQuery ); \ No newline at end of file diff --git a/jquery.isotope.min.js b/jquery.isotope.min.js index 3c490fc..299d7bc 100644 --- a/jquery.isotope.min.js +++ b/jquery.isotope.min.js @@ -1,5 +1,5 @@ /** - * Isotope v1.2.110513 + * Isotope v1.2.110516 * An exquisite jQuery plugin for magical layouts * http://isotope.metafizzy.co * @@ -8,11 +8,11 @@ * * Copyright 2011 David DeSandro / Metafizzy */ -(function(k,f,s){var m=function(){var a=["Moz","Webkit","Khtml","O","Ms"];return function(b,c){c=c||document.documentElement;var d=c.style,e;if(typeof d[b]=="string")return b;b=b.charAt(0).toUpperCase()+b.slice(1);for(var g=0,h=a.length;gb.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); +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); From 8fb844ba82cbe5099a410e53d2569226d13b0e97 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 16 May 2011 21:03:37 -0400 Subject: [PATCH 2/4] src : JSHints; add JSHint options --- jquery.isotope.js | 12 ++++++++++-- jquery.isotope.min.js | 4 ++-- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/jquery.isotope.js b/jquery.isotope.js index 30b4ae3..905155a 100644 --- a/jquery.isotope.js +++ b/jquery.isotope.js @@ -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; i Date: Mon, 16 May 2011 21:31:29 -0400 Subject: [PATCH 3/4] src : merge filterFind and setupAtoms into getAtoms --- jquery.isotope.js | 48 ++++++++++++++++++++----------------------- jquery.isotope.min.js | 48 +++++++++++++++++++++---------------------- 2 files changed, 46 insertions(+), 50 deletions(-) diff --git a/jquery.isotope.js b/jquery.isotope.js index 905155a..e4caa7e 100644 --- a/jquery.isotope.js +++ b/jquery.isotope.js @@ -353,10 +353,6 @@ $.Isotope.prototype = { - _filterFind: function( $elems, selector ) { - return selector ? $elems.filter( selector ).add( $elems.find( selector ) ) : $elems; - }, - // sets up widget _create : function( options ) { @@ -364,8 +360,6 @@ this.styleQueue = []; this.elemCount = 0; - // need to get atoms - this.$allAtoms = this._filterFind( this.element.children(), this.options.itemSelector ); // get original styles in case we re-apply them in .destroy() var elemStyle = this.element[0].style; @@ -392,8 +386,9 @@ this.options.getSortData = $.extend( this.options.getSortData, originalOrderSorter ); - this._setupAtoms( this.$allAtoms ); + // need to get atoms + this.$allAtoms = this._getAtoms( this.element.children() ); // get top left position of where the bricks should be var $cursor = $( document.createElement('div') ); @@ -416,6 +411,25 @@ } }, + + _getAtoms : function( $elems ) { + var selector = this.options.itemSelector, + // filter & find + $atoms = selector ? $elems.filter( selector ).add( $elems.find( selector ) ) : $elems, + // base style for atoms + atomStyle = { position: 'absolute' }; + + if ( this.usingTransforms ) { + atomStyle.left = 0; + atomStyle.top = 0; + } + + $atoms.css( atomStyle ).addClass( this.options.itemClass ); + + this.updateSortData( $atoms, true ); + + return $atoms; + }, // _init fires when your instance is first created // (from the constructor above), and when you @@ -497,23 +511,6 @@ }, - // ====================== Adding ====================== - - _setupAtoms : function( $atoms ) { - - // base style for atoms - var atomStyle = { position: 'absolute' }; - if ( this.usingTransforms ) { - atomStyle.left = 0; - atomStyle.top = 0; - } - - $atoms.css( atomStyle ).addClass( this.options.itemClass ); - - this.updateSortData( $atoms, true ); - - }, - // ====================== Filtering ====================== _filter : function( $atoms ) { @@ -672,8 +669,7 @@ // adds a jQuery object of items to a isotope container addItems : function( $content, callback ) { - var $newAtoms = this._filterFind( $content, this.options.itemSelector ); - this._setupAtoms( $newAtoms ); + var $newAtoms = this._getAtoms( $content ); // add new atoms to atoms pools // FIXME : this breaks shuffle order and returns to original order this.$allAtoms = this.$allAtoms.add( $newAtoms ); diff --git a/jquery.isotope.min.js b/jquery.isotope.min.js index 2cca7c6..684565c 100644 --- a/jquery.isotope.min.js +++ b/jquery.isotope.min.js @@ -14,27 +14,27 @@ Modernizr.hasOwnProperty(p.name)||Modernizr.addTest(p.name,p.getResult)}else k.M a[0]+"px, "+a[1]+"px) "},scale:function(a){return"scale("+a+") "}},u=function(a,b,c){var d=f(a),e=d.data("isoTransform")||{},g={},h,i={};g[b]=c;f.extend(e,g);for(h in e){b=e[h];i[h]=x[h](b)}h=(i.translate||"")+(i.scale||"");d.data("isoTransform",e);a.style[n]=h};f.cssNumber.scale=true;f.cssHooks.scale={set:function(a,b){if(typeof b==="string")b=parseFloat(b);u(a,"scale",b)},get:function(a){return(a=f.data(a,"isoTransform"))&&a.scale?a.scale:1}};f.fx.step.scale=function(a){f.cssHooks.scale.set(a.elem, 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={_filterFind:function(a,b){return b?a.filter(b).add(a.find(b)):a},_create:function(a){this.options=f.extend(true,{},f.Isotope.settings,a);this.styleQueue=[];this.elemCount=0;this.$allAtoms=this._filterFind(this.element.children(), -this.options.itemSelector);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); +!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); From ce0a6927cca6e5bcc2da4d377d669741db85d050 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 16 May 2011 22:23:08 -0400 Subject: [PATCH 4/4] src & docs : add reloadItems method; add Prepending docs; add fakeElement.getGroup method; --- _includes/add-buttons.js | 17 ++++------------- _posts/demos/2011-01-02-adding-items.html | 12 ++++++++++++ _posts/docs/2010-12-04-methods.mdown | 13 +++++++++++++ _posts/docs/2010-12-10-adding-items.mdown | 13 +++++++++++++ jquery.isotope.js | 8 ++++++-- jquery.isotope.min.js | 16 ++++++++-------- js/fake-element.js | 9 +++++++++ 7 files changed, 65 insertions(+), 23 deletions(-) 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