Animate chevron when opening collection/item

This commit is contained in:
Tom Najdek 2023-12-19 09:53:49 +01:00 committed by Dan Stillman
parent db5863fa0a
commit df80c7573a
2 changed files with 30 additions and 2 deletions

View file

@ -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;
}
/**

View file

@ -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 = "";
}