Skip to content

Commit a64a5a8

Browse files
desandrodesandro
committed
Update Outlayer v1.4.2; tick version 1.4.3
Fix #284 add fluid sandbox
1 parent d0ef234 commit a64a5a8

7 files changed

+128
-16
lines changed

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "packery",
3-
"version": "1.4.2",
3+
"version": "1.4.3",
44
"author": "Metafizzy",
55
"description": "bin-packing layout library",
66
"main": "js/packery.js",

‎changelog.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Changelog
22

3+
### v1.4.3
4+
5+
Updated Outlayer to v1.4.2 for percent position bug fixes. Fixed [#284](https://github.com/metafizzy/packery/issues/284).
6+
37
### v1.4.2
48

59
+ Updated Outlayer to v1.4.1.

‎dist/packery.pkgd.js

+9-11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* Packery PACKAGED v1.4.2
2+
* Packery PACKAGED v1.4.3
33
* bin-packing layout library
44
*
55
* Licensed GPLv3 for open source use
@@ -1724,12 +1724,12 @@ Item.prototype.getPosition = function() {
17241724
var isOriginTop = layoutOptions.isOriginTop;
17251725
var xValue = style[ isOriginLeft ? 'left' : 'right' ];
17261726
var yValue = style[ isOriginTop ? 'top' : 'bottom' ];
1727-
var x = parseInt( xValue, 10 );
1728-
var y = parseInt( yValue, 10 );
17291727
// convert percent to pixels
17301728
var layoutSize = this.layout.size;
1731-
x = xValue.indexOf('%') != -1 ? ( x / 100 ) * layoutSize.width : x;
1732-
y = yValue.indexOf('%') != -1 ? ( y / 100 ) * layoutSize.height : y;
1729+
var x = xValue.indexOf('%') != -1 ?
1730+
( parseFloat( xValue ) / 100 ) * layoutSize.width : parseInt( xValue, 10 );
1731+
var y = yValue.indexOf('%') != -1 ?
1732+
( parseFloat( yValue ) / 100 ) * layoutSize.height : parseInt( yValue, 10 );
17331733

17341734
// clean up 'auto' or other non-integer values
17351735
x = isNaN( x ) ? 0 : x;
@@ -1825,14 +1825,12 @@ Item.prototype.getTranslate = function( x, y ) {
18251825
var layoutOptions = this.layout.options;
18261826
x = layoutOptions.isOriginLeft ? x : -x;
18271827
y = layoutOptions.isOriginTop ? y : -y;
1828-
x = this.getXValue( x );
1829-
y = this.getYValue( y );
18301828

18311829
if ( is3d ) {
1832-
return 'translate3d(' + x + ', ' + y + ', 0)';
1830+
return 'translate3d(' + x + 'px, ' + y + 'px, 0)';
18331831
}
18341832

1835-
return 'translate(' + x + ', ' + y + ')';
1833+
return 'translate(' + x + 'px, ' + y + 'px)';
18361834
};
18371835

18381836
// non transition + transform support
@@ -2146,7 +2144,7 @@ return Item;
21462144
}));
21472145

21482146
/*!
2149-
* Outlayer v1.4.1
2147+
* Outlayer v1.4.2
21502148
* the brains and guts of a layout library
21512149
* MIT license
21522150
*/
@@ -3580,7 +3578,7 @@ return Item;
35803578
}));
35813579

35823580
/*!
3583-
* Packery v1.4.2
3581+
* Packery v1.4.3
35843582
* bin-packing layout library
35853583
*
35863584
* Licensed GPLv3 for open source use

‎dist/packery.pkgd.min.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/packery.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* Packery v1.4.2
2+
* Packery v1.4.3
33
* bin-packing layout library
44
*
55
* Licensed GPLv3 for open source use

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "packery",
3-
"version": "1.4.2",
3+
"version": "1.4.3",
44
"description": "bin-packing layout library",
55
"main": "js/packery.js",
66
"dependencies": {

‎sandbox/fluid.html

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
7+
<title>fluid</title>
8+
9+
<style>
10+
* {
11+
-webkit-box-sizing: border-box;
12+
box-sizing: border-box;
13+
}
14+
15+
body {
16+
font-family: sans-serif;
17+
}
18+
19+
.grid {
20+
margin-bottom: 20px;
21+
background: #EEE;
22+
/*padding: 20px 5%;*/
23+
}
24+
25+
.grid-item {
26+
float: left;
27+
width: 25%;
28+
height: 80px;
29+
border: 1px solid;
30+
background: #ACE;
31+
}
32+
33+
.grid-item.w2 { width: 50%; }
34+
.grid-item.w3 { width: 75%; }
35+
36+
.grid-item.h2 { height: 160px; }
37+
.grid-item.h3 { height: 240px; }
38+
</style>
39+
40+
</head>
41+
<body>
42+
43+
<h1>fluid</h1>
44+
45+
<div class="grid js-packery" data-packery-options='{ "percentPosition": true }'>
46+
<div class="grid-item w2"></div>
47+
<div class="grid-item h2"></div>
48+
<div class="grid-item"></div>
49+
<div class="grid-item w3"></div>
50+
<div class="grid-item"></div>
51+
<div class="grid-item h3"></div>
52+
<div class="grid-item w2 h2"></div>
53+
<div class="grid-item"></div>
54+
<div class="grid-item"></div>
55+
</div>
56+
57+
<h2>Draggable</h2>
58+
59+
<div class="grid grid--draggable">
60+
<div class="grid-item w2"></div>
61+
<div class="grid-item h2"></div>
62+
<div class="grid-item"></div>
63+
<div class="grid-item w3"></div>
64+
<div class="grid-item"></div>
65+
<div class="grid-item h3"></div>
66+
<div class="grid-item w2 h2"></div>
67+
<div class="grid-item"></div>
68+
<div class="grid-item"></div>
69+
</div>
70+
71+
<script src="../bower_components/get-style-property/get-style-property.js"></script>
72+
<script src="../bower_components/get-size/get-size.js"></script>
73+
<script src="../bower_components/matches-selector/matches-selector.js"></script>
74+
<script src="../bower_components/eventEmitter/EventEmitter.js"></script>
75+
<script src="../bower_components/eventie/eventie.js"></script>
76+
<script src="../bower_components/doc-ready/doc-ready.js"></script>
77+
<script src="../bower_components/classie/classie.js"></script>
78+
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
79+
<script src="../bower_components/outlayer/item.js"></script>
80+
<script src="../bower_components/outlayer/outlayer.js"></script>
81+
82+
<script src="../bower_components/unipointer/unipointer.js"></script>
83+
<script src="../bower_components/unidragger/unidragger.js"></script>
84+
<script src="../bower_components/draggabilly/draggabilly.js"></script>
85+
86+
<script src="../js/rect.js"></script>
87+
<script src="../js/packer.js"></script>
88+
<script src="../js/item.js"></script>
89+
<script src="../js/packery.js"></script>
90+
91+
<script>
92+
docReady( function() {
93+
var pckry = new Packery( '.grid--draggable', {
94+
percentPosition: true
95+
});
96+
97+
var dragElems = document.querySelectorAll('.grid--draggable .grid-item');
98+
99+
for ( var i=0, len = dragElems.length; i < len; i++ ) {
100+
var dragElem = dragElems[i];
101+
var draggie = new Draggabilly( dragElem );
102+
pckry.bindDraggabillyEvents( draggie );
103+
}
104+
});
105+
106+
107+
</script>
108+
109+
</body>
110+
</html>

0 commit comments

Comments
 (0)