Reader.vue 32 KB

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