Reader.vue 23 KB

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