Browse Source

Add usingScale to calculate scale only once per render

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