Inject custom css in webview

This commit is contained in:
keplyx 2019-08-08 22:07:49 +02:00
parent 57208ef554
commit 890f1832a3
2 changed files with 28 additions and 0 deletions

View file

@ -16,6 +16,8 @@ type Props = {
const PLANEX_URL = 'http://planex.insa-toulouse.fr/'; 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. * Class defining the app's planex screen.
* This screen uses a webview to render the planex page * 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> { export default class PlanningScreen extends React.Component<Props> {
webview: WebView; 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() { getRefreshButton() {
return ( return (
@ -52,6 +65,8 @@ export default class PlanningScreen extends React.Component<Props> {
height: '100%', height: '100%',
}} }}
startInLoadingState={true} startInLoadingState={true}
injectedJavaScript={this.customInjectedJS}
javaScriptEnabled={true}
renderLoading={() => renderLoading={() =>
<View style={{ <View style={{
backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor, backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,

View file

@ -24,6 +24,16 @@ const RU_URL = 'http://m.insa-toulouse.fr/ru.html';
export default class SelfMenuScreen extends React.Component<Props> { export default class SelfMenuScreen extends React.Component<Props> {
webview: WebView; 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() { getRefreshButton() {
return ( return (
@ -43,6 +53,7 @@ export default class SelfMenuScreen extends React.Component<Props> {
render() { render() {
const nav = this.props.navigation; const nav = this.props.navigation;
console.log(this.customInjectedJS);
return ( return (
<Container> <Container>
<CustomHeader navigation={nav} title={i18n.t('screens.menuSelf')} hasBackButton={true} <CustomHeader navigation={nav} title={i18n.t('screens.menuSelf')} hasBackButton={true}
@ -55,6 +66,8 @@ export default class SelfMenuScreen extends React.Component<Props> {
height: '100%', height: '100%',
}} }}
startInLoadingState={true} startInLoadingState={true}
injectedJavaScript={this.customInjectedJS}
javaScriptEnabled={true}
renderLoading={() => renderLoading={() =>
<View style={{ <View style={{
backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor, backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,