From 8ef3eaf79f59e0f65d5c24de54250696e34d629d Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 24 Feb 2011 21:33:37 -0500 Subject: [PATCH 01/12] src : within layout - remove layoutMethod, and extending animOpts --- jquery.isotope.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/jquery.isotope.js b/jquery.isotope.js index 9b562fa..a6ae928 100644 --- a/jquery.isotope.js +++ b/jquery.isotope.js @@ -597,8 +597,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 +615,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 = []; From 3329e06342cf1f7b80ed7881f6f903eaad1580bd Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 24 Feb 2011 21:53:32 -0500 Subject: [PATCH 02/12] src : isoTransform.set - remove unneeded statement in --- jquery.isotope.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/jquery.isotope.js b/jquery.isotope.js index a6ae928..090b48c 100644 --- a/jquery.isotope.js +++ b/jquery.isotope.js @@ -206,14 +206,12 @@ // 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; - // set name to vendor specific property elem.style[ isoTransform.transformProp ] = valueFns; From 1c1e85e97f42cc91b272c6ff5eb00d7d60e4859e Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 24 Feb 2011 22:07:29 -0500 Subject: [PATCH 03/12] src : `return this` in layout methods --- jquery.isotope.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/jquery.isotope.js b/jquery.isotope.js index 090b48c..a2c8535 100644 --- a/jquery.isotope.js +++ b/jquery.isotope.js @@ -831,6 +831,7 @@ instance._masonryPlaceBrick( $this, groupCount, groupY ); } }); + return this; }, // reset @@ -871,7 +872,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), @@ -892,6 +893,7 @@ instance.fitRows.x += atomW; }); + return this; }, _fitRowsReset : function() { @@ -1041,6 +1043,7 @@ instance._masonryHorizontalPlaceBrick( $this, groupCount, groupX ); } }); + return this; }, _masonryHorizontalReset : function() { @@ -1088,7 +1091,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), @@ -1109,6 +1112,7 @@ instance.fitColumns.y += atomH; }); + return this; }, _fitColumnsGetContainerSize : function () { From 74831fe64fb436abe5634e29a5647b4839da7efe Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 24 Feb 2011 22:08:16 -0500 Subject: [PATCH 04/12] src : getSegments : add simpler segmentsValue var --- jquery.isotope.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/jquery.isotope.js b/jquery.isotope.js index a2c8535..ea17f02 100644 --- a/jquery.isotope.js +++ b/jquery.isotope.js @@ -750,7 +750,8 @@ var measure = isRows ? 'rowHeight' : 'columnWidth', size = isRows ? 'height' : 'width', UCSize = isRows ? 'Height' : 'Width', - segments = isRows ? 'rows' : 'cols'; + segments = isRows ? 'rows' : 'cols', + segmentsValue; this[ namespace ][ measure ] = ( this.options[ namespace ] && this.options[ namespace ][ measure ] ) || this.$allAtoms[ 'outer' + UCSize ](true); @@ -760,8 +761,8 @@ 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 ] ); + this[ namespace ][ segments ] = Math.max( segmentsValue, 1 ); return this; From 111a042a56c1540ffc439526376a800798bc84e9 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 24 Feb 2011 22:24:33 -0500 Subject: [PATCH 05/12] src : getSegments : commenting See: https://twitter.com/desandro/status/40623239302610944 --- jquery.isotope.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/jquery.isotope.js b/jquery.isotope.js index ea17f02..b4a4a58 100644 --- a/jquery.isotope.js +++ b/jquery.isotope.js @@ -753,6 +753,8 @@ 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 @@ -762,6 +764,7 @@ } this[ size ] = this.element[ size ](); segmentsValue = Math.floor( this[ size ] / this[ namespace ][ measure ] ); + // i.e. this.masonry.cols = .... this[ namespace ][ segments ] = Math.max( segmentsValue, 1 ); return this; From 4239a1beef307bc09a13f2df21294f9fc6bcda00 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 24 Feb 2011 22:24:55 -0500 Subject: [PATCH 06/12] src : destroy : remove itemClass --- jquery.isotope.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.isotope.js b/jquery.isotope.js index b4a4a58..df045ce 100644 --- a/jquery.isotope.js +++ b/jquery.isotope.js @@ -728,7 +728,7 @@ this.$allAtoms .css( atomUnstyle ) - .removeClass( this.options.hiddenClass ); + .removeClass( this.options.hiddenClass + ' ' + this.options.itemClass ); this.element .css({ From 03144305cd4a0f502d79a61f40b8bdb95e7c82fb Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 24 Feb 2011 22:34:21 -0500 Subject: [PATCH 07/12] src : isoTransform.set : cache $(elem); better namespace for data 'isoTransform' --- jquery.isotope.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/jquery.isotope.js b/jquery.isotope.js index df045ce..041ff74 100644 --- a/jquery.isotope.js +++ b/jquery.isotope.js @@ -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 ) { @@ -210,7 +211,7 @@ valueFns = translateFn + scaleFn; // set data back in elem - $( elem ).data( 'transform', data ); + $elem.data( 'isoTransform', data ); // set name to vendor specific property elem.style[ isoTransform.transformProp ] = valueFns; From 51912df2c1dca7b8ff3435ecce57b9b1f2122778 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Fri, 25 Feb 2011 07:29:40 -0500 Subject: [PATCH 08/12] README : revise git instructions --- README.mdown | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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). From 3764720d48e149dec31e35da705473296a4e542b Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Fri, 25 Feb 2011 07:37:43 -0500 Subject: [PATCH 09/12] docs : css : remove * { margin: 0; padding: 0 }; Add additional font styles --- css/style.css | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index f24322e..f38c2cf 100644 --- a/css/style.css +++ b/css/style.css @@ -1,8 +1,25 @@ /**** 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 { @@ -27,6 +44,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; @@ -443,6 +462,7 @@ body.doc { background: hsla( 0, 0%, 75%, 0.05 ); padding: 2px 0.5em; margin-bottom: 0.5em; + font-size: 1.15em; } .doc h4 { From 988c7409f29032367c61f21e3fbe394ae3451386 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Fri, 25 Feb 2011 07:43:49 -0500 Subject: [PATCH 10/12] docs : css : move Isotope recommended styles to the top --- css/style.css | 105 +++++++++++++++++++++++++------------------------- 1 file changed, 53 insertions(+), 52 deletions(-) diff --git a/css/style.css b/css/style.css index f38c2cf..d8bcf7c 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,56 @@ +/* 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, @@ -192,58 +245,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 { From 6e24992b634a1f0a14195fe36dc4bd9bdb9b5153 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Fri, 25 Feb 2011 07:45:49 -0500 Subject: [PATCH 11/12] docs : css : remove duplicate html5 block styles --- css/style.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/css/style.css b/css/style.css index d8bcf7c..a168f7f 100644 --- a/css/style.css +++ b/css/style.css @@ -84,11 +84,6 @@ body { color: #FFF; } -section, nav, header, footer { - display: block; -} - - h1, h2, h3, p, ul, ol, pre, dl { margin-bottom: 1.0em; } From cbe7ca46b89a670d3952dfb2db5087eba2891f9e Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Fri, 25 Feb 2011 07:49:09 -0500 Subject: [PATCH 12/12] docs : css : tidy up commented styles --- css/style.css | 23 +---------------------- 1 file changed, 1 insertion(+), 22 deletions(-) diff --git a/css/style.css b/css/style.css index a168f7f..7bd952d 100644 --- a/css/style.css +++ b/css/style.css @@ -108,7 +108,6 @@ ul, ol { margin-left: 1.5em; } - a, a code { color: #FB4; @@ -263,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 ) , @@ -283,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 { @@ -348,8 +342,6 @@ body.doc { } .doc #content { -/* font-size: 14px; - line-height: 1.7em;*/ margin-bottom: 20px; } @@ -495,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; } @@ -517,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;