From 890f1832a352192608441a3f848cc7e5a1946a81 Mon Sep 17 00:00:00 2001
From: keplyx <keplyx@gmail.com>
Date: Thu, 8 Aug 2019 22:07:49 +0200
Subject: [PATCH] Inject custom css in webview

---
 screens/PlanexScreen.js   | 15 +++++++++++++++
 screens/SelfMenuScreen.js | 13 +++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/screens/PlanexScreen.js b/screens/PlanexScreen.js
index f34db8e..29eb6d9 100644
--- a/screens/PlanexScreen.js
+++ b/screens/PlanexScreen.js
@@ -16,6 +16,8 @@ type Props = {
 
 const PLANEX_URL = 'http://planex.insa-toulouse.fr/';
 
+const CUSTOM_CSS_LINK = 'https://srv-falcon.etud.insa-toulouse.fr/~vergnet/appli-amicale/planex/generalCustom.css';
+
 /**
  * Class defining the app's planex screen.
  * This screen uses a webview to render the planex page
@@ -23,6 +25,17 @@ const PLANEX_URL = 'http://planex.insa-toulouse.fr/';
 export default class PlanningScreen extends React.Component<Props> {
 
     webview: WebView;
+    customInjectedJS: string;
+
+    constructor() {
+        super();
+        this.customInjectedJS =
+            'document.querySelector(\'head\').innerHTML += \'<meta name="viewport" content="width=device-width, initial-scale=1.0">\';' +
+            'document.querySelector(\'head\').innerHTML += \'<link rel="stylesheet" href="https://srv-falcon.etud.insa-toulouse.fr/~vergnet/appli-amicale/planex/customMobile.css" type="text/css"/>\';';
+        if (ThemeManager.getNightMode())
+            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"/>\';';
+    }
+
 
     getRefreshButton() {
         return (
@@ -52,6 +65,8 @@ export default class PlanningScreen extends React.Component<Props> {
                         height: '100%',
                     }}
                     startInLoadingState={true}
+                    injectedJavaScript={this.customInjectedJS}
+                    javaScriptEnabled={true}
                     renderLoading={() =>
                         <View style={{
                             backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
diff --git a/screens/SelfMenuScreen.js b/screens/SelfMenuScreen.js
index cfe32d9..c96ba6c 100644
--- a/screens/SelfMenuScreen.js
+++ b/screens/SelfMenuScreen.js
@@ -24,6 +24,16 @@ const RU_URL = 'http://m.insa-toulouse.fr/ru.html';
 export default class SelfMenuScreen extends React.Component<Props> {
 
     webview: WebView;
+    customInjectedJS: string;
+
+    constructor() {
+        super();
+        this.customInjectedJS =
+            'document.querySelector(\'head\').innerHTML += \'<meta name="viewport" content="width=device-width, initial-scale=1.0">\';' +
+            'document.querySelector(\'head\').innerHTML += \'<link rel="stylesheet" href="https://srv-falcon.etud.insa-toulouse.fr/~vergnet/appli-amicale/RU/customGeneral.css" type="text/css"/>\';';
+        if (!ThemeManager.getNightMode())
+            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"/>\';';
+    }
 
     getRefreshButton() {
         return (
@@ -43,6 +53,7 @@ export default class SelfMenuScreen extends React.Component<Props> {
 
     render() {
         const nav = this.props.navigation;
+        console.log(this.customInjectedJS);
         return (
             <Container>
                 <CustomHeader navigation={nav} title={i18n.t('screens.menuSelf')} hasBackButton={true}
@@ -55,6 +66,8 @@ export default class SelfMenuScreen extends React.Component<Props> {
                         height: '100%',
                     }}
                     startInLoadingState={true}
+                    injectedJavaScript={this.customInjectedJS}
+                    javaScriptEnabled={true}
                     renderLoading={() =>
                         <View style={{
                             backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,