Application Android et IOS pour l'amicale des élèves
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

WebsiteScreen.tsx 5.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. /*
  2. * Copyright (c) 2019 - 2020 Arnaud Vergnet.
  3. *
  4. * This file is part of Campus INSAT.
  5. *
  6. * Campus INSAT is free software: you can redistribute it and/or modify
  7. * it under the terms of the GNU General Public License as published by
  8. * the Free Software Foundation, either version 3 of the License, or
  9. * (at your option) any later version.
  10. *
  11. * Campus INSAT is distributed in the hope that it will be useful,
  12. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  13. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  14. * GNU General Public License for more details.
  15. *
  16. * You should have received a copy of the GNU General Public License
  17. * along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
  18. */
  19. import * as React from 'react';
  20. import {StackNavigationProp} from '@react-navigation/stack';
  21. import WebViewScreen from '../../components/Screens/WebViewScreen';
  22. import AvailableWebsites from '../../constants/AvailableWebsites';
  23. import BasicLoadingScreen from '../../components/Screens/BasicLoadingScreen';
  24. type PropsType = {
  25. navigation: StackNavigationProp<any>;
  26. route: {params: {host: string; path: string | null; title: string}};
  27. };
  28. const ENABLE_MOBILE_STRING =
  29. '<meta name="viewport" content="width=device-width, initial-scale=1.0">';
  30. const AVAILABLE_ROOMS_STYLE =
  31. '<style>body,body>.container2{padding-top:0;width:100%}b,body>.container2>h1,body>.container2>h3,br,header{display:none}.table-bordered td,.table-bordered th{border:none;border-right:1px solid #dee2e6;border-bottom:1px solid #dee2e6}.table{padding:0;margin:0;width:200%;max-width:200%;display:block}tbody{display:block;width:100%}thead{display:block;width:100%}.table tbody tr,tbody tr[bgcolor],thead tr{width:100%;display:inline-flex}.table tbody td,.table thead td[colspan]{padding:0;flex:1;height:50px;margin:0}.table tbody td[bgcolor=white],.table thead td,.table>tbody>tr>td:nth-child(1){flex:0 0 150px;height:50px}</style>';
  32. const BIB_STYLE =
  33. '<style>.hero-unit,.navbar,footer{display:none}.hero-unit-form,.hero-unit2,.hero-unit3{background-color:#fff;box-shadow:none;padding:0;margin:0}.hero-unit-form h4{font-size:2rem;line-height:2rem}.btn{font-size:1.5rem;line-height:1.5rem;padding:20px}.btn-danger{background-image:none;background-color:#be1522}.table{font-size:.8rem}.table td{padding:0;height:18.2333px;border:none;border-bottom:1px solid #c1c1c1}.table td[style="max-width:55px;"]{max-width:110px!important}.table-bordered{min-width:50px}th{height:50px}.table-bordered{border-collapse:collapse}</style>';
  34. const BIB_BACK_BUTTON =
  35. "<div style='width: 100%; display: flex'>" +
  36. `<a style='margin: auto' href='${AvailableWebsites.websites.BIB}'>` +
  37. "<button id='customBackButton' class='btn btn-primary'>Retour</button>" +
  38. '</a>' +
  39. '</div>';
  40. class WebsiteScreen extends React.Component<PropsType> {
  41. fullUrl: string;
  42. injectedJS: {[key: string]: string};
  43. customPaddingFunctions: {[key: string]: (padding: string) => string};
  44. host: string;
  45. constructor(props: PropsType) {
  46. super(props);
  47. this.fullUrl = '';
  48. this.host = '';
  49. props.navigation.addListener('focus', this.onScreenFocus);
  50. this.injectedJS = {};
  51. this.customPaddingFunctions = {};
  52. this.injectedJS[AvailableWebsites.websites.AVAILABLE_ROOMS] =
  53. `document.querySelector('head').innerHTML += '${ENABLE_MOBILE_STRING}';` +
  54. `document.querySelector('head').innerHTML += '${AVAILABLE_ROOMS_STYLE}'; true;`;
  55. this.injectedJS[AvailableWebsites.websites.BIB] =
  56. `document.querySelector('head').innerHTML += '${ENABLE_MOBILE_STRING}';` +
  57. `document.querySelector('head').innerHTML += '${BIB_STYLE}';` +
  58. 'if ($(".hero-unit-form").length > 0 && $("#customBackButton").length === 0)' +
  59. `$(".hero-unit-form").append("${BIB_BACK_BUTTON}");true;`;
  60. this.customPaddingFunctions[AvailableWebsites.websites.BLUEMIND] = (
  61. padding: string,
  62. ): string => {
  63. return (
  64. `$('head').append('${ENABLE_MOBILE_STRING}');` +
  65. `$('.minwidth').css('top', ${padding}` +
  66. "$('#mailview-bottom').css('min-height', 500);"
  67. );
  68. };
  69. this.customPaddingFunctions[AvailableWebsites.websites.WIKETUD] = (
  70. padding: string,
  71. ): string => {
  72. return (
  73. `$('#p-logo-text').css('top', 10 + ${padding});` +
  74. `$('#site-navigation h2').css('top', 10 + ${padding});` +
  75. `$('#site-tools h2').css('top', 10 + ${padding});` +
  76. `$('#user-tools h2').css('top', 10 + ${padding});`
  77. );
  78. };
  79. }
  80. onScreenFocus = () => {
  81. this.handleNavigationParams();
  82. };
  83. /**
  84. *
  85. */
  86. handleNavigationParams() {
  87. const {route, navigation} = this.props;
  88. if (route.params != null) {
  89. this.host = route.params.host;
  90. let {path} = route.params;
  91. const {title} = route.params;
  92. if (this.host != null && path != null) {
  93. path = path.replace(this.host, '');
  94. this.fullUrl = this.host + path;
  95. } else {
  96. this.fullUrl = this.host;
  97. }
  98. if (title != null) {
  99. navigation.setOptions({title});
  100. }
  101. }
  102. }
  103. render() {
  104. const {navigation} = this.props;
  105. let injectedJavascript = '';
  106. let customPadding = null;
  107. if (this.host != null && this.injectedJS[this.host] != null) {
  108. injectedJavascript = this.injectedJS[this.host];
  109. }
  110. if (this.host != null && this.customPaddingFunctions[this.host] != null) {
  111. customPadding = this.customPaddingFunctions[this.host];
  112. }
  113. if (this.fullUrl != null) {
  114. return (
  115. <WebViewScreen
  116. navigation={navigation}
  117. url={this.fullUrl}
  118. customJS={injectedJavascript}
  119. customPaddingFunction={customPadding}
  120. />
  121. );
  122. }
  123. return <BasicLoadingScreen />;
  124. }
  125. }
  126. export default WebsiteScreen;