Browse Source

Add detectZoomChanged for utils

iou90 4 years ago
parent
commit
c8c57d705d
1 changed files with 37 additions and 11 deletions
  1. 37
    11
      autoHeightWebView/utils.js

+ 37
- 11
autoHeightWebView/utils.js View File

@@ -65,6 +65,32 @@ const makeScalePageToFit = (zoomable, scalesPageToFit) =>
65 65
   document.getElementsByTagName("head")[0].appendChild(meta);
66 66
 `;
67 67
 
68
+const detectZoomChanged = `
69
+  var zoomin = false;
70
+  var latestTapStamp = 0;
71
+  var lastScale = false;
72
+  var doubleTapDelay = 400;
73
+  function detectZoomChanged() {
74
+    var tempZoomin = (screen.width / window.innerWidth) > 1;
75
+    tempZoomin !== zoomin && window.ReactNativeWebView.postMessage(JSON.stringify({ zoomin: tempZoomin }));
76
+    zoomin = tempZoomin;
77
+  }
78
+  window.addEventListener('touchend', event => {
79
+    var tempScale = event.scale; 
80
+    tempScale !== lastScale && detectZoomChanged();
81
+    lastScale = tempScale;
82
+    var timeSince = new Date().getTime() - latestTapStamp;
83
+    // double tap   
84
+    if(timeSince < 600 && timeSince > 0) {
85
+      zoominTimeOut = setTimeout(() => {
86
+        clearTimeout(zoominTimeOut);
87
+        detectZoomChanged();
88
+      }, doubleTapDelay);
89
+    }
90
+    latestTapStamp = new Date().getTime();
91
+  });
92
+`
93
+
68 94
 const getBaseScript = ({ style, zoomable, scalesPageToFit }) =>
69 95
   `
70 96
   ;
@@ -100,10 +126,10 @@ const appendFilesToHead = ({ files, script }) =>
100 126
 const screenWidth = Dimensions.get('window').width;
101 127
 
102 128
 const bodyStyle = `
103
-body {
104
-  margin: 0;
105
-  padding: 0;
106
-}
129
+  body {
130
+    margin: 0;
131
+    padding: 0;
132
+  }
107 133
 `;
108 134
 
109 135
 const appendStylesToHead = ({ style, script }) => {
@@ -119,13 +145,13 @@ const appendStylesToHead = ({ style, script }) => {
119 145
 };
120 146
 
121 147
 const getInjectedSource = ({ html, script }) => `
122
-${html}
123
-<script>
124
-// prevents code colissions with global scope
125
-(function() {
126
-  ${script}
127
-})();
128
-</script>
148
+  ${html}
149
+  <script>
150
+  // prevents code colissions with global scope
151
+  (function() {
152
+    ${script}
153
+  })();
154
+  </script>
129 155
 `;
130 156
 
131 157
 const getScript = ({ files, customStyle, customScript, style, zoomable, scalesPageToFit }) => {