Update Outlayer v1.4.2; tick version 1.4.3

Fix metafizzy#284 add fluid sandbox
srgsanky · Aug 21, 2015 · a64a5a8 · a64a5a8
1 parent d0ef234
commit a64a5a8
Show file tree

Hide file tree

Showing 7 changed files with 128 additions and 16 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "packery",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "author": "Metafizzy",
   "description": "bin-packing layout library",
   "main": "js/packery.js",

diff --git a/changelog.md b/changelog.md
@@ -1,5 +1,9 @@
 # Changelog
 
+### v1.4.3
+
+Updated Outlayer to v1.4.2 for percent position bug fixes. Fixed [#284](https://github.com/metafizzy/packery/issues/284).
+
 ### v1.4.2
 
 + Updated Outlayer to v1.4.1.

diff --git a/dist/packery.pkgd.js b/dist/packery.pkgd.js
@@ -1,5 +1,5 @@
 /*!
- * Packery PACKAGED v1.4.2
+ * Packery PACKAGED v1.4.3
  * bin-packing layout library
  *
  * Licensed GPLv3 for open source use
@@ -1724,12 +1724,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;
@@ -1825,14 +1825,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
@@ -2146,7 +2144,7 @@ return Item;
 }));
 
 /*!
- * Outlayer v1.4.1
+ * Outlayer v1.4.2
  * the brains and guts of a layout library
  * MIT license
  */
@@ -3580,7 +3578,7 @@ return Item;
 }));
 
 /*!
- * Packery v1.4.2
+ * Packery v1.4.3
  * bin-packing layout library
  *
  * Licensed GPLv3 for open source use

diff --git a/dist/packery.pkgd.min.js b/dist/packery.pkgd.min.js
diff --git a/js/packery.js b/js/packery.js
@@ -1,5 +1,5 @@
 /*!
- * Packery v1.4.2
+ * Packery v1.4.3
  * bin-packing layout library
  *
  * Licensed GPLv3 for open source use

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "packery",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "bin-packing layout library",
   "main": "js/packery.js",
   "dependencies": {

diff --git a/sandbox/fluid.html b/sandbox/fluid.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+
+  <title>fluid</title>
+
+  <style>
+  * {
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+  }
+
+  body {
+    font-family: sans-serif;
+  }
+
+  .grid {
+    margin-bottom: 20px;
+    background: #EEE;
+    /*padding: 20px 5%;*/
+  }
+
+  .grid-item {
+    float: left;
+    width: 25%;
+    height: 80px;
+    border: 1px solid;
+    background: #ACE;
+  }
+
+  .grid-item.w2 { width: 50%; }
+  .grid-item.w3 { width: 75%; }
+
+  .grid-item.h2 { height: 160px; }
+  .grid-item.h3 { height: 240px; }
+  </style>
+
+</head>
+<body>
+
+  <h1>fluid</h1>
+
+  <div class="grid js-packery" data-packery-options='{ "percentPosition": true }'>
+    <div class="grid-item w2"></div>
+    <div class="grid-item h2"></div>
+    <div class="grid-item"></div>
+    <div class="grid-item w3"></div>
+    <div class="grid-item"></div>
+    <div class="grid-item h3"></div>
+    <div class="grid-item w2 h2"></div>
+    <div class="grid-item"></div>
+    <div class="grid-item"></div>
+  </div>
+
+  <h2>Draggable</h2>
+
+  <div class="grid grid--draggable">
+    <div class="grid-item w2"></div>
+    <div class="grid-item h2"></div>
+    <div class="grid-item"></div>
+    <div class="grid-item w3"></div>
+    <div class="grid-item"></div>
+    <div class="grid-item h3"></div>
+    <div class="grid-item w2 h2"></div>
+    <div class="grid-item"></div>
+    <div class="grid-item"></div>
+  </div>
+
+<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/matches-selector/matches-selector.js"></script>
+<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/classie/classie.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/unipointer/unipointer.js"></script>
+<script src="../bower_components/unidragger/unidragger.js"></script>
+<script src="../bower_components/draggabilly/draggabilly.js"></script>
+
+<script src="../js/rect.js"></script>
+<script src="../js/packer.js"></script>
+<script src="../js/item.js"></script>
+<script src="../js/packery.js"></script>
+
+<script>
+docReady( function() {
+  var pckry = new Packery( '.grid--draggable', {
+    percentPosition: true
+  });
+
+  var dragElems = document.querySelectorAll('.grid--draggable .grid-item');
+
+  for ( var i=0, len = dragElems.length; i < len; i++ ) {
+    var dragElem = dragElems[i];
+    var draggie = new Draggabilly( dragElem );
+    pckry.bindDraggabillyEvents( draggie );
+  }
+});
+
+
+</script>
+
+</body>
+</html>