Skip to content

Commit 0397968

Browse files
desandrodesandro
committed
update Outlayer v1.4.2 for percent fix
Fixes #948, #955 add fluid demo
1 parent 785264a commit 0397968

File tree

7 files changed

+107
-17
lines changed

7 files changed

+107
-17
lines changed

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "isotope",
3-
"version": "2.2.1",
3+
"version": "2.2.2",
44
"description": "Filter and sort magical layouts",
55
"main": "js/isotope.js",
66
"dependencies": {

‎changelog.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Changelog
22

3+
### v2.2.2
4+
5+
Updated Outlayer v1.4.2. Fixed percent width bugs. Fixed [#948](https://github.com/metafizzy/isotope/issues/948).
6+
37
### v2.2.1
48

59
Updated Outlayer v1.4.1

‎dist/isotope.pkgd.js‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* Isotope PACKAGED v2.2.1
2+
* Isotope PACKAGED v2.2.2
33
*
44
* Licensed GPLv3 for open source use
55
* or Isotope Commercial License for commercial use
@@ -1637,12 +1637,12 @@ Item.prototype.getPosition = function() {
16371637
var isOriginTop = layoutOptions.isOriginTop;
16381638
var xValue = style[ isOriginLeft ? 'left' : 'right' ];
16391639
var yValue = style[ isOriginTop ? 'top' : 'bottom' ];
1640-
var x = parseInt( xValue, 10 );
1641-
var y = parseInt( yValue, 10 );
16421640
// convert percent to pixels
16431641
var layoutSize = this.layout.size;
1644-
x = xValue.indexOf('%') != -1 ? ( x / 100 ) * layoutSize.width : x;
1645-
y = yValue.indexOf('%') != -1 ? ( y / 100 ) * layoutSize.height : y;
1642+
var x = xValue.indexOf('%') != -1 ?
1643+
( parseFloat( xValue ) / 100 ) * layoutSize.width : parseInt( xValue, 10 );
1644+
var y = yValue.indexOf('%') != -1 ?
1645+
( parseFloat( yValue ) / 100 ) * layoutSize.height : parseInt( yValue, 10 );
16461646

16471647
// clean up 'auto' or other non-integer values
16481648
x = isNaN( x ) ? 0 : x;
@@ -1738,14 +1738,12 @@ Item.prototype.getTranslate = function( x, y ) {
17381738
var layoutOptions = this.layout.options;
17391739
x = layoutOptions.isOriginLeft ? x : -x;
17401740
y = layoutOptions.isOriginTop ? y : -y;
1741-
x = this.getXValue( x );
1742-
y = this.getYValue( y );
17431741

17441742
if ( is3d ) {
1745-
return 'translate3d(' + x + ', ' + y + ', 0)';
1743+
return 'translate3d(' + x + 'px, ' + y + 'px, 0)';
17461744
}
17471745

1748-
return 'translate(' + x + ', ' + y + ')';
1746+
return 'translate(' + x + 'px, ' + y + 'px)';
17491747
};
17501748

17511749
// non transition + transform support
@@ -2059,7 +2057,7 @@ return Item;
20592057
}));
20602058

20612059
/*!
2062-
* Outlayer v1.4.1
2060+
* Outlayer v1.4.2
20632061
* the brains and guts of a layout library
20642062
* MIT license
20652063
*/
@@ -3225,7 +3223,7 @@ return Item;
32253223
}));
32263224

32273225
/*!
3228-
* Masonry v3.3.0
3226+
* Masonry v3.3.1
32293227
* Cascading grid layout library
32303228
* http://masonry.desandro.com
32313229
* MIT License
@@ -3629,7 +3627,7 @@ return Vertical;
36293627
}));
36303628

36313629
/*!
3632-
* Isotope v2.2.1
3630+
* Isotope v2.2.2
36333631
*
36343632
* Licensed GPLv3 for open source use
36353633
* or Isotope Commercial License for commercial use

‎dist/isotope.pkgd.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/isotope.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* Isotope v2.2.1
2+
* Isotope v2.2.2
33
*
44
* Licensed GPLv3 for open source use
55
* or Isotope Commercial License for commercial use

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "isotope-layout",
3-
"version": "2.2.1",
3+
"version": "2.2.2",
44
"description": "Filter and sort magical layouts",
55
"main": "js/isotope.js",
66
"dependencies": {

‎sandbox/fluid.html‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
6+
<title>fluid</title>
7+
8+
<link rel="stylesheet" href="sandbox.css" />
9+
10+
<style>
11+
.container {
12+
width: auto;
13+
max-width: none;
14+
}
15+
16+
.item, .grid-sizer { width: 50%; }
17+
.item.w2 { width: 100%; }
18+
.item.w3 { width: 105%; }
19+
20+
@media screen and (min-width: 768px) {
21+
.item, .grid-sizer { width: 25%; }
22+
.item.w2 { width: 50%; }
23+
.item.w3 { width: 75%; }
24+
}
25+
</style>
26+
27+
</head>
28+
<body>
29+
30+
<h1>fluid</h1>
31+
32+
<div class="container">
33+
<div class="grid-sizer"></div>
34+
<div class="item"></div>
35+
<div class="item h4"></div>
36+
<div class="item w2 h2"></div>
37+
<div class="item w2"></div>
38+
<div class="item h3"></div>
39+
<div class="item w3"></div>
40+
<div class="item"></div>
41+
<div class="item h4"></div>
42+
<div class="item"></div>
43+
<div class="item w2 h4"></div>
44+
<div class="item w2"></div>
45+
<div class="item h5"></div>
46+
<div class="item w3"></div>
47+
<div class="item"></div>
48+
<div class="item h4"></div>
49+
<div class="item"></div>
50+
<div class="item w2 h5"></div>
51+
<div class="item w2"></div>
52+
<div class="item h3"></div>
53+
<div class="item w3"></div>
54+
<div class="item"></div>
55+
</div>
56+
57+
<script src="../bower_components/eventEmitter/EventEmitter.js"></script>
58+
<script src="../bower_components/eventie/eventie.js"></script>
59+
<script src="../bower_components/doc-ready/doc-ready.js"></script>
60+
<script src="../bower_components/get-style-property/get-style-property.js"></script>
61+
<script src="../bower_components/get-size/get-size.js"></script>
62+
<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script>
63+
<script src="../bower_components/matches-selector/matches-selector.js"></script>
64+
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
65+
<script src="../bower_components/outlayer/item.js"></script>
66+
<script src="../bower_components/outlayer/outlayer.js"></script>
67+
<script src="../bower_components/masonry/masonry.js"></script>
68+
69+
<script src="../js/layout-mode.js"></script>
70+
<script src="../js/item.js"></script>
71+
<script src="../js/isotope.js"></script>
72+
<script src="../js/layout-modes/fit-rows.js"></script>
73+
<script src="../js/layout-modes/masonry.js"></script>
74+
75+
<script>
76+
docReady( function() {
77+
var iso = window.iso = new Isotope( '.container', {
78+
itemSelector: '.item',
79+
percentPosition: true,
80+
masonry: {
81+
columnWidth: '.grid-sizer'
82+
}
83+
});
84+
});
85+
</script>
86+
87+
</body>
88+
</html>

0 commit comments

Comments
 (0)