Reader.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603
  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" :class="buttonActiveClass('undoAction')" @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" :class="buttonActiveClass('redoAction')" @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" :class="buttonActiveClass('setPosition')" @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" :class="buttonActiveClass('scrolling')" @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" :class="buttonActiveClass('search')" @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" :class="buttonActiveClass('copyText')" @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" :class="buttonActiveClass('refresh')" @click="buttonClick('refresh')">
  33. <i class="el-icon-refresh" :class="{clear: !showRefreshIcon}"></i>
  34. </el-button>
  35. </el-tooltip>
  36. <div class="space"></div>
  37. <el-tooltip content="История" :open-delay="1000" effect="light">
  38. <el-button ref="history" class="tool-button" :class="buttonActiveClass('history')" @click="buttonClick('history')"><i class="el-icon-document"></i></el-button>
  39. </el-tooltip>
  40. </div>
  41. <el-tooltip content="Настроить" :open-delay="1000" effect="light">
  42. <el-button ref="settings" class="tool-button" @click="buttonClick('settings')"><i class="el-icon-setting"></i></el-button>
  43. </el-tooltip>
  44. </div>
  45. </el-header>
  46. <el-main>
  47. <keep-alive>
  48. <component ref="page" :is="activePage"
  49. @load-book="loadBook"
  50. @book-pos-changed="bookPosChanged"
  51. @tool-bar-toggle="toolBarToggle"
  52. @full-screen-toogle="fullScreenToggle"
  53. ></component>
  54. </keep-alive>
  55. <HistoryPage v-if="historyActive" ref="historyPage" @load-book="loadBook" @history-toggle="historyToggle"></HistoryPage>
  56. <SetPositionPage v-if="setPositionActive" ref="setPositionPage" @set-position-toggle="setPositionToggle" @book-pos-changed="bookPosChanged"></SetPositionPage>
  57. </el-main>
  58. </el-container>
  59. </template>
  60. <script>
  61. //-----------------------------------------------------------------------------
  62. import Vue from 'vue';
  63. import Component from 'vue-class-component';
  64. import LoaderPage from './LoaderPage/LoaderPage.vue';
  65. import TextPage from './TextPage/TextPage.vue';
  66. import ProgressPage from './ProgressPage/ProgressPage.vue';
  67. import HistoryPage from './HistoryPage/HistoryPage.vue';
  68. import SetPositionPage from './SetPositionPage/SetPositionPage.vue';
  69. import bookManager from './share/bookManager';
  70. import readerApi from '../../api/reader';
  71. import {sleep} from '../../share/utils';
  72. export default @Component({
  73. components: {
  74. LoaderPage,
  75. TextPage,
  76. ProgressPage,
  77. HistoryPage,
  78. SetPositionPage,
  79. },
  80. watch: {
  81. bookPos: function(newValue) {
  82. if (newValue !== undefined && this.activePage == 'TextPage') {
  83. const textPage = this.$refs.page;
  84. if (textPage.bookPos != newValue) {
  85. textPage.bookPos = newValue;
  86. }
  87. if (this.lastOpenedBook && this.lastOpenedBook.bookPos != newValue) {
  88. this.commit('reader/setOpenedBook', Object.assign({}, this.lastOpenedBook, {bookPos: newValue, bookPosSeen: this.bookPosSeen}));
  89. }
  90. }
  91. },
  92. routeParamPos: function(newValue) {
  93. if (newValue !== undefined && newValue != this.bookPos) {
  94. this.bookPos = newValue;
  95. }
  96. },
  97. routeParamUrl: function(newValue) {
  98. if (newValue !== '' && newValue !== this.lastOpenedBook.url) {
  99. this.loadBook({url: newValue, bookPos: this.routeParamPos});
  100. }
  101. },
  102. },
  103. })
  104. class Reader extends Vue {
  105. loaderActive = false;
  106. progressActive = false;
  107. fullScreenActive = false;
  108. scrollingActive = false;
  109. searchActive = false;
  110. copyTextActive = false;
  111. historyActive = false;
  112. setPositionActive = false;
  113. bookPos = null;
  114. allowUrlParamBookPos = true;
  115. showRefreshIcon = true;
  116. created() {
  117. this.commit = this.$store.commit;
  118. this.dispatch = this.$store.dispatch;
  119. this.reader = this.$store.state.reader;
  120. this.$root.addKeyHook(this.keyHook);
  121. this.lastActivePage = false;
  122. document.addEventListener('fullscreenchange', () => {
  123. this.fullScreenActive = (document.fullscreenElement !== null);
  124. });
  125. }
  126. mounted() {
  127. /*while (this.lastOpenedBook) {
  128. this.commit('reader/delOpenedBook', this.lastOpenedBook);
  129. }*/
  130. if (this.$root.rootRoute == '/reader') {
  131. if (this.routeParamUrl) {
  132. this.loadBook({url: this.routeParamUrl, bookPos: this.routeParamPos});
  133. } else if (this.lastOpenedBook) {
  134. this.loadBook({url: this.lastOpenedBook.url});
  135. } else {
  136. this.loaderActive = true;
  137. }
  138. }
  139. }
  140. get routeParamPos() {
  141. let result = undefined;
  142. const q = this.$route.query;
  143. if (q['__p']) {
  144. result = q['__p'];
  145. if (Array.isArray(result))
  146. result = result[0];
  147. }
  148. return (result ? parseInt(result, 10) || 0 : result);
  149. }
  150. updateRoute(isNewRoute) {
  151. const pos = (this.bookPos != undefined && this.allowUrlParamBookPos ? `__p=${this.bookPos}&` : '');
  152. if (isNewRoute)
  153. this.$router.push(`/reader?${pos}url=${this.lastOpenedBook.url}`);
  154. else
  155. this.$router.replace(`/reader?${pos}url=${this.lastOpenedBook.url}`);
  156. }
  157. get routeParamUrl() {
  158. let result = '';
  159. const path = this.$route.fullPath;
  160. const i = path.indexOf('url=');
  161. if (i >= 0) {
  162. result = path.substr(i + 4);
  163. }
  164. return decodeURIComponent(result);
  165. }
  166. bookPosChanged(event) {
  167. if (event.bookPosSeen !== undefined)
  168. this.bookPosSeen = event.bookPosSeen;
  169. this.bookPos = event.bookPos;
  170. this.updateRoute();
  171. }
  172. get toolBarActive() {
  173. return this.reader.toolBarActive;
  174. }
  175. get lastOpenedBook() {
  176. const result = this.$store.getters['reader/lastOpenedBook'];
  177. if (!result) {
  178. this.closeAllTextPages();
  179. this.historyActive = false;
  180. }
  181. return result;
  182. }
  183. toolBarToggle() {
  184. this.commit('reader/setToolBarActive', !this.toolBarActive);
  185. this.$root.$emit('resize');
  186. }
  187. fullScreenToggle() {
  188. this.fullScreenActive = !this.fullScreenActive;
  189. if (this.fullScreenActive) {
  190. const element = document.documentElement;
  191. if (element.requestFullscreen) {
  192. element.requestFullscreen();
  193. } else if (element.webkitrequestFullscreen) {
  194. element.webkitRequestFullscreen();
  195. } else if (element.mozRequestFullscreen) {
  196. element.mozRequestFullScreen();
  197. }
  198. } else {
  199. if (document.cancelFullScreen) {
  200. document.cancelFullScreen();
  201. } else if (document.mozCancelFullScreen) {
  202. document.mozCancelFullScreen();
  203. } else if (document.webkitCancelFullScreen) {
  204. document.webkitCancelFullScreen();
  205. }
  206. }
  207. }
  208. closeAllTextPages() {
  209. this.setPositionActive = false;
  210. }
  211. loaderToggle() {
  212. this.loaderActive = !this.loaderActive;
  213. if (this.loaderActive) {
  214. this.closeAllTextPages();
  215. }
  216. }
  217. historyToggle() {
  218. this.historyActive = !this.historyActive;
  219. if (this.historyActive) {
  220. this.closeAllTextPages();
  221. this.historyActive = true;
  222. } else {
  223. this.historyActive = false;
  224. }
  225. }
  226. setPositionToggle() {
  227. this.setPositionActive = !this.setPositionActive;
  228. if (this.setPositionActive && this.activePage == 'TextPage' && this.lastOpenedBook) {
  229. this.closeAllTextPages();
  230. this.setPositionActive = true;
  231. this.$nextTick(() => {
  232. this.$refs.setPositionPage.sliderMax = this.lastOpenedBook.textLength - 1;
  233. this.$refs.setPositionPage.sliderValue = this.lastOpenedBook.bookPos;
  234. });
  235. } else {
  236. this.setPositionActive = false;
  237. }
  238. }
  239. buttonClick(button) {
  240. switch (button) {
  241. case 'loader':
  242. this.loaderToggle();
  243. break;
  244. case 'fullScreen':
  245. this.fullScreenToggle();
  246. break;
  247. case 'history':
  248. this.historyToggle();
  249. break;
  250. case 'setPosition':
  251. this.setPositionToggle();
  252. break;
  253. case 'refresh':
  254. if (this.lastOpenedBook) {
  255. this.loadBook({url: this.lastOpenedBook.url, force: true});
  256. }
  257. break;
  258. }
  259. this.$refs[button].$el.blur();
  260. }
  261. buttonActiveClass(button) {
  262. const classActive = { 'tool-button-active': true, 'tool-button-active:hover': true };
  263. const classDisabled = { 'tool-button-disabled': true, 'tool-button-disabled:hover': true };
  264. let classResult = {};
  265. switch (button) {
  266. case 'loader':
  267. case 'fullScreen':
  268. case 'setPosition':
  269. case 'scrolling':
  270. case 'search':
  271. case 'copyText':
  272. case 'history':
  273. if (this[`${button}Active`])
  274. classResult = classActive;
  275. break;
  276. }
  277. if (this.activePage == 'LoaderPage' || !this.lastOpenedBook) {
  278. switch (button) {
  279. case 'undoAction':
  280. case 'redoAction':
  281. case 'setPosition':
  282. case 'scrolling':
  283. case 'search':
  284. case 'copyText':
  285. classResult = classDisabled;
  286. break;
  287. case 'history':
  288. case 'refresh':
  289. if (!this.lastOpenedBook)
  290. classResult = classDisabled;
  291. break;
  292. }
  293. }
  294. return classResult;
  295. }
  296. get activePage() {
  297. let result = '';
  298. if (this.progressActive)
  299. result = 'ProgressPage';
  300. else if (this.loaderActive)
  301. result = 'LoaderPage';
  302. else if (this.lastOpenedBook)
  303. result = 'TextPage';
  304. if (!result) {
  305. this.loaderActive = true;
  306. result = 'LoaderPage';
  307. }
  308. if (result != 'TextPage') {
  309. this.$root.$emit('set-app-title');
  310. }
  311. if (this.lastActivePage != result && result == 'TextPage') {
  312. //акивируем страницу с текстом
  313. this.$nextTick(async() => {
  314. const last = this.lastOpenedBook;
  315. const isParsed = await bookManager.hasBookParsed(last);
  316. if (!isParsed) {
  317. this.$root.$emit('set-app-title');
  318. return;
  319. }
  320. this.updateRoute();
  321. const textPage = this.$refs.page;
  322. if (textPage.showBook) {
  323. textPage.lastBook = last;
  324. textPage.bookPos = (last.bookPos !== undefined ? last.bookPos : 0);
  325. textPage.showBook();
  326. }
  327. });
  328. }
  329. this.lastActivePage = result;
  330. return result;
  331. }
  332. loadBook(opts) {
  333. this.closeAllTextPages();
  334. this.progressActive = true;
  335. this.$nextTick(async() => {
  336. const progress = this.$refs.page;
  337. try {
  338. progress.show();
  339. progress.setState({state: 'parse'});
  340. // есть ли среди истории OpenedBook
  341. const key = bookManager.keyFromUrl(opts.url);
  342. let wasOpened = this.reader.openedBook[key];
  343. wasOpened = (wasOpened ? wasOpened : {});
  344. const bookPos = (opts.bookPos !== undefined ? opts.bookPos : wasOpened.bookPos);
  345. const bookPosSeen = (opts.bookPos !== undefined ? opts.bookPos : wasOpened.bookPosSeen);
  346. let book = null;
  347. if (!opts.force) {
  348. // пытаемся загрузить и распарсить книгу в менеджере из локального кеша
  349. const bookParsed = await bookManager.getBook({url: opts.url}, (prog) => {
  350. progress.setState({progress: prog});
  351. });
  352. // если есть в локальном кеше
  353. if (bookParsed) {
  354. this.commit('reader/setOpenedBook', Object.assign({bookPos, bookPosSeen}, bookManager.metaOnly(bookParsed)));
  355. this.loaderActive = false;
  356. progress.hide(); this.progressActive = false;
  357. this.blinkCachedLoadMessage();
  358. return;
  359. }
  360. // иначе идем на сервер
  361. // пытаемся загрузить готовый файл с сервера
  362. if (wasOpened.path) {
  363. try {
  364. const resp = await readerApi.loadCachedBook(wasOpened.path, (state) => {
  365. progress.setState(state);
  366. });
  367. book = Object.assign({}, wasOpened, {data: resp.data});
  368. } catch (e) {
  369. //молчим
  370. }
  371. }
  372. }
  373. progress.setState({totalSteps: 5});
  374. // не удалось, скачиваем книгу полностью с конвертацией
  375. let loadCached = true;
  376. if (!book) {
  377. book = await readerApi.loadBook(opts.url, (state) => {
  378. progress.setState(state);
  379. });
  380. loadCached = false;
  381. }
  382. // добавляем в bookManager
  383. progress.setState({state: 'parse', step: 5});
  384. const addedBook = await bookManager.addBook(book, (prog) => {
  385. progress.setState({progress: prog});
  386. });
  387. // добавляем в историю
  388. this.commit('reader/setOpenedBook', Object.assign({bookPos, bookPosSeen}, bookManager.metaOnly(addedBook)));
  389. this.updateRoute(true);
  390. this.loaderActive = false;
  391. progress.hide(); this.progressActive = false;
  392. if (loadCached) {
  393. this.blinkCachedLoadMessage();
  394. } else
  395. this.stopBlink = true;
  396. } catch (e) {
  397. progress.hide(); this.progressActive = false;
  398. this.loaderActive = true;
  399. this.$alert(e.message, 'Ошибка', {type: 'error'});
  400. }
  401. });
  402. }
  403. blinkCachedLoadMessage() {
  404. this.blinkCount = 30;
  405. if (!this.inBlink) {
  406. this.inBlink = true;
  407. this.stopBlink = false;
  408. this.$nextTick(async() => {
  409. let page = this.$refs.page;
  410. while (this.blinkCount) {
  411. this.showRefreshIcon = !this.showRefreshIcon;
  412. if (page.blinkCachedLoadMessage)
  413. page.blinkCachedLoadMessage(this.showRefreshIcon);
  414. await sleep(500);
  415. if (this.stopBlink)
  416. break;
  417. this.blinkCount--;
  418. page = this.$refs.page;
  419. }
  420. this.showRefreshIcon = true;
  421. this.inBlink = false;
  422. if (page.blinkCachedLoadMessage)
  423. page.blinkCachedLoadMessage('finish');
  424. });
  425. }
  426. }
  427. keyHook(event) {
  428. if (this.$root.rootRoute == '/reader') {
  429. let handled = false;
  430. if (!handled && this.historyActive)
  431. handled = this.$refs.historyPage.keyHook(event);
  432. if (!handled && this.setPositionActive)
  433. handled = this.$refs.setPositionPage.keyHook(event);
  434. if (!handled && this.$refs.page && this.$refs.page.keyHook)
  435. handled = this.$refs.page.keyHook(event);
  436. if (!handled && event.type == 'keydown') {
  437. switch (event.code) {
  438. case 'Escape':
  439. this.loaderToggle();
  440. break;
  441. case 'KeyH':
  442. this.historyToggle();
  443. break;
  444. case 'KeyP':
  445. this.setPositionToggle();
  446. break;
  447. }
  448. }
  449. }
  450. }
  451. }
  452. //-----------------------------------------------------------------------------
  453. </script>
  454. <style scoped>
  455. .el-container {
  456. padding: 0;
  457. margin: 0;
  458. height: 100%;
  459. }
  460. .el-header {
  461. padding-left: 5px;
  462. padding-right: 5px;
  463. background-color: #1B695F;
  464. color: #000;
  465. overflow-x: auto;
  466. overflow-y: hidden;
  467. }
  468. .header {
  469. display: flex;
  470. justify-content: space-between;
  471. min-width: 550px;
  472. }
  473. .el-main {
  474. position: relative;
  475. display: flex;
  476. padding: 0;
  477. margin: 0;
  478. background-color: #EBE2C9;
  479. color: #000;
  480. }
  481. .tool-button {
  482. margin: 0;
  483. margin-left: 2px;
  484. margin-right: 2px;
  485. padding: 0;
  486. color: #3E843E;
  487. background-color: #E6EDF4;
  488. margin-top: 5px;
  489. height: 38px;
  490. width: 38px;
  491. border: 0;
  492. box-shadow: 3px 3px 5px black;
  493. }
  494. .tool-button:hover {
  495. background-color: white;
  496. }
  497. .tool-button-active {
  498. box-shadow: 0 0 0;
  499. color: white;
  500. background-color: #8AB45F;
  501. position: relative;
  502. top: 1px;
  503. left: 1px;
  504. }
  505. .tool-button-active:hover {
  506. color: white;
  507. background-color: #81C581;
  508. }
  509. .tool-button-disabled {
  510. color: lightgray;
  511. background-color: gray;
  512. }
  513. .tool-button-disabled:hover {
  514. color: lightgray;
  515. background-color: gray;
  516. }
  517. i {
  518. font-size: 200%;
  519. }
  520. .space {
  521. width: 10px;
  522. display: inline-block;
  523. }
  524. .clear {
  525. color: rgba(0,0,0,0);
  526. }
  527. </style>