Releases: glen-cheney/Shuffle
jQueryless ES6 Rewrite
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
) aswindow.shuffle
instead of extending the jQuery prototype. - Shuffle now only emits 2 events,
Shuffle.EventType.LAYOUT
andShuffle.EventType.REMOVED
. Theloading
anddone
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 thedetail
property and if you're still using jQuery, you'll need to access the event data from theoriginalEvent
property jQuery adds to its event. - The
shuffle
method has been renamed tofilter
. - The
appended
method has been renamed toadd
. 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 fromShuffle.Classes.VISIBLE
andShuffle.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!
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.
Use `window.jQuery` instead of `window.$` to work better with noConflict.
v2.1.1
Bower support, AMD, and separate Modernizr file
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
Finally adding my first tag.