Reader.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513
  1. <template>
  2. <el-container>
  3. <el-header v-show="toolBarActive" height='50px'>
  4. <div class="header">
  5. <el-tooltip content="Загрузить книгу" :open-delay="1000" effect="light">
  6. <el-button ref="loader" class="tool-button" :class="buttonActiveClass('loader')" @click="buttonClick('loader')"><i class="el-icon-back"></i></el-button>
  7. </el-tooltip>
  8. <div>
  9. <el-tooltip content="Действие назад" :open-delay="1000" effect="light">
  10. <el-button ref="undoAction" class="tool-button" @click="buttonClick('undoAction')" ><i class="el-icon-arrow-left"></i></el-button>
  11. </el-tooltip>
  12. <el-tooltip content="Действие вперед" :open-delay="1000" effect="light">
  13. <el-button ref="redoAction" class="tool-button" @click="buttonClick('redoAction')" ><i class="el-icon-arrow-right"></i></el-button>
  14. </el-tooltip>
  15. <div class="space"></div>
  16. <el-tooltip content="На весь экран" :open-delay="1000" effect="light">
  17. <el-button ref="fullScreen" class="tool-button" :class="buttonActiveClass('fullScreen')" @click="buttonClick('fullScreen')"><i class="el-icon-rank"></i></el-button>
  18. </el-tooltip>
  19. <el-tooltip content="Прокрутка книги" :open-delay="1000" effect="light">
  20. <el-button ref="setPosition" class="tool-button" @click="buttonClick('setPosition')"><i class="el-icon-d-arrow-right"></i></el-button>
  21. </el-tooltip>
  22. <el-tooltip content="Плавный скроллинг" :open-delay="1000" effect="light">
  23. <el-button ref="scrolling" class="tool-button" @click="buttonClick('scrolling')"><i class="el-icon-sort"></i></el-button>
  24. </el-tooltip>
  25. <el-tooltip content="Найти в тексте" :open-delay="1000" effect="light">
  26. <el-button ref="search" class="tool-button" @click="buttonClick('search')"><i class="el-icon-search"></i></el-button>
  27. </el-tooltip>
  28. <el-tooltip content="Скопировать текст со страницы" :open-delay="1000" effect="light">
  29. <el-button ref="copyText" class="tool-button" @click="buttonClick('copyText')"><i class="el-icon-edit-outline"></i></el-button>
  30. </el-tooltip>
  31. <el-tooltip content="Принудительно обновить книгу в обход кеша" :open-delay="1000" effect="light">
  32. <el-button ref="refresh" class="tool-button" @click="buttonClick('refresh')"><i class="el-icon-refresh" :class="{clear: !showRefreshIcon}"></i></el-button>
  33. </el-tooltip>
  34. <div class="space"></div>
  35. <el-tooltip content="История" :open-delay="1000" effect="light">
  36. <el-button ref="history" class="tool-button" :class="buttonActiveClass('history')" @click="buttonClick('history')"><i class="el-icon-document"></i></el-button>
  37. </el-tooltip>
  38. </div>
  39. <el-tooltip content="Настроить" :open-delay="1000" effect="light">
  40. <el-button ref="settings" class="tool-button" @click="buttonClick('settings')"><i class="el-icon-setting"></i></el-button>
  41. </el-tooltip>
  42. </div>
  43. </el-header>
  44. <el-main>
  45. <keep-alive>
  46. <component ref="page" :is="activePage"
  47. @load-book="loadBook"
  48. @book-pos-changed="bookPosChanged"
  49. @tool-bar-toggle="toolBarToggle"
  50. ></component>
  51. </keep-alive>
  52. <HistoryPage v-if="historyActive" ref="historyPage" @load-book="loadBook" @history-toggle="historyToggle"></HistoryPage>
  53. </el-main>
  54. </el-container>
  55. </template>
  56. <script>
  57. //-----------------------------------------------------------------------------
  58. import Vue from 'vue';
  59. import Component from 'vue-class-component';
  60. import LoaderPage from './LoaderPage/LoaderPage.vue';
  61. import HistoryPage from './HistoryPage/HistoryPage.vue';
  62. import TextPage from './TextPage/TextPage.vue';
  63. import ProgressPage from './ProgressPage/ProgressPage.vue';
  64. import bookManager from './share/bookManager';
  65. import readerApi from '../../api/reader';
  66. import {sleep} from '../../share/utils';
  67. export default @Component({
  68. components: {
  69. LoaderPage,
  70. HistoryPage,
  71. TextPage,
  72. ProgressPage
  73. },
  74. watch: {
  75. bookPos: function(newValue) {
  76. if (newValue !== undefined && this.activePage == 'TextPage') {
  77. const textPage = this.$refs.page;
  78. if (textPage.bookPos != newValue) {
  79. textPage.bookPos = newValue;
  80. }
  81. if (this.lastOpenedBook && this.lastOpenedBook.bookPos != newValue) {
  82. this.commit('reader/setOpenedBook', Object.assign({}, this.lastOpenedBook, {bookPos: newValue, bookPosSeen: this.bookPosSeen}));
  83. }
  84. }
  85. },
  86. routeParamPos: function(newValue) {
  87. if (newValue !== undefined && newValue != this.bookPos) {
  88. this.bookPos = newValue;
  89. }
  90. },
  91. routeParamUrl: function(newValue) {
  92. if (newValue !== '' && newValue !== this.lastOpenedBook.url) {
  93. this.loadBook({url: newValue, bookPos: this.routeParamPos});
  94. }
  95. },
  96. },
  97. })
  98. class Reader extends Vue {
  99. loaderActive = false;
  100. historyActive = false;
  101. progressActive = false;
  102. fullScreenActive = false;
  103. bookPos = null;
  104. allowUrlParamBookPos = true;
  105. showRefreshIcon = true;
  106. created() {
  107. this.commit = this.$store.commit;
  108. this.dispatch = this.$store.dispatch;
  109. this.reader = this.$store.state.reader;
  110. this.$root.addKeyHook(this.keyHook);
  111. this.lastActivePage = false;
  112. document.addEventListener('fullscreenchange', (event) => {
  113. this.fullScreenActive = (document.fullscreenElement !== null);
  114. });
  115. }
  116. mounted() {
  117. /*while (this.lastOpenedBook) {
  118. this.commit('reader/delOpenedBook', this.lastOpenedBook);
  119. }*/
  120. if (this.$root.rootRoute == '/reader') {
  121. if (this.routeParamUrl) {
  122. this.loadBook({url: this.routeParamUrl, bookPos: this.routeParamPos});
  123. } else if (this.lastOpenedBook) {
  124. this.loadBook({url: this.lastOpenedBook.url});
  125. } else {
  126. this.loaderActive = true;
  127. }
  128. }
  129. }
  130. get routeParamPos() {
  131. let result = undefined;
  132. const q = this.$route.query;
  133. if (q['__p']) {
  134. result = q['__p'];
  135. if (Array.isArray(result))
  136. result = result[0];
  137. }
  138. return (result ? parseInt(result, 10) || 0 : result);
  139. }
  140. updateRoute(isNewRoute) {
  141. const pos = (this.bookPos != undefined && this.allowUrlParamBookPos ? `__p=${this.bookPos}&` : '');
  142. if (isNewRoute)
  143. this.$router.push(`/reader?${pos}url=${this.lastOpenedBook.url}`);
  144. else
  145. this.$router.replace(`/reader?${pos}url=${this.lastOpenedBook.url}`);
  146. }
  147. get routeParamUrl() {
  148. let result = '';
  149. const path = this.$route.fullPath;
  150. const i = path.indexOf('url=');
  151. if (i >= 0) {
  152. result = path.substr(i + 4);
  153. }
  154. return decodeURIComponent(result);
  155. }
  156. bookPosChanged(event) {
  157. this.bookPosSeen = event.bookPosSeen;
  158. this.bookPos = event.bookPos;
  159. this.updateRoute();
  160. }
  161. get toolBarActive() {
  162. return this.reader.toolBarActive;
  163. }
  164. get lastOpenedBook() {
  165. return this.$store.getters['reader/lastOpenedBook'];
  166. }
  167. toolBarToggle() {
  168. this.commit('reader/setToolBarActive', !this.toolBarActive);
  169. this.$root.$emit('resize');
  170. }
  171. fullScreenToggle() {
  172. this.fullScreenActive = !this.fullScreenActive;
  173. if (this.fullScreenActive) {
  174. const element = document.documentElement;
  175. if (element.requestFullscreen) {
  176. element.requestFullscreen();
  177. } else if (element.webkitrequestFullscreen) {
  178. element.webkitRequestFullscreen();
  179. } else if (element.mozRequestFullscreen) {
  180. element.mozRequestFullScreen();
  181. }
  182. } else {
  183. if (document.cancelFullScreen) {
  184. document.cancelFullScreen();
  185. } else if (document.mozCancelFullScreen) {
  186. document.mozCancelFullScreen();
  187. } else if (document.webkitCancelFullScreen) {
  188. document.webkitCancelFullScreen();
  189. }
  190. }
  191. }
  192. loaderToggle() {
  193. this.loaderActive = !this.loaderActive;
  194. }
  195. historyToggle() {
  196. this.historyActive = !this.historyActive;
  197. }
  198. buttonClick(button) {
  199. switch (button) {
  200. case 'loader':
  201. this.loaderToggle();
  202. break;
  203. case 'history':
  204. this.historyToggle();
  205. break;
  206. case 'fullScreen':
  207. this.fullScreenToggle();
  208. break;
  209. case 'refresh':
  210. if (this.lastOpenedBook) {
  211. this.loadBook({url: this.lastOpenedBook.url, force: true});
  212. }
  213. break;
  214. }
  215. this.$refs[button].$el.blur();
  216. }
  217. buttonActiveClass(button) {
  218. const classActive = { 'tool-button-active': true, 'tool-button-active:hover': true };
  219. switch (button) {
  220. case 'loader': return (this.loaderActive ? classActive : {});
  221. case 'history': return (this.historyActive ? classActive : {});
  222. case 'fullScreen': return (this.fullScreenActive ? classActive : {});
  223. }
  224. return {};
  225. }
  226. get activePage() {
  227. let result = '';
  228. if (this.progressActive)
  229. result = 'ProgressPage';
  230. else if (this.loaderActive)
  231. result = 'LoaderPage';
  232. else if (this.lastOpenedBook)
  233. result = 'TextPage';
  234. if (!result) {
  235. this.loaderActive = true;
  236. result = 'LoaderPage';
  237. }
  238. if (result != 'TextPage') {
  239. this.$root.$emit('set-app-title');
  240. }
  241. if (this.lastActivePage != result && result == 'TextPage') {
  242. //акивируем страницу с текстом
  243. this.$nextTick(async() => {
  244. const last = this.lastOpenedBook;
  245. const isParsed = await bookManager.hasBookParsed(last);
  246. if (!isParsed) {
  247. this.$root.$emit('set-app-title');
  248. return;
  249. }
  250. this.updateRoute();
  251. const textPage = this.$refs.page;
  252. if (textPage.showBook) {
  253. textPage.lastBook = last;
  254. textPage.bookPos = (last.bookPos !== undefined ? last.bookPos : 0);
  255. textPage.showBook();
  256. }
  257. });
  258. }
  259. this.$nextTick(() => {
  260. if (this.$refs.page)
  261. this.$refs.page.fullScreenToggle = this.fullScreenToggle;
  262. });
  263. this.lastActivePage = result;
  264. return result;
  265. }
  266. loadBook(opts) {
  267. this.progressActive = true;
  268. this.$nextTick(async() => {
  269. const progress = this.$refs.page;
  270. try {
  271. progress.show();
  272. progress.setState({state: 'parse'});
  273. // есть ли среди истории OpenedBook
  274. const key = bookManager.keyFromUrl(opts.url);
  275. let wasOpened = this.reader.openedBook[key];
  276. wasOpened = (wasOpened ? wasOpened : {});
  277. const bookPos = (opts.bookPos !== undefined ? opts.bookPos : wasOpened.bookPos);
  278. const bookPosSeen = (opts.bookPos !== undefined ? opts.bookPos : wasOpened.bookPosSeen);
  279. let book = null;
  280. if (!opts.force) {
  281. // пытаемся загрузить и распарсить книгу в менеджере из локального кеша
  282. const bookParsed = await bookManager.getBook({url: opts.url}, (prog) => {
  283. progress.setState({progress: prog});
  284. });
  285. // если есть в локальном кеше
  286. if (bookParsed) {
  287. this.commit('reader/setOpenedBook', Object.assign({bookPos, bookPosSeen}, bookManager.metaOnly(bookParsed)));
  288. this.loaderActive = false;
  289. progress.hide(); this.progressActive = false;
  290. this.blinkCachedLoadMessage();
  291. return;
  292. }
  293. // иначе идем на сервер
  294. // пытаемся загрузить готовый файл с сервера
  295. if (wasOpened.path) {
  296. try {
  297. const resp = await readerApi.loadCachedBook(wasOpened.path, (state) => {
  298. progress.setState(state);
  299. });
  300. book = Object.assign({}, wasOpened, {data: resp.data});
  301. } catch (e) {
  302. //молчим
  303. }
  304. }
  305. }
  306. progress.setState({totalSteps: 5});
  307. // не удалось, скачиваем книгу полностью с конвертацией
  308. let loadCached = true;
  309. if (!book) {
  310. book = await readerApi.loadBook(opts.url, (state) => {
  311. progress.setState(state);
  312. });
  313. loadCached = false;
  314. }
  315. // добавляем в bookManager
  316. progress.setState({state: 'parse', step: 5});
  317. const addedBook = await bookManager.addBook(book, (prog) => {
  318. progress.setState({progress: prog});
  319. });
  320. // добавляем в историю
  321. this.commit('reader/setOpenedBook', Object.assign({bookPos, bookPosSeen}, bookManager.metaOnly(addedBook)));
  322. this.updateRoute(true);
  323. this.loaderActive = false;
  324. progress.hide(); this.progressActive = false;
  325. if (loadCached) {
  326. this.blinkCachedLoadMessage();
  327. } else
  328. this.stopBlink = true;
  329. } catch (e) {
  330. progress.hide(); this.progressActive = false;
  331. this.loaderActive = true;
  332. this.$alert(e.message, 'Ошибка', {type: 'error'});
  333. }
  334. });
  335. }
  336. blinkCachedLoadMessage() {
  337. this.blinkCount = 30;
  338. if (!this.inBlink) {
  339. this.inBlink = true;
  340. this.stopBlink = false;
  341. this.$nextTick(async() => {
  342. let page = this.$refs.page;
  343. while (this.blinkCount) {
  344. this.showRefreshIcon = !this.showRefreshIcon;
  345. if (page.blinkCachedLoadMessage)
  346. page.blinkCachedLoadMessage(this.showRefreshIcon);
  347. await sleep(500);
  348. if (this.stopBlink)
  349. break;
  350. this.blinkCount--;
  351. page = this.$refs.page;
  352. }
  353. this.showRefreshIcon = true;
  354. this.inBlink = false;
  355. if (page.blinkCachedLoadMessage)
  356. page.blinkCachedLoadMessage('finish');
  357. });
  358. }
  359. }
  360. keyHook(event) {
  361. if (this.$root.rootRoute == '/reader') {
  362. let handled = false;
  363. if (this.historyActive)
  364. handled = this.$refs.historyPage.keyHook(event);
  365. if (!handled && this.$refs.page && this.$refs.page.keyHook)
  366. handled = this.$refs.page.keyHook(event);
  367. if (!handled && event.type == 'keydown') {
  368. switch (event.code) {
  369. case 'Escape':
  370. this.loaderToggle();
  371. break;
  372. case 'KeyH':
  373. this.historyToggle();
  374. break;
  375. }
  376. }
  377. }
  378. }
  379. }
  380. //-----------------------------------------------------------------------------
  381. </script>
  382. <style scoped>
  383. .el-container {
  384. padding: 0;
  385. margin: 0;
  386. height: 100%;
  387. }
  388. .el-header {
  389. padding-left: 5px;
  390. padding-right: 5px;
  391. background-color: #1B695F;
  392. color: #000;
  393. overflow-x: auto;
  394. overflow-y: hidden;
  395. }
  396. .header {
  397. display: flex;
  398. justify-content: space-between;
  399. min-width: 550px;
  400. }
  401. .el-main {
  402. position: relative;
  403. display: flex;
  404. padding: 0;
  405. margin: 0;
  406. background-color: #EBE2C9;
  407. color: #000;
  408. }
  409. .tool-button {
  410. margin: 0;
  411. margin-left: 2px;
  412. margin-right: 2px;
  413. padding: 0;
  414. color: #3E843E;
  415. background-color: #E6EDF4;
  416. margin-top: 5px;
  417. height: 38px;
  418. width: 38px;
  419. border: 0;
  420. box-shadow: 3px 3px 5px black;
  421. }
  422. .tool-button:hover {
  423. background-color: white;
  424. }
  425. .tool-button-active {
  426. box-shadow: 0 0 0;
  427. color: white;
  428. background-color: #8AB45F;
  429. position: relative;
  430. top: 1px;
  431. left: 1px;
  432. }
  433. .tool-button-active:hover {
  434. color: white;
  435. background-color: #81C581;
  436. }
  437. i {
  438. font-size: 200%;
  439. }
  440. .space {
  441. width: 10px;
  442. display: inline-block;
  443. }
  444. .clear {
  445. color: rgba(0,0,0,0);
  446. }
  447. </style>