vergnet/application-amicale
5
5
Fork 5
Code Issues Pull requests Releases Wiki Activity

Improved injected css

Browse source
This commit is contained in:
keplyx 2020-01-27 22:45:22 +01:00
parent 3916d2d2d1
commit a3f01a483f
1 changed files with 33 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
screens/PlanexScreen.js
View file

@ -15,27 +15,42 @@ const PLANEX_URL = 'http://planex.insa-toulouse.fr/';
const CUSTOM_CSS_GENERAL = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/planex/customMobile2.css';
const CUSTOM_CSS_NIGHTMODE = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/planex/customDark2.css';
// Remove transparency to planex items to prevent invisible items
const REMOVE_ALPHA_FUNCTION_INJECTED =
'function removeAlpha() {' +
' $(".fc-event-container .fc-event").each(function(index) {' +
' let bg = $(this).css("background-color");' +
' if (bg.match("^rgba")) {' +
' let a = bg.slice(5).split(\',\');' +
' let newBg = \'rgb(\' + a[0] + \',\' + parseInt(a[1]) + \',\' + parseInt(a[2]) + \')\';' +
' $(this).css("background-color", newBg);' +
' };' +
' });' +
'}';
// JS + JQuery functions used to remove alpha from events. Copy paste in browser console for quick testing
// function removeAlpha(node) {
// console.log(node);
// let bg = node.css("background-color");
// if (bg.match("^rgba")) {
// let a = bg.slice(5).split(',');
// let newBg ='rgb(' + a[0] + ',' + parseInt(a[1]) + ',' + parseInt(a[2]) + ')';
// node.css("background-color", newBg);
// }
// }
// let observer = new MutationObserver(function(mutations) {
// for (let i = 0; i < mutations.length; i++) {
// if (mutations[i]['addedNodes'].length > 0 && $(mutations[i]['addedNodes'][0]).hasClass("fc-event"))
// removeAlpha($(mutations[i]['addedNodes'][0]))
// }
// });
// observer.observe(document.querySelector(".fc-body"), {attributes: false, childList: true, characterData: false, subtree:true});
// Watch for changes in the calendar and call the remove alpha function
const OBSERVE_MUTATIONS_INJECTED =
'let observer = new MutationObserver(function(mutations) {' +
' removeAlpha();' +
'});' +
'observer.observe(document.querySelector(".fc-body"), {attributes: false, childList: true, characterData: false, subtree:true});';
'function removeAlpha(node) {\n' +
' console.log(node);\n' +
' let bg = node.css("background-color");\n' +
' if (bg.match("^rgba")) {\n' +
' let a = bg.slice(5).split(\',\');\n' +
' let newBg =\'rgb(\' + a[0] + \',\' + parseInt(a[1]) + \',\' + parseInt(a[2]) + \')\';\n' +
' node.css("background-color", newBg);\n' +
' }\n' +
'}' +
'let observer = new MutationObserver(function(mutations) {\n' +
' for (let i = 0; i < mutations.length; i++) {\n' +
' if (mutations[i][\'addedNodes\'].length > 0 && $(mutations[i][\'addedNodes\'][0]).hasClass("fc-event"))\n' +
' removeAlpha($(mutations[i][\'addedNodes\'][0]))\n' +
' }\n' +
'});\n' +
'observer.observe(document.querySelector(".fc-body"), {attributes: false, childList: true, characterData: false, subtree:true});\n';
/**
* Class defining the app's planex screen.
* This screen uses a webview to render the planex page
@ -48,7 +63,6 @@ export default class PlanexScreen extends React.Component<Props> {
super();
this.customInjectedJS =
'$(document).ready(function() {' +
REMOVE_ALPHA_FUNCTION_INJECTED +
OBSERVE_MUTATIONS_INJECTED +
'$("head").append(\'<meta name="viewport" content="width=device-width, initial-scale=1.0">\');' +
'$("head").append(\'<link rel="stylesheet" href="' + CUSTOM_CSS_GENERAL + '" type="text/css"/>\');';