Browse Source

src & docs : add transformsEnabled option.

pull/27/merge
David DeSandro 14 years ago
parent
commit
49273ff041
  1. 25
      _posts/docs/2010-12-03-options.mdown
  2. 5
      jquery.isotope.js
  3. 24
      jquery.isotope.min.js

25
_posts/docs/2010-12-03-options.mdown

@ -20,6 +20,7 @@ toc:
- { title: resizesContainer, anchor: resizescontainer }
- { title: sortAscending, anchor: sortascending }
- { title: sortBy, anchor: sortby }
- { title: transformsEnabled, anchor: transformsenabled }
- { title: visibleStyle, anchor: visiblestyle }
- { title: Layout-specific options, anchor: layoutspecific_options }
@ -226,6 +227,30 @@ The property name of the method within the `getSortData` option to sort item ele
+ `'original-order'` Sorts item elements by their original order.
## transformsEnabled
<dl class="clearfix">
<dt><code>transformsEnabled</code></dt>
<dd class="option-type">Boolean</dd>
<dd class="default"><code><span class="kc">true</span></code></dd>
</dl>
Isotope uses CSS3 transform to position item elements, when available in the browser. Setting `transformsEnabled` to <code><span class="kc">false</span></code> will disable this feature so all browsers use top/left absolute positioning.
### Additional CSS {#transformsEnabled-css}
If you do disable transforms, but still want to use [CSS transitions](animating.html#css_transitions), you'll need add the following CSS:
{% highlight css %}
.isotope .isotope-item {
-webkit-transition-property: top, left, opacity;
-moz-transition-property: top, left, opacity;
transition-property: top, left, opacity;
}
{% endhighlight %}
## visibleStyle
<dl class="clearfix">

5
jquery.isotope.js

@ -353,7 +353,8 @@
},
sortBy : 'original-order',
sortAscending : true,
resizesContainer : true
resizesContainer : true,
transformsEnabled : true
},
_filterFind: function( $elems, selector ) {
@ -392,7 +393,7 @@
this.applyStyleFnName = Modernizr.csstransitions ? 'css' : 'animate';
}
this.usingTransforms = Modernizr.csstransforms && Modernizr.csstransitions && !jQueryAnimation;
this.usingTransforms = this.options.transformsEnabled && Modernizr.csstransforms && Modernizr.csstransitions && !jQueryAnimation;
this.getPositionStyles = this.usingTransforms ? this._translate : this._positionAbs;

24
jquery.isotope.min.js vendored

@ -14,18 +14,18 @@ j,u=n.length;if(l.Modernizr)for(j=0;j<u;j++){var o=n[j];Modernizr.hasOwnProperty
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=f(a),e=d.data("isoTransform")||{},g={},h,i={};g[b]=c;f.extend(e,g);for(h in e)i[h]=(0,k.fnUtils[h])(e[h]);b=(i.translate||"")+(i.scale||"");d.data("isoTransform",e);a.style[k.transformProp]=b}};f.cssNumber.scale=true;f.cssHooks.scale={set:function(a,b){if(typeof b==="string")b=parseFloat(b);k.set(a,"scale",b)},get:function(a){return(a=f.data(a,"transform"))&&
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){k.set(a,"translate",b)},get:function(a){return(a=f.data(a,"transform"))&&a.translate?a.translate:[0,0]}};var p=f.event,q;p.special.smartresize={setup:function(){f(this).bind("resize",p.special.smartresize.handler)},teardown:function(){f(this).unbind("resize",p.special.smartresize.handler)},handler:function(a,b){var c=this,d=arguments;a.type=
"smartresize";q&&clearTimeout(q);q=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()};f.Isotope.prototype={options:{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},_filterFind:function(a,b){return b?a.filter(b).add(a.find(b)):a},_create:function(a){this.options=f.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 "css":case "none":this.applyStyleFnName="css";break;case "jquery":this.applyStyleFnName="animate";a=true;break;default:this.applyStyleFnName=Modernizr.csstransitions?"css":"animate"}this.getPositionStyles=(this.usingTransforms=Modernizr.csstransforms&&Modernizr.csstransitions&&!a)?this._translate:this._positionAbs;this.options.getSortData=
f.extend(this.options.getSortData,{"original-order":function(c,d){return d.elemCount}});this._setupAtoms(this.$allAtoms);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 b=this;setTimeout(function(){b.element.addClass(b.options.containerClass)},0);this.options.resizable&&f(l).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;f.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(f.isPlainObject(a))this.options=f.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);this.updateSortData(a,true)},_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);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,b=function(d){return f(d).data("isotope-sort-data")[a.options.sortBy]},c=this.options.sortAscending?1:-1;this.$filteredAtoms.sort(function(d,e){var g=b(d),h=b(e);return(g>h?1:g<h?-1:0)*c});return this},_translate:function(a,b){return{translate:[a,b]}},_positionAbs:function(a,b){return{left:a,
top:b}},_pushPosition:function(a,b,c){b=this.getPositionStyles(b,c);this.styleQueue.push({$el:a,style:b})},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.applyStyleFnName==="animate"&&!this.isLaidOut?"css":this.applyStyleFnName,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,a)},addItems:function(a,b){var c=this._filterFind(a,this.options.itemSelector);this._setupAtoms(c);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);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=f.extend(this.options.visibleStyle,{position:"relative",top:"auto",left:"auto"});if(this.usingTransforms)a[k.transformProp]="none";this.$allAtoms.css(a).removeClass(this.options.hiddenClass+" "+this.options.itemClass);this.element.css({width:"auto",height:"auto"}).unbind(".isotope").removeClass(this.options.containerClass).removeData("isotope");f(l).unbind(".isotope")},_getSegments:function(a,b){var c=b?"rowHeight":"columnWidth",d=b?"height":"width",
e=b?"rows":"cols";this[a][c]=this.options[a]&&this.options[a][c]||this.$allAtoms["outer"+(b?"Height":"Width")](true);if(!this[a][c]){f.error(c+" calculated to be zero. Stopping Isotope plugin before divide by zero. Check that the width of first child inside the isotope container is not zero.");return this}this[d]=this.element[d]();this[a][e]=Math.max(Math.floor(this[d]/this[a][c]),1);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);if(d===1)b._masonryPlaceBrick(c,b.masonry.cols,b.masonry.colYs);else{var e=b.masonry.cols+1-d,g=[],h,i;for(i=0;i<e;i++){h=b.masonry.colYs.slice(i,i+d);g[i]=Math.max.apply(Math,h)}b._masonryPlaceBrick(c,
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},_filterFind:function(a,b){return b?a.filter(b).add(a.find(b)):a},_create:function(a){this.options=f.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 "css":case "none":this.applyStyleFnName="css";break;case "jquery":this.applyStyleFnName="animate";a=true;break;default:this.applyStyleFnName=Modernizr.csstransitions?"css":"animate"}this.getPositionStyles=(this.usingTransforms=this.options.transformsEnabled&&Modernizr.csstransforms&&Modernizr.csstransitions&&!a)?this._translate:
this._positionAbs;this.options.getSortData=f.extend(this.options.getSortData,{"original-order":function(c,d){return d.elemCount}});this._setupAtoms(this.$allAtoms);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 b=this;setTimeout(function(){b.element.addClass(b.options.containerClass)},0);this.options.resizable&&f(l).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;f.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(f.isPlainObject(a))this.options=f.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);this.updateSortData(a,true)},_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);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,b=function(d){return f(d).data("isotope-sort-data")[a.options.sortBy]},c=this.options.sortAscending?1:-1;this.$filteredAtoms.sort(function(d,e){var g=b(d),h=b(e);return(g>h?1:g<h?-1:0)*c});return this},_translate:function(a,b){return{translate:[a,b]}},_positionAbs:function(a,
b){return{left:a,top:b}},_pushPosition:function(a,b,c){b=this.getPositionStyles(b,c);this.styleQueue.push({$el:a,style:b})},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.applyStyleFnName==="animate"&&!this.isLaidOut?"css":this.applyStyleFnName,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,a)},addItems:function(a,b){var c=this._filterFind(a,this.options.itemSelector);this._setupAtoms(c);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);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=f.extend(this.options.visibleStyle,{position:"relative",top:"auto",left:"auto"});if(this.usingTransforms)a[k.transformProp]="none";this.$allAtoms.css(a).removeClass(this.options.hiddenClass+" "+this.options.itemClass);this.element.css({width:"auto",height:"auto"}).unbind(".isotope").removeClass(this.options.containerClass).removeData("isotope");f(l).unbind(".isotope")},_getSegments:function(a,b){var c=b?"rowHeight":"columnWidth",
d=b?"height":"width",e=b?"rows":"cols";this[a][c]=this.options[a]&&this.options[a][c]||this.$allAtoms["outer"+(b?"Height":"Width")](true);if(!this[a][c]){f.error(c+" calculated to be zero. Stopping Isotope plugin before divide by zero. Check that the width of first child inside the isotope container is not zero.");return this}this[d]=this.element[d]();this[a][e]=Math.max(Math.floor(this[d]/this[a][c]),1);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);if(d===1)b._masonryPlaceBrick(c,b.masonry.cols,b.masonry.colYs);else{var e=b.masonry.cols+1-d,g=[],h,i;for(i=0;i<e;i++){h=b.masonry.colYs.slice(i,i+d);g[i]=Math.max.apply(Math,h)}b._masonryPlaceBrick(c,
e,g)}});return this},_masonryReset:function(){this.masonry={};this._getSegments("masonry");var a=this.masonry.cols;for(this.masonry.colYs=[];a--;)this.masonry.colYs.push(this.posTop);return this},_masonryResize:function(){var a=this.masonry.cols;this._getSegments("masonry");this.masonry.cols!==a&&this.reLayout();return this},_masonryGetContainerSize:function(){return{height:Math.max.apply(Math,this.masonry.colYs)-this.posTop}},_fitRowsLayout:function(a){this.width=this.element.width();var b=this;
a.each(function(){var c=f(this),d=c.outerWidth(true),e=c.outerHeight(true);if(b.fitRows.x!==0&&d+b.fitRows.x>b.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/

Loading…
Cancel
Save