Browse Source

Add usingScale to calculate scale only once per render

iou90 4 years ago
parent
commit
9cba3e5989
1 changed files with 16 additions and 6 deletions
  1. 16
    6
      autoHeightWebView/utils.js

+ 16
- 6
autoHeightWebView/utils.js View File

@@ -14,6 +14,7 @@ const domMutationObserveScript = `
14 14
 
15 15
 const updateSizeWithMessage = (element, scalesPageToFit) =>
16 16
   `
17
+  var usingScale = 0;
17 18
   var scaling = false;
18 19
   var zoomedin = false;
19 20
   var lastHeight = 0;
@@ -23,7 +24,7 @@ const updateSizeWithMessage = (element, scalesPageToFit) =>
23 24
   var forceRefreshTimeout;
24 25
   var checkPostMessageTimeout;
25 26
 
26
-  function updateSize(event) {
27
+  function updateSize() {
27 28
     if (zoomedin || scaling) {
28 29
       return;
29 30
     }
@@ -34,14 +35,20 @@ const updateSizeWithMessage = (element, scalesPageToFit) =>
34 35
       checkPostMessageTimeout = setTimeout(updateSize, 200);
35 36
       return;
36 37
     }
38
+
37 39
     clearTimeout(checkPostMessageTimeout);
38 40
     height = ${element}.offsetHeight || document.documentElement.offsetHeight;
39 41
     width = ${element}.offsetWidth || document.documentElement.offsetWidth;
40
-    var scale = ${scalesPageToFit ? 'screen.width / window.innerWidth' : '1'};
41
-    window.ReactNativeWebView.postMessage(JSON.stringify({ width: Math.min(width, screen.width), height: height * scale }));
42
+
43
+    if(!usingScale && window.innerWidth) {
44
+      usingScale = ${scalesPageToFit ? 'screen.width / window.innerWidth' : '1'};
45
+    }
46
+
47
+    window.ReactNativeWebView.postMessage(JSON.stringify({ width: Math.min(width, screen.width), height: height * usingScale }));
42 48
 
43 49
     // Make additional height checks (required to fix issues wit twitter embeds)
44 50
     clearTimeout(forceRefreshTimeout);
51
+
45 52
     if (lastHeight !== height) {
46 53
       heightTheSameTimes = 1;
47 54
     } else {
@@ -76,7 +83,7 @@ const detectZoomChanged = `
76 83
   var lastScale = 1.0;
77 84
   var doubleTapDelay = 400;
78 85
   function detectZoomChanged() {
79
-    var tempZoomedin = (screen.width / window.innerWidth) > 1;
86
+    var tempZoomedin = (screen.width / window.innerWidth) > (usingScale || 1);
80 87
     tempZoomedin !== zoomedin && window.ReactNativeWebView.postMessage(JSON.stringify({ zoomedin: tempZoomedin }));
81 88
     zoomedin = tempZoomedin;
82 89
   }
@@ -89,10 +96,12 @@ const detectZoomChanged = `
89 96
     if(scaling) {
90 97
       scaleing = false;
91 98
     }
99
+
92 100
     var tempScale = event.scale; 
93 101
     tempScale !== lastScale && detectZoomChanged();
94 102
     lastScale = tempScale;
95 103
     var timeSince = new Date().getTime() - latestTapStamp;
104
+
96 105
     // double tap   
97 106
     if(timeSince < 600 && timeSince > 0) {
98 107
       zoomedinTimeOut = setTimeout(() => {
@@ -100,11 +109,12 @@ const detectZoomChanged = `
100 109
         detectZoomChanged();
101 110
       }, doubleTapDelay);
102 111
     }
112
+
103 113
     latestTapStamp = new Date().getTime();
104 114
   });
105 115
 `;
106 116
 
107
-const getBaseScript = ({ style, viewportContent, scalesPageToFit, scrollEnabledWithZoomedin }) =>
117
+const getBaseScript = ({ viewportContent, scalesPageToFit, scrollEnabledWithZoomedin }) =>
108 118
   `
109 119
   ;
110 120
   if (!document.getElementById("rnahw-wrapper")) {
@@ -177,7 +187,7 @@ const getScript = ({
177 187
   scalesPageToFit,
178 188
   scrollEnabledWithZoomedin
179 189
 }) => {
180
-  let script = getBaseScript({ style, viewportContent, scalesPageToFit, scrollEnabledWithZoomedin });
190
+  let script = getBaseScript({ viewportContent, scalesPageToFit, scrollEnabledWithZoomedin });
181 191
   script = files && files.length > 0 ? appendFilesToHead({ files, script }) : script;
182 192
   script = appendStylesToHead({ style: customStyle, script });
183 193
   customScript && (script = customScript + script);