|
@@ -1,109 +1,116 @@
|
1
|
1
|
// @flow
|
2
|
2
|
|
3
|
|
-
|
4
|
3
|
import * as React from 'react';
|
5
|
|
-import {StackNavigationProp} from "@react-navigation/stack";
|
6
|
|
-import WebViewScreen from "../../components/Screens/WebViewScreen";
|
7
|
|
-import AvailableWebsites from "../../constants/AvailableWebsites";
|
8
|
|
-import BasicLoadingScreen from "../../components/Screens/BasicLoadingScreen";
|
9
|
|
-
|
10
|
|
-type Props = {
|
11
|
|
- navigation: StackNavigationProp,
|
12
|
|
- route: { params: { host: string, path: string | null, title: string } },
|
13
|
|
-}
|
14
|
|
-
|
15
|
|
-class WebsiteScreen extends React.Component<Props> {
|
16
|
|
-
|
17
|
|
- fullUrl: string;
|
18
|
|
- injectedJS: { [key: string]: string };
|
19
|
|
- customPaddingFunctions: {[key: string]: (padding: string) => string}
|
20
|
|
-
|
21
|
|
- host: string;
|
22
|
|
-
|
23
|
|
- constructor(props: Props) {
|
24
|
|
- super(props);
|
25
|
|
- this.props.navigation.addListener('focus', this.onScreenFocus);
|
26
|
|
- this.injectedJS = {};
|
27
|
|
- this.customPaddingFunctions = {};
|
28
|
|
- this.injectedJS[AvailableWebsites.websites.AVAILABLE_ROOMS] =
|
29
|
|
- 'document.querySelector(\'head\').innerHTML += \'<meta name="viewport" content="width=device-width, initial-scale=1.0">\';' +
|
30
|
|
- 'document.querySelector(\'head\').innerHTML += \'<style>body,body>.container2{padding-top:0;width:100%}b,body>.container2>h1,body>.container2>h3,br,header{display:none}.table-bordered td,.table-bordered th{border:none;border-right:1px solid #dee2e6;border-bottom:1px solid #dee2e6}.table{padding:0;margin:0;width:200%;max-width:200%;display:block}tbody{display:block;width:100%}thead{display:block;width:100%}.table tbody tr,tbody tr[bgcolor],thead tr{width:100%;display:inline-flex}.table tbody td,.table thead td[colspan]{padding:0;flex:1;height:50px;margin:0}.table tbody td[bgcolor=white],.table thead td,.table>tbody>tr>td:nth-child(1){flex:0 0 150px;height:50px}</style>\'; true;';
|
31
|
|
-
|
32
|
|
- this.injectedJS[AvailableWebsites.websites.BIB] =
|
33
|
|
- 'document.querySelector(\'head\').innerHTML += \'<meta name="viewport" content="width=device-width, initial-scale=1.0">\';' +
|
34
|
|
- 'document.querySelector(\'head\').innerHTML += \'<style>.hero-unit,.navbar,footer{display:none}.hero-unit-form,.hero-unit2,.hero-unit3{background-color:#fff;box-shadow:none;padding:0;margin:0}.hero-unit-form h4{font-size:2rem;line-height:2rem}.btn{font-size:1.5rem;line-height:1.5rem;padding:20px}.btn-danger{background-image:none;background-color:#be1522}.table{font-size:.8rem}.table td{padding:0;height:18.2333px;border:none;border-bottom:1px solid #c1c1c1}.table td[style="max-width:55px;"]{max-width:110px!important}.table-bordered{min-width:50px}th{height:50px}.table-bordered{border-collapse:collapse}</style>\';' +
|
35
|
|
- 'if ($(".hero-unit-form").length > 0 && $("#customBackButton").length === 0)' +
|
36
|
|
- '$(".hero-unit-form").append("' +
|
37
|
|
- '<div style=\'width: 100%; display: flex\'>' +
|
38
|
|
- '<a style=\'margin: auto\' href=\'' + AvailableWebsites.websites.BIB + '\'>' +
|
39
|
|
- '<button id=\'customBackButton\' class=\'btn btn-primary\'>Retour</button>' +
|
40
|
|
- '</a>' +
|
41
|
|
- '</div>");true;';
|
42
|
|
-
|
43
|
|
- this.customPaddingFunctions[AvailableWebsites.websites.BLUEMIND] = (padding: string) => {
|
44
|
|
- return (
|
45
|
|
- "$('head').append('<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">');" +
|
46
|
|
- "$('.minwidth').css('top', " + padding + ");" +
|
47
|
|
- "$('#mailview-bottom').css('min-height', 500);"
|
48
|
|
- );
|
49
|
|
- };
|
50
|
|
- this.customPaddingFunctions[AvailableWebsites.websites.WIKETUD] = (padding: string) => {
|
51
|
|
- return (
|
52
|
|
- "$('#p-logo-text').css('top', 10 + " + padding + ");" +
|
53
|
|
- "$('#site-navigation h2').css('top', 10 + " + padding + ");" +
|
54
|
|
- "$('#site-tools h2').css('top', 10 + " + padding + ");" +
|
55
|
|
- "$('#user-tools h2').css('top', 10 + " + padding + ");"
|
56
|
|
- );
|
57
|
|
- }
|
58
|
|
- }
|
59
|
|
-
|
60
|
|
- onScreenFocus = () => {
|
61
|
|
- this.handleNavigationParams();
|
|
4
|
+import {StackNavigationProp} from '@react-navigation/stack';
|
|
5
|
+import WebViewScreen from '../../components/Screens/WebViewScreen';
|
|
6
|
+import AvailableWebsites from '../../constants/AvailableWebsites';
|
|
7
|
+import BasicLoadingScreen from '../../components/Screens/BasicLoadingScreen';
|
|
8
|
+
|
|
9
|
+type PropsType = {
|
|
10
|
+ navigation: StackNavigationProp,
|
|
11
|
+ route: {params: {host: string, path: string | null, title: string}},
|
|
12
|
+};
|
|
13
|
+
|
|
14
|
+const ENABLE_MOBILE_STRING = `<meta name="viewport" content="width=device-width, initial-scale=1.0">`;
|
|
15
|
+
|
|
16
|
+const AVAILABLE_ROOMS_STYLE = `<style>body,body>.container2{padding-top:0;width:100%}b,body>.container2>h1,body>.container2>h3,br,header{display:none}.table-bordered td,.table-bordered th{border:none;border-right:1px solid #dee2e6;border-bottom:1px solid #dee2e6}.table{padding:0;margin:0;width:200%;max-width:200%;display:block}tbody{display:block;width:100%}thead{display:block;width:100%}.table tbody tr,tbody tr[bgcolor],thead tr{width:100%;display:inline-flex}.table tbody td,.table thead td[colspan]{padding:0;flex:1;height:50px;margin:0}.table tbody td[bgcolor=white],.table thead td,.table>tbody>tr>td:nth-child(1){flex:0 0 150px;height:50px}</style>`;
|
|
17
|
+const BIB_STYLE = `<style>.hero-unit,.navbar,footer{display:none}.hero-unit-form,.hero-unit2,.hero-unit3{background-color:#fff;box-shadow:none;padding:0;margin:0}.hero-unit-form h4{font-size:2rem;line-height:2rem}.btn{font-size:1.5rem;line-height:1.5rem;padding:20px}.btn-danger{background-image:none;background-color:#be1522}.table{font-size:.8rem}.table td{padding:0;height:18.2333px;border:none;border-bottom:1px solid #c1c1c1}.table td[style="max-width:55px;"]{max-width:110px!important}.table-bordered{min-width:50px}th{height:50px}.table-bordered{border-collapse:collapse}</style>`;
|
|
18
|
+
|
|
19
|
+const BIB_BACK_BUTTON =
|
|
20
|
+ `<div style='width: 100%; display: flex'>` +
|
|
21
|
+ `<a style='margin: auto' href='${AvailableWebsites.websites.BIB}'>` +
|
|
22
|
+ `<button id='customBackButton' class='btn btn-primary'>Retour</button>` +
|
|
23
|
+ `</a>` +
|
|
24
|
+ `</div>`;
|
|
25
|
+
|
|
26
|
+class WebsiteScreen extends React.Component<PropsType> {
|
|
27
|
+ fullUrl: string;
|
|
28
|
+
|
|
29
|
+ injectedJS: {[key: string]: string};
|
|
30
|
+
|
|
31
|
+ customPaddingFunctions: {[key: string]: (padding: string) => string};
|
|
32
|
+
|
|
33
|
+ host: string;
|
|
34
|
+
|
|
35
|
+ constructor(props: PropsType) {
|
|
36
|
+ super(props);
|
|
37
|
+ props.navigation.addListener('focus', this.onScreenFocus);
|
|
38
|
+ this.injectedJS = {};
|
|
39
|
+ this.customPaddingFunctions = {};
|
|
40
|
+ this.injectedJS[AvailableWebsites.websites.AVAILABLE_ROOMS] =
|
|
41
|
+ `document.querySelector('head').innerHTML += '${ENABLE_MOBILE_STRING}';` +
|
|
42
|
+ `document.querySelector('head').innerHTML += '${AVAILABLE_ROOMS_STYLE}'; true;`;
|
|
43
|
+
|
|
44
|
+ this.injectedJS[AvailableWebsites.websites.BIB] =
|
|
45
|
+ `document.querySelector('head').innerHTML += '${ENABLE_MOBILE_STRING}';` +
|
|
46
|
+ `document.querySelector('head').innerHTML += '${BIB_STYLE}';` +
|
|
47
|
+ `if ($(".hero-unit-form").length > 0 && $("#customBackButton").length === 0)` +
|
|
48
|
+ `$(".hero-unit-form").append("${BIB_BACK_BUTTON}");true;`;
|
|
49
|
+
|
|
50
|
+ this.customPaddingFunctions[AvailableWebsites.websites.BLUEMIND] = (
|
|
51
|
+ padding: string,
|
|
52
|
+ ): string => {
|
|
53
|
+ return (
|
|
54
|
+ `$('head').append('${ENABLE_MOBILE_STRING}');` +
|
|
55
|
+ `$('.minwidth').css('top', ${padding}` +
|
|
56
|
+ `$('#mailview-bottom').css('min-height', 500);`
|
|
57
|
+ );
|
62
|
58
|
};
|
63
|
|
-
|
64
|
|
- /**
|
65
|
|
- *
|
66
|
|
- */
|
67
|
|
- handleNavigationParams() {
|
68
|
|
- if (this.props.route.params != null) {
|
69
|
|
- this.host = this.props.route.params.host;
|
70
|
|
- let path = this.props.route.params.path;
|
71
|
|
- const title = this.props.route.params.title;
|
72
|
|
- if (this.host != null && path != null) {
|
73
|
|
- path = path.replace(this.host, "");
|
74
|
|
- this.fullUrl = this.host + path;
|
75
|
|
- }else
|
76
|
|
- this.fullUrl = this.host;
|
77
|
|
-
|
78
|
|
- if (title != null)
|
79
|
|
- this.props.navigation.setOptions({title: title});
|
80
|
|
- }
|
|
59
|
+ this.customPaddingFunctions[AvailableWebsites.websites.WIKETUD] = (
|
|
60
|
+ padding: string,
|
|
61
|
+ ): string => {
|
|
62
|
+ return (
|
|
63
|
+ `$('#p-logo-text').css('top', 10 + ${padding});` +
|
|
64
|
+ `$('#site-navigation h2').css('top', 10 + ${padding});` +
|
|
65
|
+ `$('#site-tools h2').css('top', 10 + ${padding});` +
|
|
66
|
+ `$('#user-tools h2').css('top', 10 + ${padding});`
|
|
67
|
+ );
|
|
68
|
+ };
|
|
69
|
+ }
|
|
70
|
+
|
|
71
|
+ onScreenFocus = () => {
|
|
72
|
+ this.handleNavigationParams();
|
|
73
|
+ };
|
|
74
|
+
|
|
75
|
+ /**
|
|
76
|
+ *
|
|
77
|
+ */
|
|
78
|
+ handleNavigationParams() {
|
|
79
|
+ const {route, navigation} = this.props;
|
|
80
|
+ if (route.params != null) {
|
|
81
|
+ this.host = route.params.host;
|
|
82
|
+ let {path} = route.params;
|
|
83
|
+ const {title} = route.params;
|
|
84
|
+ if (this.host != null && path != null) {
|
|
85
|
+ path = path.replace(this.host, '');
|
|
86
|
+ this.fullUrl = this.host + path;
|
|
87
|
+ } else this.fullUrl = this.host;
|
|
88
|
+
|
|
89
|
+ if (title != null) navigation.setOptions({title});
|
81
|
90
|
}
|
82
|
|
-
|
83
|
|
- render() {
|
84
|
|
- let injectedJavascript = "";
|
85
|
|
- let customPadding = null;
|
86
|
|
- if (this.host != null && this.injectedJS[this.host] != null)
|
87
|
|
- injectedJavascript = this.injectedJS[this.host];
|
88
|
|
- if (this.host != null && this.customPaddingFunctions[this.host] != null)
|
89
|
|
- customPadding = this.customPaddingFunctions[this.host];
|
90
|
|
-
|
91
|
|
- if (this.fullUrl != null) {
|
92
|
|
- return (
|
93
|
|
- <WebViewScreen
|
94
|
|
- {...this.props}
|
95
|
|
- url={this.fullUrl}
|
96
|
|
- customJS={injectedJavascript}
|
97
|
|
- customPaddingFunction={customPadding}
|
98
|
|
- />
|
99
|
|
- );
|
100
|
|
- } else {
|
101
|
|
- return (
|
102
|
|
- <BasicLoadingScreen/>
|
103
|
|
- );
|
104
|
|
- }
|
105
|
|
-
|
|
91
|
+ }
|
|
92
|
+
|
|
93
|
+ render(): React.Node {
|
|
94
|
+ const {navigation} = this.props;
|
|
95
|
+ let injectedJavascript = '';
|
|
96
|
+ let customPadding = null;
|
|
97
|
+ if (this.host != null && this.injectedJS[this.host] != null)
|
|
98
|
+ injectedJavascript = this.injectedJS[this.host];
|
|
99
|
+ if (this.host != null && this.customPaddingFunctions[this.host] != null)
|
|
100
|
+ customPadding = this.customPaddingFunctions[this.host];
|
|
101
|
+
|
|
102
|
+ if (this.fullUrl != null) {
|
|
103
|
+ return (
|
|
104
|
+ <WebViewScreen
|
|
105
|
+ navigation={navigation}
|
|
106
|
+ url={this.fullUrl}
|
|
107
|
+ customJS={injectedJavascript}
|
|
108
|
+ customPaddingFunction={customPadding}
|
|
109
|
+ />
|
|
110
|
+ );
|
106
|
111
|
}
|
|
112
|
+ return <BasicLoadingScreen />;
|
|
113
|
+ }
|
107
|
114
|
}
|
108
|
115
|
|
109
|
116
|
export default WebsiteScreen;
|