Browse Source

Apply viewportContent prop

iou90 4 years ago
parent
commit
a661b942d2
5 changed files with 22 additions and 17 deletions
  1. 1
    1
      .github/ISSUE_TEMPLATE/bug_report.md
  2. 2
    2
      README.md
  3. 2
    2
      autoHeightWebView/index.js
  4. 16
    11
      autoHeightWebView/utils.js
  5. 1
    1
      demo/yarn.lock

+ 1
- 1
.github/ISSUE_TEMPLATE/bug_report.md View File

11
 
11
 
12
 **To Reproduce:**
12
 **To Reproduce:**
13
 
13
 
14
-**Source (raw html or url):**
14
+**Source (static HTML or url):**
15
 
15
 
16
 **Expected behavior:**
16
 **Expected behavior:**
17
 
17
 

+ 2
- 2
README.md View File

63
 | __source__                       |    -    |                                               `PropTypes.object`                                                | BaseUrl now contained by source. 'web/' by default on iOS; 'file:///android_asset/' by default on Android or uri.                                                                                            |
63
 | __source__                       |    -    |                                               `PropTypes.object`                                                | BaseUrl now contained by source. 'web/' by default on iOS; 'file:///android_asset/' by default on Android or uri.                                                                                            |
64
 | __scalesPageToFit__              |  false  |                                                `PropTypes.bool`                                                 | False by default (different from react-native-webview which true by default on Android). When scalesPageToFit was enabled, it will apply the scale of the page directly.    |
64
 | __scalesPageToFit__              |  false  |                                                `PropTypes.bool`                                                 | False by default (different from react-native-webview which true by default on Android). When scalesPageToFit was enabled, it will apply the scale of the page directly.    |
65
 | __scrollEnabledWithZoomedin__                     |  false   |                                                `PropTypes.bool`                                                 | Making the webview scrollable on iOS when zoomed in even if scrollEnabled is false.                                                                        |
65
 | __scrollEnabledWithZoomedin__                     |  false   |                                                `PropTypes.bool`                                                 | Making the webview scrollable on iOS when zoomed in even if scrollEnabled is false.                                                                        |
66
-| __zoomDisabled__                     |  false   |                                                `PropTypes.bool`                                                 | ZoomDisabled with scalesPageToFit may cause some layout issues on Android, for these conditions, using __customScript__ prop instead to apply custom viewport meta.                                                                        |
66
+| __viewportContent__                     |  'width=device-width' on iOS   |                                                `PropTypes.string`                                                 | Please note that 'width=device-width' with scalesPageToFit may cause some layout issues on Android, for these conditions, using __customScript__ prop to apply custom viewport meta.                                                                        |
67
 | __showsVerticalScrollIndicator__ |  false  |                                                `PropTypes.bool`                                                 | False by default (different from react-native-webview).                                                                                                                                                      |
67
 | __showsVerticalScrollIndicator__ |  false  |                                                `PropTypes.bool`                                                 | False by default (different from react-native-webview).                                                                                                                                                      |
68
 | __showsVerticalScrollIndicator__ |  false  |                                                `PropTypes.bool`                                                 | False by default (different from react-native-webview).                                                                                                                                                      |
68
 | __showsVerticalScrollIndicator__ |  false  |                                                `PropTypes.bool`                                                 | False by default (different from react-native-webview).                                                                                                                                                      |
69
-| __originWhitelist__              |  ['*']  |                                      `PropTypes.arrayOf(PropTypes.string)`                                      |  Validate any origin by default cause of most cases using raw html concerns.                                                                                                                                                                                                           |
69
+| __originWhitelist__              |  ['*']  |                                      `PropTypes.arrayOf(PropTypes.string)`                                      |  Validate any origin by default cause of most cases using static HTML concerns.                                                                                                                                                                                                           |
70
 
70
 
71
 ## demo
71
 ## demo
72
 
72
 

+ 2
- 2
autoHeightWebView/index.js View File

45
         console.error(error);
45
         console.error(error);
46
         return;
46
         return;
47
       }
47
       }
48
-      const { height, width, zoomin } = data;
49
-      !scrollEnabled && scrollEnabledWithZoomedin && setScrollable(zoomin);
48
+      const { height, width, zoomedin } = data;
49
+      !scrollEnabled && scrollEnabledWithZoomedin && setScrollable(zoomedin);
50
       const { height: previousHeight, width: previousWidth } = size;
50
       const { height: previousHeight, width: previousWidth } = size;
51
       isSizeChanged({ height, previousHeight, width, previousWidth }) &&
51
       isSizeChanged({ height, previousHeight, width, previousWidth }) &&
52
         setSize({
52
         setSize({

+ 16
- 11
autoHeightWebView/utils.js View File

54
   }
54
   }
55
   `;
55
   `;
56
 
56
 
57
-const disableZoom = `
58
-  var meta = document.createElement("meta");
59
-  meta.setAttribute("name", "viewport");
60
-  meta.setAttribute("content", "width=device-width, user-scalable=no");
61
-  document.getElementsByTagName("head")[0].appendChild(meta);
62
-`;
57
+const setViewportContent = content => {
58
+  if (!content) {
59
+    return '';
60
+  }
61
+  return `
62
+    var meta = document.createElement("meta");
63
+    meta.setAttribute("name", "viewport");
64
+    meta.setAttribute("content", "${content}");
65
+    document.getElementsByTagName("head")[0].appendChild(meta);
66
+  `;
67
+};
63
 
68
 
64
 const detectZoomChanged = `
69
 const detectZoomChanged = `
65
   var zoomedin = false;
70
   var zoomedin = false;
87
   });
92
   });
88
 `;
93
 `;
89
 
94
 
90
-const getBaseScript = ({ style, zoomDisabled, scalesPageToFit, scrollEnabledWithZoomedin }) =>
95
+const getBaseScript = ({ style, viewportContent, scalesPageToFit, scrollEnabledWithZoomedin }) =>
91
   `
96
   `
92
   ;
97
   ;
93
   if (!document.getElementById("rnahw-wrapper")) {
98
   if (!document.getElementById("rnahw-wrapper")) {
102
   window.addEventListener('load', updateSize);
107
   window.addEventListener('load', updateSize);
103
   window.addEventListener('resize', updateSize);
108
   window.addEventListener('resize', updateSize);
104
   ${domMutationObserveScript}
109
   ${domMutationObserveScript}
105
-  ${zoomDisabled ? disableZoom : ''}
106
-  ${!zoomDisabled && scrollEnabledWithZoomedin ? detectZoomChanged : ''}
110
+  ${setViewportContent(viewportContent)}
111
+  ${scrollEnabledWithZoomedin ? detectZoomChanged : ''}
107
   updateSize();
112
   updateSize();
108
   `;
113
   `;
109
 
114
 
156
   customStyle,
161
   customStyle,
157
   customScript,
162
   customScript,
158
   style,
163
   style,
159
-  zoomDisabled,
164
+  viewportContent,
160
   scalesPageToFit,
165
   scalesPageToFit,
161
   scrollEnabledWithZoomedin
166
   scrollEnabledWithZoomedin
162
 }) => {
167
 }) => {
163
-  let script = getBaseScript({ style, zoomDisabled, scalesPageToFit, scrollEnabledWithZoomedin });
168
+  let script = getBaseScript({ style, viewportContent, scalesPageToFit, scrollEnabledWithZoomedin });
164
   script = files && files.length > 0 ? appendFilesToHead({ files, script }) : script;
169
   script = files && files.length > 0 ? appendFilesToHead({ files, script }) : script;
165
   script = appendStylesToHead({ style: customStyle, script });
170
   script = appendStylesToHead({ style: customStyle, script });
166
   customScript && (script = customScript + script);
171
   customScript && (script = customScript + script);

+ 1
- 1
demo/yarn.lock View File

4969
   integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
4969
   integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
4970
 
4970
 
4971
 react-native-autoheight-webview@../:
4971
 react-native-autoheight-webview@../:
4972
-  version "1.3.5"
4972
+  version "1.3.6"
4973
   dependencies:
4973
   dependencies:
4974
     prop-types "^15.7.2"
4974
     prop-types "^15.7.2"
4975
 
4975