App.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322
  1. <template>
  2. <el-container>
  3. <el-aside v-if="showAsideBar" :width="asideWidth">
  4. <div class="app-name"><span v-html="appName"></span></div>
  5. <el-button class="el-button-collapse" @click="toggleCollapse" :icon="buttonCollapseIcon"></el-button>
  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. </el-aside>
  37. <el-main v-if="showMain" :style="{padding: (isReaderActive ? 0 : '5px')}">
  38. <keep-alive>
  39. <router-view></router-view>
  40. </keep-alive>
  41. </el-main>
  42. </el-container>
  43. </template>
  44. <script>
  45. //-----------------------------------------------------------------------------
  46. import Vue from 'vue';
  47. import Component from 'vue-class-component';
  48. export default @Component({
  49. watch: {
  50. rootRoute: function(newValue) {
  51. this.setAppTitle();
  52. if ((this.mode == 'reader' || this.mode == 'omnireader') && (newValue != '/reader')) {
  53. //старый url
  54. const search = window.location.search.substr(1);
  55. const url = search.split('url=')[1] || '';
  56. console.log(url);
  57. if (url) {
  58. window.location = `/#/reader?url=${url}`;
  59. } else {
  60. this.$router.replace('/reader');
  61. }
  62. }
  63. },
  64. },
  65. })
  66. class App extends Vue {
  67. itemRuText = {
  68. '/cardindex': 'Картотека',
  69. '/reader': 'Читалка',
  70. '/forum': 'Форум-чат',
  71. '/income': 'Поступления',
  72. '/sources': 'Источники',
  73. '/settings': 'Параметры',
  74. '/help': 'Справка',
  75. }
  76. created() {
  77. this.commit = this.$store.commit;
  78. this.dispatch = this.$store.dispatch;
  79. this.state = this.$store.state;
  80. this.uistate = this.$store.state.uistate;
  81. this.config = this.$store.state.config;
  82. // set-app-title
  83. this.$root.$on('set-app-title', this.setAppTitle);
  84. //global keyHooks
  85. this.keyHooks = [];
  86. this.keyHook = (event) => {
  87. for (const hook of this.keyHooks)
  88. hook(event);
  89. }
  90. this.$root.addKeyHook = (hook) => {
  91. if (this.keyHooks.indexOf(hook) < 0)
  92. this.keyHooks.push(hook);
  93. }
  94. this.$root.removeKeyHook = (hook) => {
  95. const i = this.keyHooks.indexOf(hook);
  96. if (i >= 0)
  97. this.keyHooks.splice(i, 1);
  98. }
  99. document.addEventListener('keyup', (event) => {
  100. this.keyHook(event);
  101. });
  102. document.addEventListener('keydown', (event) => {
  103. this.keyHook(event);
  104. });
  105. window.addEventListener('resize', () => {
  106. this.$root.$emit('resize');
  107. });
  108. }
  109. mounted() {
  110. this.dispatch('config/loadConfig');
  111. this.$watch('apiError', function(newError) {
  112. if (newError) {
  113. this.$notify.error({
  114. title: 'Ошибка API',
  115. dangerouslyUseHTMLString: true,
  116. message: newError.response.config.url + '<br>' + newError.response.statusText
  117. });
  118. }
  119. });
  120. }
  121. toggleCollapse() {
  122. this.commit('uistate/setAsideBarCollapse', !this.uistate.asideBarCollapse);
  123. this.$root.$emit('resize');
  124. }
  125. get isCollapse() {
  126. return this.uistate.asideBarCollapse;
  127. }
  128. get asideWidth() {
  129. if (this.uistate.asideBarCollapse) {
  130. return '64px';
  131. } else {
  132. return '170px';
  133. }
  134. }
  135. get buttonCollapseIcon() {
  136. if (this.uistate.asideBarCollapse) {
  137. return 'el-icon-d-arrow-right';
  138. } else {
  139. return 'el-icon-d-arrow-left';
  140. }
  141. }
  142. get appName() {
  143. if (this.isCollapse)
  144. return '<br><br>';
  145. else
  146. return `${this.config.name} <br>v${this.config.version}`;
  147. }
  148. get apiError() {
  149. return this.state.apiError;
  150. }
  151. get rootRoute() {
  152. const m = this.$route.path.match(/^(\/[^/]*).*$/i);
  153. this.$root.rootRoute = (m ? m[1] : this.$route.path);
  154. return this.$root.rootRoute;
  155. }
  156. setAppTitle(title) {
  157. if (!title) {
  158. if (this.mode == 'omnireader') {
  159. document.title = `Omni Reader - всегда с вами`;
  160. } else if (this.config && this.mode !== null) {
  161. document.title = `${this.config.name} - ${this.itemRuText[this.$root.rootRoute]}`;
  162. }
  163. } else {
  164. document.title = title;
  165. }
  166. }
  167. itemTitleClass(path) {
  168. return (this.rootRoute == path ? {'bold-font': true} : {});
  169. }
  170. get mode() {
  171. return this.config.mode;
  172. }
  173. get showAsideBar() {
  174. return (this.mode !== null && this.mode != 'reader' && this.mode != 'omnireader');
  175. }
  176. get isReaderActive() {
  177. return this.rootRoute == '/reader';
  178. }
  179. get showMain() {
  180. return (this.showAsideBar || this.isReaderActive);
  181. }
  182. }
  183. //-----------------------------------------------------------------------------
  184. </script>
  185. <style scoped>
  186. .app-name {
  187. margin-left: 10px;
  188. margin-top: 10px;
  189. text-align: center;
  190. line-height: 140%;
  191. font-weight: bold;
  192. }
  193. .bold-font {
  194. font-weight: bold;
  195. }
  196. .el-container {
  197. height: 100%;
  198. }
  199. .el-aside {
  200. line-height: 1;
  201. background-color: #ccc;
  202. color: #000;
  203. }
  204. .el-main {
  205. padding: 0;
  206. background-color: #E6EDF4;
  207. color: #000;
  208. }
  209. .el-menu-vertical:not(.el-menu--collapse) {
  210. background-color: inherit;
  211. color: inherit;
  212. text-align: left;
  213. width: 100%;
  214. border: 0;
  215. }
  216. .el-menu--collapse {
  217. background-color: inherit;
  218. color: inherit;
  219. border: 0;
  220. }
  221. .el-button-collapse, .el-button-collapse:focus, .el-button-collapse:active, .el-button-collapse:hover {
  222. background-color: inherit;
  223. color: inherit;
  224. margin-top: 5px;
  225. width: 100%;
  226. height: 64px;
  227. border: 0;
  228. }
  229. .el-menu-item {
  230. font-size: 85%;
  231. }
  232. </style>
  233. <style>
  234. body, html, #app {
  235. margin: 0;
  236. padding: 0;
  237. height: 100%;
  238. font: normal 12pt ReaderDefault;
  239. }
  240. .el-tabs__content {
  241. flex: 1;
  242. padding: 0 !important;
  243. display: flex;
  244. flex-direction: column;
  245. overflow: hidden;
  246. }
  247. @font-face {
  248. font-family: 'ReaderDefault';
  249. src: url('fonts/reader-default.woff') format('woff'),
  250. url('fonts/reader-default.ttf') format('truetype');
  251. }
  252. @font-face {
  253. font-family: 'OpenSans';
  254. src: url('fonts/open-sans.woff') format('woff'),
  255. url('fonts/open-sans.ttf') format('truetype');
  256. }
  257. @font-face {
  258. font-family: 'Roboto';
  259. src: url('fonts/roboto.woff') format('woff'),
  260. url('fonts/roboto.ttf') format('truetype');
  261. }
  262. @font-face {
  263. font-family: 'Rubik';
  264. src: url('fonts/rubik.woff2') format('woff2');
  265. }
  266. @font-face {
  267. font-family: 'Avrile';
  268. src: url('fonts/avrile.woff') format('woff'),
  269. url('fonts/avrile.ttf') format('truetype');
  270. }
  271. @font-face {
  272. font-family: 'Arimo';
  273. src: url('fonts/arimo.woff2') format('woff2');
  274. }
  275. @font-face {
  276. font-family: 'GEO_1';
  277. src: url('fonts/geo_1.woff') format('woff'),
  278. url('fonts/geo_1.ttf') format('truetype');
  279. }
  280. </style>