What's Changed

• Fix copy paste in docs by @Vestride in https://github.com/Vestride/Shuffle/pull/497
• Fix some typos by @ydah in https://github.com/Vestride/Shuffle/pull/555
• Fix missing types when resolving from exports field in package.json by @Schleuse in https://github.com/Vestride/Shuffle/pull/561
• update dependencies by @Vestride in https://github.com/Vestride/Shuffle/pull/562

New Contributors

• @ydah made their first contribution in https://github.com/Vestride/Shuffle/pull/555
• @Schleuse made their first contribution in https://github.com/Vestride/Shuffle/pull/561

Full Changelog: https://github.com/Vestride/Shuffle/compare/v6.1.0...v6.1.1

New features

• The package.json now contains sideEffects: false to improve dead code removal and tree shaking.
  • https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free
• The package.json now contains an export-map to assist bundlers in choosing the correct file.

Bug fixes

• Update index.d.ts (in #402) to be more accurate with the real code.

Internal

• Shuffle is now a monorepo, built with turborepo (#399).
• Rewrote the website with Docusaurus.

Full Changelog: https://github.com/Vestride/Shuffle/compare/v6.0.0...v6.1.0

Breaking

• Remove IE 11 from browsers list. If you need to support IE 11 (sorry), please use v5. Did you know Microsoft 365 apps and services stopped supporting IE 11 in August 2021?
• Remove matches-selector package and use the native matches (see browser support).
• Remove deprecated delimeter option (the misspelled one). Use the delimiter option instead.
• Replace window resize event listener with ResizeObserver (#321). Browser support for it is very good, but if you want to support a browser that doesn't have it, you can manually add a window resize event and call update() within the event callback.
  • Removed throttleit dependency
  • Removed throttle option.
  • Removed throttleTime option.
• Changed the method signature for update().

  -shuffle.update(true);
  +shuffle.update({ recalculateSizes: false });
  

• Changed how data attribute are accessed. Previously, Shuffle used element.getAttribute('data-groups'). Now, it uses element.dataset.groups. dataset is very well supported now.

New features

• Minified file size
  • Before: 20.8 kB
  • After: 16.9 kB
• Added force option to update method to force shuffle to update even if it's disabled (#321).

  shuffle.update({ force: true });
  

Other

• Convert demos to ES6 classes.
• Move browsers list to .browserslistrc.
• Add prettier
• Add BMC button.
• Remove polyfill.io links -- they add nothing with current versions of Chrome and others.
• Run sass division migration
• Remove dist files from git
• Recreate demos to codepen. Collection.
  • basic layout
  • homepage demo
  • compound filters
  • images
  • image problems
  • adding and removing
  • animated viewport entry
  • bootstrap 3 grid
  • bootstrap 4 grid
  • flexbox grid
  • with react
  • ajax
  • Shuffle v5 with IE9

• Add sortedItems property which is the shuffle items in sorted order. Only visible items are in this array.
• Fix Chrome DPI bug described in #314 that was causing column sizes to be calculated incorrectly.

Add isRTL option thanks to @AmirHosseinKarimi

The TypeScript definitions were missing on, once, emit, and off because the definitions file did not have extends TinyEmitter. These methods now work correctly and contain type information for the data object in the event callback.

Jest

Moved to jest for testing #278

TypeScript definitions #287

Fixes

• Fix bad default parameters for enable, update, and getSize.
• Fix missing Css export on Shuffle.ShuffleItem.Css.
• Fix Shuffle.ALL_ITEMS and Shuffle.FILTER_ATTRIBUTE_KEY not being overridable.

New

• Add types for .sort() method's options: SortOptions.
• Add types for .filter()'s function signature.
• Add types for ShuffleItem.Css.

Tests

• Add test ts file.
• Run tsc on test file during tests.

Breaking for TypeScript users:

• Changed all Element to HTMLElement.
• Shuffle.ShuffleOptions is now exported top-level.

  import Shuffle, { ShuffleOptions, SortOptions } from 'shufflejs';
  

Full changes: https://github.com/Vestride/Shuffle/compare/v5.2.1...v5.2.2

Change typings to use default export #214

-export = Shuffle;
+export default Shuffle;

Upgraded dev dependencies to their latest versions:

• rollup
• terser
• babel
• eslint

Removed @odopod/eslint as I no longer have write access to Odopod's repos.

https://github.com/Vestride/Shuffle/compare/v5.2.0...v5.2.1

• Fix for server side rendering #247. The test for whether the browser includes padding in width/height in getComputedStyle has been moved to a lazily-evaluated function instead of happening when the file is imported.
• Updated dev dependencies.

Fix misspelled delimiter option. Both "delimiter" (correct) and "delimeter" (incorrect) will continue to work for v5. #215

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

• 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

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

• Update type definitions for sort object and transition object.

• Update dev dependencies:

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

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.

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.

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

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

Update custom-event-polyfill dependency to v0.3.0

Fixed the delimeter option and added a test for it.