App.vue 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281
  1. <template>
  2. <q-layout view="lhr lpr lfr">
  3. <q-drawer v-model="showAsideBar" :width="asideWidth">
  4. <div class="app-name"><span v-html="appName"></span></div>
  5. <q-btn class="el-button-collapse" @click="toggleCollapse"></q-btn>
  6. <el-menu class="el-menu-vertical" :default-active="rootRoute" :collapse="isCollapse" router>
  7. <el-menu-item index="/cardindex">
  8. <i class="el-icon-search"></i>
  9. <span :class="itemTitleClass('/cardindex')" slot="title">{{ this.itemRuText['/cardindex'] }}</span>
  10. </el-menu-item>
  11. <el-menu-item index="/reader">
  12. <i class="el-icon-tickets"></i>
  13. <span :class="itemTitleClass('/reader')" slot="title">{{ this.itemRuText['/reader'] }}</span>
  14. </el-menu-item>
  15. <el-menu-item index="/forum" disabled>
  16. <i class="el-icon-message"></i>
  17. <span :class="itemTitleClass('/forum')" slot="title">{{ this.itemRuText['/forum'] }}</span>
  18. </el-menu-item>
  19. <el-menu-item index="/income">
  20. <i class="el-icon-upload"></i>
  21. <span :class="itemTitleClass('/income')" slot="title">{{ this.itemRuText['/income'] }}</span>
  22. </el-menu-item>
  23. <el-menu-item index="/sources">
  24. <i class="el-icon-menu"></i>
  25. <span :class="itemTitleClass('/sources')" slot="title">{{ this.itemRuText['/sources'] }}</span>
  26. </el-menu-item>
  27. <el-menu-item index="/settings">
  28. <i class="el-icon-setting"></i>
  29. <span :class="itemTitleClass('/settings')" slot="title">{{ this.itemRuText['/settings'] }}</span>
  30. </el-menu-item>
  31. <el-menu-item index="/help">
  32. <i class="el-icon-question"></i>
  33. <span :class="itemTitleClass('/help')" slot="title">{{ this.itemRuText['/help'] }}</span>
  34. </el-menu-item>
  35. </el-menu>
  36. </q-drawer>
  37. <q-page-container>
  38. <keep-alive>
  39. <router-view></router-view>
  40. </keep-alive>
  41. </q-page-container>
  42. </q-layout>
  43. </template>
  44. <script>
  45. //-----------------------------------------------------------------------------
  46. import Vue from 'vue';
  47. import Component from 'vue-class-component';
  48. import * as utils from '../share/utils';
  49. export default @Component({
  50. watch: {
  51. mode: function() {
  52. this.setAppTitle();
  53. this.redirectIfNeeded();
  54. }
  55. },
  56. })
  57. class App extends Vue {
  58. itemRuText = {
  59. '/cardindex': 'Картотека',
  60. '/reader': 'Читалка',
  61. '/forum': 'Форум-чат',
  62. '/income': 'Поступления',
  63. '/sources': 'Источники',
  64. '/settings': 'Параметры',
  65. '/help': 'Справка',
  66. }
  67. created() {
  68. this.commit = this.$store.commit;
  69. this.dispatch = this.$store.dispatch;
  70. this.state = this.$store.state;
  71. this.uistate = this.$store.state.uistate;
  72. this.config = this.$store.state.config;
  73. // set-app-title
  74. this.$root.$on('set-app-title', this.setAppTitle);
  75. //global keyHooks
  76. this.keyHooks = [];
  77. this.keyHook = (event) => {
  78. for (const hook of this.keyHooks)
  79. hook(event);
  80. }
  81. this.$root.addKeyHook = (hook) => {
  82. if (this.keyHooks.indexOf(hook) < 0)
  83. this.keyHooks.push(hook);
  84. }
  85. this.$root.removeKeyHook = (hook) => {
  86. const i = this.keyHooks.indexOf(hook);
  87. if (i >= 0)
  88. this.keyHooks.splice(i, 1);
  89. }
  90. document.addEventListener('keyup', (event) => {
  91. this.keyHook(event);
  92. });
  93. document.addEventListener('keydown', (event) => {
  94. this.keyHook(event);
  95. });
  96. window.addEventListener('resize', () => {
  97. this.$root.$emit('resize');
  98. });
  99. }
  100. mounted() {
  101. this.dispatch('config/loadConfig');
  102. this.$watch('apiError', function(newError) {
  103. if (newError) {
  104. let mes = newError.message;
  105. if (newError.response && newError.response.config)
  106. mes = newError.response.config.url + '<br>' + newError.response.statusText;
  107. this.$notify.error({
  108. title: 'Ошибка API',
  109. dangerouslyUseHTMLString: true,
  110. message: mes
  111. });
  112. }
  113. });
  114. this.setAppTitle();
  115. this.redirectIfNeeded();
  116. }
  117. toggleCollapse() {
  118. this.commit('uistate/setAsideBarCollapse', !this.uistate.asideBarCollapse);
  119. this.$root.$emit('resize');
  120. }
  121. get isCollapse() {
  122. return this.uistate.asideBarCollapse;
  123. }
  124. get asideWidth() {
  125. if (this.uistate.asideBarCollapse) {
  126. return 64;
  127. } else {
  128. return 170;
  129. }
  130. }
  131. get buttonCollapseIcon() {
  132. if (this.uistate.asideBarCollapse) {
  133. return 'el-icon-d-arrow-right';
  134. } else {
  135. return 'el-icon-d-arrow-left';
  136. }
  137. }
  138. get appName() {
  139. if (this.isCollapse)
  140. return '<br><br>';
  141. else
  142. return `${this.config.name} <br>v${this.config.version}`;
  143. }
  144. get apiError() {
  145. return this.state.apiError;
  146. }
  147. get rootRoute() {
  148. const m = this.$route.path.match(/^(\/[^/]*).*$/i);
  149. this.$root.rootRoute = (m ? m[1] : this.$route.path);
  150. return this.$root.rootRoute;
  151. }
  152. setAppTitle(title) {
  153. if (!title) {
  154. if (this.mode == 'omnireader') {
  155. document.title = `Omni Reader - всегда с вами`;
  156. } else if (this.config && this.mode !== null) {
  157. document.title = `${this.config.name} - ${this.itemRuText[this.$root.rootRoute]}`;
  158. }
  159. } else {
  160. document.title = title;
  161. }
  162. }
  163. itemTitleClass(path) {
  164. return (this.rootRoute == path ? {'bold-font': true} : {});
  165. }
  166. get mode() {
  167. return this.$store.state.config.mode;
  168. }
  169. get showAsideBar() {
  170. return (this.mode !== null && this.mode != 'reader' && this.mode != 'omnireader');
  171. }
  172. get isReaderActive() {
  173. return this.rootRoute == '/reader';
  174. }
  175. redirectIfNeeded() {
  176. if ((this.mode == 'reader' || this.mode == 'omnireader') && (!this.isReaderActive)) {
  177. //старый url
  178. const search = window.location.search.substr(1);
  179. const s = search.split('url=');
  180. const url = s[1] || '';
  181. const q = utils.parseQuery(s[0] || '');
  182. if (url) {
  183. q.url = decodeURIComponent(url);
  184. }
  185. window.history.replaceState({}, '', '/');
  186. this.$router.replace({ path: '/reader', query: q });
  187. }
  188. }
  189. }
  190. //-----------------------------------------------------------------------------
  191. </script>
  192. <style scoped>
  193. .app-name {
  194. margin-left: 10px;
  195. margin-top: 10px;
  196. text-align: center;
  197. line-height: 140%;
  198. font-weight: bold;
  199. }
  200. </style>
  201. <style>
  202. body, html, #app {
  203. margin: 0;
  204. padding: 0;
  205. font: normal 12pt ReaderDefault;
  206. }
  207. .dborder {
  208. border: 2px solid yellow;
  209. }
  210. @font-face {
  211. font-family: 'ReaderDefault';
  212. src: url('fonts/reader-default.woff') format('woff'),
  213. url('fonts/reader-default.ttf') format('truetype');
  214. }
  215. @font-face {
  216. font-family: 'OpenSans';
  217. src: url('fonts/open-sans.woff') format('woff'),
  218. url('fonts/open-sans.ttf') format('truetype');
  219. }
  220. @font-face {
  221. font-family: 'Roboto';
  222. src: url('fonts/roboto.woff') format('woff'),
  223. url('fonts/roboto.ttf') format('truetype');
  224. }
  225. @font-face {
  226. font-family: 'Rubik';
  227. src: url('fonts/rubik.woff2') format('woff2');
  228. }
  229. @font-face {
  230. font-family: 'Avrile';
  231. src: url('fonts/avrile.woff') format('woff'),
  232. url('fonts/avrile.ttf') format('truetype');
  233. }
  234. @font-face {
  235. font-family: 'Arimo';
  236. src: url('fonts/arimo.woff2') format('woff2');
  237. }
  238. @font-face {
  239. font-family: 'GEO_1';
  240. src: url('fonts/geo_1.woff') format('woff'),
  241. url('fonts/geo_1.ttf') format('truetype');
  242. }
  243. </style>