Reader.vue 48 KB

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