Skip to content

Releases: glen-cheney/Shuffle

jQueryless ES6 Rewrite

20 Apr 20:26
Compare
Choose a tag to compare

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;

v3 - Unit Tests!

07 Oct 00:14
Compare
Choose a tag to compare

This release includes refactoring of the plugin as well as bug fixes. Unit tests have been added and more documentation has been added. Some of the triggered events have been removed as well.

This release fixes #23 #26 #33 and #43.

Use `window.jQuery` instead of `window.$` to work better with noConflict.

01 Jun 21:14
Compare
Choose a tag to compare

v2.1.1

19 Apr 04:46
Compare
Choose a tag to compare
  • Fix #21 - Items with zero opacity overlapping visible ones in IE<10.
  • Docs updates.

Bower support, AMD, and separate Modernizr file

12 Apr 22:29
Compare
Choose a tag to compare

Shuffle can now be installed via bower.

bower install shufflejs

It now also supports AMD. To accomplish this and to make it easier to include Shuffle with other components, Modernizr has been separated into a separate file. This allows you keep Modernizr in the <head> to prevent FOUT. There is now jquery.shuffle.modernizr.js inside the dist/ folder, which includes the custom version of Modernizr as before. The custom modernizr build is also in the dist/ folder if you'd like to use it.

This closes #15.

Shuffle 2.0

04 Aug 02:54
Compare
Choose a tag to compare

Finally adding my first tag.