From 13c1a1746f31a1fab7fcb233933d80b5ea43ceb4 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 2 Feb 2011 07:44:15 -0500 Subject: [PATCH] src & docs : add resizesContainer option --- _posts/docs/2010-12-03-options.mdown | 11 +++++++ jquery.isotope.js | 13 ++++---- jquery.isotope.min.js | 44 ++++++++++++++-------------- 3 files changed, 39 insertions(+), 29 deletions(-) diff --git a/_posts/docs/2010-12-03-options.mdown b/_posts/docs/2010-12-03-options.mdown index 89091b5..da8123e 100644 --- a/_posts/docs/2010-12-03-options.mdown +++ b/_posts/docs/2010-12-03-options.mdown @@ -17,6 +17,7 @@ toc: - { title: itemSelector, anchor: itemselector } - { title: layoutMode, anchor: layoutmode } - { title: resizable, anchor: resizable } + - { title: resizesContainer, anchor: resizescontainer } - { title: sortAscending, anchor: sortascending } - { title: sortBy, anchor: sortby } - { title: visibleStyle, anchor: visiblestyle } @@ -188,6 +189,16 @@ See also docs on [Layout modes](layout-modes.html). Triggers layout logic when browser window is resized. +## resizesContainer + +
+
resizesContainer
+
Boolean
+
true
+
+ +Isotope will set the height (for vertical layout modes) or width (for horizontal layout modes) of the container after layout. If `resizesContainer` is set to `false`, be sure to set a size for the container in your CSS, so it doesn't collapse when Isotope is triggered. + ## sortAscending
diff --git a/jquery.isotope.js b/jquery.isotope.js index 97fffc3..83efeb1 100644 --- a/jquery.isotope.js +++ b/jquery.isotope.js @@ -343,8 +343,8 @@ window.Modernizr = window.Modernizr || (function(window,doc,undefined){ duration: 800 }, sortBy : 'original-order', - sortAscending : true - + sortAscending : true, + resizesContainer : true }, _filterFind: function( $elems, selector ) { @@ -589,12 +589,11 @@ window.Modernizr = window.Modernizr || (function(window,doc,undefined){ // layout logic this[ '_' + layoutMode + 'Layout' ]( $elems ); - // set the size of the container - var containerStyle = this[ '_' + layoutMode + 'GetContainerSize' ](); - this.styleQueue.push({ $el: this.element, style: containerStyle }); - - + if ( this.options.resizesContainer ) { + var containerStyle = this[ '_' + layoutMode + 'GetContainerSize' ](); + this.styleQueue.push({ $el: this.element, style: containerStyle }); + } // are we animating the layout arrangement? // use plugin-ish syntax for css or animate diff --git a/jquery.isotope.min.js b/jquery.isotope.min.js index 96acc45..8eed1bf 100644 --- a/jquery.isotope.min.js +++ b/jquery.isotope.min.js @@ -14,27 +14,27 @@ m.id="modernizr";b.appendChild(m);h=m.offsetHeight===3;i.parentNode.removeChild( (function(e,k){e.isoTransform={transformProp:getStyleProperty("transform"),fnUtils:Modernizr.csstransforms3d?{translate:function(a){return"translate3d("+a[0]+"px, "+a[1]+"px, 0) "},scale:function(a){return"scale3d("+a+", "+a+", 1) "}}:{translate:function(a){return"translate("+a[0]+"px, "+a[1]+"px) "},scale:function(a){return"scale("+a+") "}},set:function(a,b,c){var d=e(a).data("transform")||{},f={},g,h={};f[b]=c;e.extend(d,f);for(g in d)h[g]=(0,e.isoTransform.fnUtils[g])(d[g]);b=(h.translate||"")+ (h.scale||"");e(a).data("transform",d);a.style[e.isoTransform.transformProp]=b}};e.cssNumber.scale=true;e.cssHooks.scale={set:function(a,b){if(typeof b==="string")b=parseFloat(b);e.isoTransform.set(a,"scale",b)},get:function(a){return(a=e.data(a,"transform"))&&a.scale?a.scale:1}};e.fx.step.scale=function(a){e.cssHooks.scale.set(a.elem,a.now+a.unit)};e.cssNumber.translate=true;e.cssHooks.translate={set:function(a,b){e.isoTransform.set(a,"translate",b)},get:function(a){return(a=e.data(a,"transform"))&& a.translate?a.translate:[0,0]}};var j=e.event,l;j.special.smartresize={setup:function(){e(this).bind("resize",j.special.smartresize.handler)},teardown:function(){e(this).unbind("resize",j.special.smartresize.handler)},handler:function(a,b){var c=this,d=arguments;a.type="smartresize";l&&clearTimeout(l);l=setTimeout(function(){jQuery.event.handle.apply(c,d)},b==="execAsap"?0:100)}};e.fn.smartresize=function(a){return a?this.bind("smartresize",a):this.trigger("smartresize",["execAsap"])};e.Isotope=function(a, -b){this.element=e(b);this._create(a);this._init()};e.Isotope.prototype={options:{resizable:true,layoutMode:"masonry",containerClass:"isotope",itemClass:"isotope-item",hiddenClass:"isotope-hidden",hiddenStyle:Modernizr.csstransforms&&!e.browser.opera?{opacity:0,scale:0.0010}:{opacity:0},visibleStyle:Modernizr.csstransforms&&!e.browser.opera?{opacity:1,scale:1}:{opacity:1},animationEngine:e.browser.opera?"jquery":"best-available",animationOptions:{queue:false,duration:800},sortBy:"original-order",sortAscending:true}, -_filterFind:function(a,b){return b?a.filter(b).add(a.find(b)):a},_create:function(a){this.options=e.extend(true,{},this.options,a);this.isNew={};this.styleQueue=[];this.elemCount=0;this.$allAtoms=this._filterFind(this.element.children(),this.options.itemSelector);this.element.css({overflow:"hidden",position:"relative"});a=false;switch(this.options.animationEngine.toLowerCase().replace(/[ _\-]/g,"")){case "none":this.applyStyleFnName="css";break;case "jquery":this.applyStyleFnName="animate";a=true; -break;default:this.applyStyleFnName=Modernizr.csstransitions?"css":"animate"}this.positionFn=(this.usingTransforms=Modernizr.csstransforms&&Modernizr.csstransitions&&!a)?this._translate:this._positionAbs;this.options.getSortData=e.extend(this.options.getSortData,{"original-order":function(c,d){return d.elemCount}});this._setupAtoms(this.$allAtoms);a=e(document.createElement("div"));this.element.prepend(a);this.posTop=Math.round(a.position().top);this.posLeft=Math.round(a.position().left);a.remove(); -var b=this;setTimeout(function(){b.element.addClass(b.options.containerClass)},0);this.options.resizable&&e(window).bind("smartresize.isotope",function(){b.element.isotope("resize")})},_isNewProp:function(a){return this.prevOpts?this.options[a]!==this.prevOpts[a]:true},_init:function(a){var b=this;e.each(["filter","sortBy","sortAscending"],function(c,d){b.isNew[d]=b._isNewProp(d)});this.$filteredAtoms=this.isNew.filter?this._filter(this.$allAtoms):this.$allAtoms;if(this.isNew.filter||this.isNew.sortBy|| +b){this.element=e(b);this._create(a);this._init()};e.Isotope.prototype={options:{resizable:true,layoutMode:"masonry",containerClass:"isotope",itemClass:"isotope-item",hiddenClass:"isotope-hidden",hiddenStyle:Modernizr.csstransforms&&!e.browser.opera?{opacity:0,scale:0.0010}:{opacity:0},visibleStyle:Modernizr.csstransforms&&!e.browser.opera?{opacity:1,scale:1}:{opacity:1},animationEngine:e.browser.opera?"jquery":"best-available",animationOptions:{queue:false,duration:800},sortBy:"original-order",sortAscending:true, +resizesContainer:true},_filterFind:function(a,b){return b?a.filter(b).add(a.find(b)):a},_create:function(a){this.options=e.extend(true,{},this.options,a);this.isNew={};this.styleQueue=[];this.elemCount=0;this.$allAtoms=this._filterFind(this.element.children(),this.options.itemSelector);this.element.css({overflow:"hidden",position:"relative"});a=false;switch(this.options.animationEngine.toLowerCase().replace(/[ _\-]/g,"")){case "none":this.applyStyleFnName="css";break;case "jquery":this.applyStyleFnName= +"animate";a=true;break;default:this.applyStyleFnName=Modernizr.csstransitions?"css":"animate"}this.positionFn=(this.usingTransforms=Modernizr.csstransforms&&Modernizr.csstransitions&&!a)?this._translate:this._positionAbs;this.options.getSortData=e.extend(this.options.getSortData,{"original-order":function(c,d){return d.elemCount}});this._setupAtoms(this.$allAtoms);a=e(document.createElement("div"));this.element.prepend(a);this.posTop=Math.round(a.position().top);this.posLeft=Math.round(a.position().left); +a.remove();var b=this;setTimeout(function(){b.element.addClass(b.options.containerClass)},0);this.options.resizable&&e(window).bind("smartresize.isotope",function(){b.element.isotope("resize")})},_isNewProp:function(a){return this.prevOpts?this.options[a]!==this.prevOpts[a]:true},_init:function(a){var b=this;e.each(["filter","sortBy","sortAscending"],function(c,d){b.isNew[d]=b._isNewProp(d)});this.$filteredAtoms=this.isNew.filter?this._filter(this.$allAtoms):this.$allAtoms;if(this.isNew.filter||this.isNew.sortBy|| this.isNew.sortAscending)this._sort();this.reLayout(a)},option:function(a,b){if(e.isPlainObject(a))this.options=e.extend(true,this.options,a);else if(a&&typeof b==="undefined")return this.options[a];else this.options[a]=b;return this},_setupAtoms:function(a){var b={position:"absolute"};if(this.usingTransforms){b.left=0;b.top=0}a.css(b).addClass(this.options.itemClass);var c=this;a.each(function(){var d=e(this),f={},g=c.options.getSortData,h;for(h in g)f[h]=g[h](d,c);d.data("isotope-sort-data",f); c.elemCount++})},_filter:function(a){var b=this.options.filter===""?"*":this.options.filter;if(b){var c=this.options.hiddenClass,d="."+c,f=a.not(d),g=a.filter(d);d=g;a=a.filter(b);if(b!=="*"){d=g.filter(b);b=f.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},_sort:function(){var a=this,b=function(d){return e(d).data("isotope-sort-data")[a.options.sortBy]},c=this.options.sortAscending? -1:-1;sortFn=function(d,f){var g=b(d),h=b(f);return(g>h?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+f,b.fitRows.height);b.fitRows.x+=d})},_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 f=e(this),g=(d%c+0.5)*b.cellsByRow.columnWidth-f.outerWidth(true)/2+b.posLeft;d=(~~(d/c)+0.5)*b.cellsByRow.rowHeight-f.outerHeight(true)/2+b.posTop; -b._pushPosition(f,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=e(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),f=c.length,g=f,h=this.masonryHorizontal.rows+1-f;f--;)if(c[f]===b)g=f;this._pushPosition(a,b,this.masonryHorizontal.rowHeight*g+this.posTop);for(f=0;fb.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+=f})},_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 f=e(this),g=(~~(d/c)+0.5)*b.cellsByColumn.columnWidth-f.outerWidth(true)/2+b.posLeft;d=(d%c+0.5)*b.cellsByColumn.rowHeight- -f.outerHeight(true)/2+b.posTop;b._pushPosition(f,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}};e.fn.imagesLoaded=function(a){var b=this.find("img"),c=b.length,d=this;b.bind("load",function(){--c<=0&&a.call(d)}).each(function(){if(this.complete|| -this.complete===k){var f=this.src;this.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";this.src=f}});return this};e.widget=e.widget||{};e.widget.bridge=e.widget.bridge||function(a,b){e.fn[a]=function(c){var d=typeof c==="string",f=Array.prototype.slice.call(arguments,1),g=this;c=!d&&f.length?e.extend.apply(null,[true,c].concat(f)):c;if(d&&c.charAt(0)==="_")return g;d?this.each(function(){var h=e.data(this,a);if(!h)return e.error("cannot call methods on "+a+" prior to initialization; attempted to call method '"+ -c+"'");if(!e.isFunction(h[c]))return e.error("no such method '"+c+"' for "+a+" widget instance");var i=h[c].apply(h,f);if(i!==h&&i!==k){g=i;return false}}):this.each(function(){var h=e.data(this,a);h?h.option(c||{})._init():e.data(this,a,new b(c,this))});return g}};e.widget.bridge("isotope",e.Isotope)})(jQuery); +1:-1;sortFn=function(d,f){var g=b(d),h=b(f);return(g>h?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+f,b.fitRows.height);b.fitRows.x+= +d})},_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 f= +e(this),g=(d%c+0.5)*b.cellsByRow.columnWidth-f.outerWidth(true)/2+b.posLeft;d=(~~(d/c)+0.5)*b.cellsByRow.rowHeight-f.outerHeight(true)/2+b.posTop;b._pushPosition(f,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=e(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),f=c.length,g=f,h=this.masonryHorizontal.rows+1-f;f--;)if(c[f]=== +b)g=f;this._pushPosition(a,b,this.masonryHorizontal.rowHeight*g+this.posTop);for(f=0;fb.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+=f})},_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 f=e(this),g= +(~~(d/c)+0.5)*b.cellsByColumn.columnWidth-f.outerWidth(true)/2+b.posLeft;d=(d%c+0.5)*b.cellsByColumn.rowHeight-f.outerHeight(true)/2+b.posTop;b._pushPosition(f,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}}; +e.fn.imagesLoaded=function(a){var b=this.find("img"),c=b.length,d=this;b.bind("load",function(){--c<=0&&a.call(d)}).each(function(){if(this.complete||this.complete===k){var f=this.src;this.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";this.src=f}});return this};e.widget=e.widget||{};e.widget.bridge=e.widget.bridge||function(a,b){e.fn[a]=function(c){var d=typeof c==="string",f=Array.prototype.slice.call(arguments,1),g=this;c=!d&&f.length?e.extend.apply(null,[true,c].concat(f)): +c;if(d&&c.charAt(0)==="_")return g;d?this.each(function(){var h=e.data(this,a);if(!h)return e.error("cannot call methods on "+a+" prior to initialization; attempted to call method '"+c+"'");if(!e.isFunction(h[c]))return e.error("no such method '"+c+"' for "+a+" widget instance");var i=h[c].apply(h,f);if(i!==h&&i!==k){g=i;return false}}):this.each(function(){var h=e.data(this,a);h?h.option(c||{})._init():e.data(this,a,new b(c,this))});return g}};e.widget.bridge("isotope",e.Isotope)})(jQuery);