Reader.vue 45 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296
  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="splitToPara" v-show="showToolButton['splitToPara']" class="tool-button" :class="buttonActiveClass('splitToPara')" @click="buttonClick('splitToPara')" v-ripple>
  42. <q-icon name="la la-retweet" size="32px"/>
  43. <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['splitToPara'] }}</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" @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. await utils.sleep(15*1000); //подождем 15 секунд, чтобы прогрузился ServiceWorker при выходе новой версии
  262. this.isFirstNeedUpdateNotify = true;
  263. //вечный цикл, запрашиваем периодически конфиг для проверки выхода новой версии читалки
  264. while (true) {// eslint-disable-line no-constant-condition
  265. if (this.showNeedUpdateNotify) {
  266. try {
  267. const config = await miscApi.loadConfig();
  268. this.commit('config/setConfig', config);
  269. let againMes = '';
  270. if (this.isFirstNeedUpdateNotify) {
  271. againMes = ' ЕЩЕ один раз';
  272. }
  273. if (this.version != this.clientVersion)
  274. this.$root.notify.info(`Вышла новая версия (v${this.version}) читалки.<br>Пожалуйста, обновите страницу${againMes}.`, 'Обновление');
  275. } catch(e) {
  276. //
  277. }
  278. }
  279. await utils.sleep(3600*1000); //каждый час
  280. this.isFirstNeedUpdateNotify = false;
  281. }
  282. //дальше кода нет
  283. })();
  284. }
  285. loadSettings() {
  286. const settings = this.settings;
  287. this.allowUrlParamBookPos = settings.allowUrlParamBookPos;
  288. this.copyFullText = settings.copyFullText;
  289. this.showClickMapPage = settings.showClickMapPage;
  290. this.clickControl = settings.clickControl;
  291. this.blinkCachedLoad = settings.blinkCachedLoad;
  292. this.showToolButton = settings.showToolButton;
  293. this.enableSitesFilter = settings.enableSitesFilter;
  294. this.showNeedUpdateNotify = settings.showNeedUpdateNotify;
  295. this.readerActionByKeyCode = utils.userHotKeysObjectSwap(settings.userHotKeys);
  296. this.$root.readerActionByKeyEvent = (event) => {
  297. return this.readerActionByKeyCode[utils.keyEventToCode(event)];
  298. }
  299. this.updateHeaderMinWidth();
  300. }
  301. updateHeaderMinWidth() {
  302. const showButtonCount = Object.values(this.showToolButton).reduce((a, b) => a + (b ? 1 : 0), 0);
  303. if (this.$refs.buttons)
  304. this.$refs.buttons.style.minWidth = 65*showButtonCount + 'px';
  305. (async() => {
  306. await utils.sleep(1000);
  307. if (this.$refs.header)
  308. this.$refs.header.style.overflowX = 'auto';
  309. })();
  310. }
  311. checkSetStorageAccessKey() {
  312. const q = this.$route.query;
  313. if (q['setStorageAccessKey']) {
  314. this.$router.replace(`/reader`);
  315. this.settingsToggle();
  316. this.$nextTick(() => {
  317. this.$refs.settingsPage.enterServerStorageKey(
  318. Buffer.from(utils.fromBase58(q['setStorageAccessKey'])).toString()
  319. );
  320. });
  321. }
  322. }
  323. checkActivateDonateHelpPage() {
  324. const q = this.$route.query;
  325. if (q['donate']) {
  326. this.$router.replace(`/reader`);
  327. this.helpToggle();
  328. this.$nextTick(() => {
  329. this.$refs.helpPage.activateDonateHelpPage();
  330. });
  331. }
  332. }
  333. checkBookPosPercent() {
  334. const q = this.$route.query;
  335. if (q['__pp']) {
  336. let pp = q['__pp'];
  337. if (pp) {
  338. pp = parseFloat(pp) || 0;
  339. const recent = this.mostRecentBook();
  340. (async() => {
  341. await utils.sleep(100);
  342. this.bookPos = Math.floor(recent.textLength*pp/100);
  343. })();
  344. }
  345. }
  346. }
  347. get routeParamPos() {
  348. let result = undefined;
  349. const q = this.$route.query;
  350. if (q['__p']) {
  351. result = q['__p'];
  352. if (Array.isArray(result))
  353. result = result[0];
  354. }
  355. return (result ? parseInt(result, 10) || 0 : result);
  356. }
  357. updateRoute(isNewRoute) {
  358. if (this.loading)
  359. return;
  360. const recent = this.mostRecentBook();
  361. const pos = (recent && recent.bookPos && this.allowUrlParamBookPos ? `__p=${recent.bookPos}&` : '');
  362. const url = (recent ? `url=${recent.url}` : '');
  363. if (isNewRoute)
  364. this.$router.push(`/reader?${pos}${url}`).catch(() => {});
  365. else
  366. this.$router.replace(`/reader?${pos}${url}`).catch(() => {});
  367. }
  368. get mode() {
  369. return this.$store.state.config.mode;
  370. }
  371. get version() {
  372. return this.$store.state.config.version;
  373. }
  374. get clientVersion() {
  375. let v = versionHistory[0].header;
  376. v = v.split(' ')[0];
  377. return v;
  378. }
  379. get routeParamUrl() {
  380. let result = '';
  381. const path = this.$route.fullPath;
  382. const i = path.indexOf('url=');
  383. if (i >= 0) {
  384. result = path.substr(i + 4);
  385. }
  386. return decodeURIComponent(result);
  387. }
  388. get routeParamRefresh() {
  389. const q = this.$route.query;
  390. return !!q['__refresh'];
  391. }
  392. bookPosChanged(event) {
  393. if (event.bookPosSeen !== undefined)
  394. this.bookPosSeen = event.bookPosSeen;
  395. this.bookPos = event.bookPos;
  396. }
  397. async bookManagerEvent(eventName, value) {
  398. if (eventName == 'set-recent' || eventName == 'recent-deleted') {
  399. const oldBook = (this.textPage ? this.textPage.lastBook : null);
  400. const oldPos = (this.textPage ? this.textPage.bookPos : null);
  401. const newBook = bookManager.mostRecentBook();
  402. if (!(oldBook && newBook && oldBook.key == newBook.key)) {
  403. this.mostRecentBook();
  404. }
  405. if (oldBook && newBook) {
  406. if (oldBook.key != newBook.key || oldBook.path != newBook.path) {
  407. this.loadingBook = true;
  408. try {
  409. await this.loadBook(newBook);
  410. } finally {
  411. this.loadingBook = false;
  412. }
  413. } else if (oldPos != newBook.bookPos) {
  414. while (this.loadingBook) await utils.sleep(100);
  415. this.bookPosChanged({bookPos: newBook.bookPos});
  416. }
  417. }
  418. }
  419. if (eventName == 'recent-changed') {
  420. if (this.recentBooksActive) {
  421. await this.$refs.recentBooksPage.updateTableData();
  422. }
  423. //сохранение в serverStorage
  424. if (value) {
  425. await utils.sleep(500);
  426. await this.$refs.serverStorage.saveRecent(value);
  427. }
  428. }
  429. }
  430. get toolBarActive() {
  431. return this.reader.toolBarActive;
  432. }
  433. mostRecentBook() {
  434. const result = bookManager.mostRecentBook();
  435. this.mostRecentBookReactive = result;
  436. return result;
  437. }
  438. get settings() {
  439. return this.$store.state.reader.settings;
  440. }
  441. addAction(pos) {
  442. let a = this.actionList;
  443. if (!a.length || a[a.length - 1] != pos) {
  444. a.push(pos);
  445. if (a.length > 20)
  446. a.shift();
  447. this.actionCur = a.length - 1;
  448. }
  449. }
  450. toolBarToggle() {
  451. this.commit('reader/setToolBarActive', !this.toolBarActive);
  452. this.$root.$emit('resize');
  453. }
  454. fullScreenToggle() {
  455. this.fullScreenActive = !this.fullScreenActive;
  456. if (this.fullScreenActive) {
  457. this.$q.fullscreen.request();
  458. } else {
  459. this.$q.fullscreen.exit();
  460. }
  461. }
  462. closeAllWindows() {
  463. this.setPositionActive = false;
  464. this.copyTextActive = false;
  465. this.recentBooksActive = false;
  466. this.settingsActive = false;
  467. this.stopScrolling();
  468. this.stopSearch();
  469. this.helpActive = false;
  470. this.contentsActive = false;
  471. }
  472. loaderToggle() {
  473. this.loaderActive = !this.loaderActive;
  474. if (this.loaderActive) {
  475. this.closeAllWindows();
  476. }
  477. }
  478. setPositionToggle() {
  479. this.setPositionActive = !this.setPositionActive;
  480. const page = this.$refs.page;
  481. if (this.setPositionActive && this.activePage == 'TextPage' && page.parsed) {
  482. this.closeAllWindows();
  483. this.setPositionActive = true;
  484. this.$nextTick(() => {
  485. const recent = this.mostRecentBook();
  486. this.$refs.setPositionPage.init(recent.bookPos, recent.textLength - 1);
  487. });
  488. } else {
  489. this.setPositionActive = false;
  490. }
  491. }
  492. stopScrolling() {
  493. if (this.scrollingActive)
  494. this.scrollingToggle();
  495. }
  496. scrollingToggle() {
  497. this.scrollingActive = !this.scrollingActive;
  498. if (this.activePage == 'TextPage') {
  499. const page = this.$refs.page;
  500. if (this.scrollingActive) {
  501. page.startTextScrolling();
  502. } else {
  503. page.stopTextScrolling();
  504. }
  505. }
  506. if (!this.scrollingActive) {
  507. this.scrollingSetRecentBook.flush();
  508. }
  509. }
  510. stopSearch() {
  511. if (this.searchActive)
  512. this.searchToggle();
  513. }
  514. startTextSearch(opts) {
  515. if (this.activePage == 'TextPage')
  516. this.$refs.page.startSearch(opts.needle);
  517. }
  518. stopTextSearch() {
  519. if (this.activePage == 'TextPage')
  520. this.$refs.page.stopSearch();
  521. }
  522. searchToggle() {
  523. this.searchActive = !this.searchActive;
  524. const page = this.$refs.page;
  525. if (this.searchActive && this.activePage == 'TextPage' && page.parsed) {
  526. this.closeAllWindows();
  527. this.searchActive = true;
  528. this.$nextTick(() => {
  529. this.$refs.searchPage.init(page.parsed);
  530. });
  531. } else {
  532. this.stopTextSearch();
  533. this.searchActive = false;
  534. }
  535. }
  536. copyTextToggle() {
  537. this.copyTextActive = !this.copyTextActive;
  538. const page = this.$refs.page;
  539. if (this.copyTextActive && this.activePage == 'TextPage' && page.parsed) {
  540. this.closeAllWindows();
  541. this.copyTextActive = true;
  542. this.$nextTick(() => {
  543. this.$refs.copyTextPage.init(this.mostRecentBook().bookPos, page.parsed, this.copyFullText);
  544. });
  545. } else {
  546. this.copyTextActive = false;
  547. }
  548. }
  549. recentBooksClose() {
  550. this.recentBooksActive = false;
  551. }
  552. recentBooksToggle() {
  553. this.recentBooksActive = !this.recentBooksActive;
  554. if (this.recentBooksActive) {
  555. this.closeAllWindows();
  556. this.$refs.recentBooksPage.init();
  557. this.recentBooksActive = true;
  558. } else {
  559. this.recentBooksActive = false;
  560. }
  561. }
  562. contentsPageToggle() {
  563. this.contentsActive = !this.contentsActive;
  564. const page = this.$refs.page;
  565. if (this.contentsActive && this.activePage == 'TextPage' && page.parsed) {
  566. this.closeAllWindows();
  567. this.contentsActive = true;
  568. this.$nextTick(() => {
  569. this.$refs.contentsPage.init(this.mostRecentBook(), page.parsed);
  570. });
  571. } else {
  572. this.contentsActive = false;
  573. }
  574. }
  575. libsClose() {
  576. if (this.libsActive)
  577. this.libsToogle();
  578. }
  579. libsToogle() {
  580. this.libsActive = !this.libsActive;
  581. if (this.libsActive) {
  582. this.$refs.libsPage.init();
  583. } else {
  584. this.$refs.libsPage.done();
  585. }
  586. }
  587. offlineModeToggle() {
  588. this.offlineModeActive = !this.offlineModeActive;
  589. this.$refs.serverStorage.offlineModeActive = this.offlineModeActive;
  590. }
  591. settingsToggle() {
  592. this.settingsActive = !this.settingsActive;
  593. if (this.settingsActive) {
  594. this.closeAllWindows();
  595. this.settingsActive = true;
  596. this.$nextTick(() => {
  597. this.$refs.settingsPage.init();
  598. });
  599. } else {
  600. this.settingsActive = false;
  601. }
  602. }
  603. helpToggle() {
  604. this.helpActive = !this.helpActive;
  605. if (this.helpActive) {
  606. this.closeAllWindows();
  607. this.helpActive = true;
  608. }
  609. }
  610. donateToggle() {
  611. this.helpToggle();
  612. if (this.helpActive) {
  613. this.$nextTick(() => {
  614. this.$refs.helpPage.activateDonateHelpPage();
  615. });
  616. }
  617. }
  618. versionHistoryToggle() {
  619. this.helpToggle();
  620. if (this.helpActive) {
  621. this.$nextTick(() => {
  622. this.$refs.helpPage.activateVersionHistoryHelpPage();
  623. });
  624. }
  625. }
  626. refreshBook(mode) {
  627. const mrb = this.mostRecentBook();
  628. if (mrb) {
  629. if (mode && mode == 'split') {
  630. this.loadBook({url: mrb.url, uploadFileName: mrb.uploadFileName, skipCheck: true, isText: true, force: true});
  631. } else {
  632. this.loadBook({url: mrb.url, uploadFileName: mrb.uploadFileName, force: true});
  633. }
  634. }
  635. }
  636. undoAction() {
  637. if (this.actionCur > 0) {
  638. this.actionCur--;
  639. this.bookPosChanged({bookPos: this.actionList[this.actionCur]});
  640. }
  641. }
  642. redoAction() {
  643. if (this.actionCur < this.actionList.length - 1) {
  644. this.actionCur++;
  645. this.bookPosChanged({bookPos: this.actionList[this.actionCur]});
  646. }
  647. }
  648. buttonClick(action) {
  649. const activeClass = this.buttonActiveClass(action);
  650. this.$refs[action].blur();
  651. if (activeClass['tool-button-disabled'])
  652. return;
  653. this.doAction({action});
  654. }
  655. buttonActiveClass(action) {
  656. const classActive = { 'tool-button-active': true, 'tool-button-active:hover': true };
  657. const classDisabled = { 'tool-button-disabled': true, 'tool-button-disabled:hover': true };
  658. let classResult = {};
  659. switch (action) {
  660. case 'loader':
  661. case 'fullScreen':
  662. case 'setPosition':
  663. case 'scrolling':
  664. case 'search':
  665. case 'copyText':
  666. case 'splitToPara':
  667. case 'refresh':
  668. case 'contents':
  669. case 'libs':
  670. case 'recentBooks':
  671. case 'offlineMode':
  672. case 'settings':
  673. if (this.progressActive) {
  674. classResult = classDisabled;
  675. } else if (this[`${action}Active`]) {
  676. classResult = classActive;
  677. }
  678. break;
  679. case 'undoAction':
  680. if (this.actionCur <= 0)
  681. classResult = classDisabled;
  682. break;
  683. case 'redoAction':
  684. if (this.actionCur == this.actionList.length - 1)
  685. classResult = classDisabled;
  686. break;
  687. }
  688. if (this.activePage == 'LoaderPage' || !this.mostRecentBookReactive) {
  689. switch (action) {
  690. case 'undoAction':
  691. case 'redoAction':
  692. case 'setPosition':
  693. case 'scrolling':
  694. case 'search':
  695. case 'copyText':
  696. case 'contents':
  697. classResult = classDisabled;
  698. break;
  699. case 'splitToPara':
  700. case 'refresh':
  701. case 'recentBooks':
  702. if (!this.mostRecentBookReactive)
  703. classResult = classDisabled;
  704. break;
  705. }
  706. }
  707. return classResult;
  708. }
  709. async activateClickMapPage() {
  710. if (this.clickControl && this.showClickMapPage && !this.clickMapActive) {
  711. this.clickMapActive = true;
  712. await this.$refs.clickMapPage.slowDisappear();
  713. this.clickMapActive = false;
  714. }
  715. }
  716. get activePage() {
  717. let result = '';
  718. if (this.progressActive)
  719. result = 'ProgressPage';
  720. else if (this.loaderActive)
  721. result = 'LoaderPage';
  722. else if (this.mostRecentBookReactive)
  723. result = 'TextPage';
  724. if (!result && !this.loading) {
  725. this.loaderActive = true;
  726. result = 'LoaderPage';
  727. }
  728. if (result != 'TextPage') {
  729. this.$root.$emit('set-app-title');
  730. }
  731. // на LoaderPage всегда показываем toolBar
  732. if (result == 'LoaderPage' && !this.toolBarActive) {
  733. this.toolBarToggle();
  734. }
  735. if (this.lastActivePage != result && result == 'TextPage') {
  736. //акивируем страницу с текстом
  737. this.$nextTick(async() => {
  738. const last = this.mostRecentBookReactive;
  739. const isParsed = await bookManager.hasBookParsed(last);
  740. if (!isParsed) {
  741. this.$root.$emit('set-app-title');
  742. return;
  743. }
  744. this.updateRoute();
  745. const textPage = this.$refs.page;
  746. if (textPage.showBook) {
  747. this.textPage = textPage;
  748. textPage.lastBook = last;
  749. textPage.bookPos = (last.bookPos !== undefined ? last.bookPos : 0);
  750. textPage.showBook();
  751. }
  752. });
  753. }
  754. this.lastActivePage = result;
  755. return result;
  756. }
  757. async loadBook(opts) {
  758. if (!opts || !opts.url) {
  759. this.mostRecentBook();
  760. return;
  761. }
  762. this.closeAllWindows();
  763. let url = encodeURI(decodeURI(opts.url));
  764. //TODO: убрать конвертирование 'file://' после 06.2021
  765. if (url.length == 71 && url.indexOf('file://') == 0)
  766. url = url.replace(/^file/, 'disk');
  767. if ((url.indexOf('http://') != 0) && (url.indexOf('https://') != 0) &&
  768. (url.indexOf('disk://') != 0))
  769. url = 'http://' + url;
  770. // уже просматривается сейчас
  771. const lastBook = (this.textPage ? this.textPage.lastBook : null);
  772. if (!opts.force && lastBook && lastBook.url == url &&
  773. (!opts.path || opts.path == lastBook.path) &&
  774. await bookManager.hasBookParsed(lastBook)) {
  775. this.loaderActive = false;
  776. return;
  777. }
  778. this.progressActive = true;
  779. await this.$nextTick();
  780. const progress = this.$refs.page;
  781. this.actionList = [];
  782. this.actionCur = -1;
  783. try {
  784. progress.show();
  785. progress.setState({state: 'parse'});
  786. // есть ли среди недавних
  787. const key = bookManager.keyFromUrl(url);
  788. let wasOpened = await bookManager.getRecentBook({key});
  789. wasOpened = (wasOpened ? wasOpened : {});
  790. const bookPos = (opts.bookPos !== undefined ? opts.bookPos : wasOpened.bookPos);
  791. const bookPosSeen = (opts.bookPos !== undefined ? opts.bookPos : wasOpened.bookPosSeen);
  792. const uploadFileName = (opts.uploadFileName ? opts.uploadFileName : '');
  793. let book = null;
  794. if (!opts.force) {
  795. // пытаемся загрузить и распарсить книгу в менеджере из локального кэша
  796. const bookParsed = await bookManager.getBook({url, path: opts.path}, (prog) => {
  797. progress.setState({progress: prog});
  798. });
  799. // если есть в локальном кэше
  800. if (bookParsed) {
  801. await bookManager.setRecentBook(Object.assign({bookPos, bookPosSeen}, bookParsed));
  802. this.mostRecentBook();
  803. this.addAction(bookPos);
  804. this.loaderActive = false;
  805. progress.hide(); this.progressActive = false;
  806. this.blinkCachedLoadMessage();
  807. this.checkBookPosPercent();
  808. await this.activateClickMapPage();
  809. return;
  810. }
  811. // иначе идем на сервер
  812. // пытаемся загрузить готовый файл с сервера
  813. if (wasOpened.path) {
  814. progress.setState({totalSteps: 5});
  815. try {
  816. const resp = await readerApi.loadCachedBook(wasOpened.path, (state) => {
  817. progress.setState(state);
  818. });
  819. book = Object.assign({}, wasOpened, {data: resp.data});
  820. } catch (e) {
  821. //молчим
  822. }
  823. }
  824. }
  825. progress.setState({totalSteps: 5});
  826. // не удалось, скачиваем книгу полностью с конвертацией
  827. let loadCached = true;
  828. if (!book) {
  829. book = await readerApi.loadBook({
  830. url,
  831. skipCheck: (opts.skipCheck ? true : false),
  832. isText: (opts.isText ? true : false),
  833. enableSitesFilter: this.enableSitesFilter,
  834. uploadFileName
  835. },
  836. (state) => {
  837. progress.setState(state);
  838. }
  839. );
  840. loadCached = false;
  841. }
  842. // добавляем в bookManager
  843. progress.setState({state: 'parse', step: 5});
  844. const addedBook = await bookManager.addBook(book, (prog) => {
  845. progress.setState({progress: prog});
  846. });
  847. // добавляем в историю
  848. await bookManager.setRecentBook(Object.assign({bookPos, bookPosSeen, uploadFileName}, addedBook));
  849. this.mostRecentBook();
  850. this.addAction(bookPos);
  851. this.updateRoute(true);
  852. this.loaderActive = false;
  853. progress.hide(); this.progressActive = false;
  854. if (loadCached) {
  855. this.blinkCachedLoadMessage();
  856. } else
  857. this.stopBlink = true;
  858. this.checkBookPosPercent();
  859. await this.activateClickMapPage();
  860. } catch (e) {
  861. progress.hide(); this.progressActive = false;
  862. this.loaderActive = true;
  863. this.$root.stdDialog.alert(e.message, 'Ошибка', {color: 'negative'});
  864. }
  865. }
  866. async loadFile(opts) {
  867. this.progressActive = true;
  868. await this.$nextTick();
  869. const progress = this.$refs.page;
  870. try {
  871. progress.show();
  872. progress.setState({state: 'upload'});
  873. const url = await readerApi.uploadFile(opts.file, this.config.maxUploadFileSize, (state) => {
  874. progress.setState(state);
  875. });
  876. progress.hide(); this.progressActive = false;
  877. await this.loadBook({url, uploadFileName: opts.file.name, force: true});
  878. } catch (e) {
  879. progress.hide(); this.progressActive = false;
  880. this.loaderActive = true;
  881. this.$root.stdDialog.alert(e.message, 'Ошибка', {color: 'negative'});
  882. }
  883. }
  884. blinkCachedLoadMessage() {
  885. if (!this.blinkCachedLoad)
  886. return;
  887. this.blinkCount = 30;
  888. if (!this.inBlink) {
  889. this.inBlink = true;
  890. this.stopBlink = false;
  891. this.$nextTick(async() => {
  892. let page = this.$refs.page;
  893. while (this.blinkCount) {
  894. this.showRefreshIcon = !this.showRefreshIcon;
  895. if (page && page.blinkCachedLoadMessage)
  896. page.blinkCachedLoadMessage(this.showRefreshIcon);
  897. await utils.sleep(500);
  898. if (this.stopBlink)
  899. break;
  900. this.blinkCount--;
  901. page = this.$refs.page;
  902. }
  903. this.showRefreshIcon = true;
  904. this.inBlink = false;
  905. if (page && page.blinkCachedLoadMessage)
  906. page.blinkCachedLoadMessage('finish');
  907. });
  908. }
  909. }
  910. doAction(opts) {
  911. let result = true;
  912. let {action = '', event = false} = opts;
  913. switch (action) {
  914. case 'loader':
  915. this.loaderToggle();
  916. break;
  917. case 'help':
  918. this.helpToggle();
  919. break;
  920. case 'undoAction':
  921. this.undoAction();
  922. break;
  923. case 'redoAction':
  924. this.redoAction();
  925. break;
  926. case 'fullScreen':
  927. this.fullScreenToggle();
  928. break;
  929. case 'scrolling':
  930. this.scrollingToggle();
  931. break;
  932. case 'stopScrolling':
  933. this.stopScrolling();
  934. break;
  935. case 'setPosition':
  936. this.setPositionToggle();
  937. break;
  938. case 'search':
  939. this.searchToggle();
  940. break;
  941. case 'copyText':
  942. this.copyTextToggle();
  943. break;
  944. case 'splitToPara':
  945. this.refreshBook('split');
  946. break;
  947. case 'refresh':
  948. this.refreshBook();
  949. break;
  950. case 'contents':
  951. this.contentsPageToggle();
  952. break;
  953. case 'libs':
  954. this.libsToogle();
  955. break;
  956. case 'recentBooks':
  957. this.recentBooksToggle();
  958. break;
  959. case 'offlineMode':
  960. this.offlineModeToggle();
  961. break;
  962. case 'settings':
  963. this.settingsToggle();
  964. break;
  965. case 'switchToolbar':
  966. this.toolBarToggle();
  967. break;
  968. case 'donate':
  969. this.donateToggle();
  970. break;
  971. default:
  972. result = false;
  973. break;
  974. }
  975. if (!result && this.activePage == 'TextPage' && this.$refs.page) {
  976. result = true;
  977. const textPage = this.$refs.page;
  978. switch (action) {
  979. case 'bookBegin':
  980. textPage.doHome();
  981. break;
  982. case 'bookEnd':
  983. textPage.doEnd();
  984. break;
  985. case 'pageBack':
  986. textPage.doPageUp();
  987. break;
  988. case 'pageForward':
  989. textPage.doPageDown();
  990. break;
  991. case 'lineBack':
  992. textPage.doUp();
  993. break;
  994. case 'lineForward':
  995. textPage.doDown();
  996. break;
  997. case 'incFontSize':
  998. textPage.doFontSizeInc();
  999. break;
  1000. case 'decFontSize':
  1001. textPage.doFontSizeDec();
  1002. break;
  1003. case 'scrollingSpeedUp':
  1004. textPage.doScrollingSpeedUp();
  1005. break;
  1006. case 'scrollingSpeedDown':
  1007. textPage.doScrollingSpeedDown();
  1008. break;
  1009. default:
  1010. result = false;
  1011. break;
  1012. }
  1013. }
  1014. if (result && event) {
  1015. event.preventDefault();
  1016. event.stopPropagation();
  1017. }
  1018. return result;
  1019. }
  1020. keyHook(event) {
  1021. let result = false;
  1022. if (this.$root.rootRoute() == '/reader') {
  1023. if (this.$root.stdDialog.active)
  1024. return result;
  1025. if (!result)
  1026. result = this.$refs.dialogs.keyHook(event);
  1027. if (!result && this.helpActive)
  1028. result = this.$refs.helpPage.keyHook(event);
  1029. if (!result && this.settingsActive)
  1030. result = this.$refs.settingsPage.keyHook(event);
  1031. if (!result && this.recentBooksActive)
  1032. result = this.$refs.recentBooksPage.keyHook(event);
  1033. if (!result && this.setPositionActive)
  1034. result = this.$refs.setPositionPage.keyHook(event);
  1035. if (!result && this.searchActive)
  1036. result = this.$refs.searchPage.keyHook(event);
  1037. if (!result && this.copyTextActive)
  1038. result = this.$refs.copyTextPage.keyHook(event);
  1039. if (!result && this.contentsActive)
  1040. result = this.$refs.contentsPage.keyHook(event);
  1041. if (!result && this.$refs.page && this.$refs.page.keyHook)
  1042. result = this.$refs.page.keyHook(event);
  1043. if (!result && event.type == 'keydown') {
  1044. const action = this.$root.readerActionByKeyEvent(event);
  1045. if (action == 'loader') {
  1046. result = this.doAction({action, event});
  1047. }
  1048. if (!result && this.activePage == 'TextPage') {
  1049. result = this.doAction({action, event});
  1050. }
  1051. }
  1052. }
  1053. return result;
  1054. }
  1055. }
  1056. //-----------------------------------------------------------------------------
  1057. </script>
  1058. <style scoped>
  1059. .header {
  1060. padding-left: 5px;
  1061. padding-right: 5px;
  1062. background-color: #1B695F;
  1063. color: #000;
  1064. overflow: hidden;
  1065. height: 50px;
  1066. }
  1067. .main {
  1068. background-color: #EBE2C9;
  1069. color: #000;
  1070. }
  1071. .tool-button {
  1072. margin: 0px 2px 0 2px;
  1073. padding: 0;
  1074. color: #3E843E;
  1075. background-color: #E6EDF4;
  1076. margin-top: 5px;
  1077. height: 38px;
  1078. width: 38px;
  1079. border: 0;
  1080. border-radius: 6px;
  1081. box-shadow: 3px 3px 5px black;
  1082. outline: 0;
  1083. }
  1084. .tool-button:hover {
  1085. background-color: white;
  1086. cursor: pointer;
  1087. }
  1088. .tool-button-active {
  1089. box-shadow: 0 0 0;
  1090. color: white;
  1091. background-color: #8AB45F;
  1092. position: relative;
  1093. top: 1px;
  1094. left: 1px;
  1095. }
  1096. .tool-button-active:hover {
  1097. color: white;
  1098. background-color: #81C581;
  1099. cursor: pointer;
  1100. }
  1101. .tool-button-disabled {
  1102. color: lightgray;
  1103. background-color: gray;
  1104. cursor: default;
  1105. }
  1106. .tool-button-disabled:hover {
  1107. color: lightgray;
  1108. background-color: gray;
  1109. cursor: default;
  1110. }
  1111. .space {
  1112. width: 10px;
  1113. display: inline-block;
  1114. }
  1115. .clear {
  1116. color: rgba(0,0,0,0);
  1117. }
  1118. </style>