Browse Source

Inject custom css in webview

keplyx 4 years ago
parent
commit
890f1832a3
2 changed files with 28 additions and 0 deletions
  1. 15
    0
      screens/PlanexScreen.js
  2. 13
    0
      screens/SelfMenuScreen.js

+ 15
- 0
screens/PlanexScreen.js View File

@@ -16,6 +16,8 @@ type Props = {
16 16
 
17 17
 const PLANEX_URL = 'http://planex.insa-toulouse.fr/';
18 18
 
19
+const CUSTOM_CSS_LINK = 'https://srv-falcon.etud.insa-toulouse.fr/~vergnet/appli-amicale/planex/generalCustom.css';
20
+
19 21
 /**
20 22
  * Class defining the app's planex screen.
21 23
  * This screen uses a webview to render the planex page
@@ -23,6 +25,17 @@ const PLANEX_URL = 'http://planex.insa-toulouse.fr/';
23 25
 export default class PlanningScreen extends React.Component<Props> {
24 26
 
25 27
     webview: WebView;
28
+    customInjectedJS: string;
29
+
30
+    constructor() {
31
+        super();
32
+        this.customInjectedJS =
33
+            'document.querySelector(\'head\').innerHTML += \'<meta name="viewport" content="width=device-width, initial-scale=1.0">\';' +
34
+            'document.querySelector(\'head\').innerHTML += \'<link rel="stylesheet" href="https://srv-falcon.etud.insa-toulouse.fr/~vergnet/appli-amicale/planex/customMobile.css" type="text/css"/>\';';
35
+        if (ThemeManager.getNightMode())
36
+            this.customInjectedJS += 'document.querySelector(\'head\').innerHTML += \'<link rel="stylesheet" href="https://srv-falcon.etud.insa-toulouse.fr/~vergnet/appli-amicale/planex/customDark.css" type="text/css"/>\';';
37
+    }
38
+
26 39
 
27 40
     getRefreshButton() {
28 41
         return (
@@ -52,6 +65,8 @@ export default class PlanningScreen extends React.Component<Props> {
52 65
                         height: '100%',
53 66
                     }}
54 67
                     startInLoadingState={true}
68
+                    injectedJavaScript={this.customInjectedJS}
69
+                    javaScriptEnabled={true}
55 70
                     renderLoading={() =>
56 71
                         <View style={{
57 72
                             backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,

+ 13
- 0
screens/SelfMenuScreen.js View File

@@ -24,6 +24,16 @@ const RU_URL = 'http://m.insa-toulouse.fr/ru.html';
24 24
 export default class SelfMenuScreen extends React.Component<Props> {
25 25
 
26 26
     webview: WebView;
27
+    customInjectedJS: string;
28
+
29
+    constructor() {
30
+        super();
31
+        this.customInjectedJS =
32
+            'document.querySelector(\'head\').innerHTML += \'<meta name="viewport" content="width=device-width, initial-scale=1.0">\';' +
33
+            'document.querySelector(\'head\').innerHTML += \'<link rel="stylesheet" href="https://srv-falcon.etud.insa-toulouse.fr/~vergnet/appli-amicale/RU/customGeneral.css" type="text/css"/>\';';
34
+        if (!ThemeManager.getNightMode())
35
+            this.customInjectedJS += 'document.querySelector(\'head\').innerHTML += \'<link rel="stylesheet" href="https://srv-falcon.etud.insa-toulouse.fr/~vergnet/appli-amicale/RU/customLight.css" type="text/css"/>\';';
36
+    }
27 37
 
28 38
     getRefreshButton() {
29 39
         return (
@@ -43,6 +53,7 @@ export default class SelfMenuScreen extends React.Component<Props> {
43 53
 
44 54
     render() {
45 55
         const nav = this.props.navigation;
56
+        console.log(this.customInjectedJS);
46 57
         return (
47 58
             <Container>
48 59
                 <CustomHeader navigation={nav} title={i18n.t('screens.menuSelf')} hasBackButton={true}
@@ -55,6 +66,8 @@ export default class SelfMenuScreen extends React.Component<Props> {
55 66
                         height: '100%',
56 67
                     }}
57 68
                     startInLoadingState={true}
69
+                    injectedJavaScript={this.customInjectedJS}
70
+                    javaScriptEnabled={true}
58 71
                     renderLoading={() =>
59 72
                         <View style={{
60 73
                             backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,

Loading…
Cancel
Save