Merge branch 'dev'

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
+    git clone https://github.com/desandro/isotope.git
-    $ cd isotope/
+    cd isotope/
-    $ jekyll --server --auto
+    jekyll --server --auto
 
 Then view the live site at [http://localhost:4000](http://localhost:4000).
 

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;

jquery.isotope.js

@@ -184,15 +184,16 @@
     ,
     
     set : function( elem, name, value ) {
-
+      var $elem = $(elem),
-      // unpack current transform data
+          // unpack current transform data
-      var data =  $( elem ).data('transform') || {},
+          data =  $elem.data('isoTransform') || {},
-      // extend new value over current data
           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 );
+      $elem.data( 'isoTransform', data );
-
-      // sorting so scale always comes before 
-      value = valueFns;
 
       // 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,
+      var layoutMode = this.options.layoutMode;
-          layoutMethod = '_' + layoutMode;
 
       // layout logic
       this[ '_' +  layoutMode + 'Layout' ]( $elems );
@@ -616,15 +614,11 @@
                     'css' : this.applyStyleFnName,
           animOpts = this.options.animationOptions;
 
-
       // process styleQueue
-      $.each( this.styleQueue, function( i, obj ){
+      $.each( this.styleQueue, function( i, obj ) {
-                                       // have to extend animation to play nice with jQuery
+        obj.$el[ styleFn ]( obj.style, animOpts );
-        obj.$el[ styleFn ]( obj.style, $.extend( {}, 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 ] );
+      segmentsValue = Math.floor( this[ size ] / this[ namespace ][ measure ] );
-      this[ namespace ][ segments ] = Math.max( this[ namespace ][ segments ], 1 );
+      // 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 () {