Reader.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440
  1. <template>
  2. <el-container>
  3. <el-header v-show="toolBarActive" height='50px'>
  4. <div class="header">
  5. <el-tooltip content="Загрузить книгу" :open-delay="1000" effect="light">
  6. <el-button ref="loader" class="tool-button" :class="buttonActiveClass('loader')" @click="buttonClick('loader')"><i class="el-icon-back"></i></el-button>
  7. </el-tooltip>
  8. <div>
  9. <el-tooltip content="Действие назад" :open-delay="1000" effect="light">
  10. <el-button ref="undoAction" class="tool-button" @click="buttonClick('undoAction')" ><i class="el-icon-arrow-left"></i></el-button>
  11. </el-tooltip>
  12. <el-tooltip content="Действие вперед" :open-delay="1000" effect="light">
  13. <el-button ref="redoAction" class="tool-button" @click="buttonClick('redoAction')" ><i class="el-icon-arrow-right"></i></el-button>
  14. </el-tooltip>
  15. <div class="space"></div>
  16. <el-tooltip content="На весь экран" :open-delay="1000" effect="light">
  17. <el-button ref="fullScreen" class="tool-button" :class="buttonActiveClass('fullScreen')" @click="buttonClick('fullScreen')"><i class="el-icon-rank"></i></el-button>
  18. </el-tooltip>
  19. <el-tooltip content="Прокрутка книги" :open-delay="1000" effect="light">
  20. <el-button ref="setPosition" class="tool-button" @click="buttonClick('setPosition')"><i class="el-icon-d-arrow-right"></i></el-button>
  21. </el-tooltip>
  22. <el-tooltip content="Плавный скроллинг" :open-delay="1000" effect="light">
  23. <el-button ref="scrolling" class="tool-button" @click="buttonClick('scrolling')"><i class="el-icon-sort"></i></el-button>
  24. </el-tooltip>
  25. <el-tooltip content="Найти в тексте" :open-delay="1000" effect="light">
  26. <el-button ref="search" class="tool-button" @click="buttonClick('search')"><i class="el-icon-search"></i></el-button>
  27. </el-tooltip>
  28. <el-tooltip content="Скопировать текст со страницы" :open-delay="1000" effect="light">
  29. <el-button ref="copyText" class="tool-button" @click="buttonClick('copyText')"><i class="el-icon-edit-outline"></i></el-button>
  30. </el-tooltip>
  31. <el-tooltip content="Принудительно обновить книгу в обход кеша" :open-delay="1000" effect="light">
  32. <el-button ref="refresh" class="tool-button" @click="buttonClick('refresh')"><i class="el-icon-refresh"></i></el-button>
  33. </el-tooltip>
  34. <div class="space"></div>
  35. <el-tooltip content="История" :open-delay="1000" effect="light">
  36. <el-button ref="history" class="tool-button" @click="buttonClick('history')"><i class="el-icon-document"></i></el-button>
  37. </el-tooltip>
  38. </div>
  39. <el-tooltip content="Настроить" :open-delay="1000" effect="light">
  40. <el-button ref="settings" class="tool-button" @click="buttonClick('settings')"><i class="el-icon-setting"></i></el-button>
  41. </el-tooltip>
  42. </div>
  43. </el-header>
  44. <el-main>
  45. <keep-alive>
  46. <component ref="page" :is="pageActive" @load-book="loadBook" @book-pos-changed="bookPosChanged" @tool-bar-toggle="toolBarToggle"></component>
  47. </keep-alive>
  48. </el-main>
  49. </el-container>
  50. </template>
  51. <script>
  52. //-----------------------------------------------------------------------------
  53. import Vue from 'vue';
  54. import Component from 'vue-class-component';
  55. import LoaderPage from './LoaderPage/LoaderPage.vue';
  56. import TextPage from './TextPage/TextPage.vue';
  57. import ProgressPage from './ProgressPage/ProgressPage.vue';
  58. import bookManager from './share/bookManager';
  59. import readerApi from '../../api/reader';
  60. export default @Component({
  61. components: {
  62. LoaderPage,
  63. TextPage,
  64. ProgressPage
  65. },
  66. watch: {
  67. bookPos: function(newValue) {
  68. if (newValue !== undefined && this.pageActive == 'TextPage') {
  69. const textPage = this.$refs.page;
  70. if (textPage.bookPos != newValue) {
  71. textPage.bookPos = newValue;
  72. }
  73. if (this.lastOpenedBook && this.lastOpenedBook.bookPos != newValue) {
  74. this.commit('reader/setOpenedBook', Object.assign({}, this.lastOpenedBook, {bookPos: newValue}));
  75. }
  76. }
  77. },
  78. routeParamPos: function(newValue) {
  79. if (newValue !== undefined && newValue != this.bookPos) {
  80. this.bookPos = newValue;
  81. }
  82. },
  83. routeParamUrl: function(newValue) {
  84. if (newValue !== '' && newValue !== this.lastOpenedBook.url) {
  85. this.loadBook({url: newValue, bookPos: this.routeParamPos});
  86. }
  87. },
  88. },
  89. })
  90. class Reader extends Vue {
  91. loaderActive = false;
  92. progressActive = false;
  93. fullScreenActive = false;
  94. bookPos = null;
  95. allowUrlParamBookPos = true;
  96. created() {
  97. this.commit = this.$store.commit;
  98. this.dispatch = this.$store.dispatch;
  99. this.reader = this.$store.state.reader;
  100. this.$root.addKeyHook(this.keyHook);
  101. this.lastActivePage = false;
  102. }
  103. mounted() {
  104. /*while (this.lastOpenedBook) {
  105. this.commit('reader/delOpenedBook', this.lastOpenedBook);
  106. }*/
  107. if (this.$root.rootRoute == '/reader') {
  108. if (this.routeParamUrl) {
  109. this.loadBook({url: this.routeParamUrl, bookPos: this.routeParamPos});
  110. } else if (this.lastOpenedBook) {
  111. this.loadBook({url: this.lastOpenedBook.url});
  112. } else {
  113. this.loaderActive = true;
  114. }
  115. }
  116. }
  117. get routeParamPos() {
  118. let result = undefined;
  119. const q = this.$route.query;
  120. if (q['__p']) {
  121. result = q['__p'];
  122. if (Array.isArray(result))
  123. result = result[0];
  124. }
  125. return (result ? parseInt(result, 10) || 0 : result);
  126. }
  127. updateRoute(isNewRoute) {
  128. const pos = (this.bookPos != undefined && this.allowUrlParamBookPos ? `__p=${this.bookPos}&` : '');
  129. if (isNewRoute)
  130. this.$router.push(`/reader?${pos}url=${this.lastOpenedBook.url}`);
  131. else
  132. this.$router.replace(`/reader?${pos}url=${this.lastOpenedBook.url}`);
  133. }
  134. get routeParamUrl() {
  135. let result = '';
  136. const path = this.$route.fullPath;
  137. const i = path.indexOf('url=');
  138. if (i >= 0) {
  139. result = path.substr(i + 4);
  140. }
  141. return decodeURIComponent(result);
  142. }
  143. bookPosChanged(event) {
  144. this.bookPos = event.bookPos;
  145. this.updateRoute();
  146. }
  147. get toolBarActive() {
  148. return this.reader.toolBarActive;
  149. }
  150. get lastOpenedBook() {
  151. return this.$store.getters['reader/lastOpenedBook'];
  152. }
  153. toolBarToggle() {
  154. this.commit('reader/setToolBarActive', !this.toolBarActive);
  155. this.$root.$emit('resize');
  156. }
  157. fullScreenToggle() {
  158. this.fullScreenActive = !this.fullScreenActive;
  159. if (this.fullScreenActive) {
  160. const element = document.documentElement;
  161. if (element.requestFullscreen) {
  162. element.requestFullscreen();
  163. } else if (element.webkitrequestFullscreen) {
  164. element.webkitRequestFullscreen();
  165. } else if (element.mozRequestFullscreen) {
  166. element.mozRequestFullScreen();
  167. }
  168. } else {
  169. if (document.cancelFullScreen) {
  170. document.cancelFullScreen();
  171. } else if (document.mozCancelFullScreen) {
  172. document.mozCancelFullScreen();
  173. } else if (document.webkitCancelFullScreen) {
  174. document.webkitCancelFullScreen();
  175. }
  176. }
  177. }
  178. loaderToggle() {
  179. this.loaderActive = !this.loaderActive;
  180. }
  181. buttonClick(button) {
  182. switch (button) {
  183. case 'loader':
  184. this.loaderToggle();
  185. break;
  186. case 'fullScreen':
  187. this.fullScreenToggle();
  188. break;
  189. case 'refresh':
  190. if (this.lastOpenedBook) {
  191. this.loadBook({url: this.lastOpenedBook.url, force: true});
  192. }
  193. break;
  194. }
  195. this.$refs[button].$el.blur();
  196. }
  197. buttonActiveClass(button) {
  198. const classActive = { 'tool-button-active': true, 'tool-button-active:hover': true };
  199. switch (button) {
  200. case 'loader': return (this.loaderActive ? classActive : {});
  201. case 'fullScreen': return (this.fullScreenActive ? classActive : {});
  202. }
  203. return {};
  204. }
  205. get pageActive() {
  206. let result = '';
  207. if (this.progressActive)
  208. result = 'ProgressPage';
  209. else if (this.loaderActive)
  210. result = 'LoaderPage';
  211. else if (this.lastOpenedBook)
  212. result = 'TextPage';
  213. if (!result) {
  214. this.loaderActive = true;
  215. result = 'LoaderPage';
  216. }
  217. if (result != 'TextPage') {
  218. this.$root.$emit('set-app-title');
  219. }
  220. if (this.lastActivePage != result && result == 'TextPage') {
  221. //акивируем страницу с текстом
  222. this.$nextTick(async() => {
  223. const last = this.lastOpenedBook;
  224. const isParsed = await bookManager.hasBookParsed(last);
  225. if (!isParsed) {
  226. this.$root.$emit('set-app-title');
  227. return;
  228. }
  229. this.updateRoute();
  230. const textPage = this.$refs.page;
  231. if (textPage.showBook) {
  232. textPage.lastBook = last;
  233. textPage.bookPos = (last.bookPos !== undefined ? last.bookPos : 0);
  234. textPage.showBook();
  235. }
  236. });
  237. }
  238. this.$nextTick(() => {
  239. if (this.$refs.page)
  240. this.$refs.page.fullScreenToggle = this.fullScreenToggle;
  241. });
  242. this.lastActivePage = result;
  243. return result;
  244. }
  245. loadBook(opts) {
  246. this.progressActive = true;
  247. this.$nextTick(async() => {
  248. const progress = this.$refs.page;
  249. try {
  250. progress.show();
  251. progress.setState({state: 'parse'});
  252. // есть ли среди истории OpenedBook
  253. const key = bookManager.keyFromUrl(opts.url);
  254. let wasOpened = this.reader.openedBook[key];
  255. wasOpened = (wasOpened ? wasOpened : {});
  256. const bookPos = (opts.bookPos !== undefined ? opts.bookPos : wasOpened.bookPos);
  257. let book = null;
  258. if (!opts.force) {
  259. // пытаемся загрузить и распарсить книгу в менеджере из локального кеша
  260. const bookParsed = await bookManager.getBook({url: opts.url}, (prog) => {
  261. progress.setState({progress: prog});
  262. });
  263. // если есть в локальном кеше
  264. if (bookParsed) {
  265. this.commit('reader/setOpenedBook', Object.assign({bookPos}, bookManager.metaOnly(bookParsed)));
  266. this.loaderActive = false;
  267. progress.hide(); this.progressActive = false;
  268. return;
  269. }
  270. // иначе идем на сервер
  271. // пытаемся загрузить готовый файл с сервера
  272. if (wasOpened.path) {
  273. try {
  274. const resp = await readerApi.loadCachedBook(wasOpened.path, (state) => {
  275. progress.setState(state);
  276. });
  277. book = Object.assign({}, wasOpened, {data: resp.data});
  278. } catch (e) {
  279. //молчим
  280. }
  281. }
  282. }
  283. progress.setState({totalSteps: 5});
  284. // не удалось, скачиваем книгу полностью с конвертацией
  285. if (!book) {
  286. book = await readerApi.loadBook(opts.url, (state) => {
  287. progress.setState(state);
  288. });
  289. }
  290. // добавляем в bookManager
  291. progress.setState({state: 'parse', step: 5});
  292. const addedBook = await bookManager.addBook(book, (prog) => {
  293. progress.setState({progress: prog});
  294. });
  295. // добавляем в историю
  296. this.commit('reader/setOpenedBook', Object.assign({bookPos}, bookManager.metaOnly(addedBook)));
  297. this.updateRoute(true);
  298. this.loaderActive = false;
  299. progress.hide(); this.progressActive = false;
  300. } catch (e) {
  301. progress.hide(); this.progressActive = false;
  302. this.loaderActive = true;
  303. this.$alert(e.message, 'Ошибка', {type: 'error'});
  304. }
  305. });
  306. }
  307. keyHook(event) {
  308. if (this.$root.rootRoute == '/reader') {
  309. let handled = false;
  310. if (this.$refs.page && this.$refs.page.keyHook)
  311. handled = this.$refs.page.keyHook(event);
  312. if (!handled && event.type == 'keydown' && event.code == 'Escape') {
  313. this.loaderToggle();
  314. }
  315. }
  316. }
  317. }
  318. //-----------------------------------------------------------------------------
  319. </script>
  320. <style scoped>
  321. .el-container {
  322. padding: 0;
  323. margin: 0;
  324. height: 100%;
  325. }
  326. .el-header {
  327. padding-left: 5px;
  328. padding-right: 5px;
  329. background-color: #1B695F;
  330. color: #000;
  331. overflow-x: auto;
  332. overflow-y: hidden;
  333. }
  334. .header {
  335. display: flex;
  336. justify-content: space-between;
  337. min-width: 550px;
  338. }
  339. .el-main {
  340. display: flex;
  341. padding: 0;
  342. margin: 0;
  343. background-color: #EBE2C9;
  344. color: #000;
  345. }
  346. .tool-button {
  347. margin: 0;
  348. margin-left: 2px;
  349. margin-right: 2px;
  350. padding: 0;
  351. color: #3E843E;
  352. background-color: #E6EDF4;
  353. margin-top: 5px;
  354. height: 38px;
  355. width: 38px;
  356. border: 0;
  357. box-shadow: 3px 3px 5px black;
  358. }
  359. .tool-button:hover {
  360. background-color: white;
  361. }
  362. .tool-button-active {
  363. box-shadow: 0 0 0;
  364. color: white;
  365. background-color: #8AB45F;
  366. position: relative;
  367. top: 1px;
  368. left: 1px;
  369. }
  370. .tool-button-active:hover {
  371. color: white;
  372. background-color: #81C581;
  373. }
  374. i {
  375. font-size: 200%;
  376. }
  377. .space {
  378. width: 10px;
  379. display: inline-block;
  380. }
  381. </style>