App.vue 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322
  1. <template>
  2. <div class="fit row">
  3. <Notify ref="notify" />
  4. <StdDialog ref="stdDialog" />
  5. <router-view v-slot="{ Component }">
  6. <keep-alive v-if="showPage">
  7. <component :is="Component" class="col" />
  8. </keep-alive>
  9. </router-view>
  10. </div>
  11. </template>
  12. <script>
  13. //-----------------------------------------------------------------------------
  14. import vueComponent from './vueComponent.js';
  15. import Notify from './share/Notify.vue';
  16. import StdDialog from './share/StdDialog.vue';
  17. import miscApi from '../api/misc';
  18. import * as utils from '../share/utils';
  19. const componentOptions = {
  20. components: {
  21. Notify,
  22. StdDialog,
  23. },
  24. watch: {
  25. mode: function() {
  26. this.setAppTitle();
  27. this.redirectIfNeeded();
  28. }
  29. },
  30. };
  31. class App {
  32. _options = componentOptions;
  33. showPage = false;
  34. itemRuText = {
  35. '/cardindex': 'Картотека',
  36. '/reader': 'Читалка',
  37. '/forum': 'Форум-чат',
  38. '/income': 'Поступления',
  39. '/sources': 'Источники',
  40. '/settings': 'Параметры',
  41. '/help': 'Справка',
  42. };
  43. created() {
  44. this.commit = this.$store.commit;
  45. this.state = this.$store.state;
  46. this.uistate = this.$store.state.uistate;
  47. this.config = this.$store.state.config;
  48. //root route
  49. let cachedRoute = '';
  50. let cachedPath = '';
  51. this.$root.getRootRoute = () => {
  52. if (this.$route.path != cachedPath) {
  53. cachedPath = this.$route.path;
  54. const m = cachedPath.match(/^(\/[^/]*).*$/i);
  55. cachedRoute = (m ? m[1] : this.$route.path);
  56. }
  57. return cachedRoute;
  58. }
  59. this.$router.beforeEach((to, from, next) => {
  60. //распознавание хоста, если присутствует домен 3-уровня "b.", то разрешена только определенная страница
  61. if (window.location.host.indexOf('b.') == 0 && to.path != '/external-libs' && to.path != '/404') {
  62. next('/404');
  63. } else {
  64. next();
  65. }
  66. });
  67. // setAppTitle
  68. this.$root.setAppTitle = this.setAppTitle;
  69. //global keyHooks
  70. this.keyHooks = [];
  71. this.keyHook = (event) => {
  72. for (const hook of this.keyHooks)
  73. hook(event);
  74. }
  75. this.$root.addKeyHook = (hook) => {
  76. if (this.keyHooks.indexOf(hook) < 0)
  77. this.keyHooks.push(hook);
  78. }
  79. this.$root.removeKeyHook = (hook) => {
  80. const i = this.keyHooks.indexOf(hook);
  81. if (i >= 0)
  82. this.keyHooks.splice(i, 1);
  83. }
  84. document.addEventListener('keyup', (event) => {
  85. this.keyHook(event);
  86. });
  87. document.addEventListener('keypress', (event) => {
  88. this.keyHook(event);
  89. });
  90. document.addEventListener('keydown', (event) => {
  91. this.keyHook(event);
  92. });
  93. window.addEventListener('resize', () => {
  94. this.$root.$emit('resize');
  95. });
  96. }
  97. mounted() {
  98. this.$root.notify = this.$refs.notify;
  99. this.$root.stdDialog = this.$refs.stdDialog;
  100. this.setAppTitle();
  101. (async() => {
  102. //загрузим конфиг сревера
  103. try {
  104. const config = await miscApi.loadConfig();
  105. this.commit('config/setConfig', config);
  106. this.showPage = true;
  107. } catch(e) {
  108. //проверим, не получен ли конфиг ранее
  109. if (!this.mode) {
  110. this.$root.notify.error(e.message, 'Ошибка API');
  111. } else {
  112. //вероятно, работаем в оффлайне
  113. this.showPage = true;
  114. }
  115. console.error(e);
  116. }
  117. //запросим persistent storage
  118. if (navigator.storage && navigator.storage.persist) {
  119. navigator.storage.persist();
  120. }
  121. await this.$router.isReady();
  122. this.redirectIfNeeded();
  123. })();
  124. }
  125. toggleCollapse() {
  126. this.commit('uistate/setAsideBarCollapse', !this.uistate.asideBarCollapse);
  127. this.$root.$emit('resize');
  128. }
  129. get isCollapse() {
  130. return this.uistate.asideBarCollapse;
  131. }
  132. get asideWidth() {
  133. if (this.uistate.asideBarCollapse) {
  134. return 64;
  135. } else {
  136. return 170;
  137. }
  138. }
  139. get buttonCollapseIcon() {
  140. if (this.uistate.asideBarCollapse) {
  141. return 'el-icon-d-arrow-right';
  142. } else {
  143. return 'el-icon-d-arrow-left';
  144. }
  145. }
  146. get appName() {
  147. if (this.isCollapse)
  148. return '<br><br>';
  149. else
  150. return `${this.config.name} <br>v${this.config.version}`;
  151. }
  152. get apiError() {
  153. return this.state.apiError;
  154. }
  155. get rootRoute() {
  156. return this.$root.getRootRoute();
  157. }
  158. setAppTitle(title) {
  159. if (!title) {
  160. if (this.mode == 'liberama.top') {
  161. document.title = `Liberama Reader - всегда с вами`;
  162. } else if (this.mode == 'omnireader') {
  163. document.title = `Omni Reader - всегда с вами`;
  164. } else if (this.config && this.mode !== null) {
  165. document.title = `${this.config.name} - ${this.itemRuText[this.rootRoute]}`;
  166. }
  167. } else {
  168. document.title = title;
  169. }
  170. }
  171. itemTitleClass(path) {
  172. return (this.rootRoute == path ? {'bold-font': true} : {});
  173. }
  174. get mode() {
  175. return this.$store.state.config.mode;
  176. }
  177. get showAsideBar() {
  178. return (this.mode !== null && this.mode != 'reader' && this.mode != 'omnireader' && this.mode != 'liberama.top');
  179. }
  180. set showAsideBar(value) {
  181. }
  182. get isReaderActive() {
  183. return (this.rootRoute == '/reader' || this.rootRoute == '/external-libs');
  184. }
  185. redirectIfNeeded() {
  186. if ((this.mode == 'reader' || this.mode == 'omnireader' || this.mode == 'liberama.top')) {
  187. const search = window.location.search.substr(1);
  188. //распознавание параметра url вида "?url=<link>" и редирект при необходимости
  189. if (!this.isReaderActive) {
  190. const s = search.split('url=');
  191. const url = s[1] || '';
  192. const q = utils.parseQuery(s[0] || '');
  193. if (url) {
  194. q.url = decodeURIComponent(url);
  195. }
  196. window.history.replaceState({}, '', '/');
  197. this.$router.replace({ path: '/reader', query: q });
  198. }
  199. }
  200. }
  201. }
  202. export default vueComponent(App);
  203. //-----------------------------------------------------------------------------
  204. </script>
  205. <style scoped>
  206. .app-name {
  207. margin-left: 10px;
  208. margin-top: 10px;
  209. text-align: center;
  210. line-height: 140%;
  211. font-weight: bold;
  212. }
  213. </style>
  214. <style>
  215. body, html, #app {
  216. margin: 0;
  217. padding: 0;
  218. width: 100%;
  219. height: 100%;
  220. font: normal 12pt ReaderDefault;
  221. }
  222. .dborder {
  223. border: 2px solid magenta !important;
  224. }
  225. .icon-rotate {
  226. vertical-align: middle;
  227. animation: rotating 2s linear infinite;
  228. }
  229. @keyframes rotating {
  230. from {
  231. transform: rotate(0deg);
  232. } to {
  233. transform: rotate(360deg);
  234. }
  235. }
  236. .notify-button-icon {
  237. font-size: 16px !important;
  238. }
  239. @font-face {
  240. font-family: 'ReaderDefault';
  241. src: url('fonts/reader-default.woff') format('woff'),
  242. url('fonts/reader-default.ttf') format('truetype');
  243. }
  244. @font-face {
  245. font-family: 'OpenSans';
  246. src: url('fonts/open-sans.woff') format('woff'),
  247. url('fonts/open-sans.ttf') format('truetype');
  248. }
  249. @font-face {
  250. font-family: 'Roboto';
  251. src: url('fonts/roboto.woff') format('woff'),
  252. url('fonts/roboto.ttf') format('truetype');
  253. }
  254. @font-face {
  255. font-family: 'Rubik';
  256. src: url('fonts/rubik.woff2') format('woff2');
  257. }
  258. @font-face {
  259. font-family: 'Avrile';
  260. src: url('fonts/avrile.woff') format('woff'),
  261. url('fonts/avrile.ttf') format('truetype');
  262. }
  263. @font-face {
  264. font-family: 'Arimo';
  265. src: url('fonts/arimo.woff2') format('woff2');
  266. }
  267. @font-face {
  268. font-family: 'GEO_1';
  269. src: url('fonts/geo_1.woff') format('woff'),
  270. url('fonts/geo_1.ttf') format('truetype');
  271. }
  272. </style>