Mirrors
/
Vestride_Shuffle
mirror of https://github.com/Vestride/Shuffle.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Fix new item animation when there is an active filter

Browse Source 
fixes #198
pull/211/head
Glen Cheney 6 years ago
parent 9d2f8098f0
commit 925252330c
9 changed files with 82 additions and 45 deletions
Show Stats Download Patch File Download Diff File

39
dist/shuffle.js vendored
Unescape Escape View File

@ -1231,10 +1231,9 @@ var Shuffle = function (_TinyEmitter) {
}
/**
* When new elements are added to the shuffle container, update the array of
* items because that is the order `_layout` calls them.
* Combine the current items array with a new one and sort it by DOM order.
* @param {ShuffleItem[]} items Items to track.
* @return {Shuffle[]}
* @return {ShuffleItem[]}
*/
}, {
@ -1869,24 +1868,38 @@ var Shuffle = function (_TinyEmitter) {
// Determine which items will go with the current filter.
this._resetCols();
var newItemSet = this._filter(this.lastFilter, items);
var willBeVisible = this._mergeNewItems(newItemSet.visible);
var sortedVisibleItems = sorter(willBeVisible, this.lastSort);
var allItems = this._mergeNewItems(items);
var sortedItems = sorter(allItems, this.lastSort);
var allSortedItemsSet = this._filter(this.lastFilter, sortedItems);
var isNewItem = function isNewItem(item) {
return items.includes(item);
};
var applyHiddenState = function applyHiddenState(item) {
item.scale = ShuffleItem.Scale.HIDDEN;
item.isHidden = true;
item.applyCss(ShuffleItem.Css.HIDDEN.before);
item.applyCss(ShuffleItem.Css.HIDDEN.after);
};
// Layout all items again so that new items get positions.
// Synchonously apply positions.
var itemPositions = this._getNextPositions(sortedVisibleItems);
sortedVisibleItems.forEach(function (item, i) {
if (newItemSet.visible.includes(item)) {
var itemPositions = this._getNextPositions(allSortedItemsSet.visible);
allSortedItemsSet.visible.forEach(function (item, i) {
if (isNewItem(item)) {
item.point = itemPositions[i];
item.scale = ShuffleItem.Scale.HIDDEN;
item.isHidden = true;
item.applyCss(ShuffleItem.Css.HIDDEN.before);
item.applyCss(ShuffleItem.Css.HIDDEN.after);
applyHiddenState(item);
item.applyCss(_this9.getStylesForTransition(item, {}));
}
});
allSortedItemsSet.hidden.forEach(function (item) {
if (isNewItem(item)) {
applyHiddenState(item);
}
});
// Cause layout so that the styles above are applied.
this.element.offsetWidth; // eslint-disable-line no-unused-expressions

2
dist/shuffle.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/shuffle.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/shuffle.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

39
docs/dist/shuffle.js vendored
Unescape Escape View File

@ -1231,10 +1231,9 @@ var Shuffle = function (_TinyEmitter) {
}
/**
* When new elements are added to the shuffle container, update the array of
* items because that is the order `_layout` calls them.
* Combine the current items array with a new one and sort it by DOM order.
* @param {ShuffleItem[]} items Items to track.
* @return {Shuffle[]}
* @return {ShuffleItem[]}
*/
}, {
@ -1869,24 +1868,38 @@ var Shuffle = function (_TinyEmitter) {
// Determine which items will go with the current filter.
this._resetCols();
var newItemSet = this._filter(this.lastFilter, items);
var willBeVisible = this._mergeNewItems(newItemSet.visible);
var sortedVisibleItems = sorter(willBeVisible, this.lastSort);
var allItems = this._mergeNewItems(items);
var sortedItems = sorter(allItems, this.lastSort);
var allSortedItemsSet = this._filter(this.lastFilter, sortedItems);
var isNewItem = function isNewItem(item) {
return items.includes(item);
};
var applyHiddenState = function applyHiddenState(item) {
item.scale = ShuffleItem.Scale.HIDDEN;
item.isHidden = true;
item.applyCss(ShuffleItem.Css.HIDDEN.before);
item.applyCss(ShuffleItem.Css.HIDDEN.after);
};
// Layout all items again so that new items get positions.
// Synchonously apply positions.
var itemPositions = this._getNextPositions(sortedVisibleItems);
sortedVisibleItems.forEach(function (item, i) {
if (newItemSet.visible.includes(item)) {
var itemPositions = this._getNextPositions(allSortedItemsSet.visible);
allSortedItemsSet.visible.forEach(function (item, i) {
if (isNewItem(item)) {
item.point = itemPositions[i];
item.scale = ShuffleItem.Scale.HIDDEN;
item.isHidden = true;
item.applyCss(ShuffleItem.Css.HIDDEN.before);
item.applyCss(ShuffleItem.Css.HIDDEN.after);
applyHiddenState(item);
item.applyCss(_this9.getStylesForTransition(item, {}));
}
});
allSortedItemsSet.hidden.forEach(function (item) {
if (isNewItem(item)) {
applyHiddenState(item);
}
});
// Cause layout so that the styles above are applied.
this.element.offsetWidth; // eslint-disable-line no-unused-expressions

2
docs/dist/shuffle.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
docs/dist/shuffle.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/dist/shuffle.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

37
src/shuffle.js
Unescape Escape View File

@ -332,10 +332,9 @@ class Shuffle extends TinyEmitter {
}
/**
* When new elements are added to the shuffle container, update the array of
* items because that is the order `_layout` calls them.
* Combine the current items array with a new one and sort it by DOM order.
* @param {ShuffleItem[]} items Items to track.
* @return {Shuffle[]}
* @return {ShuffleItem[]}
*/
_mergeNewItems(items) {
const children = Array.from(this.element.children);
@ -855,24 +854,36 @@ class Shuffle extends TinyEmitter {
// Determine which items will go with the current filter.
this._resetCols();
const newItemSet = this._filter(this.lastFilter, items);
const willBeVisible = this._mergeNewItems(newItemSet.visible);
const sortedVisibleItems = sorter(willBeVisible, this.lastSort);
const allItems = this._mergeNewItems(items);
const sortedItems = sorter(allItems, this.lastSort);
const allSortedItemsSet = this._filter(this.lastFilter, sortedItems);
const isNewItem = item => items.includes(item);
const applyHiddenState = (item) => {
item.scale = ShuffleItem.Scale.HIDDEN;
item.isHidden = true;
item.applyCss(ShuffleItem.Css.HIDDEN.before);
item.applyCss(ShuffleItem.Css.HIDDEN.after);
};
// Layout all items again so that new items get positions.
// Synchonously apply positions.
const itemPositions = this._getNextPositions(sortedVisibleItems);
sortedVisibleItems.forEach((item, i) => {
if (newItemSet.visible.includes(item)) {
const itemPositions = this._getNextPositions(allSortedItemsSet.visible);
allSortedItemsSet.visible.forEach((item, i) => {
if (isNewItem(item)) {
item.point = itemPositions[i];
item.scale = ShuffleItem.Scale.HIDDEN;
item.isHidden = true;
item.applyCss(ShuffleItem.Css.HIDDEN.before);
item.applyCss(ShuffleItem.Css.HIDDEN.after);
applyHiddenState(item);
item.applyCss(this.getStylesForTransition(item, {}));
}
});
allSortedItemsSet.hidden.forEach((item) => {
if (isNewItem(item)) {
applyHiddenState(item);
}
});
// Cause layout so that the styles above are applied.
this.element.offsetWidth; // eslint-disable-line no-unused-expressions

Write Preview
Loading…
Cancel
Save