Categorize, sort, and filter a responsive grid of items
MIT License
Full Changelog: https://github.com/Vestride/Shuffle/compare/v6.1.0...v6.1.1
Published by Vestride over 2 years ago
package.json
now contains sideEffects: false
to improve dead code removal and tree shaking.
package.json
now contains an export-map to assist bundlers in choosing the correct file.index.d.ts
(in #402) to be more accurate with the real code.Full Changelog: https://github.com/Vestride/Shuffle/compare/v6.0.0...v6.1.0
Published by Vestride over 2 years ago
matches-selector
package and use the native matches
(see browser support).delimeter
option (the misspelled one). Use the delimiter
option instead.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.
throttleit
dependencythrottle
option.throttleTime
option.update()
.
-shuffle.update(true);
+shuffle.update({ recalculateSizes: false });
element.getAttribute('data-groups')
. Now, it uses element.dataset.groups
. dataset
is very well supported now.force
option to update
method to force shuffle to update even if it's disabled (#321).
shuffle.update({ force: true });
.browserslistrc
.Published by Vestride over 3 years ago
sortedItems
property which is the shuffle items in sorted order. Only visible items are in this array.Published by Vestride over 3 years ago
Add isRTL
option thanks to @AmirHosseinKarimi
Published by Vestride about 5 years ago
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.
Moved to jest for testing #278
enable
, update
, and getSize
.Css
export on Shuffle.ShuffleItem.Css
.Shuffle.ALL_ITEMS
and Shuffle.FILTER_ATTRIBUTE_KEY
not being overridable..sort()
method's options: SortOptions
..filter()
's function signature.ShuffleItem.Css
.ts
file.tsc
on test file during tests.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
Published by Vestride about 6 years ago
getComputedStyle
has been moved to a lazily-evaluated function instead of happening when the file is imported.Update type definitions for sort object and transition object.
Update dev dependencies:
Published by Vestride over 7 years ago
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.
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
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 CustomEvent
s 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.
resetItems()
method which can be combined with a React (or other view-based frameworks like Preact and Vue) lifecycle event when data updates.
itemSelector
.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. #148isCentered
option which attempts to center each row's items.index.d.ts
typings.aria-hidden="true"
when they are hidden.Shuffle.__Point
renamed to Shuffle.Point
.Shuffle.Rect
class which helps determine intersections between items./docs
.Published by Vestride over 7 years ago
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.
Published by Vestride over 7 years ago
Shuffle is now built with webpack v2.2.1 with webpack handling ES6 import
and export
.
Published by Vestride about 8 years ago
Update custom-event-polyfill
dependency to v0.3.0