diff --git a/README.mdown b/README.mdown index 001ebfd..682bff5 100644 --- a/README.mdown +++ b/README.mdown @@ -23,11 +23,11 @@ You can download a zip of all the flat HTML files from [http://meta.metafizzy.co ### Via Jekyll -The documentation and demo pages are generated using [Jekyll](http://github.com/mojombo/jekyll/wiki). With Jekyll installed, you can clone this repo and start Jekyll. From Terminal: +The documentation and demo pages are generated using [Jekyll](http://github.com/mojombo/jekyll/wiki). With Jekyll installed, you can clone this repo and run Jekyll from Terminal: - $ git clone git@github.com:desandro/isotope.git - $ cd isotope/ - $ jekyll --server --auto + git clone https://github.com/desandro/isotope.git + cd isotope/ + jekyll --server --auto Then view the live site at [http://localhost:4000](http://localhost:4000). diff --git a/css/style.css b/css/style.css index f24322e..7bd952d 100644 --- a/css/style.css +++ b/css/style.css @@ -1,8 +1,78 @@ +/* Start: Recommended Isotope styles */ + +/**** Isotope Filtering ****/ + +.isotope-item { + z-index: 2; +} + +.isotope-hidden.isotope-item { + pointer-events: none; + z-index: 1; +} + +/**** Isotope CSS3 transitions ****/ + +.isotope, +.isotope .isotope-item { + -webkit-transition-duration: 0.8s; + -moz-transition-duration: 0.8s; + transition-duration: 0.8s; +} + +.isotope { + -webkit-transition-property: height, width; + -moz-transition-property: height, width; + transition-property: height, width; +} + +.isotope .isotope-item { + -webkit-transition-property: -webkit-transform, opacity; + -moz-transition-property: -moz-transform, opacity; + transition-property: transform, opacity; +} + +/* End: Recommended Isotope styles */ + +/**** disabling Isotope CSS3 transitions ****/ + +.isotope.no-transition, +.isotope.no-transition .isotope-item { + -webkit-transition-duration: 0s; + -moz-transition-duration: 0s; + transition-duration: 0s; +} + +/* disable CSS transitions for containers with infinite scrolling*/ +.isotope.infinite-scrolling { + -webkit-transition: none; + -moz-transition: none; + transition: none; +} + + /**** Base styles ****/ -* { +html, body, div, span, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, +small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, figcaption, figure, +footer, header, hgroup, menu, nav, section, summary, +time, mark, audio, video { margin: 0; padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; } body { @@ -14,11 +84,6 @@ body { color: #FFF; } -section, nav, header, footer { - display: block; -} - - h1, h2, h3, p, ul, ol, pre, dl { margin-bottom: 1.0em; } @@ -27,6 +92,8 @@ h1, h2, #super-list, .element, .tagline { font-family: 'Helvetica Neue', Arial, sans-serif; } +h1, h2, h3 { font-weight: bold; } + h1 { font-size: 32px; line-height: 1.1em; @@ -41,7 +108,6 @@ ul, ol { margin-left: 1.5em; } - a, a code { color: #FB4; @@ -173,58 +239,6 @@ body { color: white; } -/**** Isotope Filtering ****/ - -.isotope-item { - z-index: 2; -} - -.isotope-hidden.isotope-item { - pointer-events: none; - z-index: 1; -} - -/**** Isotope CSS3 transitions ****/ - -.isotope, -.isotope .isotope-item { - -webkit-transition-duration: 0.8s; - -moz-transition-duration: 0.8s; -/* -o-transition-duration: 0.8s;*/ - transition-duration: 0.8s; - -} - -.isotope { - -webkit-transition-property: height, width; - -moz-transition-property: height, width; -/* -o-transition-property: height, width;*/ - transition-property: height, width; -} - -/* disable CSS transitions for containers with infinite scrolling*/ -.isotope.infinite-scrolling { - -webkit-transition: none; - -moz-transition: none; - -o-transition: none; - transition: none; -} - -.isotope .isotope-item { - -webkit-transition-property: -webkit-transform, opacity; - -moz-transition-property: -moz-transform, opacity; -/* -o-transition-property: -o-transform, opacity;*/ - transition-property: transform, opacity; -} - -.isotope.no-transition, -.isotope.no-transition .isotope-item { - -webkit-transition-duration: 0s; - -moz-transition-duration: 0s; -/* -o-transition-duration: 0s;*/ - transition-duration: 0s; -} - /**** Example Options ****/ #options { @@ -248,17 +262,13 @@ body { float: left; } - - -#options li { -} - #options li a { display: inline-block; padding: 0.4em 0.5em; background-color: #DDD; color: #222; font-weight: bold; + margin-bottom: 0.2em; text-shadow: 0 1px hsla( 0, 0%, 100%, 0.5 ); background-image: -moz-linear-gradient(-90deg, hsla( 0, 0%, 100%, 0.5 ) , @@ -268,7 +278,6 @@ body { from( hsla( 0, 0%, 100%, 0.5 ) ), to( hsla( 0, 0%, 100%, 0.0 ) ) ); - margin-bottom: 0.2em; } #options li a:hover { @@ -333,8 +342,6 @@ body.doc { } .doc #content { -/* font-size: 14px; - line-height: 1.7em;*/ margin-bottom: 20px; } @@ -443,6 +450,7 @@ body.doc { background: hsla( 0, 0%, 75%, 0.05 ); padding: 2px 0.5em; margin-bottom: 0.5em; + font-size: 1.15em; } .doc h4 { @@ -479,19 +487,11 @@ h3#options { padding-bottom: 0; } -.option-def dl { -/* margin-top: 1.8em;*/ -/* padding-top: 0.5em;*/ -/* border-top: 1px solid #333;*/ -} - - .option-def dl dt, .option-def dl dd { float: left; padding: 0 1.2em;; background: #161616; -/* height: 2.0em;*/ line-height: 36px; height: 36px; } @@ -501,12 +501,7 @@ h3#options { background: #444; } -.option-def dl dt { -/* font-size: 14px;*/ -} - .option-def dl .option-type { -/* width: 60px;*/ font-size: 13px; color: #AAA; font-style: italic; diff --git a/jquery.isotope.js b/jquery.isotope.js index 9b562fa..f73874e 100644 --- a/jquery.isotope.js +++ b/jquery.isotope.js @@ -1,5 +1,5 @@ /** - * Isotope v1.0.110220 + * Isotope v1.0.110225 * An exquisite jQuery plugin for magical layouts * http://isotope.metafizzy.co * @@ -184,15 +184,16 @@ , set : function( elem, name, value ) { - - // unpack current transform data - var data = $( elem ).data('transform') || {}, - // extend new value over current data + var $elem = $(elem), + // unpack current transform data + data = $elem.data('isoTransform') || {}, newData = {}, fnName, transformObj = {}; - // overwrite new data + + // i.e. newData.scale = 0.5 newData[ name ] = value; + // extend new value over current data $.extend( data, newData ); for ( fnName in data ) { @@ -206,13 +207,11 @@ // a couple transforms we're keeping track of, we'll do it like so var translateFn = transformObj.translate || '', scaleFn = transformObj.scale || '', + // sorting so translate always comes first valueFns = translateFn + scaleFn; // set data back in elem - $( elem ).data( 'transform', data ); - - // sorting so scale always comes before - value = valueFns; + $elem.data( 'isoTransform', data ); // set name to vendor specific property elem.style[ isoTransform.transformProp ] = valueFns; @@ -597,8 +596,7 @@ // accepts atoms-to-be-laid-out to start with layout : function( $elems, callback ) { - var layoutMode = this.options.layoutMode, - layoutMethod = '_' + layoutMode; + var layoutMode = this.options.layoutMode; // layout logic this[ '_' + layoutMode + 'Layout' ]( $elems ); @@ -616,14 +614,10 @@ 'css' : this.applyStyleFnName, animOpts = this.options.animationOptions; - // process styleQueue - $.each( this.styleQueue, function( i, obj ){ - // have to extend animation to play nice with jQuery - obj.$el[ styleFn ]( obj.style, $.extend( {}, animOpts ) ); + $.each( this.styleQueue, function( i, obj ) { + obj.$el[ styleFn ]( obj.style, animOpts ); }); - - // clear out queue for next time this.styleQueue = []; @@ -735,7 +729,7 @@ this.$allAtoms .css( atomUnstyle ) - .removeClass( this.options.hiddenClass ); + .removeClass( this.options.hiddenClass + ' ' + this.options.itemClass ); this.element .css({ @@ -757,8 +751,11 @@ var measure = isRows ? 'rowHeight' : 'columnWidth', size = isRows ? 'height' : 'width', UCSize = isRows ? 'Height' : 'Width', - segments = isRows ? 'rows' : 'cols'; + segments = isRows ? 'rows' : 'cols', + segmentsValue; + // i.e. this.masonry.columnWidth = this.options.masonry && this.options.masonry.columnWidth || + // this.$allAtoms.outerWidth(true) this[ namespace ][ measure ] = ( this.options[ namespace ] && this.options[ namespace ][ measure ] ) || this.$allAtoms[ 'outer' + UCSize ](true); // if colW == 0, back out before divide by zero @@ -767,8 +764,9 @@ return this; } this[ size ] = this.element[ size ](); - this[ namespace ][ segments ] = Math.floor( this[ size ] / this[ namespace ][ measure ] ); - this[ namespace ][ segments ] = Math.max( this[ namespace ][ segments ], 1 ); + segmentsValue = Math.floor( this[ size ] / this[ namespace ][ measure ] ); + // i.e. this.masonry.cols = .... + this[ namespace ][ segments ] = Math.max( segmentsValue, 1 ); return this; @@ -838,6 +836,7 @@ instance._masonryPlaceBrick( $this, groupCount, groupY ); } }); + return this; }, // reset @@ -878,7 +877,7 @@ this.width = this.element.width(); var instance = this; - return $elems.each( function() { + $elems.each( function() { var $this = $(this), atomW = $this.outerWidth(true), atomH = $this.outerHeight(true), @@ -899,6 +898,7 @@ instance.fitRows.x += atomW; }); + return this; }, _fitRowsReset : function() { @@ -1048,6 +1048,7 @@ instance._masonryHorizontalPlaceBrick( $this, groupCount, groupX ); } }); + return this; }, _masonryHorizontalReset : function() { @@ -1095,7 +1096,7 @@ _fitColumnsLayout : function( $elems ) { var instance = this; this.height = this.element.height(); - return $elems.each( function() { + $elems.each( function() { var $this = $(this), atomW = $this.outerWidth(true), atomH = $this.outerHeight(true), @@ -1116,6 +1117,7 @@ instance.fitColumns.y += atomH; }); + return this; }, _fitColumnsGetContainerSize : function () { diff --git a/jquery.isotope.min.js b/jquery.isotope.min.js index 1ceff6e..bdf6b01 100644 --- a/jquery.isotope.min.js +++ b/jquery.isotope.min.js @@ -1,5 +1,5 @@ /** - * Isotope v1.0.110220 + * Isotope v1.0.110225 * An exquisite jQuery plugin for magical layouts * http://isotope.metafizzy.co * @@ -11,7 +11,7 @@ (function(l,f,r){var m=function(){var a=["Moz","Webkit","Khtml","O","Ms"],b={};return function(c,d){d=d||document.documentElement;var e=d.style,g,h,i,s;if(arguments.length===1&&typeof b[c]==="string")return b[c];if(typeof e[c]==="string")return b[c]=c;h=c.charAt(0).toUpperCase()+c.slice(1);i=0;for(s=a.length;ih?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})},_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/ +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;eb.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})},_fitColumnsGetContainerSize:function(){return{width:this.fitColumns.width}},_fitColumnsResize:function(){return this.reLayout()},_cellsByColumnReset:function(){this.cellsByColumn={};this._getSegments("cellsByColumn", +d=Math.min(d,b.masonryHorizontal.rows);if(d===1)b._masonryHorizontalPlaceBrick(c,b.masonryHorizontal.rows,b.masonryHorizontal.rowXs);else{var e=b.masonryHorizontal.rows+1-d,g=[],h,i;for(i=0;ib.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===r){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 "+