90 lines
3.4 KiB
Diff
90 lines
3.4 KiB
Diff
|
From 01a0f96b40345642b1100a583b13a2f67487f642 Mon Sep 17 00:00:00 2001
|
||
|
|
From: Michael Gratton <mike@vee.net>
|
||
|
|
Date: Sat, 17 Oct 2020 11:29:05 +1100
|
||
|
|
Subject: [PATCH 103/124] ui/components-web-view.js: Use ResizeObserver for
|
||
|
|
watching pref height
|
||
|
|
|
||
|
|
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.
|
||
|
|
---
|
||
|
|
ui/components-web-view.js | 54 ++++-----------------------------------
|
||
|
|
1 file changed, 5 insertions(+), 49 deletions(-)
|
||
|
|
|
||
|
|
diff --git a/ui/components-web-view.js b/ui/components-web-view.js
|
||
|
|
index d0998a67..34bf0430 100644
|
||
|
|
--- a/ui/components-web-view.js
|
||
|
|
+++ b/ui/components-web-view.js
|
||
|
|
@@ -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() {
|
||
|
|
--
|
||
|
|
2.29.2
|
||
|
|
|