Skip to content

jQueryless ES6 Rewrite
Compare
Choose a tag to compare
@glen-cheney glen-cheney released this 20 Apr 20:26
· 293 commits to main since this release
v4.0.0
95c49ed

Major Changes

  • Written in ES6, but you don't need any ES6 polyfills.
  • jQuery and Modernizr are no longer dependencies.
  • Dropped active support for IE<11.
  • The build system is now gulp with webpack and babel.
  • Documentation has been improved. Each demo has a code example.
  • All demo JavaScript files have been rewritten.
  • Tests rewritten with mocha/chai/sinon and run with PhantomJS from the command line. The tests can also be run in the browser with test/runner.html.

Breaking Changes

  • No longer a jQuery plugin. Shuffle uses Webpack's UMD wrapper. If you're using globals, it will be exported to the global object (window) as window.shuffle instead of extending the jQuery prototype.
  • Shuffle now only emits 2 events, Shuffle.EventType.LAYOUT and Shuffle.EventType.REMOVED. The loading and done events have been removed because initialization is now synchronous.
  • Emitted events use the native CustomEvent (a polyfill is included for IE11). This means that the data associated with the event is in the detail property and if you're still using jQuery, you'll need to access the event data from the originalEvent property jQuery adds to its event.
  • The shuffle method has been renamed to filter.
  • The appended method has been renamed to add. It expects only one parameter: an array of elements.
  • Class names added to shuffle items has changed. filtered => shuffle-item--visible, concealed => shuffle-item--hidden. You can access (or change) these class names from Shuffle.Classes.VISIBLE and Shuffle.Classes.HIDDEN.

New Stuff

  • Staggered animations. The new staggerAmount option allows you to define an incremental transition delay in milliseconds for the items.

  • You can customize the default styles which are applied to Shuffle items upon initialization, before layout, after layout, before hiding, and after hidden. For example, if you want to add a 50% red background to every element:

    Shuffle.ShuffleItem.Css.INITIAL.backgroundColor = 'rgba(255, 0, 0, 0.5)';

    Or maybe you want to set the text color to teal after the item has finished moving:

    Shuffle.ShuffleItem.Css.VISIBLE.after.color = 'teal';

    Or, instead of items shrinking when they are hidden, make them grow:

    Shuffle.ShuffleItem.Scale.HIDDEN = 2;
Assets 2
Loading