Reader.vue 29 KB

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