Round translate values by default.

pull/163/head v5.0.1
Glen Cheney 7 years ago
parent 4caeaec928
commit eaae5533ff

9
dist/shuffle.js vendored

@ -1603,6 +1603,9 @@ var Shuffle = function (_TinyEmitter) {
var styles = Object.assign({}, styleObject); var styles = Object.assign({}, styleObject);
if (this.options.useTransforms) { if (this.options.useTransforms) {
if (this.options.roundTransforms) {
item.point = new Point(Math.round(item.point.x), Math.round(item.point.y));
}
styles.transform = 'translate(' + item.point.x + 'px, ' + item.point.y + 'px) scale(' + item.scale + ')'; styles.transform = 'translate(' + item.point.x + 'px, ' + item.point.y + 'px) scale(' + item.scale + ')';
} else { } else {
styles.left = item.point.x + 'px'; styles.left = item.point.x + 'px';
@ -2220,7 +2223,11 @@ Shuffle.options = {
filterMode: Shuffle.FilterMode.ANY, filterMode: Shuffle.FilterMode.ANY,
// Attempt to center grid items in each row. // Attempt to center grid items in each row.
isCentered: false isCentered: false,
// Whether to round pixel values used in translate(x, y). This usually avoids
// blurriness.
roundTransforms: true
}; };
Shuffle.Point = Point; Shuffle.Point = Point;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -1,6 +1,7 @@
<h2>Changelog<a href="#changelog"></a></h2> <h2>Changelog<a href="#changelog"></a></h2>
<p>For a more detailed changelog, visit <a href="https://github.com/Vestride/Shuffle/releases">the latest releases</a> on GitHub.</p> <p>For a more detailed changelog, visit <a href="https://github.com/Vestride/Shuffle/releases">the latest releases</a> on GitHub.</p>
<ul> <ul>
<li><code>v5.0.1</code> 7/18/17 - Add <code>roundTransforms</code> option.</li>
<li><code>v5.0.0</code> 7/18/17 - Change global export from <code>shuffle</code> to <code>Shuffle</code>. Remove bower support. Expect ES6 environment. Make Shuffle instances Event Emitters instead of dispatching <code>CustomEvent</code>.</li> <li><code>v5.0.0</code> 7/18/17 - Change global export from <code>shuffle</code> to <code>Shuffle</code>. Remove bower support. Expect ES6 environment. Make Shuffle instances Event Emitters instead of dispatching <code>CustomEvent</code>.</li>
<li><code>v4.2.0</code> 5/10/17 - Replace <code>webpack</code> build with <code>rollup</code>. Replace <code>jshint</code> and <code>jscs</code> with <code>eslint</code>. Add <code>filterMode</code> option.</li> <li><code>v4.2.0</code> 5/10/17 - Replace <code>webpack</code> build with <code>rollup</code>. Replace <code>jshint</code> and <code>jscs</code> with <code>eslint</code>. Add <code>filterMode</code> option.</li>
<li><code>v4.1.1</code> 3/21/17 - the <code>before</code> styles for a <code>ShuffleItem</code> were not applied if the item didn&rsquo;t move.</li> <li><code>v4.1.1</code> 3/21/17 - the <code>before</code> styles for a <code>ShuffleItem</code> were not applied if the item didn&rsquo;t move.</li>

@ -15,12 +15,13 @@ Shuffle.options = {
initialSort: null, // Shuffle can be initialized with a sort object. It is the same object given to the sort method. initialSort: null, // Shuffle can be initialized with a sort object. It is the same object given to the sort method.
isCentered: false, // Attempt to center grid items in each row. isCentered: false, // Attempt to center grid items in each row.
itemSelector: '*', // e.g. '.picture-item'. itemSelector: '*', // e.g. '.picture-item'.
throttle: throttle, // By default, shuffle will throttle resize events. This can be changed or removed. roundTransforms: true, // Whether to round pixel values used in translate(x, y). This usually avoids blurriness.
throttleTime: 300, // How often shuffle can be called on resize (in milliseconds).
sizer: null, // Element or selector string. Use an element to determine the size of columns and gutters. sizer: null, // Element or selector string. Use an element to determine the size of columns and gutters.
speed: 250, // Transition/animation speed (milliseconds). speed: 250, // Transition/animation speed (milliseconds).
staggerAmount: 15, // Transition delay offset for each item in milliseconds. staggerAmount: 15, // Transition delay offset for each item in milliseconds.
staggerAmountMax: 150, // Maximum stagger delay in milliseconds. staggerAmountMax: 150, // Maximum stagger delay in milliseconds.
throttle: throttle, // By default, shuffle will throttle resize events. This can be changed or removed.
throttleTime: 300, // How often shuffle can be called on resize (in milliseconds).
useTransforms: true, // Whether to use transforms or absolute positioning. useTransforms: true, // Whether to use transforms or absolute positioning.
};</code></pre> };</code></pre>
</div> </div>

@ -1603,6 +1603,9 @@ var Shuffle = function (_TinyEmitter) {
var styles = Object.assign({}, styleObject); var styles = Object.assign({}, styleObject);
if (this.options.useTransforms) { if (this.options.useTransforms) {
if (this.options.roundTransforms) {
item.point = new Point(Math.round(item.point.x), Math.round(item.point.y));
}
styles.transform = 'translate(' + item.point.x + 'px, ' + item.point.y + 'px) scale(' + item.scale + ')'; styles.transform = 'translate(' + item.point.x + 'px, ' + item.point.y + 'px) scale(' + item.scale + ')';
} else { } else {
styles.left = item.point.x + 'px'; styles.left = item.point.x + 'px';
@ -2220,7 +2223,11 @@ Shuffle.options = {
filterMode: Shuffle.FilterMode.ANY, filterMode: Shuffle.FilterMode.ANY,
// Attempt to center grid items in each row. // Attempt to center grid items in each row.
isCentered: false isCentered: false,
// Whether to round pixel values used in translate(x, y). This usually avoids
// blurriness.
roundTransforms: true
}; };
Shuffle.Point = Point; Shuffle.Point = Point;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

5
index.d.ts vendored

@ -301,6 +301,11 @@ declare namespace Shuffle {
*/ */
itemSelector?: string; itemSelector?: string;
/**
* Whether to round pixel values used in translate(x, y). This usually avoids blurriness.
*/
roundTransforms?: boolean,
/** /**
* Element or selector string. Use an element to determine the size of columns and gutters. * Element or selector string. Use an element to determine the size of columns and gutters.
*/ */

@ -1,6 +1,6 @@
{ {
"name": "shufflejs", "name": "shufflejs",
"version": "5.0.0", "version": "5.0.1",
"description": "Categorize, sort, and filter a responsive grid of items", "description": "Categorize, sort, and filter a responsive grid of items",
"keywords": [ "keywords": [
"gallery", "gallery",

@ -649,6 +649,9 @@ class Shuffle extends TinyEmitter {
const styles = Object.assign({}, styleObject); const styles = Object.assign({}, styleObject);
if (this.options.useTransforms) { if (this.options.useTransforms) {
if (this.options.roundTransforms) {
item.point = new Point(Math.round(item.point.x), Math.round(item.point.y));
}
styles.transform = `translate(${item.point.x}px, ${item.point.y}px) scale(${item.scale})`; styles.transform = `translate(${item.point.x}px, ${item.point.y}px) scale(${item.scale})`;
} else { } else {
styles.left = item.point.x + 'px'; styles.left = item.point.x + 'px';
@ -1179,6 +1182,10 @@ Shuffle.options = {
// Attempt to center grid items in each row. // Attempt to center grid items in each row.
isCentered: false, isCentered: false,
// Whether to round pixel values used in translate(x, y). This usually avoids
// blurriness.
roundTransforms: true,
}; };
Shuffle.Point = Point; Shuffle.Point = Point;

Loading…
Cancel
Save