Sync planex bottom bar animation with scroll
This commit is contained in:
Arnaud Vergnet
parent
46944a4487
commit
8506d3d81f
5 changed files with 331 additions and 369 deletions
|
|
@ -1,211 +0,0 @@
|
||||||
/*
|
|
||||||
* Copyright (c) 2019 - 2020 Arnaud Vergnet.
|
|
||||||
*
|
|
||||||
* This file is part of Campus INSAT.
|
|
||||||
*
|
|
||||||
* Campus INSAT is free software: you can redistribute it and/or modify
|
|
||||||
* it under the terms of the GNU General Public License as published by
|
|
||||||
* the Free Software Foundation, either version 3 of the License, or
|
|
||||||
* (at your option) any later version.
|
|
||||||
*
|
|
||||||
* Campus INSAT is distributed in the hope that it will be useful,
|
|
||||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
||||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
||||||
* GNU General Public License for more details.
|
|
||||||
*
|
|
||||||
* You should have received a copy of the GNU General Public License
|
|
||||||
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import * as React from 'react';
|
|
||||||
import {
|
|
||||||
NativeScrollEvent,
|
|
||||||
NativeSyntheticEvent,
|
|
||||||
StyleSheet,
|
|
||||||
View,
|
|
||||||
} from 'react-native';
|
|
||||||
import { FAB, IconButton, Surface, withTheme } from 'react-native-paper';
|
|
||||||
import * as Animatable from 'react-native-animatable';
|
|
||||||
import { StackNavigationProp } from '@react-navigation/stack';
|
|
||||||
import AutoHideHandler from '../../utils/AutoHideHandler';
|
|
||||||
import { TAB_BAR_HEIGHT } from '../Tabbar/CustomTabBar';
|
|
||||||
|
|
||||||
type PropsType = {
|
|
||||||
navigation: StackNavigationProp<any>;
|
|
||||||
theme: ReactNativePaper.Theme;
|
|
||||||
onPress: (action: string, data?: string) => void;
|
|
||||||
seekAttention: boolean;
|
|
||||||
};
|
|
||||||
|
|
||||||
type StateType = {
|
|
||||||
currentMode: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const DISPLAY_MODES = {
|
|
||||||
DAY: 'agendaDay',
|
|
||||||
WEEK: 'agendaWeek',
|
|
||||||
MONTH: 'month',
|
|
||||||
};
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
position: 'absolute',
|
|
||||||
left: '5%',
|
|
||||||
width: '90%',
|
|
||||||
},
|
|
||||||
surface: {
|
|
||||||
position: 'relative',
|
|
||||||
flexDirection: 'row',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
borderRadius: 50,
|
|
||||||
elevation: 2,
|
|
||||||
},
|
|
||||||
fabContainer: {
|
|
||||||
position: 'absolute',
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
alignItems: 'center',
|
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
},
|
|
||||||
fab: {
|
|
||||||
position: 'absolute',
|
|
||||||
alignSelf: 'center',
|
|
||||||
top: '-25%',
|
|
||||||
},
|
|
||||||
side: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
marginLeft: 5,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
class AnimatedBottomBar extends React.Component<PropsType, StateType> {
|
|
||||||
ref: { current: null | (Animatable.View & View) };
|
|
||||||
|
|
||||||
hideHandler: AutoHideHandler;
|
|
||||||
|
|
||||||
displayModeIcons: { [key: string]: string };
|
|
||||||
|
|
||||||
constructor(props: PropsType) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
currentMode: DISPLAY_MODES.WEEK,
|
|
||||||
};
|
|
||||||
this.ref = React.createRef();
|
|
||||||
this.hideHandler = new AutoHideHandler(false);
|
|
||||||
this.hideHandler.addListener(this.onHideChange);
|
|
||||||
|
|
||||||
this.displayModeIcons = {};
|
|
||||||
this.displayModeIcons[DISPLAY_MODES.DAY] = 'calendar-text';
|
|
||||||
this.displayModeIcons[DISPLAY_MODES.WEEK] = 'calendar-week';
|
|
||||||
this.displayModeIcons[DISPLAY_MODES.MONTH] = 'calendar-range';
|
|
||||||
}
|
|
||||||
|
|
||||||
shouldComponentUpdate(nextProps: PropsType, nextState: StateType): boolean {
|
|
||||||
const { props, state } = this;
|
|
||||||
return (
|
|
||||||
nextProps.seekAttention !== props.seekAttention ||
|
|
||||||
nextState.currentMode !== state.currentMode
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
onHideChange = (shouldHide: boolean) => {
|
|
||||||
const ref = this.ref;
|
|
||||||
if (ref && ref.current && ref.current.fadeOutDown && ref.current.fadeInUp) {
|
|
||||||
if (shouldHide) {
|
|
||||||
ref.current.fadeOutDown(500);
|
|
||||||
} else {
|
|
||||||
ref.current.fadeInUp(500);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
|
|
||||||
this.hideHandler.onScroll(event);
|
|
||||||
};
|
|
||||||
|
|
||||||
changeDisplayMode = () => {
|
|
||||||
const { props, state } = this;
|
|
||||||
let newMode;
|
|
||||||
switch (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;
|
|
||||||
default:
|
|
||||||
newMode = DISPLAY_MODES.WEEK;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
this.setState({ currentMode: newMode });
|
|
||||||
props.onPress('changeView', newMode);
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { props, state } = this;
|
|
||||||
const buttonColor = props.theme.colors.primary;
|
|
||||||
return (
|
|
||||||
<Animatable.View
|
|
||||||
ref={this.ref}
|
|
||||||
useNativeDriver
|
|
||||||
style={{
|
|
||||||
...styles.container,
|
|
||||||
bottom: 10 + TAB_BAR_HEIGHT,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Surface style={styles.surface}>
|
|
||||||
<View style={styles.fabContainer}>
|
|
||||||
<Animatable.View
|
|
||||||
style={styles.fab}
|
|
||||||
animation={props.seekAttention ? 'bounce' : undefined}
|
|
||||||
easing={'ease-out'}
|
|
||||||
iterationDelay={500}
|
|
||||||
iterationCount={'infinite'}
|
|
||||||
useNativeDriver={true}
|
|
||||||
>
|
|
||||||
<FAB
|
|
||||||
icon={'account-clock'}
|
|
||||||
onPress={() => props.navigation.navigate('group-select')}
|
|
||||||
/>
|
|
||||||
</Animatable.View>
|
|
||||||
</View>
|
|
||||||
<View style={styles.side}>
|
|
||||||
<IconButton
|
|
||||||
icon={this.displayModeIcons[state.currentMode]}
|
|
||||||
color={buttonColor}
|
|
||||||
onPress={this.changeDisplayMode}
|
|
||||||
/>
|
|
||||||
<IconButton
|
|
||||||
icon="clock-in"
|
|
||||||
color={buttonColor}
|
|
||||||
style={styles.icon}
|
|
||||||
onPress={() => props.onPress('today')}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
<View style={styles.side}>
|
|
||||||
<IconButton
|
|
||||||
icon="chevron-left"
|
|
||||||
color={buttonColor}
|
|
||||||
onPress={() => props.onPress('prev')}
|
|
||||||
/>
|
|
||||||
<IconButton
|
|
||||||
icon="chevron-right"
|
|
||||||
color={buttonColor}
|
|
||||||
style={styles.icon}
|
|
||||||
onPress={() => props.onPress('next')}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
</Surface>
|
|
||||||
</Animatable.View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default withTheme(AnimatedBottomBar);
|
|
||||||
176
src/components/Animations/PlanexBottomBar.tsx
Normal file
176
src/components/Animations/PlanexBottomBar.tsx
Normal file
|
|
@ -0,0 +1,176 @@
|
||||||
|
/*
|
||||||
|
* Copyright (c) 2019 - 2020 Arnaud Vergnet.
|
||||||
|
*
|
||||||
|
* This file is part of Campus INSAT.
|
||||||
|
*
|
||||||
|
* Campus INSAT is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* Campus INSAT is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { StyleSheet, View, Animated } from 'react-native';
|
||||||
|
import { FAB, IconButton, Surface, useTheme } from 'react-native-paper';
|
||||||
|
import * as Animatable from 'react-native-animatable';
|
||||||
|
import { TAB_BAR_HEIGHT } from '../Tabbar/CustomTabBar';
|
||||||
|
import { useNavigation } from '@react-navigation/core';
|
||||||
|
import { useCollapsible } from '../../utils/CollapsibleContext';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
onPress: (action: string, data?: string) => void;
|
||||||
|
seekAttention: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const DISPLAY_MODES = {
|
||||||
|
DAY: 'agendaDay',
|
||||||
|
WEEK: 'agendaWeek',
|
||||||
|
MONTH: 'month',
|
||||||
|
};
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
position: 'absolute',
|
||||||
|
left: '5%',
|
||||||
|
width: '90%',
|
||||||
|
},
|
||||||
|
surface: {
|
||||||
|
position: 'relative',
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
borderRadius: 50,
|
||||||
|
elevation: 2,
|
||||||
|
},
|
||||||
|
fabContainer: {
|
||||||
|
position: 'absolute',
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
alignItems: 'center',
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
},
|
||||||
|
fab: {
|
||||||
|
position: 'absolute',
|
||||||
|
alignSelf: 'center',
|
||||||
|
top: '-25%',
|
||||||
|
},
|
||||||
|
side: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
marginLeft: 5,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const DISPLAY_MODE_ICONS = {
|
||||||
|
[DISPLAY_MODES.DAY]: 'calendar-text',
|
||||||
|
[DISPLAY_MODES.WEEK]: 'calendar-week',
|
||||||
|
[DISPLAY_MODES.MONTH]: 'calendar-range',
|
||||||
|
};
|
||||||
|
|
||||||
|
function PlanexBottomBar(props: Props) {
|
||||||
|
const navigation = useNavigation();
|
||||||
|
const theme = useTheme();
|
||||||
|
const [currentMode, setCurrentMode] = useState(DISPLAY_MODES.WEEK);
|
||||||
|
|
||||||
|
const { collapsible } = useCollapsible();
|
||||||
|
|
||||||
|
const changeDisplayMode = () => {
|
||||||
|
let newMode;
|
||||||
|
switch (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;
|
||||||
|
default:
|
||||||
|
newMode = DISPLAY_MODES.WEEK;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
setCurrentMode(newMode);
|
||||||
|
props.onPress('changeView', newMode);
|
||||||
|
};
|
||||||
|
|
||||||
|
let translateY: number | Animated.AnimatedInterpolation = 0;
|
||||||
|
let opacity: number | Animated.AnimatedInterpolation = 1;
|
||||||
|
let scale: number | Animated.AnimatedInterpolation = 1;
|
||||||
|
if (collapsible) {
|
||||||
|
translateY = Animated.multiply(-3, collapsible.translateY);
|
||||||
|
opacity = Animated.subtract(1, collapsible.progress);
|
||||||
|
scale = Animated.add(
|
||||||
|
0.5,
|
||||||
|
Animated.multiply(0.5, Animated.subtract(1, collapsible.progress))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const buttonColor = theme.colors.primary;
|
||||||
|
return (
|
||||||
|
<Animated.View
|
||||||
|
style={{
|
||||||
|
...styles.container,
|
||||||
|
bottom: 10 + TAB_BAR_HEIGHT,
|
||||||
|
transform: [{ translateY: translateY }, { scale: scale }],
|
||||||
|
opacity: opacity,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Surface style={styles.surface}>
|
||||||
|
<View style={styles.fabContainer}>
|
||||||
|
<Animatable.View
|
||||||
|
style={styles.fab}
|
||||||
|
animation={props.seekAttention ? 'bounce' : undefined}
|
||||||
|
easing={'ease-out'}
|
||||||
|
iterationDelay={500}
|
||||||
|
iterationCount={'infinite'}
|
||||||
|
useNativeDriver={true}
|
||||||
|
>
|
||||||
|
<FAB
|
||||||
|
icon={'account-clock'}
|
||||||
|
onPress={() => navigation.navigate('group-select')}
|
||||||
|
/>
|
||||||
|
</Animatable.View>
|
||||||
|
</View>
|
||||||
|
<View style={styles.side}>
|
||||||
|
<IconButton
|
||||||
|
icon={DISPLAY_MODE_ICONS[currentMode]}
|
||||||
|
color={buttonColor}
|
||||||
|
onPress={changeDisplayMode}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
icon="clock-in"
|
||||||
|
color={buttonColor}
|
||||||
|
style={styles.icon}
|
||||||
|
onPress={() => props.onPress('today')}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View style={styles.side}>
|
||||||
|
<IconButton
|
||||||
|
icon="chevron-left"
|
||||||
|
color={buttonColor}
|
||||||
|
onPress={() => props.onPress('prev')}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
icon="chevron-right"
|
||||||
|
color={buttonColor}
|
||||||
|
style={styles.icon}
|
||||||
|
onPress={() => props.onPress('next')}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</Surface>
|
||||||
|
</Animated.View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PlanexBottomBar;
|
||||||
119
src/components/Screens/PlanexWebview.tsx
Normal file
119
src/components/Screens/PlanexWebview.tsx
Normal file
|
|
@ -0,0 +1,119 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { View } from 'react-native';
|
||||||
|
import GENERAL_STYLES from '../../constants/Styles';
|
||||||
|
import Urls from '../../constants/Urls';
|
||||||
|
import DateManager from '../../managers/DateManager';
|
||||||
|
import ThemeManager from '../../managers/ThemeManager';
|
||||||
|
import { PlanexGroupType } from '../../screens/Planex/GroupSelectionScreen';
|
||||||
|
import ErrorView from './ErrorView';
|
||||||
|
import WebViewScreen from './WebViewScreen';
|
||||||
|
import i18n from 'i18n-js';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
currentGroup?: PlanexGroupType;
|
||||||
|
injectJS: string;
|
||||||
|
onMessage: (event: { nativeEvent: { data: string } }) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Watch for changes in the calendar and call the remove alpha function to prevent invisible events
|
||||||
|
const OBSERVE_MUTATIONS_INJECTED =
|
||||||
|
'function removeAlpha(node) {\n' +
|
||||||
|
' let bg = node.css("background-color");\n' +
|
||||||
|
' if (bg.match("^rgba")) {\n' +
|
||||||
|
" let a = bg.slice(5).split(',');\n" +
|
||||||
|
' // Fix for tooltips with broken background\n' +
|
||||||
|
' if (parseInt(a[0]) === parseInt(a[1]) && parseInt(a[1]) === parseInt(a[2]) && parseInt(a[2]) === 0) {\n' +
|
||||||
|
" a[0] = a[1] = a[2] = '255';\n" +
|
||||||
|
' }\n' +
|
||||||
|
" let newBg ='rgb(' + a[0] + ',' + a[1] + ',' + a[2] + ')';\n" +
|
||||||
|
' node.css("background-color", newBg);\n' +
|
||||||
|
' }\n' +
|
||||||
|
'}\n' +
|
||||||
|
'// Observe for planning DOM changes\n' +
|
||||||
|
'let observer = new MutationObserver(function(mutations) {\n' +
|
||||||
|
' for (let i = 0; i < mutations.length; i++) {\n' +
|
||||||
|
" if (mutations[i]['addedNodes'].length > 0 &&\n" +
|
||||||
|
' ($(mutations[i][\'addedNodes\'][0]).hasClass("fc-event") || $(mutations[i][\'addedNodes\'][0]).hasClass("tooltiptopicevent")))\n' +
|
||||||
|
" removeAlpha($(mutations[i]['addedNodes'][0]))\n" +
|
||||||
|
' }\n' +
|
||||||
|
'});\n' +
|
||||||
|
'// observer.observe(document.querySelector(".fc-body"), {attributes: false, childList: true, characterData: false, subtree:true});\n' +
|
||||||
|
'observer.observe(document.querySelector("body"), {attributes: false, childList: true, characterData: false, subtree:true});\n' +
|
||||||
|
'// Run remove alpha a first time on whole planning. Useful when code injected after planning fully loaded.\n' +
|
||||||
|
'$(".fc-event-container .fc-event").each(function(index) {\n' +
|
||||||
|
' removeAlpha($(this));\n' +
|
||||||
|
'});';
|
||||||
|
|
||||||
|
// Overrides default settings to send a message to the webview when clicking on an event
|
||||||
|
const FULL_CALENDAR_SETTINGS = `
|
||||||
|
let calendar = $('#calendar').fullCalendar('getCalendar');
|
||||||
|
calendar.option({
|
||||||
|
eventClick: function (data, event, view) {
|
||||||
|
let message = {
|
||||||
|
title: data.title,
|
||||||
|
color: data.color,
|
||||||
|
start: data.start._d,
|
||||||
|
end: data.end._d,
|
||||||
|
};
|
||||||
|
window.ReactNativeWebView.postMessage(JSON.stringify(message));
|
||||||
|
}
|
||||||
|
});`;
|
||||||
|
|
||||||
|
// Mobile friendly CSS
|
||||||
|
const CUSTOM_CSS =
|
||||||
|
'body>.container{padding-top:20px; padding-bottom: 50px}header,#entite,#groupe_visibility,#calendar .fc-left,#calendar .fc-right{display:none}#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}';
|
||||||
|
|
||||||
|
// Dark mode CSS, to be used with the mobile friendly css
|
||||||
|
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}';
|
||||||
|
|
||||||
|
// Inject the custom css into the webpage
|
||||||
|
const INJECT_STYLE = `$('head').append('<style>${CUSTOM_CSS}</style>');`;
|
||||||
|
|
||||||
|
// Inject the dark mode into the webpage, to call after the custom css inject above
|
||||||
|
const INJECT_STYLE_DARK = `$('head').append('<style>${CUSTOM_CSS_DARK}</style>');`;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generates custom JavaScript to be injected into the webpage
|
||||||
|
*
|
||||||
|
* @param groupID The current group selected
|
||||||
|
*/
|
||||||
|
const generateInjectedJS = (group: PlanexGroupType | undefined) => {
|
||||||
|
let customInjectedJS = `$(document).ready(function() {
|
||||||
|
${OBSERVE_MUTATIONS_INJECTED}
|
||||||
|
${INJECT_STYLE}
|
||||||
|
${FULL_CALENDAR_SETTINGS}`;
|
||||||
|
if (group) {
|
||||||
|
customInjectedJS += `displayAde(${group.id});`;
|
||||||
|
}
|
||||||
|
if (DateManager.isWeekend(new Date())) {
|
||||||
|
customInjectedJS += `calendar.next();`;
|
||||||
|
}
|
||||||
|
if (ThemeManager.getNightMode()) {
|
||||||
|
customInjectedJS += INJECT_STYLE_DARK;
|
||||||
|
}
|
||||||
|
customInjectedJS += 'removeAlpha();});true;'; // Prevents crash on ios
|
||||||
|
return customInjectedJS;
|
||||||
|
};
|
||||||
|
|
||||||
|
function PlanexWebview(props: Props) {
|
||||||
|
return (
|
||||||
|
<View style={GENERAL_STYLES.flex}>
|
||||||
|
{!props.currentGroup ? (
|
||||||
|
<ErrorView
|
||||||
|
icon={'account-clock'}
|
||||||
|
message={i18n.t('screens.planex.noGroupSelected')}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
<WebViewScreen
|
||||||
|
url={Urls.planex.planning}
|
||||||
|
initialJS={generateInjectedJS(props.currentGroup)}
|
||||||
|
injectJS={props.injectJS}
|
||||||
|
onMessage={props.onMessage}
|
||||||
|
showAdvancedControls={false}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PlanexWebview;
|
||||||
|
|
@ -17,122 +17,27 @@
|
||||||
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
|
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { useCallback, useRef, useState } from 'react';
|
import React, { useCallback, useState } from 'react';
|
||||||
import { Title, useTheme } from 'react-native-paper';
|
import { Title, useTheme } from 'react-native-paper';
|
||||||
import i18n from 'i18n-js';
|
import i18n from 'i18n-js';
|
||||||
import {
|
import { StyleSheet, View } from 'react-native';
|
||||||
NativeScrollEvent,
|
|
||||||
NativeSyntheticEvent,
|
|
||||||
StyleSheet,
|
|
||||||
View,
|
|
||||||
} from 'react-native';
|
|
||||||
import {
|
import {
|
||||||
CommonActions,
|
CommonActions,
|
||||||
useFocusEffect,
|
useFocusEffect,
|
||||||
useNavigation,
|
useNavigation,
|
||||||
} from '@react-navigation/native';
|
} from '@react-navigation/native';
|
||||||
import Autolink from 'react-native-autolink';
|
import Autolink from 'react-native-autolink';
|
||||||
import ThemeManager from '../../managers/ThemeManager';
|
|
||||||
import WebViewScreen from '../../components/Screens/WebViewScreen';
|
|
||||||
import AsyncStorageManager from '../../managers/AsyncStorageManager';
|
import AsyncStorageManager from '../../managers/AsyncStorageManager';
|
||||||
import AlertDialog from '../../components/Dialogs/AlertDialog';
|
import AlertDialog from '../../components/Dialogs/AlertDialog';
|
||||||
import { dateToString, getTimeOnlyString } from '../../utils/Planning';
|
import { dateToString, getTimeOnlyString } from '../../utils/Planning';
|
||||||
import DateManager from '../../managers/DateManager';
|
import DateManager from '../../managers/DateManager';
|
||||||
import AnimatedBottomBar from '../../components/Animations/AnimatedBottomBar';
|
|
||||||
import ErrorView from '../../components/Screens/ErrorView';
|
|
||||||
import type { PlanexGroupType } from './GroupSelectionScreen';
|
import type { PlanexGroupType } from './GroupSelectionScreen';
|
||||||
import { MASCOT_STYLE } from '../../components/Mascot/Mascot';
|
import { MASCOT_STYLE } from '../../components/Mascot/Mascot';
|
||||||
import MascotPopup from '../../components/Mascot/MascotPopup';
|
import MascotPopup from '../../components/Mascot/MascotPopup';
|
||||||
import { getPrettierPlanexGroupName } from '../../utils/Utils';
|
import { getPrettierPlanexGroupName } from '../../utils/Utils';
|
||||||
import GENERAL_STYLES from '../../constants/Styles';
|
import GENERAL_STYLES from '../../constants/Styles';
|
||||||
import Urls from '../../constants/Urls';
|
import PlanexWebview from '../../components/Screens/PlanexWebview';
|
||||||
|
import PlanexBottomBar from '../../components/Animations/PlanexBottomBar';
|
||||||
// // 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) {
|
|
||||||
// let bg = node.css("background-color");
|
|
||||||
// if (bg.match("^rgba")) {
|
|
||||||
// let a = bg.slice(5).split(',');
|
|
||||||
// // Fix for tooltips with broken background
|
|
||||||
// if (parseInt(a[0]) === parseInt(a[1]) && parseInt(a[1]) === parseInt(a[2]) && parseInt(a[2]) === 0) {
|
|
||||||
// a[0] = a[1] = a[2] = '255';
|
|
||||||
// }
|
|
||||||
// let newBg ='rgb(' + a[0] + ',' + a[1] + ',' + a[2] + ')';
|
|
||||||
// node.css("background-color", newBg);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// // Observe for planning DOM changes
|
|
||||||
// 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") || $(mutations[i]['addedNodes'][0]).hasClass("tooltiptopicevent")))
|
|
||||||
// removeAlpha($(mutations[i]['addedNodes'][0]))
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
// // observer.observe(document.querySelector(".fc-body"), {attributes: false, childList: true, characterData: false, subtree:true});
|
|
||||||
// observer.observe(document.querySelector("body"), {attributes: false, childList: true, characterData: false, subtree:true});
|
|
||||||
// // Run remove alpha a first time on whole planning. Useful when code injected after planning fully loaded.
|
|
||||||
// $(".fc-event-container .fc-event").each(function(index) {
|
|
||||||
// removeAlpha($(this));
|
|
||||||
// });
|
|
||||||
|
|
||||||
// Watch for changes in the calendar and call the remove alpha function to prevent invisible events
|
|
||||||
const OBSERVE_MUTATIONS_INJECTED =
|
|
||||||
'function removeAlpha(node) {\n' +
|
|
||||||
' let bg = node.css("background-color");\n' +
|
|
||||||
' if (bg.match("^rgba")) {\n' +
|
|
||||||
" let a = bg.slice(5).split(',');\n" +
|
|
||||||
' // Fix for tooltips with broken background\n' +
|
|
||||||
' if (parseInt(a[0]) === parseInt(a[1]) && parseInt(a[1]) === parseInt(a[2]) && parseInt(a[2]) === 0) {\n' +
|
|
||||||
" a[0] = a[1] = a[2] = '255';\n" +
|
|
||||||
' }\n' +
|
|
||||||
" let newBg ='rgb(' + a[0] + ',' + a[1] + ',' + a[2] + ')';\n" +
|
|
||||||
' node.css("background-color", newBg);\n' +
|
|
||||||
' }\n' +
|
|
||||||
'}\n' +
|
|
||||||
'// Observe for planning DOM changes\n' +
|
|
||||||
'let observer = new MutationObserver(function(mutations) {\n' +
|
|
||||||
' for (let i = 0; i < mutations.length; i++) {\n' +
|
|
||||||
" if (mutations[i]['addedNodes'].length > 0 &&\n" +
|
|
||||||
' ($(mutations[i][\'addedNodes\'][0]).hasClass("fc-event") || $(mutations[i][\'addedNodes\'][0]).hasClass("tooltiptopicevent")))\n' +
|
|
||||||
" removeAlpha($(mutations[i]['addedNodes'][0]))\n" +
|
|
||||||
' }\n' +
|
|
||||||
'});\n' +
|
|
||||||
'// observer.observe(document.querySelector(".fc-body"), {attributes: false, childList: true, characterData: false, subtree:true});\n' +
|
|
||||||
'observer.observe(document.querySelector("body"), {attributes: false, childList: true, characterData: false, subtree:true});\n' +
|
|
||||||
'// Run remove alpha a first time on whole planning. Useful when code injected after planning fully loaded.\n' +
|
|
||||||
'$(".fc-event-container .fc-event").each(function(index) {\n' +
|
|
||||||
' removeAlpha($(this));\n' +
|
|
||||||
'});';
|
|
||||||
|
|
||||||
// Overrides default settings to send a message to the webview when clicking on an event
|
|
||||||
const FULL_CALENDAR_SETTINGS = `
|
|
||||||
let calendar = $('#calendar').fullCalendar('getCalendar');
|
|
||||||
calendar.option({
|
|
||||||
eventClick: function (data, event, view) {
|
|
||||||
let message = {
|
|
||||||
title: data.title,
|
|
||||||
color: data.color,
|
|
||||||
start: data.start._d,
|
|
||||||
end: data.end._d,
|
|
||||||
};
|
|
||||||
window.ReactNativeWebView.postMessage(JSON.stringify(message));
|
|
||||||
}
|
|
||||||
});`;
|
|
||||||
|
|
||||||
// Mobile friendly CSS
|
|
||||||
const CUSTOM_CSS =
|
|
||||||
'body>.container{padding-top:20px; padding-bottom: 50px}header,#entite,#groupe_visibility,#calendar .fc-left,#calendar .fc-right{display:none}#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}';
|
|
||||||
|
|
||||||
// Dark mode CSS, to be used with the mobile friendly css
|
|
||||||
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}';
|
|
||||||
|
|
||||||
// Inject the custom css into the webpage
|
|
||||||
const INJECT_STYLE = `$('head').append('<style>${CUSTOM_CSS}</style>');`;
|
|
||||||
|
|
||||||
// Inject the dark mode into the webpage, to call after the custom css inject above
|
|
||||||
const INJECT_STYLE_DARK = `$('head').append('<style>${CUSTOM_CSS_DARK}</style>');`;
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
container: {
|
container: {
|
||||||
|
|
@ -140,6 +45,9 @@ const styles = StyleSheet.create({
|
||||||
height: '100%',
|
height: '100%',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
},
|
},
|
||||||
|
popup: {
|
||||||
|
borderWidth: 2,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
|
@ -153,7 +61,6 @@ type Props = {
|
||||||
function PlanexScreen(props: Props) {
|
function PlanexScreen(props: Props) {
|
||||||
const navigation = useNavigation();
|
const navigation = useNavigation();
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const barRef = useRef<typeof AnimatedBottomBar>();
|
|
||||||
|
|
||||||
const [dialogContent, setDialogContent] = useState<
|
const [dialogContent, setDialogContent] = useState<
|
||||||
| undefined
|
| undefined
|
||||||
|
|
@ -199,26 +106,13 @@ function PlanexScreen(props: Props) {
|
||||||
*
|
*
|
||||||
* @returns {*}
|
* @returns {*}
|
||||||
*/
|
*/
|
||||||
const getWebView = () => {
|
const getWebView = () => (
|
||||||
return (
|
<PlanexWebview
|
||||||
<View style={GENERAL_STYLES.flex}>
|
currentGroup={currentGroup}
|
||||||
{!currentGroup ? (
|
|
||||||
<ErrorView
|
|
||||||
icon={'account-clock'}
|
|
||||||
message={i18n.t('screens.planex.noGroupSelected')}
|
|
||||||
/>
|
|
||||||
) : null}
|
|
||||||
<WebViewScreen
|
|
||||||
url={Urls.planex.planning}
|
|
||||||
initialJS={generateInjectedJS(currentGroup)}
|
|
||||||
injectJS={injectJS}
|
injectJS={injectJS}
|
||||||
onMessage={onMessage}
|
onMessage={onMessage}
|
||||||
onScroll={onScroll}
|
|
||||||
showAdvancedControls={false}
|
|
||||||
/>
|
/>
|
||||||
</View>
|
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Callback used when the user clicks on the navigate to settings button.
|
* Callback used when the user clicks on the navigate to settings button.
|
||||||
|
|
@ -300,17 +194,6 @@ function PlanexScreen(props: Props) {
|
||||||
|
|
||||||
const hideDialog = () => setDialogContent(undefined);
|
const hideDialog = () => setDialogContent(undefined);
|
||||||
|
|
||||||
/**
|
|
||||||
* Binds the onScroll event to the control bar for automatic hiding based on scroll direction and speed
|
|
||||||
*
|
|
||||||
* @param event
|
|
||||||
*/
|
|
||||||
const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
|
|
||||||
if (barRef.current) {
|
|
||||||
barRef.current.onScroll(event);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Sends the webpage a message with the new group to select and save it to preferences
|
* Sends the webpage a message with the new group to select and save it to preferences
|
||||||
*
|
*
|
||||||
|
|
@ -323,30 +206,8 @@ function PlanexScreen(props: Props) {
|
||||||
AsyncStorageManager.PREFERENCES.planexCurrentGroup.key,
|
AsyncStorageManager.PREFERENCES.planexCurrentGroup.key,
|
||||||
group
|
group
|
||||||
);
|
);
|
||||||
navigation.setOptions({ title: getPrettierPlanexGroupName(group.name) });
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
navigation.setOptions({ title: getPrettierPlanexGroupName(group.name) });
|
||||||
* Generates custom JavaScript to be injected into the webpage
|
|
||||||
*
|
|
||||||
* @param groupID The current group selected
|
|
||||||
*/
|
|
||||||
const generateInjectedJS = (group: PlanexGroupType | undefined) => {
|
|
||||||
let customInjectedJS = `$(document).ready(function() {
|
|
||||||
${OBSERVE_MUTATIONS_INJECTED}
|
|
||||||
${INJECT_STYLE}
|
|
||||||
${FULL_CALENDAR_SETTINGS}`;
|
|
||||||
if (group) {
|
|
||||||
customInjectedJS += `displayAde(${group.id});`;
|
|
||||||
}
|
|
||||||
if (DateManager.isWeekend(new Date())) {
|
|
||||||
customInjectedJS += `calendar.next();`;
|
|
||||||
}
|
|
||||||
if (ThemeManager.getNightMode()) {
|
|
||||||
customInjectedJS += INJECT_STYLE_DARK;
|
|
||||||
}
|
|
||||||
customInjectedJS += 'removeAlpha();});true;'; // Prevents crash on ios
|
|
||||||
return customInjectedJS;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -389,13 +250,11 @@ function PlanexScreen(props: Props) {
|
||||||
message={dialogContent ? dialogContent.message : ''}
|
message={dialogContent ? dialogContent.message : ''}
|
||||||
style={
|
style={
|
||||||
dialogContent
|
dialogContent
|
||||||
? { borderColor: dialogContent.color, borderWidth: 2 }
|
? { borderColor: dialogContent.color, ...styles.popup }
|
||||||
: undefined
|
: undefined
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
<AnimatedBottomBar
|
<PlanexBottomBar
|
||||||
navigation={navigation}
|
|
||||||
ref={barRef}
|
|
||||||
onPress={sendMessage}
|
onPress={sendMessage}
|
||||||
seekAttention={currentGroup === undefined}
|
seekAttention={currentGroup === undefined}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,22 @@
|
||||||
|
/*
|
||||||
|
* Copyright (c) 2019 - 2020 Arnaud Vergnet.
|
||||||
|
*
|
||||||
|
* This file is part of Campus INSAT.
|
||||||
|
*
|
||||||
|
* Campus INSAT is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* Campus INSAT is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
import { DependencyList, useEffect, useRef, useState } from 'react';
|
import { DependencyList, useEffect, useRef, useState } from 'react';
|
||||||
import { REQUEST_STATUS } from './Requests';
|
import { REQUEST_STATUS } from './Requests';
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue