mirror of
https://github.com/zotero/zotero.git
synced 2026-09-30 01:51:36 +00:00
Item/collection tree: Resize using ResizeObserver, not debounce (#5977)
This commit is contained in:
parent
9cffc1c7c2
commit
f3328b02ee
4 changed files with 6 additions and 32 deletions
|
|
@ -1102,9 +1102,8 @@ class VirtualizedTable extends React.Component {
|
||||||
this._setXulTooltip();
|
this._setXulTooltip();
|
||||||
|
|
||||||
this._topDiv.style.setProperty("--first-column-extra-width", `${this.firstColumnExtraWidth}px`);
|
this._topDiv.style.setProperty("--first-column-extra-width", `${this.firstColumnExtraWidth}px`);
|
||||||
window.addEventListener("resize", () => {
|
this._resizeObserver = new ResizeObserver(() => this.rerender());
|
||||||
this._debouncedRerender();
|
this._resizeObserver.observe(this._jsWindow.targetElement);
|
||||||
});
|
|
||||||
|
|
||||||
if (this.props.stickySectionHeaders) {
|
if (this.props.stickySectionHeaders) {
|
||||||
this._jsWindow.targetElement.addEventListener('scroll', this._updateStickySectionHeader, { passive: true });
|
this._jsWindow.targetElement.addEventListener('scroll', this._updateStickySectionHeader, { passive: true });
|
||||||
|
|
@ -1117,6 +1116,7 @@ class VirtualizedTable extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
|
this._resizeObserver?.disconnect();
|
||||||
if (this.props.stickySectionHeaders && this._jsWindow) {
|
if (this.props.stickySectionHeaders && this._jsWindow) {
|
||||||
this._jsWindow.targetElement.removeEventListener('scroll', this._updateStickySectionHeader);
|
this._jsWindow.targetElement.removeEventListener('scroll', this._updateStickySectionHeader);
|
||||||
}
|
}
|
||||||
|
|
@ -1589,8 +1589,6 @@ class VirtualizedTable extends React.Component {
|
||||||
return parseFloat(height.split('px')[0]);
|
return parseFloat(height.split('px')[0]);
|
||||||
}
|
}
|
||||||
|
|
||||||
_debouncedRerender = Zotero.Utilities.debounce(this.rerender, 200);
|
|
||||||
|
|
||||||
_updateWidth() {
|
_updateWidth() {
|
||||||
if (!this.props.showHeader) return;
|
if (!this.props.showHeader) return;
|
||||||
const jsWindow = document.querySelector(`#${this._jsWindowID} .windowed-list`);
|
const jsWindow = document.querySelector(`#${this._jsWindowID} .windowed-list`);
|
||||||
|
|
|
||||||
|
|
@ -252,16 +252,6 @@ var LibraryTree = class LibraryTree extends React.Component {
|
||||||
this.tree && this.tree.scrollToRow(index);
|
this.tree && this.tree.scrollToRow(index);
|
||||||
}
|
}
|
||||||
|
|
||||||
updateHeight = () => {
|
|
||||||
this.forceUpdate(() => {
|
|
||||||
if (this.tree) {
|
|
||||||
this.tree.rerender();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
updateHeightDebounced = Zotero.Utilities.debounce(this.updateHeight, 200);
|
|
||||||
|
|
||||||
updateFontSize() {
|
updateFontSize() {
|
||||||
this.tree.updateFontSize();
|
this.tree.updateFontSize();
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1675,9 +1675,6 @@ var ZoteroPane = new function () {
|
||||||
}
|
}
|
||||||
this.tagSelector.handleResize();
|
this.tagSelector.handleResize();
|
||||||
}
|
}
|
||||||
if (this.collectionsView) {
|
|
||||||
this.collectionsView.updateHeightDebounced();
|
|
||||||
}
|
|
||||||
}, 100);
|
}, 100);
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1949,12 +1946,8 @@ var ZoteroPane = new function () {
|
||||||
|
|
||||||
document.getElementById('zotero-tb-search').updateMode();
|
document.getElementById('zotero-tb-search').updateMode();
|
||||||
let refreshPromise;
|
let refreshPromise;
|
||||||
if (state === 'open' && oldState === 'collapsed'
|
if (!(state === 'open' && oldState === 'collapsed'
|
||||||
|| state === 'collapsed' && oldState === 'open') {
|
|| state === 'collapsed' && oldState === 'open')) {
|
||||||
// State change only causes visual refresh - update the tree height
|
|
||||||
this.itemsView.updateHeight();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
// State change changes displayed items - refresh the tree
|
// State change changes displayed items - refresh the tree
|
||||||
refreshPromise = this._refreshAdvancedSearchPane();
|
refreshPromise = this._refreshAdvancedSearchPane();
|
||||||
}
|
}
|
||||||
|
|
@ -7199,11 +7192,6 @@ var ZoteroPane = new function () {
|
||||||
}
|
}
|
||||||
|
|
||||||
this.updateLayoutConstraints();
|
this.updateLayoutConstraints();
|
||||||
if (ZoteroPane.itemsView) {
|
|
||||||
// Need to immediately rerender the items here without any debouncing
|
|
||||||
// since tree height will have changed
|
|
||||||
ZoteroPane.itemsView.updateHeight();
|
|
||||||
}
|
|
||||||
ZoteroContextPane.update();
|
ZoteroContextPane.update();
|
||||||
Zotero_Tabs.updateSidebarLayout();
|
Zotero_Tabs.updateSidebarLayout();
|
||||||
};
|
};
|
||||||
|
|
@ -7387,9 +7375,6 @@ var ZoteroPane = new function () {
|
||||||
|
|
||||||
var collectionsPaneWidth = collectionsPane.getBoundingClientRect().width;
|
var collectionsPaneWidth = collectionsPane.getBoundingClientRect().width;
|
||||||
tagSelector.style.maxWidth = collectionsPaneWidth + 'px';
|
tagSelector.style.maxWidth = collectionsPaneWidth + 'px';
|
||||||
if (ZoteroPane.itemsView) {
|
|
||||||
ZoteroPane.itemsView.updateHeightDebounced();
|
|
||||||
}
|
|
||||||
|
|
||||||
this.handleTagSelectorResize();
|
this.handleTagSelectorResize();
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -131,6 +131,7 @@ function ZoteroLoader({
|
||||||
clearInterval: win.clearInterval,
|
clearInterval: win.clearInterval,
|
||||||
requestAnimationFrame: win.requestAnimationFrame,
|
requestAnimationFrame: win.requestAnimationFrame,
|
||||||
cancelAnimationFrame: win.requestAnimationFrame,
|
cancelAnimationFrame: win.requestAnimationFrame,
|
||||||
|
ResizeObserver: win.ResizeObserver,
|
||||||
};
|
};
|
||||||
for (const name in injectedGlobals) {
|
for (const name in injectedGlobals) {
|
||||||
this.loader.globals[name] = injectedGlobals[name];
|
this.loader.globals[name] = injectedGlobals[name];
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue