Update Outlayer v1.4.2; build v3.3.2

fix percentPosition bug add add items demo Fixes #742
desandro · Aug 21, 2015 · 556d448 · 556d448
1 parent 1e9d697
commit 556d448
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 17 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "masonry",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "description": "Cascading grid layout library",
   "main": "masonry.js",
   "dependencies": {

diff --git a/dist/masonry.pkgd.js b/dist/masonry.pkgd.js
@@ -1,5 +1,5 @@
 /*!
- * Masonry PACKAGED v3.3.1
+ * Masonry PACKAGED v3.3.2
  * Cascading grid layout library
  * http://masonry.desandro.com
  * MIT License
@@ -1635,12 +1635,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;
@@ -1736,14 +1736,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
@@ -2057,7 +2055,7 @@ return Item;
 }));
 
 /*!
- * Outlayer v1.4.1
+ * Outlayer v1.4.2
  * the brains and guts of a layout library
  * MIT license
  */
@@ -2984,7 +2982,7 @@ return Outlayer;
 
 
 /*!
- * Masonry v3.3.1
+ * Masonry v3.3.2
  * Cascading grid layout library
  * http://masonry.desandro.com
  * MIT License

diff --git a/dist/masonry.pkgd.min.js b/dist/masonry.pkgd.min.js
diff --git a/masonry.js b/masonry.js
@@ -1,5 +1,5 @@
 /*!
- * Masonry v3.3.1
+ * Masonry v3.3.2
  * Cascading grid layout library
  * http://masonry.desandro.com
  * MIT License

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "masonry-layout",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "description": "Cascading grid layout library",
   "main": "masonry.js",
   "dependencies": {

diff --git a/sandbox/add-items.html b/sandbox/add-items.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <title>add items</title>
+
+  <style>
+  * {
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+  }
+
+  .grid {
+    background: #DDD;
+  }
+
+  /* clearfix */
+  .grid:after {
+    display: block;
+    content: '';
+    clear: both;
+  }
+
+
+  .grid-sizer,
+  .grid-item {
+    width: 25%;
+  }
+
+  .grid-item {
+    border: 1px solid;
+    background: #09F;
+    height: 100px;
+  }
+
+  .grid-item--width2 { width: 50%; }
+
+  .grid-item--height2 { height: 160px; }
+
+  .grid-item--height3 { height: 220px; }
+
+  </style>
+
+</head>
+<body>
+
+  <h1>add items</h1>
+
+  <p>
+    <button class="prepend-button">Prepend button</button>
+    <button class="append-button">Append button</button>
+  </p>
+
+  <div class="grid">
+    <div class="grid-sizer"></div>
+    <div class="grid-item grid-item--width2"></div>
+    <div class="grid-item grid-item--height2"></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="../masonry.js"></script>
+
+<script>
+function getItemElement() {
+  var elem = document.createElement('div');
+  var wRand = Math.random();
+  var hRand = Math.random();
+  var widthClass = wRand > 0.8 ? 'grid-item--width3' :
+    wRand > 0.6 ? 'grid-item--width2' : '';
+  var heightClass = hRand > 0.8 ? 'grid-item--height3' :
+    hRand > 0.5 ? 'grid-item--height2' : '';
+  elem.className = 'grid-item ' + widthClass + ' ' + heightClass;
+  return elem;
+};
+
+docReady( function() {
+  var msnry = window.msnry = new Masonry( '.grid', {
+    columnWidth: '.grid-sizer',
+    percentPosition: true
+  });
+
+  document.querySelector('.prepend-button').addEventListener( 'click', function() {
+    var itemElem = getItemElement();
+    msnry.element.insertBefore( itemElem, msnry.element.firstChild );
+    msnry.prepended( itemElem );
+  });
+
+  document.querySelector('.append-button').addEventListener( 'click', function() {
+    var itemElem = getItemElement();
+    msnry.element.appendChild( itemElem );
+    msnry.appended( itemElem );
+  });
+
+});
+</script>
+
+</body>
+</html>
diff --git a/sandbox/fluid.html b/sandbox/fluid.html
@@ -45,7 +45,7 @@
 </head>
 <body>
 
-  <h1>basic</h1>
+  <h1>fluid</h1>
 
   <div class="grid">
     <div class="grid-sizer"></div>