v5.1.1

Fix new item animation when there is an active filter #198

v5.1.0

• New compare option for sort object to give you more control over sorting if you need it #197
• Add "es" build and "module" field to the package.json

v5.0.3

Fix rounding error causing transitions not to end, making LAYOUT events not fire.

v5.0.2

• Update type definitions for sort object and transition object.

• Update dev dependencies:

  • eslint@4
  • [email protected]
  • rollup-babel-plugin@3
  • sinon@3

Shuffle v5

Summary

Change global export from shuffle to Shuffle. Remove bower support. Expect ES6 environment. Make Shuffle instances Event Emitters instead of dispatching CustomEvent. Add resetItems() method.

Breaking Changes

• Remove bower support.

• Change window export to window.Shuffle from window.shuffle. This won't affect you if you're using a bundler like webpack or browserify.

• Expect an ES6 environment

  • Shuffle@5 uses the following features from ES6/7: Set, Array.from, Object.assign, Array.prototype.find, and Array.prototype.includes. In order to support browsers like IE11 and Safari 8, you must include a polyfill for these features. You can use a service like polyfill.io to only load the polyfills that the current browser needs, or a polyfill script like babel-polyfill.

• Shuffle now inherits from TinyEmitter instead of emitting CustomEvents on the main element.

  Old:

  element.addEventListener(Shuffle.EventType.REMOVED, function (event) {
    console.log(event.detail.collection);
  });

  New:

  shuffleInstance.on(Shuffle.EventType.REMOVED, function (data) {
    console.log(data.collection);
  });

• Item positions when using useTransforms: false are no longer rounded to the nearest whole pixel. See #10 for details. Translate values are still rounded to avoid blurriness. You can disable rounding translate values by setting roundTransforms: false.

• Call layout() when the page finishes loading. This ensures the layout will be correct even if your shuffle instance initializes before async assets like images and fonts are loaded. #147

• Reduced maxStaggerAmount option from 250 to 150.

• Changed easing option default from ease to cubic-bezier(0.4, 0.0, 0.2, 1) (material design's standard curve).

• Removed jsnext:main field in package.json pointing at the src directory. It's only supposed to be used for import and export, not other ES2015+ features.

Features

• Added resetItems() method which can be combined with a React (or other view-based frameworks like Preact and Vue) lifecycle event when data updates.
  • It dumps the elements currently stored and reinitializes all child elements which match the itemSelector.
• The add method now moves new items to their new location, then fades and scales them in. Previously, new items transitioned from 0,0 to their new location. #148
• Added isCentered option which attempts to center each row's items.
• Added index.d.ts typings.
• You can now set HIDDEN and VISIBLE scale amounts to the same value.
• Items now have aria-hidden="true" when they are hidden.
• Shuffle.__Point renamed to Shuffle.Point.
• Added Shuffle.Rect class which helps determine intersections between items.

Documentation

• Refreshed site styles.
• Added flexbox grid demo.
• Added React demo.
• Added "Filters" section before "Advanced Filters".
• Use new images from unsplash.com for demos.
• Moved site to /docs.

Rollup

What's new

Shuffle is now bundled with Rollup, saving some bytes. See #138 for the full PR. This saves 2KB for the minified file and 12.6KB on unminified version.

A filterMode option. This affects using an array with filter. e.g. filter(['one', 'two']). With Shuffle.FilterMode.ANY, the element passes the test if any of its groups are in the array (how it behaved before). With Shuffle.FilterMode.ALL, the element only passes if all its groups are in the array. See #143 for details.

v4.1.1

Fixes #133 - the before styles for a ShuffleItem were not applied if the item didn't move.

webpack-2

Shuffle is now built with webpack v2.2.1 with webpack handling ES6 import and export.

v4.0.2

Update custom-event-polyfill dependency to v0.3.0

v4.0.1

Fixed the delimeter option and added a test for it.