nettika/geary
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui/components-web-view.js: Use ResizeObserver for watching pref height

Browse source 
Rather than guessing when the height might change by using a number
of different event listeners, use a ResizeObserver to get direct
notifications of any changes to the HTML element's size.
This commit is contained in:
Michael Gratton 2020-10-17 11:29:05 +11:00
parent e15ece2cde
commit 01a0f96b40
1 changed files with 5 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

54
ui/components-web-view.js
View file

@ -41,7 +41,12 @@ PageState.prototype = {
}
});
this.heightObserver = new ResizeObserver((entries) => {
state.updatePreferredHeight();
});
document.addEventListener("DOMContentLoaded", function(e) {
state.heightObserver.observe(window.document.documentElement);
state.loaded();
});
@ -49,55 +54,6 @@ PageState.prototype = {
state.selectionChanged();
});
// Coalesce multiple calls to updatePreferredHeight using a
// timeout to avoid the overhead of multiple JS messages sent
// to the app and hence view multiple resizes being queued.
let queueTimeout = null;
let queuePreferredHeightUpdate = function() {
if (queueTimeout != null) {
clearTimeout(queueTimeout);
}
queueTimeout = setTimeout(
function() { state.updatePreferredHeight(); }, 100
);
};
// Queues an update when the complete document is loaded.
//
// Note also that the delay introduced here by this last call
// to queuePreferredHeightUpdate when the complete document is
// loaded seems to be important to get an accurate idea of the
// final document size.
window.addEventListener("load", function(e) {
queuePreferredHeightUpdate();
}, true); // load does not bubble
// Queues updates for any STYLE, IMG and other loaded
// elements, hence handles resizing when the user later
// requests remote images loading.
document.addEventListener("load", function(e) {
queuePreferredHeightUpdate();
}, true); // load does not bubble
// Queues an update if the window changes size, e.g. if the
// user resized the window. Only trigger when the width has
// changed however since the height should only change as the
// body is being loaded.
let width = window.innerWidth;
window.addEventListener("resize", function(e) {
let currentWidth = window.innerWidth;
if (width != currentWidth) {
width = currentWidth;
queuePreferredHeightUpdate();
}
}, false); // load does not bubble
// Queues an update when a transition has completed, e.g. if the
// user resized the window
window.addEventListener("transitionend", function(e) {
queuePreferredHeightUpdate();
}, false); // load does not bubble
this.testResult = null;
},
getPreferredHeight: function() {