Reader.vue 34 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015
  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="scrolling" class="tool-button" :class="buttonActiveClass('scrolling')" @click="buttonClick('scrolling')"><i class="el-icon-sort"></i></el-button>
  21. </el-tooltip>
  22. <el-tooltip content="Перелистнуть" :open-delay="1000" effect="light">
  23. <el-button ref="setPosition" class="tool-button" :class="buttonActiveClass('setPosition')" @click="buttonClick('setPosition')"><i class="el-icon-d-arrow-right"></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. @load-file="loadFile"
  51. @book-pos-changed="bookPosChanged"
  52. @tool-bar-toggle="toolBarToggle"
  53. @full-screen-toogle="fullScreenToggle"
  54. @stop-scrolling="stopScrolling"
  55. @scrolling-toggle="scrollingToggle"
  56. @help-toggle="helpToggle"
  57. @donate-toggle="donateToggle"
  58. ></component>
  59. </keep-alive>
  60. <SetPositionPage v-if="setPositionActive" ref="setPositionPage" @set-position-toggle="setPositionToggle" @book-pos-changed="bookPosChanged"></SetPositionPage>
  61. <SearchPage v-show="searchActive" ref="searchPage"
  62. @search-toggle="searchToggle"
  63. @book-pos-changed="bookPosChanged"
  64. @start-text-search="startTextSearch"
  65. @stop-text-search="stopTextSearch">
  66. </SearchPage>
  67. <CopyTextPage v-if="copyTextActive" ref="copyTextPage" @copy-text-toggle="copyTextToggle"></CopyTextPage>
  68. <HistoryPage v-show="historyActive" ref="historyPage" @load-book="loadBook" @history-toggle="historyToggle"></HistoryPage>
  69. <SettingsPage v-if="settingsActive" ref="settingsPage" @settings-toggle="settingsToggle"></SettingsPage>
  70. <HelpPage v-if="helpActive" ref="helpPage" @help-toggle="helpToggle"></HelpPage>
  71. <ClickMapPage v-show="clickMapActive" ref="clickMapPage"></ClickMapPage>
  72. <ServerStorage v-show="hidden" ref="serverStorage"></ServerStorage>
  73. </el-main>
  74. </el-container>
  75. </template>
  76. <script>
  77. //-----------------------------------------------------------------------------
  78. import Vue from 'vue';
  79. import Component from 'vue-class-component';
  80. import _ from 'lodash';
  81. import {Buffer} from 'safe-buffer';
  82. import LoaderPage from './LoaderPage/LoaderPage.vue';
  83. import TextPage from './TextPage/TextPage.vue';
  84. import ProgressPage from './ProgressPage/ProgressPage.vue';
  85. import SetPositionPage from './SetPositionPage/SetPositionPage.vue';
  86. import SearchPage from './SearchPage/SearchPage.vue';
  87. import CopyTextPage from './CopyTextPage/CopyTextPage.vue';
  88. import HistoryPage from './HistoryPage/HistoryPage.vue';
  89. import SettingsPage from './SettingsPage/SettingsPage.vue';
  90. import HelpPage from './HelpPage/HelpPage.vue';
  91. import ClickMapPage from './ClickMapPage/ClickMapPage.vue';
  92. import ServerStorage from './ServerStorage/ServerStorage.vue';
  93. import bookManager from './share/bookManager';
  94. import readerApi from '../../api/reader';
  95. import * as utils from '../../share/utils';
  96. export default @Component({
  97. components: {
  98. LoaderPage,
  99. TextPage,
  100. ProgressPage,
  101. SetPositionPage,
  102. SearchPage,
  103. CopyTextPage,
  104. HistoryPage,
  105. SettingsPage,
  106. HelpPage,
  107. ClickMapPage,
  108. ServerStorage,
  109. },
  110. watch: {
  111. bookPos: function(newValue) {
  112. if (newValue !== undefined && this.activePage == 'TextPage') {
  113. const textPage = this.$refs.page;
  114. if (textPage.bookPos != newValue) {
  115. textPage.bookPos = newValue;
  116. }
  117. this.debouncedSetRecentBook(newValue);
  118. }
  119. },
  120. routeParamPos: function(newValue) {
  121. if (newValue !== undefined && newValue != this.bookPos) {
  122. this.bookPos = newValue;
  123. }
  124. },
  125. routeParamUrl: function(newValue) {
  126. if (newValue !== '' && newValue !== this.mostRecentBook().url) {
  127. this.loadBook({url: newValue, bookPos: this.routeParamPos});
  128. }
  129. },
  130. settings: function() {
  131. this.loadSettings();
  132. this.updateRoute();
  133. },
  134. loaderActive: function(newValue) {
  135. const recent = this.mostRecentBook();
  136. if (!newValue && !this.loading && recent && !bookManager.hasBookParsed(recent)) {
  137. this.loadBook(recent);
  138. }
  139. },
  140. },
  141. })
  142. class Reader extends Vue {
  143. loaderActive = false;
  144. progressActive = false;
  145. fullScreenActive = false;
  146. scrollingActive = false;
  147. setPositionActive = false;
  148. searchActive = false;
  149. copyTextActive = false;
  150. historyActive = false;
  151. settingsActive = false;
  152. helpActive = false;
  153. clickMapActive = false;
  154. bookPos = null;
  155. allowUrlParamBookPos = false;
  156. showRefreshIcon = true;
  157. mostRecentBookReactive = null;
  158. actionList = [];
  159. actionCur = -1;
  160. hidden = false;
  161. created() {
  162. this.loading = true;
  163. this.commit = this.$store.commit;
  164. this.dispatch = this.$store.dispatch;
  165. this.reader = this.$store.state.reader;
  166. this.config = this.$store.state.config;
  167. this.$root.addKeyHook(this.keyHook);
  168. this.lastActivePage = false;
  169. this.debouncedUpdateRoute = _.debounce(() => {
  170. this.updateRoute();
  171. }, 1000);
  172. this.debouncedSetRecentBook = _.debounce(async(newValue) => {
  173. const recent = this.mostRecentBook();
  174. if (recent && (recent.bookPos != newValue || recent.bookPosSeen !== this.bookPosSeen)) {
  175. await bookManager.setRecentBook(Object.assign({}, recent, {bookPos: newValue, bookPosSeen: this.bookPosSeen}));
  176. if (this.actionCur < 0 || (this.actionCur >= 0 && this.actionList[this.actionCur] != newValue))
  177. this.addAction(newValue);
  178. }
  179. }, 500);
  180. this.debouncedSaveRecent = _.debounce(async() => {
  181. const serverStorage = this.$refs.serverStorage;
  182. while (!serverStorage.inited) await utils.sleep(1000);
  183. await serverStorage.saveRecent();
  184. }, 1000);
  185. this.debouncedSaveRecentLast = _.debounce(async() => {
  186. const serverStorage = this.$refs.serverStorage;
  187. while (!serverStorage.inited) await utils.sleep(1000);
  188. await serverStorage.saveRecentLast();
  189. }, 1000);
  190. document.addEventListener('fullscreenchange', () => {
  191. this.fullScreenActive = (document.fullscreenElement !== null);
  192. });
  193. this.loadSettings();
  194. }
  195. mounted() {
  196. (async() => {
  197. await bookManager.init(this.settings);
  198. bookManager.addEventListener(this.bookManagerEvent);
  199. if (this.$root.rootRoute == '/reader') {
  200. if (this.routeParamUrl) {
  201. await this.loadBook({url: this.routeParamUrl, bookPos: this.routeParamPos});
  202. } else {
  203. this.loaderActive = true;
  204. }
  205. }
  206. this.checkSetStorageAccessKey();
  207. this.loading = false;
  208. })();
  209. }
  210. loadSettings() {
  211. const settings = this.settings;
  212. this.allowUrlParamBookPos = settings.allowUrlParamBookPos;
  213. this.copyFullText = settings.copyFullText;
  214. this.showClickMapPage = settings.showClickMapPage;
  215. this.clickControl = settings.clickControl;
  216. this.blinkCachedLoad = settings.blinkCachedLoad;
  217. }
  218. checkSetStorageAccessKey() {
  219. const q = this.$route.query;
  220. if (q['setStorageAccessKey']) {
  221. this.$router.replace(`/reader`);
  222. this.settingsToggle();
  223. this.$nextTick(() => {
  224. this.$refs.settingsPage.enterServerStorageKey(
  225. Buffer.from(utils.fromBase58(q['setStorageAccessKey'])).toString()
  226. );
  227. });
  228. }
  229. }
  230. get routeParamPos() {
  231. let result = undefined;
  232. const q = this.$route.query;
  233. if (q['__p']) {
  234. result = q['__p'];
  235. if (Array.isArray(result))
  236. result = result[0];
  237. }
  238. return (result ? parseInt(result, 10) || 0 : result);
  239. }
  240. updateRoute(isNewRoute) {
  241. if (this.loading)
  242. return;
  243. const recent = this.mostRecentBook();
  244. const pos = (recent && recent.bookPos && this.allowUrlParamBookPos ? `__p=${recent.bookPos}&` : '');
  245. const url = (recent ? `url=${recent.url}` : '');
  246. if (isNewRoute)
  247. this.$router.push(`/reader?${pos}${url}`);
  248. else
  249. this.$router.replace(`/reader?${pos}${url}`);
  250. }
  251. get routeParamUrl() {
  252. let result = '';
  253. const path = this.$route.fullPath;
  254. const i = path.indexOf('url=');
  255. if (i >= 0) {
  256. result = path.substr(i + 4);
  257. }
  258. return decodeURIComponent(result);
  259. }
  260. bookPosChanged(event) {
  261. if (event.bookPosSeen !== undefined)
  262. this.bookPosSeen = event.bookPosSeen;
  263. this.bookPos = event.bookPos;
  264. this.debouncedUpdateRoute();
  265. }
  266. async bookManagerEvent(eventName) {
  267. const serverStorage = this.$refs.serverStorage;
  268. if (eventName == 'load-meta-finish') {
  269. serverStorage.init();
  270. const result = await bookManager.cleanRecentBooks();
  271. if (result)
  272. this.debouncedSaveRecent();
  273. }
  274. if (eventName == 'recent-changed' || eventName == 'save-recent') {
  275. if (this.historyActive) {
  276. this.$refs.historyPage.updateTableData();
  277. }
  278. (async() => {
  279. const oldBook = this.mostRecentBookReactive;
  280. const newBook = bookManager.mostRecentBook();
  281. if (oldBook && newBook) {
  282. if (oldBook.key != newBook.key) {
  283. this.loadingBook = true;
  284. try {
  285. await this.loadBook(newBook);
  286. } finally {
  287. this.loadingBook = false;
  288. }
  289. } else if (oldBook.bookPos != newBook.bookPos) {
  290. while (this.loadingBook) await utils.sleep(100);
  291. this.bookPosChanged({bookPos: newBook.bookPos});
  292. }
  293. }
  294. if (eventName == 'recent-changed') {
  295. this.debouncedSaveRecentLast();
  296. } else {
  297. this.debouncedSaveRecent();
  298. }
  299. })();
  300. }
  301. }
  302. get toolBarActive() {
  303. return this.reader.toolBarActive;
  304. }
  305. mostRecentBook() {
  306. const result = bookManager.mostRecentBook();
  307. this.mostRecentBookReactive = result;
  308. return result;
  309. }
  310. get settings() {
  311. return this.$store.state.reader.settings;
  312. }
  313. addAction(pos) {
  314. let a = this.actionList;
  315. if (!a.length || a[a.length - 1] != pos) {
  316. a.push(pos);
  317. if (a.length > 20)
  318. a.shift();
  319. this.actionCur = a.length - 1;
  320. }
  321. }
  322. toolBarToggle() {
  323. this.commit('reader/setToolBarActive', !this.toolBarActive);
  324. this.$root.$emit('resize');
  325. }
  326. fullScreenToggle() {
  327. this.fullScreenActive = !this.fullScreenActive;
  328. if (this.fullScreenActive) {
  329. const element = document.documentElement;
  330. if (element.requestFullscreen) {
  331. element.requestFullscreen();
  332. } else if (element.webkitrequestFullscreen) {
  333. element.webkitRequestFullscreen();
  334. } else if (element.mozRequestFullscreen) {
  335. element.mozRequestFullScreen();
  336. }
  337. } else {
  338. if (document.cancelFullScreen) {
  339. document.cancelFullScreen();
  340. } else if (document.mozCancelFullScreen) {
  341. document.mozCancelFullScreen();
  342. } else if (document.webkitCancelFullScreen) {
  343. document.webkitCancelFullScreen();
  344. }
  345. }
  346. }
  347. closeAllTextPages() {
  348. this.setPositionActive = false;
  349. this.copyTextActive = false;
  350. this.historyActive = false;
  351. this.settingsActive = false;
  352. this.stopScrolling();
  353. this.stopSearch();
  354. this.helpActive = false;
  355. }
  356. loaderToggle() {
  357. this.loaderActive = !this.loaderActive;
  358. if (this.loaderActive) {
  359. this.closeAllTextPages();
  360. }
  361. }
  362. setPositionToggle() {
  363. this.setPositionActive = !this.setPositionActive;
  364. if (this.setPositionActive && this.activePage == 'TextPage' && this.mostRecentBook()) {
  365. this.closeAllTextPages();
  366. this.setPositionActive = true;
  367. this.$nextTick(() => {
  368. const recent = this.mostRecentBook();
  369. this.$refs.setPositionPage.init(recent.bookPos, recent.textLength - 1);
  370. });
  371. } else {
  372. this.setPositionActive = false;
  373. }
  374. }
  375. stopScrolling() {
  376. if (this.scrollingActive)
  377. this.scrollingToggle();
  378. }
  379. scrollingToggle() {
  380. this.scrollingActive = !this.scrollingActive;
  381. if (this.activePage == 'TextPage') {
  382. const page = this.$refs.page;
  383. if (this.scrollingActive) {
  384. page.startTextScrolling();
  385. } else {
  386. page.stopTextScrolling();
  387. }
  388. }
  389. }
  390. stopSearch() {
  391. if (this.searchActive)
  392. this.searchToggle();
  393. }
  394. startTextSearch(opts) {
  395. if (this.activePage == 'TextPage')
  396. this.$refs.page.startSearch(opts.needle);
  397. }
  398. stopTextSearch() {
  399. if (this.activePage == 'TextPage')
  400. this.$refs.page.stopSearch();
  401. }
  402. searchToggle() {
  403. this.searchActive = !this.searchActive;
  404. const page = this.$refs.page;
  405. if (this.searchActive && this.activePage == 'TextPage' && page.parsed) {
  406. this.closeAllTextPages();
  407. this.searchActive = true;
  408. this.$nextTick(() => {
  409. this.$refs.searchPage.init(page.parsed);
  410. });
  411. } else {
  412. this.stopTextSearch();
  413. this.searchActive = false;
  414. }
  415. }
  416. copyTextToggle() {
  417. this.copyTextActive = !this.copyTextActive;
  418. const page = this.$refs.page;
  419. if (this.copyTextActive && this.activePage == 'TextPage' && page.parsed) {
  420. this.closeAllTextPages();
  421. this.copyTextActive = true;
  422. this.$nextTick(() => {
  423. this.$refs.copyTextPage.init(this.mostRecentBook().bookPos, page.parsed, this.copyFullText);
  424. });
  425. } else {
  426. this.copyTextActive = false;
  427. }
  428. }
  429. historyToggle() {
  430. this.historyActive = !this.historyActive;
  431. if (this.historyActive) {
  432. this.closeAllTextPages();
  433. this.$refs.historyPage.init();
  434. this.historyActive = true;
  435. } else {
  436. this.historyActive = false;
  437. }
  438. }
  439. settingsToggle() {
  440. this.settingsActive = !this.settingsActive;
  441. if (this.settingsActive) {
  442. this.closeAllTextPages();
  443. this.settingsActive = true;
  444. } else {
  445. this.settingsActive = false;
  446. }
  447. }
  448. helpToggle() {
  449. this.helpActive = !this.helpActive;
  450. if (this.helpActive) {
  451. this.closeAllTextPages();
  452. this.helpActive = true;
  453. }
  454. }
  455. donateToggle() {
  456. this.helpToggle();
  457. if (this.helpActive) {
  458. this.$nextTick(() => {
  459. this.$refs.helpPage.activateDonateHelpPage();
  460. });
  461. }
  462. }
  463. refreshBook() {
  464. if (this.mostRecentBook()) {
  465. this.loadBook({url: this.mostRecentBook().url, force: true});
  466. }
  467. }
  468. buttonClick(button) {
  469. const activeClass = this.buttonActiveClass(button);
  470. this.$refs[button].$el.blur();
  471. if (activeClass['tool-button-disabled'])
  472. return;
  473. switch (button) {
  474. case 'loader':
  475. this.loaderToggle();
  476. break;
  477. case 'undoAction':
  478. if (this.actionCur > 0) {
  479. this.actionCur--;
  480. this.bookPosChanged({bookPos: this.actionList[this.actionCur]});
  481. }
  482. break;
  483. case 'redoAction':
  484. if (this.actionCur < this.actionList.length - 1) {
  485. this.actionCur++;
  486. this.bookPosChanged({bookPos: this.actionList[this.actionCur]});
  487. }
  488. break;
  489. case 'fullScreen':
  490. this.fullScreenToggle();
  491. break;
  492. case 'setPosition':
  493. this.setPositionToggle();
  494. break;
  495. case 'scrolling':
  496. this.scrollingToggle();
  497. break;
  498. case 'search':
  499. this.searchToggle();
  500. break;
  501. case 'copyText':
  502. this.copyTextToggle();
  503. break;
  504. case 'history':
  505. this.historyToggle();
  506. break;
  507. case 'refresh':
  508. this.refreshBook();
  509. break;
  510. case 'settings':
  511. this.settingsToggle();
  512. break;
  513. }
  514. }
  515. buttonActiveClass(button) {
  516. const classActive = { 'tool-button-active': true, 'tool-button-active:hover': true };
  517. const classDisabled = { 'tool-button-disabled': true, 'tool-button-disabled:hover': true };
  518. let classResult = {};
  519. switch (button) {
  520. case 'loader':
  521. case 'fullScreen':
  522. case 'setPosition':
  523. case 'scrolling':
  524. case 'search':
  525. case 'copyText':
  526. case 'history':
  527. case 'settings':
  528. if (this[`${button}Active`])
  529. classResult = classActive;
  530. break;
  531. }
  532. switch (button) {
  533. case 'undoAction':
  534. if (this.actionCur <= 0)
  535. classResult = classDisabled;
  536. break;
  537. case 'redoAction':
  538. if (this.actionCur == this.actionList.length - 1)
  539. classResult = classDisabled;
  540. break;
  541. }
  542. if (this.activePage == 'LoaderPage' || !this.mostRecentBook()) {
  543. switch (button) {
  544. case 'undoAction':
  545. case 'redoAction':
  546. case 'setPosition':
  547. case 'scrolling':
  548. case 'search':
  549. case 'copyText':
  550. classResult = classDisabled;
  551. break;
  552. case 'history':
  553. case 'refresh':
  554. if (!this.mostRecentBook())
  555. classResult = classDisabled;
  556. break;
  557. }
  558. }
  559. return classResult;
  560. }
  561. async activateClickMapPage() {
  562. if (this.clickControl && this.showClickMapPage && !this.clickMapActive) {
  563. this.clickMapActive = true;
  564. await this.$refs.clickMapPage.slowDisappear();
  565. this.clickMapActive = false;
  566. }
  567. }
  568. get activePage() {
  569. let result = '';
  570. if (this.progressActive)
  571. result = 'ProgressPage';
  572. else if (this.loaderActive)
  573. result = 'LoaderPage';
  574. else if (this.mostRecentBookReactive)
  575. result = 'TextPage';
  576. if (!result && !this.loading) {
  577. this.loaderActive = true;
  578. result = 'LoaderPage';
  579. }
  580. if (result != 'TextPage') {
  581. this.$root.$emit('set-app-title');
  582. }
  583. // на LoaderPage всегда показываем toolBar
  584. if (result == 'LoaderPage' && !this.toolBarActive) {
  585. this.toolBarToggle();
  586. }
  587. if (this.lastActivePage != result && result == 'TextPage') {
  588. //акивируем страницу с текстом
  589. this.$nextTick(async() => {
  590. const last = this.mostRecentBookReactive;
  591. const isParsed = bookManager.hasBookParsed(last);
  592. if (!isParsed) {
  593. this.$root.$emit('set-app-title');
  594. return;
  595. }
  596. this.updateRoute();
  597. const textPage = this.$refs.page;
  598. if (textPage.showBook) {
  599. textPage.lastBook = last;
  600. textPage.bookPos = (last.bookPos !== undefined ? last.bookPos : 0);
  601. textPage.showBook();
  602. }
  603. });
  604. }
  605. this.lastActivePage = result;
  606. return result;
  607. }
  608. async loadBook(opts) {
  609. if (!opts || !opts.url) {
  610. this.mostRecentBook();
  611. return;
  612. }
  613. let url = opts.url;
  614. if ((url.indexOf('http://') != 0) && (url.indexOf('https://') != 0) &&
  615. (url.indexOf('file://') != 0))
  616. url = 'http://' + url;
  617. // уже просматривается сейчас
  618. const lastBook = (this.$refs.page ? this.$refs.page.lastBook : null);
  619. if (!opts.force && lastBook && lastBook.url == url && bookManager.hasBookParsed(lastBook)) {
  620. this.loaderActive = false;
  621. return;
  622. }
  623. this.progressActive = true;
  624. await this.$nextTick()
  625. const progress = this.$refs.page;
  626. this.actionList = [];
  627. this.actionCur = -1;
  628. try {
  629. progress.show();
  630. progress.setState({state: 'parse'});
  631. // есть ли среди недавних
  632. const key = bookManager.keyFromUrl(url);
  633. let wasOpened = await bookManager.getRecentBook({key});
  634. wasOpened = (wasOpened ? wasOpened : {});
  635. const bookPos = (opts.bookPos !== undefined ? opts.bookPos : wasOpened.bookPos);
  636. const bookPosSeen = (opts.bookPos !== undefined ? opts.bookPos : wasOpened.bookPosSeen);
  637. let book = null;
  638. if (!opts.force) {
  639. // пытаемся загрузить и распарсить книгу в менеджере из локального кэша
  640. const bookParsed = await bookManager.getBook({url}, (prog) => {
  641. progress.setState({progress: prog});
  642. });
  643. // если есть в локальном кэше
  644. if (bookParsed) {
  645. await bookManager.setRecentBook(Object.assign({bookPos, bookPosSeen}, bookParsed));
  646. this.mostRecentBook();
  647. this.addAction(bookPos);
  648. this.loaderActive = false;
  649. progress.hide(); this.progressActive = false;
  650. this.blinkCachedLoadMessage();
  651. await this.activateClickMapPage();
  652. return;
  653. }
  654. // иначе идем на сервер
  655. // пытаемся загрузить готовый файл с сервера
  656. if (wasOpened.path) {
  657. try {
  658. const resp = await readerApi.loadCachedBook(wasOpened.path, (state) => {
  659. progress.setState(state);
  660. });
  661. book = Object.assign({}, wasOpened, {data: resp.data});
  662. } catch (e) {
  663. //молчим
  664. }
  665. }
  666. }
  667. progress.setState({totalSteps: 5});
  668. // не удалось, скачиваем книгу полностью с конвертацией
  669. let loadCached = true;
  670. if (!book) {
  671. book = await readerApi.loadBook(url, (state) => {
  672. progress.setState(state);
  673. });
  674. loadCached = false;
  675. }
  676. // добавляем в bookManager
  677. progress.setState({state: 'parse', step: 5});
  678. const addedBook = await bookManager.addBook(book, (prog) => {
  679. progress.setState({progress: prog});
  680. });
  681. // добавляем в историю
  682. await bookManager.setRecentBook(Object.assign({bookPos, bookPosSeen}, addedBook));
  683. this.mostRecentBook();
  684. this.addAction(bookPos);
  685. this.updateRoute(true);
  686. this.loaderActive = false;
  687. progress.hide(); this.progressActive = false;
  688. if (loadCached) {
  689. this.blinkCachedLoadMessage();
  690. } else
  691. this.stopBlink = true;
  692. await this.activateClickMapPage();
  693. } catch (e) {
  694. progress.hide(); this.progressActive = false;
  695. this.loaderActive = true;
  696. this.$alert(e.message, 'Ошибка', {type: 'error'});
  697. }
  698. }
  699. async loadFile(opts) {
  700. this.progressActive = true;
  701. await this.$nextTick();
  702. const progress = this.$refs.page;
  703. try {
  704. progress.show();
  705. progress.setState({state: 'upload'});
  706. const url = await readerApi.uploadFile(opts.file, this.config.maxUploadFileSize, (state) => {
  707. progress.setState(state);
  708. });
  709. progress.hide(); this.progressActive = false;
  710. await this.loadBook({url});
  711. } catch (e) {
  712. progress.hide(); this.progressActive = false;
  713. this.loaderActive = true;
  714. this.$alert(e.message, 'Ошибка', {type: 'error'});
  715. }
  716. }
  717. blinkCachedLoadMessage() {
  718. if (!this.blinkCachedLoad)
  719. return;
  720. this.blinkCount = 30;
  721. if (!this.inBlink) {
  722. this.inBlink = true;
  723. this.stopBlink = false;
  724. this.$nextTick(async() => {
  725. let page = this.$refs.page;
  726. while (this.blinkCount) {
  727. this.showRefreshIcon = !this.showRefreshIcon;
  728. if (page.blinkCachedLoadMessage)
  729. page.blinkCachedLoadMessage(this.showRefreshIcon);
  730. await utils.sleep(500);
  731. if (this.stopBlink)
  732. break;
  733. this.blinkCount--;
  734. page = this.$refs.page;
  735. }
  736. this.showRefreshIcon = true;
  737. this.inBlink = false;
  738. if (page.blinkCachedLoadMessage)
  739. page.blinkCachedLoadMessage('finish');
  740. });
  741. }
  742. }
  743. keyHook(event) {
  744. if (this.$root.rootRoute == '/reader') {
  745. let handled = false;
  746. if (!handled && this.helpActive)
  747. handled = this.$refs.helpPage.keyHook(event);
  748. if (!handled && this.settingsActive)
  749. handled = this.$refs.settingsPage.keyHook(event);
  750. if (!handled && this.historyActive)
  751. handled = this.$refs.historyPage.keyHook(event);
  752. if (!handled && this.setPositionActive)
  753. handled = this.$refs.setPositionPage.keyHook(event);
  754. if (!handled && this.searchActive)
  755. handled = this.$refs.searchPage.keyHook(event);
  756. if (!handled && this.copyTextActive)
  757. handled = this.$refs.copyTextPage.keyHook(event);
  758. if (!handled && this.$refs.page && this.$refs.page.keyHook)
  759. handled = this.$refs.page.keyHook(event);
  760. if (!handled && event.type == 'keydown') {
  761. if (event.code == 'Escape')
  762. this.loaderToggle();
  763. if (this.activePage == 'TextPage') {
  764. switch (event.code) {
  765. case 'KeyH':
  766. case 'F1':
  767. this.helpToggle();
  768. event.preventDefault();
  769. event.stopPropagation();
  770. break;
  771. case 'KeyZ':
  772. this.scrollingToggle();
  773. break;
  774. case 'KeyP':
  775. this.setPositionToggle();
  776. break;
  777. case 'KeyF':
  778. if (event.ctrlKey) {
  779. this.searchToggle();
  780. event.preventDefault();
  781. event.stopPropagation();
  782. }
  783. break;
  784. case 'KeyC':
  785. if (event.ctrlKey) {
  786. this.copyTextToggle();
  787. event.preventDefault();
  788. event.stopPropagation();
  789. }
  790. break;
  791. case 'KeyR':
  792. this.refreshBook();
  793. break;
  794. case 'KeyX':
  795. this.historyToggle();
  796. event.preventDefault();
  797. event.stopPropagation();
  798. break;
  799. case 'KeyS':
  800. this.settingsToggle();
  801. break;
  802. }
  803. }
  804. }
  805. }
  806. }
  807. }
  808. //-----------------------------------------------------------------------------
  809. </script>
  810. <style scoped>
  811. .el-container {
  812. padding: 0;
  813. margin: 0;
  814. height: 100%;
  815. }
  816. .el-header {
  817. padding-left: 5px;
  818. padding-right: 5px;
  819. background-color: #1B695F;
  820. color: #000;
  821. overflow-x: auto;
  822. overflow-y: hidden;
  823. }
  824. .header {
  825. display: flex;
  826. justify-content: space-between;
  827. min-width: 550px;
  828. }
  829. .el-main {
  830. position: relative;
  831. display: flex;
  832. padding: 0;
  833. margin: 0;
  834. background-color: #EBE2C9;
  835. color: #000;
  836. }
  837. .tool-button {
  838. margin: 0 2px 0 2px;
  839. padding: 0;
  840. color: #3E843E;
  841. background-color: #E6EDF4;
  842. margin-top: 5px;
  843. height: 38px;
  844. width: 38px;
  845. border: 0;
  846. box-shadow: 3px 3px 5px black;
  847. }
  848. .tool-button:hover {
  849. background-color: white;
  850. }
  851. .tool-button-active {
  852. box-shadow: 0 0 0;
  853. color: white;
  854. background-color: #8AB45F;
  855. position: relative;
  856. top: 1px;
  857. left: 1px;
  858. }
  859. .tool-button-active:hover {
  860. color: white;
  861. background-color: #81C581;
  862. }
  863. .tool-button-disabled {
  864. color: lightgray;
  865. background-color: gray;
  866. }
  867. .tool-button-disabled:hover {
  868. color: lightgray;
  869. background-color: gray;
  870. }
  871. i {
  872. font-size: 200%;
  873. }
  874. .space {
  875. width: 10px;
  876. display: inline-block;
  877. }
  878. .clear {
  879. color: rgba(0,0,0,0);
  880. }
  881. </style>