Browse Source

Forced planex items background to be opaque

keplyx 2 years ago
parent
commit
06eba3fb9c
1 changed files with 35 additions and 5 deletions
  1. 35
    5
      screens/PlanexScreen.js

+ 35
- 5
screens/PlanexScreen.js View File

@@ -15,6 +15,27 @@ const PLANEX_URL = 'http://planex.insa-toulouse.fr/';
15 15
 const CUSTOM_CSS_GENERAL = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/planex/customMobile2.css';
16 16
 const CUSTOM_CSS_NIGHTMODE = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/planex/customDark2.css';
17 17
 
18
+// Remove transparency to planex items to prevent invisible items
19
+const REMOVE_ALPHA_FUNCTION_INJECTED =
20
+    'function removeAlpha() {' +
21
+    '   $(".fc-event-container .fc-event").each(function(index) {' +
22
+    '       let bg = $(this).css("background-color");' +
23
+    '       if (bg.match("^rgba")) {' +
24
+    '           let a = bg.slice(5).split(\',\');' +
25
+    '           let newBg = \'rgb(\' + a[0] + \',\' + parseInt(a[1]) + \',\' + parseInt(a[2]) + \')\';' +
26
+    '           $(this).css("background-color", newBg);' +
27
+    '       };' +
28
+    '   });' +
29
+    '}';
30
+
31
+// Watch for changes in the calendar and call the remove alpha function
32
+const OBSERVE_MUTATIONS_INJECTED =
33
+    'let observer = new MutationObserver(function(mutations) {' +
34
+    '   removeAlpha();' +
35
+    '});' +
36
+    'observer.observe(document.querySelector(".fc-body"), {attributes: false, childList: true, characterData: false, subtree:true});';
37
+
38
+
18 39
 /**
19 40
  * Class defining the app's planex screen.
20 41
  * This screen uses a webview to render the planex page
@@ -26,12 +47,21 @@ export default class PlanexScreen extends React.Component<Props> {
26 47
     constructor() {
27 48
         super();
28 49
         this.customInjectedJS =
29
-            'document.querySelector(\'head\').innerHTML += \'<meta name="viewport" content="width=device-width, initial-scale=1.0">\';' +
30
-            'document.querySelector(\'head\').innerHTML += \'<link rel="stylesheet" href="' + CUSTOM_CSS_GENERAL + '" type="text/css"/>\';' +
31
-            '$(".fc-toolbar .fc-center").append(\'<p id="rotateToLandscape">' + i18n.t("planexScreen.rotateToLandscape") + '</p>\');' +
32
-            '$(".fc-toolbar .fc-center").append(\'<p id="rotateToPortrait">' + i18n.t("planexScreen.rotateToPortrait") + '</p>\');true;';
50
+            '$(document).ready(function() {' +
51
+            REMOVE_ALPHA_FUNCTION_INJECTED +
52
+            OBSERVE_MUTATIONS_INJECTED +
53
+            '$("head").append(\'<meta name="viewport" content="width=device-width, initial-scale=1.0">\');' +
54
+            '$("head").append(\'<link rel="stylesheet" href="' + CUSTOM_CSS_GENERAL + '" type="text/css"/>\');';
55
+
33 56
         if (ThemeManager.getNightMode())
34
-            this.customInjectedJS += 'document.querySelector(\'head\').innerHTML += \'<link rel="stylesheet" href="' + CUSTOM_CSS_NIGHTMODE + '" type="text/css"/>\';';
57
+            this.customInjectedJS += '$("head").append(\'<link rel="stylesheet" href="' + CUSTOM_CSS_NIGHTMODE + '" type="text/css"/>\');';
58
+
59
+        this.customInjectedJS +=
60
+            '$(".fc-toolbar .fc-center").append(\'<p id="rotateToLandscape">' + i18n.t("planexScreen.rotateToLandscape") + '</p>\');' +
61
+            '$(".fc-toolbar .fc-center").append(\'<p id="rotateToPortrait">' + i18n.t("planexScreen.rotateToPortrait") + '</p>\');' +
62
+            'removeAlpha();' +
63
+            '});true;'; // Prevent crash on ios
64
+
35 65
     }
36 66
 
37 67
     render() {

Loading…
Cancel
Save