Animate chevron when opening collection/item
This commit is contained in:
parent
db5863fa0a
commit
df80c7573a
2 changed files with 30 additions and 2 deletions
|
@ -262,6 +262,15 @@ var CollectionTree = class CollectionTree extends LibraryTree {
|
|||
|
||||
renderItem = (index, selection, oldDiv, columns) => {
|
||||
const treeRow = this.getRow(index);
|
||||
|
||||
// if marked as last toggled avoid re-rendering this row so that twisty animation can run
|
||||
if (oldDiv && this._lastToggleOpenStateIndex === index) {
|
||||
let oldTwisty = oldDiv.querySelector('.twisty');
|
||||
if (oldTwisty) {
|
||||
oldTwisty.classList.toggle('open', this.isContainerOpen(index));
|
||||
return oldDiv;
|
||||
}
|
||||
}
|
||||
|
||||
// Div creation and content
|
||||
let div = oldDiv || document.createElement('div');
|
||||
|
@ -1141,8 +1150,12 @@ var CollectionTree = class CollectionTree extends LibraryTree {
|
|||
|
||||
toggleOpenState = async (index) => {
|
||||
if (this.isContainerEmpty(index)) return;
|
||||
|
||||
this._lastToggleOpenStateIndex = index;
|
||||
if (this.isContainerOpen(index)) {
|
||||
return this._closeContainer(index);
|
||||
await this._closeContainer(index);
|
||||
this._lastToggleOpenStateIndex = null;
|
||||
return;
|
||||
}
|
||||
|
||||
this.selection.selectEventsSuppressed = true;
|
||||
|
@ -1160,6 +1173,7 @@ var CollectionTree = class CollectionTree extends LibraryTree {
|
|||
this._refreshRowMap();
|
||||
this._saveOpenStates();
|
||||
this.tree.invalidate(index);
|
||||
this._lastToggleOpenStateIndex = null;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -1556,8 +1556,12 @@ var ItemTree = class ItemTree extends LibraryTree {
|
|||
return;
|
||||
}
|
||||
|
||||
this._lastToggleOpenStateIndex = index;
|
||||
|
||||
if (this.isContainerOpen(index)) {
|
||||
return this._closeContainer(index, skipRowMapRefresh, true);
|
||||
await this._closeContainer(index, skipRowMapRefresh, true);
|
||||
this._lastToggleOpenStateIndex = null;
|
||||
return;
|
||||
}
|
||||
if (!skipRowMapRefresh) {
|
||||
var savedSelection = this.getSelectedItems(true);
|
||||
|
@ -1603,6 +1607,7 @@ var ItemTree = class ItemTree extends LibraryTree {
|
|||
this._rows[index].isOpen = true;
|
||||
|
||||
if (count == 0) {
|
||||
this._lastToggleOpenStateIndex = null;
|
||||
return;
|
||||
}
|
||||
|
||||
|
@ -1613,6 +1618,7 @@ var ItemTree = class ItemTree extends LibraryTree {
|
|||
await this._refreshPromise;
|
||||
this._restoreSelection(savedSelection, false, true);
|
||||
this.tree.invalidate();
|
||||
this._lastToggleOpenStateIndex = null;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -2869,6 +2875,14 @@ var ItemTree = class ItemTree extends LibraryTree {
|
|||
_renderItem(index, selection, oldDiv=null, columns) {
|
||||
let div;
|
||||
if (oldDiv) {
|
||||
// if marked as last toggled avoid re-rendering this row so that twisty animation can run
|
||||
if (this._lastToggleOpenStateIndex === index) {
|
||||
let oldTwisty = oldDiv.querySelector('.twisty');
|
||||
if (oldTwisty) {
|
||||
oldTwisty.classList.toggle('open', this.isContainerOpen(index));
|
||||
return oldDiv;
|
||||
}
|
||||
}
|
||||
div = oldDiv;
|
||||
div.innerHTML = "";
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue