saint-lo/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Improved injected javascript + css and use native buttons to communicate with webview

Browse source
This commit is contained in:
Arnaud Vergnet 2020-04-15 01:24:06 +02:00
parent d0847dc0fd
commit c7527d8c6b
2 changed files with 142 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
src/components/Custom/AnimatedBottomBar.js
View file

@ -1,64 +1,117 @@
// @flow
import * as React from 'react';
import {StyleSheet} from "react-native";
import {IconButton, withTheme} from "react-native-paper";
import {AnimatedValue} from "react-native-reanimated";
import {StyleSheet, View} from "react-native";
import {IconButton, Surface, withTheme} from "react-native-paper";
import AutoHideComponent from "./AutoHideComponent";
type Props = {
theme: Object,
onPress: Function,
}
type State = {
fabPosition: AnimatedValue
currentMode: string,
}
const DISPLAY_MODES = {
DAY: "agendaDay",
WEEK: "agendaWeek",
MONTH: "month",
}
class AnimatedBottomBar extends React.Component<Props, State> {
ref: Object;
displayModeIcons: Object;
state = {
currentMode: DISPLAY_MODES.WEEK,
}
constructor() {
super();
this.ref = React.createRef();
this.displayModeIcons = {};
this.displayModeIcons[DISPLAY_MODES.DAY] = "calendar-text";
this.displayModeIcons[DISPLAY_MODES.WEEK] = "calendar-week";
this.displayModeIcons[DISPLAY_MODES.MONTH] = "calendar-range";
}
onScroll = (event: Object) => {
this.ref.current.onScroll(event);
};
changeDisplayMode = () => {
let newMode;
switch (this.state.currentMode) {
case DISPLAY_MODES.DAY:
newMode = DISPLAY_MODES.WEEK;
break;
case DISPLAY_MODES.WEEK:
newMode = DISPLAY_MODES.MONTH;
break;
case DISPLAY_MODES.MONTH:
newMode = DISPLAY_MODES.DAY;
break;
}
this.setState({currentMode: newMode});
this.props.onPress("changeView", newMode);
};
render() {
const buttonColor = this.props.theme.colors.primary;
return (
<AutoHideComponent
ref={this.ref}
style={{
...styles.bottom,
backgroundColor: this.props.theme.colors.surface,
}}>
<IconButton
icon="chevron-left"
size={40}
onPress={() => console.log('previous')}/>
<IconButton
icon="chevron-right"
size={40}
onPress={() => console.log('next')}/>
style={styles.container}>
<Surface style={styles.surface}>
<View style={{flexDirection: 'row'}}>
<IconButton
icon={this.displayModeIcons[this.state.currentMode]}
color={buttonColor}
onPress={this.changeDisplayMode}/>
<IconButton
icon="clock-in"
color={buttonColor}
style={{marginLeft: 5}}
onPress={() => this.props.onPress('today', undefined)}/>
</View>
<View style={{flexDirection: 'row'}}>
<IconButton
icon="chevron-left"
color={buttonColor}
onPress={() => this.props.onPress('prev', undefined)}/>
<IconButton
icon="chevron-right"
color={buttonColor}
style={{marginLeft: 5}}
onPress={() => this.props.onPress('next', undefined)}/>
</View>
</Surface>
</AutoHideComponent>
);
}
}
const styles = StyleSheet.create({
bottom: {
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center',
container: {
position: 'absolute',
left: 0,
bottom: 0,
width: '100%',
height: 100,
left: '5%',
bottom: 10,
width: '90%',
},
surface: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
borderRadius: 50,
elevation: 2,
padding: 10,
paddingHorizontal: 20,
}
});
export default withTheme(AnimatedBottomBar);

111
src/screens/Websites/PlanexScreen.js
View file

@ -29,9 +29,6 @@ type State = {
const PLANEX_URL = 'http://planex.insa-toulouse.fr/';
const CUSTOM_CSS_GENERAL = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/planex/customMobile3.css';
const CUSTOM_CSS_NIGHTMODE = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/planex/customDark2.css';
// // JS + JQuery functions used to remove alpha from events. Copy paste in browser console for quick testing
// // Remove alpha from given Jquery node
// function removeAlpha(node) {
@ -90,25 +87,34 @@ const OBSERVE_MUTATIONS_INJECTED =
' removeAlpha($(this));\n' +
'});';
const FULL_CALENDAR_SETTINGS =
`var calendar = $('#calendar').fullCalendar('getCalendar');
calendar.option({
eventClick: function (data, event, view) {
var message = {
title: data.title,
color: data.color,
start: data.start._d,
end: data.end._d,
};
window.ReactNativeWebView.postMessage(JSON.stringify(message));
}
});`;
const FULL_CALENDAR_SETTINGS = `
var calendar = $('#calendar').fullCalendar('getCalendar');
calendar.option({
eventClick: function (data, event, view) {
var message = {
title: data.title,
color: data.color,
start: data.start._d,
end: data.end._d,
};
window.ReactNativeWebView.postMessage(JSON.stringify(message));
}
});`;
const LISTEN_TO_MESSAGES =
`document.addEventListener("message", function(event) {
console.log("Received post message", event);//Get Event from React Native
alert(event.data);
}, false);`
const LISTEN_TO_MESSAGES = `
document.addEventListener("message", function(event) {
//alert(event.data);
var data = JSON.parse(event.data);
$('#calendar').fullCalendar(data.action, data.data);
}, false);`
const CUSTOM_CSS = "body>.container{padding-top:20px; padding-bottom: 50px}header{display:none}.fc-toolbar .fc-center{width:100%}.fc-toolbar .fc-center>*{float:none;width:100%;margin:0}#entite{margin-bottom:5px!important}#entite,#groupe{width:calc(100% - 20px);margin:0 10px}#calendar .fc-left,#calendar .fc-right{display:none}#groupe_visibility{width:100%}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-time{font-size:.5rem}#calendar .fc-month-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-month-view .fc-content-skeleton .fc-time{font-size:.7rem}.fc-axis{font-size:.8rem;width:15px!important}.fc-day-header{font-size:.8rem}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}";
const CUSTOM_CSS_DARK = "body{background-color:#121212}.fc-unthemed .fc-content,.fc-unthemed .fc-divider,.fc-unthemed .fc-list-heading td,.fc-unthemed .fc-list-view,.fc-unthemed .fc-popover,.fc-unthemed .fc-row,.fc-unthemed tbody,.fc-unthemed td,.fc-unthemed th,.fc-unthemed thead{border-color:#222}.fc-toolbar .fc-center>*,h2,table{color:#fff}.fc-event-container{color:#121212}.fc-event-container .fc-bg{opacity:0.2;background-color:#000}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}";
const INJECT_STYLE = `
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=0.9">');
$('head').append('<style>` + CUSTOM_CSS + `</style>');
`;
/**
* Class defining the app's Planex screen.
@ -120,8 +126,7 @@ class PlanexScreen extends React.Component<Props, State> {
barRef: Object;
customInjectedJS: string;
onHideBanner: Function;
onGoToSettings: Function;
state = {
bannerVisible:
AsyncStorageManager.getInstance().preferences.planexShowBanner.current === '1' &&
@ -138,48 +143,54 @@ class PlanexScreen extends React.Component<Props, State> {
super();
this.webScreenRef = React.createRef();
this.barRef = React.createRef();
this.generateInjectedCSS();
}
generateInjectedCSS() {
this.customInjectedJS =
"$(document).ready(function() {" +
OBSERVE_MUTATIONS_INJECTED +
FULL_CALENDAR_SETTINGS +
LISTEN_TO_MESSAGES +
"$('head').append('<meta name=\"viewport\" content=\"width=device-width, initial-scale=0.9\">');" +
"$('head').append('<link rel=\"stylesheet\" href=\"" + CUSTOM_CSS_GENERAL + '" type="text/css"/>\');';
INJECT_STYLE;
if (ThemeManager.getNightMode())
this.customInjectedJS += '$("head").append(\'<link rel="stylesheet" href="' + CUSTOM_CSS_NIGHTMODE + '" type="text/css"/>\');';
this.customInjectedJS += "$('head').append('<style>" + CUSTOM_CSS_DARK + "</style>');";
this.customInjectedJS +=
'removeAlpha();' +
'});true;'; // Prevents crash on ios
this.onHideBanner = this.onHideBanner.bind(this);
this.onGoToSettings = this.onGoToSettings.bind(this);
}
componentWillUpdate(prevProps: Props) {
if (prevProps.theme.dark !== this.props.theme.dark)
this.generateInjectedCSS();
}
/**
* Callback used when closing the banner.
* This hides the banner and saves to preferences to prevent it from reopening
*/
onHideBanner() {
onHideBanner = () => {
this.setState({bannerVisible: false});
AsyncStorageManager.getInstance().savePref(
AsyncStorageManager.getInstance().preferences.planexShowBanner.key,
'0'
);
}
};
/**
* Callback used when the used click on the navigate to settings button.
* This will hide the banner and open the SettingsScreen
*
*/
onGoToSettings() {
onGoToSettings = () => {
this.onHideBanner();
this.props.navigation.navigate('settings');
}
};
sendMessage = (msg: string) => {
this.webScreenRef.current.postMessage(msg);
sendMessage = (action: string, data: any) => {
this.webScreenRef.current.postMessage(JSON.stringify({action: action, data: data}));
}
onMessage = (event: Object) => {
@ -209,13 +220,23 @@ class PlanexScreen extends React.Component<Props, State> {
this.barRef.current.onScroll(event);
};
getWebView() {
return (
<WebViewScreen
ref={this.webScreenRef}
navigation={this.props.navigation}
url={PLANEX_URL}
customJS={this.customInjectedJS}
onMessage={this.onMessage}
onScroll={this.onScroll}
/>
);
}
render() {
const nav = this.props.navigation;
const {containerPaddingTop} = this.props.collapsibleStack;
return (
<View style={{
height: '100%'
}}>
<View style={{height: '100%'}}>
<Banner
style={{
marginTop: this.state.bannerVisible ? containerPaddingTop : 0,
@ -244,15 +265,13 @@ class PlanexScreen extends React.Component<Props, State> {
onDismiss={this.hideDialog}
title={this.state.dialogTitle}
message={this.state.dialogMessage}/>
<WebViewScreen
ref={this.webScreenRef}
navigation={nav}
url={PLANEX_URL}
customJS={this.customInjectedJS}
onMessage={this.onMessage}
onScroll={this.onScroll}
{this.props.theme.dark // Force component theme update
? this.getWebView()
: <View style={{height: '100%'}}>{this.getWebView()}</View>}
<AnimatedBottomBar
ref={this.barRef}
onPress={this.sendMessage}
/>
<AnimatedBottomBar ref={this.barRef}/>
</View>
);
}