update Outlayer v1.4.2 for percent fix

Fixes #948, #955 add fluid demo
metafizzy · Aug 21, 2015 · 0397968 · 0397968
1 parent 785264a
commit 0397968
Show file tree

Hide file tree

Showing 7 changed files with 107 additions and 17 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "isotope",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "Filter and sort magical layouts",
   "main": "js/isotope.js",
   "dependencies": {

diff --git a/changelog.md b/changelog.md
@@ -1,5 +1,9 @@
 # Changelog
 
+### v2.2.2
+
+Updated Outlayer v1.4.2. Fixed percent width bugs. Fixed [#948](https://github.com/metafizzy/isotope/issues/948).
+
 ### v2.2.1
 
 Updated Outlayer v1.4.1

diff --git a/dist/isotope.pkgd.js b/dist/isotope.pkgd.js
@@ -1,5 +1,5 @@
 /*!
- * Isotope PACKAGED v2.2.1
+ * Isotope PACKAGED v2.2.2
  *
  * Licensed GPLv3 for open source use
  * or Isotope Commercial License for commercial use
@@ -1637,12 +1637,12 @@ Item.prototype.getPosition = function() {
   var isOriginTop = layoutOptions.isOriginTop;
   var xValue = style[ isOriginLeft ? 'left' : 'right' ];
   var yValue = style[ isOriginTop ? 'top' : 'bottom' ];
-  var x = parseInt( xValue, 10 );
-  var y = parseInt( yValue, 10 );
   // convert percent to pixels
   var layoutSize = this.layout.size;
-  x = xValue.indexOf('%') != -1 ? ( x / 100 ) * layoutSize.width : x;
-  y = yValue.indexOf('%') != -1 ? ( y / 100 ) * layoutSize.height : y;
+  var x = xValue.indexOf('%') != -1 ?
+    ( parseFloat( xValue ) / 100 ) * layoutSize.width : parseInt( xValue, 10 );
+  var y = yValue.indexOf('%') != -1 ?
+    ( parseFloat( yValue ) / 100 ) * layoutSize.height : parseInt( yValue, 10 );
 
   // clean up 'auto' or other non-integer values
   x = isNaN( x ) ? 0 : x;
@@ -1738,14 +1738,12 @@ Item.prototype.getTranslate = function( x, y ) {
   var layoutOptions = this.layout.options;
   x = layoutOptions.isOriginLeft ? x : -x;
   y = layoutOptions.isOriginTop ? y : -y;
-  x = this.getXValue( x );
-  y = this.getYValue( y );
 
   if ( is3d ) {
-    return 'translate3d(' + x + ', ' + y + ', 0)';
+    return 'translate3d(' + x + 'px, ' + y + 'px, 0)';
   }
 
-  return 'translate(' + x + ', ' + y + ')';
+  return 'translate(' + x + 'px, ' + y + 'px)';
 };
 
 // non transition + transform support
@@ -2059,7 +2057,7 @@ return Item;
 }));
 
 /*!
- * Outlayer v1.4.1
+ * Outlayer v1.4.2
  * the brains and guts of a layout library
  * MIT license
  */
@@ -3225,7 +3223,7 @@ return Item;
 }));
 
 /*!
- * Masonry v3.3.0
+ * Masonry v3.3.1
  * Cascading grid layout library
  * http://masonry.desandro.com
  * MIT License
@@ -3629,7 +3627,7 @@ return Vertical;
 }));
 
 /*!
- * Isotope v2.2.1
+ * Isotope v2.2.2
  *
  * Licensed GPLv3 for open source use
  * or Isotope Commercial License for commercial use

diff --git a/dist/isotope.pkgd.min.js b/dist/isotope.pkgd.min.js
diff --git a/js/isotope.js b/js/isotope.js
@@ -1,5 +1,5 @@
 /*!
- * Isotope v2.2.1
+ * Isotope v2.2.2
  *
  * Licensed GPLv3 for open source use
  * or Isotope Commercial License for commercial use

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "isotope-layout",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "Filter and sort magical layouts",
   "main": "js/isotope.js",
   "dependencies": {

diff --git a/sandbox/fluid.html b/sandbox/fluid.html
@@ -0,0 +1,88 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <title>fluid</title>
+
+  <link rel="stylesheet" href="sandbox.css" />
+
+  <style>
+    .container {
+      width: auto;
+      max-width: none;
+    }
+
+    .item, .grid-sizer { width: 50%; }
+    .item.w2 { width: 100%; }
+    .item.w3 { width: 105%; }
+
+    @media screen and (min-width: 768px) { 
+      .item, .grid-sizer { width: 25%; }
+      .item.w2 { width: 50%; }
+      .item.w3 { width: 75%; }
+    }
+  </style>
+
+</head>
+<body>
+
+  <h1>fluid</h1>
+
+  <div class="container">
+    <div class="grid-sizer"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item w2 h2"></div>
+    <div class="item w2"></div>
+    <div class="item h3"></div>
+    <div class="item w3"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item w2 h4"></div>
+    <div class="item w2"></div>
+    <div class="item h5"></div>
+    <div class="item w3"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item w2 h5"></div>
+    <div class="item w2"></div>
+    <div class="item h3"></div>
+    <div class="item w3"></div>
+    <div class="item"></div>
+  </div>
+
+<script src="../bower_components/eventEmitter/EventEmitter.js"></script>
+<script src="../bower_components/eventie/eventie.js"></script>
+<script src="../bower_components/doc-ready/doc-ready.js"></script>
+<script src="../bower_components/get-style-property/get-style-property.js"></script>
+<script src="../bower_components/get-size/get-size.js"></script>
+<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script>
+<script src="../bower_components/matches-selector/matches-selector.js"></script>
+<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
+<script src="../bower_components/outlayer/item.js"></script>
+<script src="../bower_components/outlayer/outlayer.js"></script>
+<script src="../bower_components/masonry/masonry.js"></script>
+
+<script src="../js/layout-mode.js"></script>
+<script src="../js/item.js"></script>
+<script src="../js/isotope.js"></script>
+<script src="../js/layout-modes/fit-rows.js"></script>
+<script src="../js/layout-modes/masonry.js"></script>
+
+<script>
+docReady( function() {
+  var iso = window.iso = new Isotope( '.container', {
+    itemSelector: '.item',
+    percentPosition: true,
+    masonry: {
+      columnWidth: '.grid-sizer'
+    }
+  });
+});
+</script>
+
+</body>
+</html>