Reader.vue 33 KB

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