Inject custom css in webview
This commit is contained in:
parent
57208ef554
commit
890f1832a3
2 changed files with 28 additions and 0 deletions
|
@ -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,
|
||||||
|
|
|
@ -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,
|
||||||
|
|
Loading…
Reference in a new issue