Browse Source

update Outlayer v1.4.2 for percent fix

Fixes #948, #955
add fluid demo
pull/829/merge v2.2.2
David DeSandro 9 years ago
parent
commit
039796816e
  1. 2
      bower.json
  2. 4
      changelog.md
  3. 22
      dist/isotope.pkgd.js
  4. 4
      dist/isotope.pkgd.min.js
  5. 2
      js/isotope.js
  6. 2
      package.json
  7. 88
      sandbox/fluid.html

2
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": {

4
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

22
dist/isotope.pkgd.js vendored

@ -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

4
dist/isotope.pkgd.min.js vendored

File diff suppressed because one or more lines are too long

2
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

2
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": {

88
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>
Loading…
Cancel
Save