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

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

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