Reader.vue 46 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312
  1. <template>
  2. <div class="column no-wrap">
  3. <div ref="header" class="header" v-show="toolBarActive">
  4. <div ref="buttons" class="row justify-between no-wrap">
  5. <div>
  6. <button ref="loader" class="tool-button" :class="buttonActiveClass('loader')" @click="buttonClick('loader')" v-ripple>
  7. <q-icon name="la la-arrow-left" size="32px"/>
  8. <q-tooltip :delay="1500" anchor="bottom right" content-style="font-size: 80%">{{ rstore.readerActions['loader'] }}</q-tooltip>
  9. </button>
  10. </div>
  11. <div>
  12. <button ref="undoAction" v-show="showToolButton['undoAction']" class="tool-button" :class="buttonActiveClass('undoAction')" @click="buttonClick('undoAction')" v-ripple>
  13. <q-icon name="la la-angle-left" size="32px"/>
  14. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['undoAction'] }}</q-tooltip>
  15. </button>
  16. <button ref="redoAction" v-show="showToolButton['redoAction']" class="tool-button" :class="buttonActiveClass('redoAction')" @click="buttonClick('redoAction')" v-ripple>
  17. <q-icon name="la la-angle-right" size="32px"/>
  18. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['redoAction'] }}</q-tooltip>
  19. </button>
  20. <div class="space"></div>
  21. <button ref="fullScreen" v-show="showToolButton['fullScreen']" class="tool-button" :class="buttonActiveClass('fullScreen')" @click="buttonClick('fullScreen')" v-ripple>
  22. <q-icon :name="(fullScreenActive ? 'la la-compress-arrows-alt': 'la la-expand-arrows-alt')" size="32px"/>
  23. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['fullScreen'] }}</q-tooltip>
  24. </button>
  25. <button ref="scrolling" v-show="showToolButton['scrolling']" class="tool-button" :class="buttonActiveClass('scrolling')" @click="buttonClick('scrolling')" v-ripple>
  26. <q-icon name="la la-film" size="32px"/>
  27. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['scrolling'] }}</q-tooltip>
  28. </button>
  29. <button ref="setPosition" v-show="showToolButton['setPosition']" class="tool-button" :class="buttonActiveClass('setPosition')" @click="buttonClick('setPosition')" v-ripple>
  30. <q-icon name="la la-angle-double-right" size="32px"/>
  31. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['setPosition'] }}</q-tooltip>
  32. </button>
  33. <button ref="search" v-show="showToolButton['search']" class="tool-button" :class="buttonActiveClass('search')" @click="buttonClick('search')" v-ripple>
  34. <q-icon name="la la-search" size="32px"/>
  35. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['search'] }}</q-tooltip>
  36. </button>
  37. <button ref="copyText" v-show="showToolButton['copyText']" class="tool-button" :class="buttonActiveClass('copyText')" @click="buttonClick('copyText')" v-ripple>
  38. <q-icon name="la la-copy" size="32px"/>
  39. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['copyText'] }}</q-tooltip>
  40. </button>
  41. <button ref="convOptions" v-show="showToolButton['convOptions']" class="tool-button" :class="buttonActiveClass('convOptions')" @click="buttonClick('convOptions')" v-ripple>
  42. <q-icon name="la la-magic" size="32px"/>
  43. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['convOptions'] }}</q-tooltip>
  44. </button>
  45. <button ref="refresh" v-show="showToolButton['refresh']" class="tool-button" :class="buttonActiveClass('refresh')" @click="buttonClick('refresh')" v-ripple>
  46. <q-icon name="la la-sync" size="32px" :class="{clear: !showRefreshIcon}"/>
  47. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['refresh'] }}</q-tooltip>
  48. </button>
  49. <div class="space"></div>
  50. <button ref="contents" v-show="showToolButton['contents']" class="tool-button" :class="buttonActiveClass('contents')" @click="buttonClick('contents')" v-ripple>
  51. <q-icon name="la la-list" size="32px"/>
  52. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['contents'] }}</q-tooltip>
  53. </button>
  54. <button ref="libs" v-show="mode == 'liberama.top' && showToolButton['libs']" class="tool-button" :class="buttonActiveClass('libs')" @click="buttonClick('libs')" v-ripple>
  55. <q-icon name="la la-sitemap" size="32px"/>
  56. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['libs'] }}</q-tooltip>
  57. </button>
  58. <button ref="recentBooks" v-show="showToolButton['recentBooks']" class="tool-button" :class="buttonActiveClass('recentBooks')" @click="buttonClick('recentBooks')" v-ripple>
  59. <q-icon name="la la-book-open" size="32px"/>
  60. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['recentBooks'] }}</q-tooltip>
  61. </button>
  62. </div>
  63. <div>
  64. <button ref="offlineMode" v-show="showToolButton['offlineMode']" class="tool-button" :class="buttonActiveClass('offlineMode')" @click="buttonClick('offlineMode')" v-ripple>
  65. <q-icon name="la la-unlink" size="32px"/>
  66. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['offlineMode'] }}</q-tooltip>
  67. </button>
  68. <button ref="settings" class="tool-button" :class="buttonActiveClass('settings')" @click="buttonClick('settings')" v-ripple>
  69. <q-icon name="la la-cog" size="32px"/>
  70. <q-tooltip :delay="1500" anchor="bottom left" content-style="font-size: 80%">{{ rstore.readerActions['settings'] }}</q-tooltip>
  71. </button>
  72. </div>
  73. </div>
  74. </div>
  75. <div class="main col row relative-position">
  76. <keep-alive>
  77. <component ref="page" class="col" :is="activePage"
  78. @load-book="loadBook"
  79. @load-file="loadFile"
  80. @book-pos-changed="bookPosChanged"
  81. @do-action="doAction"
  82. ></component>
  83. </keep-alive>
  84. <SetPositionPage v-if="setPositionActive" ref="setPositionPage" @set-position-toggle="setPositionToggle" @book-pos-changed="bookPosChanged"></SetPositionPage>
  85. <SearchPage v-show="searchActive" ref="searchPage"
  86. @do-action="doAction"
  87. @book-pos-changed="bookPosChanged"
  88. @start-text-search="startTextSearch"
  89. @stop-text-search="stopTextSearch">
  90. </SearchPage>
  91. <CopyTextPage v-if="copyTextActive" ref="copyTextPage" @do-action="doAction"></CopyTextPage>
  92. <LibsPage v-show="hidden" ref="libsPage" @load-book="loadBook" @libs-close="libsClose" @do-action="doAction"></LibsPage>
  93. <RecentBooksPage v-show="recentBooksActive" ref="recentBooksPage" @load-book="loadBook" @recent-books-close="recentBooksClose"></RecentBooksPage>
  94. <SettingsPage v-show="settingsActive" ref="settingsPage" @do-action="doAction"></SettingsPage>
  95. <HelpPage v-if="helpActive" ref="helpPage" @do-action="doAction"></HelpPage>
  96. <ClickMapPage v-show="clickMapActive" ref="clickMapPage"></ClickMapPage>
  97. <ServerStorage v-show="hidden" ref="serverStorage"></ServerStorage>
  98. <ContentsPage v-show="contentsActive" ref="contentsPage" :book-pos="bookPos" :is-visible="contentsActive" @do-action="doAction" @book-pos-changed="bookPosChanged"></ContentsPage>
  99. <ReaderDialogs ref="dialogs" @donate-toggle="donateToggle" @version-history-toggle="versionHistoryToggle"></ReaderDialogs>
  100. </div>
  101. </div>
  102. </template>
  103. <script>
  104. //-----------------------------------------------------------------------------
  105. import Vue from 'vue';
  106. import Component from 'vue-class-component';
  107. import _ from 'lodash';
  108. import {Buffer} from 'safe-buffer';
  109. import LoaderPage from './LoaderPage/LoaderPage.vue';
  110. import TextPage from './TextPage/TextPage.vue';
  111. import ProgressPage from './ProgressPage/ProgressPage.vue';
  112. import SetPositionPage from './SetPositionPage/SetPositionPage.vue';
  113. import SearchPage from './SearchPage/SearchPage.vue';
  114. import CopyTextPage from './CopyTextPage/CopyTextPage.vue';
  115. import LibsPage from './LibsPage/LibsPage.vue';
  116. import RecentBooksPage from './RecentBooksPage/RecentBooksPage.vue';
  117. import SettingsPage from './SettingsPage/SettingsPage.vue';
  118. import HelpPage from './HelpPage/HelpPage.vue';
  119. import ClickMapPage from './ClickMapPage/ClickMapPage.vue';
  120. import ServerStorage from './ServerStorage/ServerStorage.vue';
  121. import ContentsPage from './ContentsPage/ContentsPage.vue';
  122. import ReaderDialogs from './ReaderDialogs/ReaderDialogs.vue';
  123. import bookManager from './share/bookManager';
  124. import rstore from '../../store/modules/reader';
  125. import readerApi from '../../api/reader';
  126. import miscApi from '../../api/misc';
  127. import {versionHistory} from './versionHistory';
  128. import * as utils from '../../share/utils';
  129. export default @Component({
  130. components: {
  131. LoaderPage,
  132. TextPage,
  133. ProgressPage,
  134. SetPositionPage,
  135. SearchPage,
  136. CopyTextPage,
  137. LibsPage,
  138. RecentBooksPage,
  139. SettingsPage,
  140. HelpPage,
  141. ClickMapPage,
  142. ServerStorage,
  143. ContentsPage,
  144. ReaderDialogs,
  145. },
  146. watch: {
  147. bookPos: function(newValue) {
  148. if (newValue !== undefined && this.activePage == 'TextPage') {
  149. const textPage = this.$refs.page;
  150. if (textPage.bookPos != newValue) {
  151. textPage.bookPos = newValue;
  152. }
  153. if (!this.scrollingActive)
  154. this.debouncedSetRecentBook(newValue);
  155. else
  156. this.scrollingSetRecentBook(newValue);
  157. }
  158. },
  159. routeParamPos: function(newValue) {
  160. if (!this.paramPosIgnore && newValue !== undefined && newValue != this.bookPos) {
  161. this.bookPos = newValue;
  162. }
  163. },
  164. routeParamUrl: function(newValue) {
  165. if (newValue !== '' && newValue !== this.mostRecentBook().url) {
  166. this.loadBook({url: newValue, bookPos: this.routeParamPos});
  167. }
  168. },
  169. settings: function() {
  170. this.loadSettings();
  171. this.updateRoute();
  172. },
  173. loaderActive: function(newValue) {
  174. (async() => {
  175. const recent = this.mostRecentBook();
  176. if (!newValue && !this.loading && recent && !await bookManager.hasBookParsed(recent)) {
  177. this.loadBook(recent);
  178. }
  179. })();
  180. },
  181. },
  182. })
  183. class Reader extends Vue {
  184. rstore = {};
  185. loaderActive = false;
  186. offlineModeActive = false;
  187. progressActive = false;
  188. fullScreenActive = false;
  189. scrollingActive = false;
  190. setPositionActive = false;
  191. searchActive = false;
  192. copyTextActive = false;
  193. libsActive = false;
  194. recentBooksActive = false;
  195. settingsActive = false;
  196. helpActive = false;
  197. clickMapActive = false;
  198. contentsActive = false;
  199. bookPos = null;
  200. allowUrlParamBookPos = false;
  201. showRefreshIcon = true;
  202. mostRecentBookReactive = null;
  203. showToolButton = {};
  204. actionList = [];
  205. actionCur = -1;
  206. hidden = false;
  207. whatsNewVisible = false;
  208. whatsNewContent = '';
  209. donationVisible = false;
  210. created() {
  211. this.rstore = rstore;
  212. this.loading = true;
  213. this.commit = this.$store.commit;
  214. this.reader = this.$store.state.reader;
  215. this.config = this.$store.state.config;
  216. this.$root.addKeyHook(this.keyHook);
  217. this.lastActivePage = false;
  218. this.debouncedSetRecentBook = _.debounce(async(newValue) => {
  219. const recent = this.mostRecentBook();
  220. if (recent && (recent.bookPos != newValue || recent.bookPosSeen !== this.bookPosSeen)) {
  221. await bookManager.setRecentBook(Object.assign({}, recent, {bookPos: newValue, bookPosSeen: this.bookPosSeen}));
  222. if (this.actionCur < 0 || (this.actionCur >= 0 && this.actionList[this.actionCur] != newValue))
  223. this.addAction(newValue);
  224. this.paramPosIgnore = true;
  225. this.updateRoute();
  226. await this.$nextTick();
  227. this.paramPosIgnore = false;
  228. }
  229. }, 500, {maxWait: 5000});
  230. this.scrollingSetRecentBook = _.debounce((newValue) => {
  231. this.debouncedSetRecentBook(newValue);
  232. }, 15000, {maxWait: 20000});
  233. document.addEventListener('fullscreenchange', () => {
  234. this.fullScreenActive = (document.fullscreenElement !== null);
  235. });
  236. this.loadSettings();
  237. }
  238. mounted() {
  239. this.updateHeaderMinWidth();
  240. (async() => {
  241. await bookManager.init(this.settings);
  242. bookManager.addEventListener(this.bookManagerEvent);
  243. if (this.$root.rootRoute() == '/reader') {
  244. if (this.routeParamUrl) {
  245. await this.loadBook({url: this.routeParamUrl, bookPos: this.routeParamPos, force: this.routeParamRefresh});
  246. } else {
  247. this.loaderActive = true;
  248. }
  249. }
  250. await this.$refs.serverStorage.init();
  251. this.checkSetStorageAccessKey();
  252. this.checkActivateDonateHelpPage();
  253. this.loading = false;
  254. //проверим состояние Settings, и обновим, если надо
  255. const newSettings = rstore.addDefaultsToSettings(this.settings);
  256. if (newSettings) {
  257. this.commit('reader/setSettings', newSettings);
  258. }
  259. this.updateRoute();
  260. await this.$refs.dialogs.init();
  261. })();
  262. (async() => {
  263. this.isFirstNeedUpdateNotify = true;
  264. //вечный цикл, запрашиваем периодически конфиг для проверки выхода новой версии читалки
  265. while (true) {// eslint-disable-line no-constant-condition
  266. await this.checkNewVersionAvailable();
  267. await utils.sleep(3600*1000); //каждый час
  268. }
  269. //дальше кода нет
  270. })();
  271. }
  272. loadSettings() {
  273. const settings = this.settings;
  274. this.allowUrlParamBookPos = settings.allowUrlParamBookPos;
  275. this.copyFullText = settings.copyFullText;
  276. this.showClickMapPage = settings.showClickMapPage;
  277. this.clickControl = settings.clickControl;
  278. this.blinkCachedLoad = settings.blinkCachedLoad;
  279. this.showToolButton = settings.showToolButton;
  280. this.enableSitesFilter = settings.enableSitesFilter;
  281. this.showNeedUpdateNotify = settings.showNeedUpdateNotify;
  282. this.splitToPara = settings.splitToPara;
  283. this.djvuQuality = settings.djvuQuality;
  284. this.pdfAsText = settings.pdfAsText;
  285. this.pdfQuality = settings.pdfQuality;
  286. this.readerActionByKeyCode = utils.userHotKeysObjectSwap(settings.userHotKeys);
  287. this.$root.readerActionByKeyEvent = (event) => {
  288. return this.readerActionByKeyCode[utils.keyEventToCode(event)];
  289. }
  290. this.updateHeaderMinWidth();
  291. }
  292. async checkNewVersionAvailable() {
  293. if (!this.checkingNewVersion && this.showNeedUpdateNotify) {
  294. this.checkingNewVersion = true;
  295. try {
  296. await utils.sleep(15*1000); //подождем 15 секунд, чтобы прогрузился ServiceWorker при выходе новой версии
  297. const config = await miscApi.loadConfig();
  298. this.commit('config/setConfig', config);
  299. let againMes = '';
  300. if (this.isFirstNeedUpdateNotify) {
  301. againMes = ' еще один раз';
  302. }
  303. if (this.version != this.clientVersion)
  304. this.$root.notify.info(`Вышла новая версия (v${this.version}) читалки.<br>Пожалуйста, обновите страницу${againMes}.`, 'Обновление');
  305. } catch(e) {
  306. console.error(e);
  307. } finally {
  308. this.checkingNewVersion = false;
  309. }
  310. this.isFirstNeedUpdateNotify = false;
  311. }
  312. }
  313. updateHeaderMinWidth() {
  314. const showButtonCount = Object.values(this.showToolButton).reduce((a, b) => a + (b ? 1 : 0), 0);
  315. if (this.$refs.buttons)
  316. this.$refs.buttons.style.minWidth = 65*showButtonCount + 'px';
  317. (async() => {
  318. await utils.sleep(1000);
  319. if (this.$refs.header)
  320. this.$refs.header.style.overflowX = 'auto';
  321. })();
  322. }
  323. checkSetStorageAccessKey() {
  324. const q = this.$route.query;
  325. if (q['setStorageAccessKey']) {
  326. this.$router.replace(`/reader`);
  327. this.settingsToggle();
  328. this.$nextTick(() => {
  329. this.$refs.settingsPage.enterServerStorageKey(
  330. Buffer.from(utils.fromBase58(q['setStorageAccessKey'])).toString()
  331. );
  332. });
  333. }
  334. }
  335. checkActivateDonateHelpPage() {
  336. const q = this.$route.query;
  337. if (q['donate']) {
  338. this.$router.replace(`/reader`);
  339. this.helpToggle();
  340. this.$nextTick(() => {
  341. this.$refs.helpPage.activateDonateHelpPage();
  342. });
  343. }
  344. }
  345. checkBookPosPercent() {
  346. const q = this.$route.query;
  347. if (q['__pp']) {
  348. let pp = q['__pp'];
  349. if (pp) {
  350. pp = parseFloat(pp) || 0;
  351. const recent = this.mostRecentBook();
  352. (async() => {
  353. await utils.sleep(100);
  354. this.bookPos = Math.floor(recent.textLength*pp/100);
  355. })();
  356. }
  357. }
  358. }
  359. get routeParamPos() {
  360. let result = undefined;
  361. const q = this.$route.query;
  362. if (q['__p']) {
  363. result = q['__p'];
  364. if (Array.isArray(result))
  365. result = result[0];
  366. }
  367. return (result ? parseInt(result, 10) || 0 : result);
  368. }
  369. updateRoute(isNewRoute) {
  370. if (this.loading)
  371. return;
  372. const recent = this.mostRecentBook();
  373. const pos = (recent && recent.bookPos && this.allowUrlParamBookPos ? `__p=${recent.bookPos}&` : '');
  374. const url = (recent ? `url=${recent.url}` : '');
  375. if (isNewRoute)
  376. this.$router.push(`/reader?${pos}${url}`).catch(() => {});
  377. else
  378. this.$router.replace(`/reader?${pos}${url}`).catch(() => {});
  379. }
  380. get mode() {
  381. return this.$store.state.config.mode;
  382. }
  383. get version() {
  384. return this.$store.state.config.version;
  385. }
  386. get clientVersion() {
  387. let v = versionHistory[0].header;
  388. v = v.split(' ')[0];
  389. return v;
  390. }
  391. get routeParamUrl() {
  392. let result = '';
  393. const path = this.$route.fullPath;
  394. const i = path.indexOf('url=');
  395. if (i >= 0) {
  396. result = path.substr(i + 4);
  397. }
  398. return decodeURIComponent(result);
  399. }
  400. get routeParamRefresh() {
  401. const q = this.$route.query;
  402. return !!q['__refresh'];
  403. }
  404. bookPosChanged(event) {
  405. if (event.bookPosSeen !== undefined)
  406. this.bookPosSeen = event.bookPosSeen;
  407. this.bookPos = event.bookPos;
  408. }
  409. async bookManagerEvent(eventName, value) {
  410. if (eventName == 'set-recent' || eventName == 'recent-deleted') {
  411. const oldBook = (this.textPage ? this.textPage.lastBook : null);
  412. const oldPos = (this.textPage ? this.textPage.bookPos : null);
  413. const newBook = bookManager.mostRecentBook();
  414. if (!(oldBook && newBook && oldBook.key == newBook.key)) {
  415. this.mostRecentBook();
  416. }
  417. if (oldBook && newBook) {
  418. if (oldBook.key != newBook.key || oldBook.path != newBook.path) {
  419. this.loadingBook = true;
  420. try {
  421. await this.loadBook(newBook);
  422. } finally {
  423. this.loadingBook = false;
  424. }
  425. } else if (oldPos != newBook.bookPos) {
  426. while (this.loadingBook) await utils.sleep(100);
  427. this.bookPosChanged({bookPos: newBook.bookPos});
  428. }
  429. }
  430. }
  431. if (eventName == 'recent-changed') {
  432. if (this.recentBooksActive) {
  433. await this.$refs.recentBooksPage.updateTableData();
  434. }
  435. //сохранение в serverStorage
  436. if (value) {
  437. await utils.sleep(500);
  438. await this.$refs.serverStorage.saveRecent(value);
  439. }
  440. }
  441. }
  442. get toolBarActive() {
  443. return this.reader.toolBarActive;
  444. }
  445. mostRecentBook() {
  446. const result = bookManager.mostRecentBook();
  447. this.mostRecentBookReactive = result;
  448. return result;
  449. }
  450. get settings() {
  451. return this.$store.state.reader.settings;
  452. }
  453. addAction(pos) {
  454. let a = this.actionList;
  455. if (!a.length || a[a.length - 1] != pos) {
  456. a.push(pos);
  457. if (a.length > 20)
  458. a.shift();
  459. this.actionCur = a.length - 1;
  460. }
  461. }
  462. toolBarToggle() {
  463. this.commit('reader/setToolBarActive', !this.toolBarActive);
  464. this.$root.$emit('resize');
  465. }
  466. fullScreenToggle() {
  467. this.fullScreenActive = !this.fullScreenActive;
  468. if (this.fullScreenActive) {
  469. this.$q.fullscreen.request();
  470. } else {
  471. this.$q.fullscreen.exit();
  472. }
  473. }
  474. closeAllWindows() {
  475. this.setPositionActive = false;
  476. this.copyTextActive = false;
  477. this.recentBooksActive = false;
  478. this.settingsActive = false;
  479. this.stopScrolling();
  480. this.stopSearch();
  481. this.helpActive = false;
  482. this.contentsActive = false;
  483. }
  484. loaderToggle() {
  485. this.loaderActive = !this.loaderActive;
  486. if (this.loaderActive) {
  487. this.closeAllWindows();
  488. }
  489. }
  490. setPositionToggle() {
  491. this.setPositionActive = !this.setPositionActive;
  492. const page = this.$refs.page;
  493. if (this.setPositionActive && this.activePage == 'TextPage' && page.parsed) {
  494. this.closeAllWindows();
  495. this.setPositionActive = true;
  496. this.$nextTick(() => {
  497. const recent = this.mostRecentBook();
  498. this.$refs.setPositionPage.init(recent.bookPos, recent.textLength - 1);
  499. });
  500. } else {
  501. this.setPositionActive = false;
  502. }
  503. }
  504. stopScrolling() {
  505. if (this.scrollingActive)
  506. this.scrollingToggle();
  507. }
  508. scrollingToggle() {
  509. this.scrollingActive = !this.scrollingActive;
  510. if (this.activePage == 'TextPage') {
  511. const page = this.$refs.page;
  512. if (this.scrollingActive) {
  513. page.startTextScrolling();
  514. } else {
  515. page.stopTextScrolling();
  516. }
  517. }
  518. if (!this.scrollingActive) {
  519. this.scrollingSetRecentBook.flush();
  520. }
  521. }
  522. stopSearch() {
  523. if (this.searchActive)
  524. this.searchToggle();
  525. }
  526. startTextSearch(opts) {
  527. if (this.activePage == 'TextPage')
  528. this.$refs.page.startSearch(opts.needle);
  529. }
  530. stopTextSearch() {
  531. if (this.activePage == 'TextPage')
  532. this.$refs.page.stopSearch();
  533. }
  534. searchToggle() {
  535. this.searchActive = !this.searchActive;
  536. const page = this.$refs.page;
  537. if (this.searchActive && this.activePage == 'TextPage' && page.parsed) {
  538. this.closeAllWindows();
  539. this.searchActive = true;
  540. this.$nextTick(() => {
  541. this.$refs.searchPage.init(page.parsed);
  542. });
  543. } else {
  544. this.stopTextSearch();
  545. this.searchActive = false;
  546. }
  547. }
  548. copyTextToggle() {
  549. this.copyTextActive = !this.copyTextActive;
  550. const page = this.$refs.page;
  551. if (this.copyTextActive && this.activePage == 'TextPage' && page.parsed) {
  552. this.closeAllWindows();
  553. this.copyTextActive = true;
  554. this.$nextTick(() => {
  555. this.$refs.copyTextPage.init(this.mostRecentBook().bookPos, page.parsed, this.copyFullText);
  556. });
  557. } else {
  558. this.copyTextActive = false;
  559. }
  560. }
  561. recentBooksClose() {
  562. this.recentBooksActive = false;
  563. }
  564. recentBooksToggle() {
  565. this.recentBooksActive = !this.recentBooksActive;
  566. if (this.recentBooksActive) {
  567. this.closeAllWindows();
  568. this.$refs.recentBooksPage.init();
  569. this.recentBooksActive = true;
  570. } else {
  571. this.recentBooksActive = false;
  572. }
  573. }
  574. contentsPageToggle() {
  575. this.contentsActive = !this.contentsActive;
  576. const page = this.$refs.page;
  577. if (this.contentsActive && this.activePage == 'TextPage' && page.parsed) {
  578. this.closeAllWindows();
  579. this.contentsActive = true;
  580. this.$nextTick(() => {
  581. this.$refs.contentsPage.init(this.mostRecentBook(), page.parsed);
  582. });
  583. } else {
  584. this.contentsActive = false;
  585. }
  586. }
  587. libsClose() {
  588. if (this.libsActive)
  589. this.libsToogle();
  590. }
  591. libsToogle() {
  592. this.libsActive = !this.libsActive;
  593. if (this.libsActive) {
  594. this.$refs.libsPage.init();
  595. } else {
  596. this.$refs.libsPage.done();
  597. }
  598. }
  599. offlineModeToggle() {
  600. this.offlineModeActive = !this.offlineModeActive;
  601. this.$refs.serverStorage.offlineModeActive = this.offlineModeActive;
  602. }
  603. settingsToggle() {
  604. this.settingsActive = !this.settingsActive;
  605. if (this.settingsActive) {
  606. this.closeAllWindows();
  607. this.settingsActive = true;
  608. this.$nextTick(() => {
  609. this.$refs.settingsPage.init();
  610. });
  611. } else {
  612. this.settingsActive = false;
  613. }
  614. }
  615. convOptionsToggle() {
  616. this.settingsToggle();
  617. if (this.settingsActive)
  618. this.$refs.settingsPage.selectedTab = 'convert';
  619. }
  620. helpToggle() {
  621. this.helpActive = !this.helpActive;
  622. if (this.helpActive) {
  623. this.closeAllWindows();
  624. this.helpActive = true;
  625. }
  626. }
  627. donateToggle() {
  628. this.helpToggle();
  629. if (this.helpActive) {
  630. this.$nextTick(() => {
  631. this.$refs.helpPage.activateDonateHelpPage();
  632. });
  633. }
  634. }
  635. versionHistoryToggle() {
  636. this.helpToggle();
  637. if (this.helpActive) {
  638. this.$nextTick(() => {
  639. this.$refs.helpPage.activateVersionHistoryHelpPage();
  640. });
  641. }
  642. }
  643. refreshBook() {
  644. const mrb = this.mostRecentBook();
  645. this.loadBook({url: mrb.url, uploadFileName: mrb.uploadFileName, force: true});
  646. }
  647. undoAction() {
  648. if (this.actionCur > 0) {
  649. this.actionCur--;
  650. this.bookPosChanged({bookPos: this.actionList[this.actionCur]});
  651. }
  652. }
  653. redoAction() {
  654. if (this.actionCur < this.actionList.length - 1) {
  655. this.actionCur++;
  656. this.bookPosChanged({bookPos: this.actionList[this.actionCur]});
  657. }
  658. }
  659. buttonClick(action) {
  660. const activeClass = this.buttonActiveClass(action);
  661. this.$refs[action].blur();
  662. if (activeClass['tool-button-disabled'])
  663. return;
  664. this.doAction({action});
  665. }
  666. buttonActiveClass(action) {
  667. const classActive = { 'tool-button-active': true, 'tool-button-active:hover': true };
  668. const classDisabled = { 'tool-button-disabled': true, 'tool-button-disabled:hover': true };
  669. let classResult = {};
  670. switch (action) {
  671. case 'loader':
  672. case 'fullScreen':
  673. case 'setPosition':
  674. case 'scrolling':
  675. case 'search':
  676. case 'copyText':
  677. case 'convOptions':
  678. case 'refresh':
  679. case 'contents':
  680. case 'libs':
  681. case 'recentBooks':
  682. case 'offlineMode':
  683. case 'settings':
  684. if (this.progressActive) {
  685. classResult = classDisabled;
  686. } else if (this[`${action}Active`]) {
  687. classResult = classActive;
  688. }
  689. break;
  690. case 'undoAction':
  691. if (this.actionCur <= 0)
  692. classResult = classDisabled;
  693. break;
  694. case 'redoAction':
  695. if (this.actionCur == this.actionList.length - 1)
  696. classResult = classDisabled;
  697. break;
  698. }
  699. if (this.activePage == 'LoaderPage' || !this.mostRecentBookReactive) {
  700. switch (action) {
  701. case 'undoAction':
  702. case 'redoAction':
  703. case 'setPosition':
  704. case 'scrolling':
  705. case 'search':
  706. case 'copyText':
  707. case 'contents':
  708. classResult = classDisabled;
  709. break;
  710. case 'refresh':
  711. case 'recentBooks':
  712. if (!this.mostRecentBookReactive)
  713. classResult = classDisabled;
  714. break;
  715. }
  716. }
  717. return classResult;
  718. }
  719. async activateClickMapPage() {
  720. if (this.clickControl && this.showClickMapPage && !this.clickMapActive) {
  721. this.clickMapActive = true;
  722. await this.$refs.clickMapPage.slowDisappear();
  723. this.clickMapActive = false;
  724. }
  725. }
  726. get activePage() {
  727. let result = '';
  728. if (this.progressActive)
  729. result = 'ProgressPage';
  730. else if (this.loaderActive)
  731. result = 'LoaderPage';
  732. else if (this.mostRecentBookReactive)
  733. result = 'TextPage';
  734. if (!result && !this.loading) {
  735. this.loaderActive = true;
  736. result = 'LoaderPage';
  737. }
  738. if (result != 'TextPage') {
  739. this.$root.$emit('set-app-title');
  740. }
  741. // на LoaderPage всегда показываем toolBar
  742. if (result == 'LoaderPage' && !this.toolBarActive) {
  743. this.toolBarToggle();
  744. }
  745. if (this.lastActivePage != result && result == 'TextPage') {
  746. //акивируем страницу с текстом
  747. this.$nextTick(async() => {
  748. const last = this.mostRecentBookReactive;
  749. const isParsed = await bookManager.hasBookParsed(last);
  750. if (!isParsed) {
  751. this.$root.$emit('set-app-title');
  752. return;
  753. }
  754. this.updateRoute();
  755. const textPage = this.$refs.page;
  756. if (textPage.showBook) {
  757. this.textPage = textPage;
  758. textPage.lastBook = last;
  759. textPage.bookPos = (last.bookPos !== undefined ? last.bookPos : 0);
  760. textPage.showBook();
  761. }
  762. });
  763. }
  764. this.lastActivePage = result;
  765. return result;
  766. }
  767. async loadBook(opts) {
  768. if (!opts || !opts.url) {
  769. this.mostRecentBook();
  770. return;
  771. }
  772. this.closeAllWindows();
  773. let url = encodeURI(decodeURI(opts.url));
  774. //TODO: убрать конвертирование 'file://' после 06.2021
  775. if (url.length == 71 && url.indexOf('file://') == 0)
  776. url = url.replace(/^file/, 'disk');
  777. if ((url.indexOf('http://') != 0) && (url.indexOf('https://') != 0) &&
  778. (url.indexOf('disk://') != 0))
  779. url = 'http://' + url;
  780. // уже просматривается сейчас
  781. const lastBook = (this.textPage ? this.textPage.lastBook : null);
  782. if (!opts.force && lastBook && lastBook.url == url &&
  783. (!opts.path || opts.path == lastBook.path) &&
  784. await bookManager.hasBookParsed(lastBook)) {
  785. this.loaderActive = false;
  786. return;
  787. }
  788. this.progressActive = true;
  789. await this.$nextTick();
  790. const progress = this.$refs.page;
  791. this.actionList = [];
  792. this.actionCur = -1;
  793. try {
  794. progress.show();
  795. progress.setState({state: 'parse'});
  796. // есть ли среди недавних
  797. const key = bookManager.keyFromUrl(url);
  798. let wasOpened = await bookManager.getRecentBook({key});
  799. wasOpened = (wasOpened ? wasOpened : {});
  800. const bookPos = (opts.bookPos !== undefined ? opts.bookPos : wasOpened.bookPos);
  801. const bookPosSeen = (opts.bookPos !== undefined ? opts.bookPos : wasOpened.bookPosSeen);
  802. const uploadFileName = (opts.uploadFileName ? opts.uploadFileName : '');
  803. let book = null;
  804. if (!opts.force) {
  805. // пытаемся загрузить и распарсить книгу в менеджере из локального кэша
  806. const bookParsed = await bookManager.getBook({url, path: opts.path}, (prog) => {
  807. progress.setState({progress: prog});
  808. });
  809. // если есть в локальном кэше
  810. if (bookParsed) {
  811. await bookManager.setRecentBook(Object.assign({bookPos, bookPosSeen}, bookParsed));
  812. this.mostRecentBook();
  813. this.addAction(bookPos);
  814. this.loaderActive = false;
  815. progress.hide(); this.progressActive = false;
  816. this.blinkCachedLoadMessage();
  817. this.checkBookPosPercent();
  818. await this.activateClickMapPage();
  819. return;
  820. }
  821. // иначе идем на сервер
  822. // пытаемся загрузить готовый файл с сервера
  823. if (wasOpened.path) {
  824. progress.setState({totalSteps: 5});
  825. try {
  826. const resp = await readerApi.loadCachedBook(wasOpened.path, (state) => {
  827. progress.setState(state);
  828. });
  829. book = Object.assign({}, wasOpened, {data: resp.data});
  830. } catch (e) {
  831. //молчим
  832. }
  833. }
  834. }
  835. progress.setState({totalSteps: 5});
  836. // не удалось, скачиваем книгу полностью с конвертацией
  837. let loadCached = true;
  838. if (!book) {
  839. book = await readerApi.loadBook({
  840. url,
  841. uploadFileName,
  842. enableSitesFilter: this.enableSitesFilter,
  843. skipHtmlCheck: (this.splitToPara ? true : false),
  844. isText: (this.splitToPara ? true : false),
  845. djvuQuality: this.djvuQuality,
  846. pdfAsText: this.pdfAsText,
  847. pdfQuality: this.pdfQuality,
  848. },
  849. (state) => {
  850. progress.setState(state);
  851. }
  852. );
  853. loadCached = false;
  854. }
  855. // добавляем в bookManager
  856. progress.setState({state: 'parse', step: 5});
  857. const addedBook = await bookManager.addBook(book, (prog) => {
  858. progress.setState({progress: prog});
  859. });
  860. // добавляем в историю
  861. await bookManager.setRecentBook(Object.assign({bookPos, bookPosSeen, uploadFileName}, addedBook));
  862. this.mostRecentBook();
  863. this.addAction(bookPos);
  864. this.updateRoute(true);
  865. this.loaderActive = false;
  866. progress.hide(); this.progressActive = false;
  867. if (loadCached) {
  868. this.blinkCachedLoadMessage();
  869. } else
  870. this.stopBlink = true;
  871. this.checkBookPosPercent();
  872. await this.activateClickMapPage();
  873. } catch (e) {
  874. progress.hide(); this.progressActive = false;
  875. this.loaderActive = true;
  876. this.$root.stdDialog.alert(e.message, 'Ошибка', {color: 'negative'});
  877. } finally {
  878. this.checkNewVersionAvailable();
  879. }
  880. }
  881. async loadFile(opts) {
  882. this.progressActive = true;
  883. await this.$nextTick();
  884. const progress = this.$refs.page;
  885. try {
  886. progress.show();
  887. progress.setState({state: 'upload'});
  888. const url = await readerApi.uploadFile(opts.file, this.config.maxUploadFileSize, (state) => {
  889. progress.setState(state);
  890. });
  891. progress.hide(); this.progressActive = false;
  892. await this.loadBook({url, uploadFileName: opts.file.name, force: true});
  893. } catch (e) {
  894. progress.hide(); this.progressActive = false;
  895. this.loaderActive = true;
  896. this.$root.stdDialog.alert(e.message, 'Ошибка', {color: 'negative'});
  897. }
  898. }
  899. blinkCachedLoadMessage() {
  900. if (!this.blinkCachedLoad)
  901. return;
  902. this.blinkCount = 30;
  903. if (!this.inBlink) {
  904. this.inBlink = true;
  905. this.stopBlink = false;
  906. this.$nextTick(async() => {
  907. let page = this.$refs.page;
  908. while (this.blinkCount) {
  909. this.showRefreshIcon = !this.showRefreshIcon;
  910. if (page && page.blinkCachedLoadMessage)
  911. page.blinkCachedLoadMessage(this.showRefreshIcon);
  912. await utils.sleep(500);
  913. if (this.stopBlink)
  914. break;
  915. this.blinkCount--;
  916. page = this.$refs.page;
  917. }
  918. this.showRefreshIcon = true;
  919. this.inBlink = false;
  920. if (page && page.blinkCachedLoadMessage)
  921. page.blinkCachedLoadMessage('finish');
  922. });
  923. }
  924. }
  925. doAction(opts) {
  926. let result = true;
  927. let {action = '', event = false} = opts;
  928. switch (action) {
  929. case 'loader':
  930. this.loaderToggle();
  931. break;
  932. case 'help':
  933. this.helpToggle();
  934. break;
  935. case 'undoAction':
  936. this.undoAction();
  937. break;
  938. case 'redoAction':
  939. this.redoAction();
  940. break;
  941. case 'fullScreen':
  942. this.fullScreenToggle();
  943. break;
  944. case 'scrolling':
  945. this.scrollingToggle();
  946. break;
  947. case 'stopScrolling':
  948. this.stopScrolling();
  949. break;
  950. case 'setPosition':
  951. this.setPositionToggle();
  952. break;
  953. case 'search':
  954. this.searchToggle();
  955. break;
  956. case 'copyText':
  957. this.copyTextToggle();
  958. break;
  959. case 'convOptions':
  960. this.convOptionsToggle();
  961. break;
  962. case 'refresh':
  963. this.refreshBook();
  964. break;
  965. case 'contents':
  966. this.contentsPageToggle();
  967. break;
  968. case 'libs':
  969. this.libsToogle();
  970. break;
  971. case 'recentBooks':
  972. this.recentBooksToggle();
  973. break;
  974. case 'offlineMode':
  975. this.offlineModeToggle();
  976. break;
  977. case 'settings':
  978. this.settingsToggle();
  979. break;
  980. case 'switchToolbar':
  981. this.toolBarToggle();
  982. break;
  983. case 'donate':
  984. this.donateToggle();
  985. break;
  986. default:
  987. result = false;
  988. break;
  989. }
  990. if (!result && this.activePage == 'TextPage' && this.$refs.page) {
  991. result = true;
  992. const textPage = this.$refs.page;
  993. switch (action) {
  994. case 'bookBegin':
  995. textPage.doHome();
  996. break;
  997. case 'bookEnd':
  998. textPage.doEnd();
  999. break;
  1000. case 'pageBack':
  1001. textPage.doPageUp();
  1002. break;
  1003. case 'pageForward':
  1004. textPage.doPageDown();
  1005. break;
  1006. case 'lineBack':
  1007. textPage.doUp();
  1008. break;
  1009. case 'lineForward':
  1010. textPage.doDown();
  1011. break;
  1012. case 'incFontSize':
  1013. textPage.doFontSizeInc();
  1014. break;
  1015. case 'decFontSize':
  1016. textPage.doFontSizeDec();
  1017. break;
  1018. case 'scrollingSpeedUp':
  1019. textPage.doScrollingSpeedUp();
  1020. break;
  1021. case 'scrollingSpeedDown':
  1022. textPage.doScrollingSpeedDown();
  1023. break;
  1024. default:
  1025. result = false;
  1026. break;
  1027. }
  1028. }
  1029. if (result && event) {
  1030. event.preventDefault();
  1031. event.stopPropagation();
  1032. }
  1033. return result;
  1034. }
  1035. keyHook(event) {
  1036. let result = false;
  1037. if (this.$root.rootRoute() == '/reader') {
  1038. if (this.$root.stdDialog.active)
  1039. return result;
  1040. if (!result)
  1041. result = this.$refs.dialogs.keyHook(event);
  1042. if (!result && this.helpActive)
  1043. result = this.$refs.helpPage.keyHook(event);
  1044. if (!result && this.settingsActive)
  1045. result = this.$refs.settingsPage.keyHook(event);
  1046. if (!result && this.recentBooksActive)
  1047. result = this.$refs.recentBooksPage.keyHook(event);
  1048. if (!result && this.setPositionActive)
  1049. result = this.$refs.setPositionPage.keyHook(event);
  1050. if (!result && this.searchActive)
  1051. result = this.$refs.searchPage.keyHook(event);
  1052. if (!result && this.copyTextActive)
  1053. result = this.$refs.copyTextPage.keyHook(event);
  1054. if (!result && this.contentsActive)
  1055. result = this.$refs.contentsPage.keyHook(event);
  1056. if (!result && this.$refs.page && this.$refs.page.keyHook)
  1057. result = this.$refs.page.keyHook(event);
  1058. if (!result && event.type == 'keydown') {
  1059. const action = this.$root.readerActionByKeyEvent(event);
  1060. if (action == 'loader') {
  1061. result = this.doAction({action, event});
  1062. }
  1063. if (!result && this.activePage == 'TextPage') {
  1064. result = this.doAction({action, event});
  1065. }
  1066. }
  1067. }
  1068. return result;
  1069. }
  1070. }
  1071. //-----------------------------------------------------------------------------
  1072. </script>
  1073. <style scoped>
  1074. .header {
  1075. padding-left: 5px;
  1076. padding-right: 5px;
  1077. background-color: #1B695F;
  1078. color: #000;
  1079. overflow: hidden;
  1080. height: 50px;
  1081. }
  1082. .main {
  1083. background-color: #EBE2C9;
  1084. color: #000;
  1085. }
  1086. .tool-button {
  1087. margin: 0px 2px 0 2px;
  1088. padding: 0;
  1089. color: #3E843E;
  1090. background-color: #E6EDF4;
  1091. margin-top: 5px;
  1092. height: 38px;
  1093. width: 38px;
  1094. border: 0;
  1095. border-radius: 6px;
  1096. box-shadow: 3px 3px 5px black;
  1097. outline: 0;
  1098. }
  1099. .tool-button:hover {
  1100. background-color: white;
  1101. cursor: pointer;
  1102. }
  1103. .tool-button-active {
  1104. box-shadow: 0 0 0;
  1105. color: white;
  1106. background-color: #8AB45F;
  1107. position: relative;
  1108. top: 1px;
  1109. left: 1px;
  1110. }
  1111. .tool-button-active:hover {
  1112. color: white;
  1113. background-color: #81C581;
  1114. cursor: pointer;
  1115. }
  1116. .tool-button-disabled {
  1117. color: lightgray;
  1118. background-color: gray;
  1119. cursor: default;
  1120. }
  1121. .tool-button-disabled:hover {
  1122. color: lightgray;
  1123. background-color: gray;
  1124. cursor: default;
  1125. }
  1126. .space {
  1127. width: 10px;
  1128. display: inline-block;
  1129. }
  1130. .clear {
  1131. color: rgba(0,0,0,0);
  1132. }
  1133. </style>