mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Animate Abstract open completely, simplify

Browse source 
(And remove the unused 'toggle' event.)
This commit is contained in:
Abe Jellinek 2024-01-04 11:27:29 -08:00 committed by Dan Stillman
parent a9d30b7e8a
commit 90b3c2206b
2 changed files with 18 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
chrome/content/zotero/elements/attachmentRow.js
View file

@ -66,10 +66,10 @@ import { getCSSItemTypeIcon } from 'components/icons';
return this.hasAttribute('open');
}
set open(val) {
val = !!val;
let open = this.open;
if (open === val || this.empty) return;
set open(newOpen) {
newOpen = !!newOpen;
let oldOpen = this.open;
if (oldOpen === newOpen || this.empty) return;
this.render();
let openHeight = this._body.scrollHeight;
if (openHeight) {
@ -81,13 +81,8 @@ import { getCSSItemTypeIcon } from 'components/icons';
// eslint-disable-next-line no-void
void getComputedStyle(this).maxHeight; // Force style calculation! Without this the animation doesn't work
this.toggleAttribute('open', val);
if (!this.dispatchEvent(new CustomEvent('toggle', { bubbles: false, cancelable: true }))) {
// Revert
this.toggleAttribute('open', open);
return;
}
if (!val && this.ownerDocument?.activeElement && this.contains(this.ownerDocument?.activeElement)) {
this.toggleAttribute('open', newOpen);
if (!newOpen && this.ownerDocument?.activeElement && this.contains(this.ownerDocument?.activeElement)) {
this.ownerDocument.activeElement.blur();
}
}

23
chrome/content/zotero/elements/collapsibleSection.js
View file

@ -42,27 +42,27 @@
return this.hasAttribute('open');
}
set open(val) {
val = !!val;
let open = this.open;
if (open === val || this.empty) return;
set open(newOpen) {
newOpen = !!newOpen;
let oldOpen = this.open;
if (oldOpen === newOpen || this.empty) return;
this.render();
// Force open before getting scrollHeight, so we get the right value
// even if the body has a scrollable child
this.toggleAttribute('open', true);
if (!this._restoringOpenState && this._head?.nextSibling?.scrollHeight) {
this.style.setProperty('--open-height', `${this._head.nextSibling.scrollHeight}px`);
}
else {
this.style.setProperty('--open-height', 'auto');
}
this.toggleAttribute('open', oldOpen);
// eslint-disable-next-line no-void
void getComputedStyle(this).maxHeight; // Force style calculation! Without this the animation doesn't work
this.toggleAttribute('open', val);
if (!this.dispatchEvent(new CustomEvent('toggle', { bubbles: false, cancelable: true }))) {
// Revert
this.toggleAttribute('open', open);
return;
}
if (!val && this.ownerDocument?.activeElement && this.contains(this.ownerDocument?.activeElement)) {
this.toggleAttribute('open', newOpen);
if (!newOpen && this.ownerDocument?.activeElement && this.contains(this.ownerDocument?.activeElement)) {
this.ownerDocument.activeElement.blur();
}
@ -291,6 +291,7 @@
if (!this._listenerAdded && this._head?.nextSibling) {
this._head.nextSibling.addEventListener('transitionend', () => {
Zotero.debug('Animation done; height is ' + this._head.nextSibling.scrollHeight)
this.style.setProperty('--open-height', 'auto');
});
this._listenerAdded = true;