TextPage.vue 33 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078
  1. <template>
  2. <div ref="main" class="main">
  3. <div class="layout back">
  4. <div v-html="background"></div>
  5. <!-- img -->
  6. </div>
  7. <div ref="scrollBox1" class="layout" style="overflow: hidden" @wheel.prevent.stop="onMouseWheel">
  8. <div ref="scrollingPage1" class="layout" @transitionend="onScrollingTransitionEnd">
  9. <div v-html="page1"></div>
  10. </div>
  11. </div>
  12. <div ref="scrollBox2" class="layout" style="overflow: hidden" @wheel.prevent.stop="onMouseWheel">
  13. <div ref="scrollingPage2" class="layout" @transitionend="onScrollingTransitionEnd">
  14. <div v-html="page2"></div>
  15. </div>
  16. </div>
  17. <div v-show="showStatusBar" ref="statusBar" class="layout">
  18. <div v-html="statusBar"></div>
  19. </div>
  20. <div v-show="clickControl" ref="layoutEvents" class="layout events" @mousedown.prevent.stop="onMouseDown" @mouseup.prevent.stop="onMouseUp"
  21. @wheel.prevent.stop="onMouseWheel"
  22. @touchstart.stop="onTouchStart" @touchend.stop="onTouchEnd" @touchcancel.prevent.stop="onTouchCancel"
  23. oncontextmenu="return false;">
  24. <div v-show="showStatusBar" v-html="statusBarClickable" @mousedown.prevent.stop @touchstart.stop
  25. @click.prevent.stop="onStatusBarClick"></div>
  26. <div v-show="fontsLoading" ref="fontsLoading"></div>
  27. </div>
  28. <div v-show="!clickControl && showStatusBar" class="layout" v-html="statusBarClickable" @mousedown.prevent.stop @touchstart.stop
  29. @click.prevent.stop="onStatusBarClick"></div>
  30. <!-- невидимым делать нельзя, вовремя не подгружаютя шрифты -->
  31. <canvas ref="offscreenCanvas" class="layout" style="width: 0px; height: 0px"></canvas>
  32. </div>
  33. </template>
  34. <script>
  35. //-----------------------------------------------------------------------------
  36. import Vue from 'vue';
  37. import Component from 'vue-class-component';
  38. import {loadCSS} from 'fg-loadcss';
  39. import _ from 'lodash';
  40. import {sleep} from '../../../share/utils';
  41. import bookManager from '../share/bookManager';
  42. import DrawHelper from './DrawHelper';
  43. import rstore from '../../../store/modules/reader';
  44. import {clickMap} from '../share/clickMap';
  45. const minLayoutWidth = 100;
  46. export default @Component({
  47. watch: {
  48. bookPos: function() {
  49. this.$emit('book-pos-changed', {bookPos: this.bookPos, bookPosSeen: this.bookPosSeen});
  50. this.draw();
  51. },
  52. bookPosSeen: function() {
  53. this.$emit('book-pos-changed', {bookPos: this.bookPos, bookPosSeen: this.bookPosSeen});
  54. },
  55. settings: function() {
  56. this.debouncedLoadSettings();
  57. },
  58. toggleLayout: function() {
  59. this.updateLayout();
  60. },
  61. inTransition: function() {
  62. this.updateLayout();
  63. },
  64. },
  65. })
  66. class TextPage extends Vue {
  67. toggleLayout = false;
  68. showStatusBar = false;
  69. clickControl = true;
  70. background = null;
  71. page1 = null;
  72. page2 = null;
  73. statusBar = null;
  74. statusBarClickable = null;
  75. fontsLoading = null;
  76. lastBook = null;
  77. bookPos = 0;
  78. bookPosSeen = null;
  79. fontStyle = null;
  80. fontSize = null;
  81. fontName = null;
  82. fontWeight = null;
  83. inTransition = false;
  84. meta = null;
  85. created() {
  86. this.drawHelper = new DrawHelper();
  87. this.commit = this.$store.commit;
  88. this.dispatch = this.$store.dispatch;
  89. this.config = this.$store.state.config;
  90. this.reader = this.$store.state.reader;
  91. this.debouncedStartClickRepeat = _.debounce((x, y) => {
  92. this.startClickRepeat(x, y);
  93. }, 800);
  94. this.debouncedPrepareNextPage = _.debounce(() => {
  95. this.prepareNextPage();
  96. }, 100);
  97. this.debouncedDrawStatusBar = _.throttle(() => {
  98. this.drawStatusBar();
  99. }, 60);
  100. this.debouncedLoadSettings = _.debounce(() => {
  101. this.loadSettings();
  102. }, 50);
  103. this.debouncedUpdatePage = _.debounce((lines) => {
  104. this.toggleLayout = !this.toggleLayout;
  105. if (this.toggleLayout)
  106. this.page1 = this.drawHelper.drawPage(lines);
  107. else
  108. this.page2 = this.drawHelper.drawPage(lines);
  109. this.doPageTransition();
  110. }, 10);
  111. this.$root.$on('resize', () => {this.$nextTick(this.onResize)});
  112. this.mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
  113. }
  114. mounted() {
  115. this.context = this.$refs.offscreenCanvas.getContext('2d');
  116. }
  117. hex2rgba(hex, alpha = 1) {
  118. const [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16));
  119. return `rgba(${r},${g},${b},${alpha})`;
  120. }
  121. calcDrawProps() {
  122. //preloaded fonts
  123. this.fontList = [`12px ${this.fontName}`];
  124. //widths
  125. this.realWidth = this.$refs.main.clientWidth;
  126. this.realHeight = this.$refs.main.clientHeight;
  127. this.$refs.layoutEvents.style.width = this.realWidth + 'px';
  128. this.$refs.layoutEvents.style.height = this.realHeight + 'px';
  129. this.w = this.realWidth - 2*this.indentLR;
  130. this.h = this.realHeight - (this.showStatusBar ? this.statusBarHeight : 0) - 2*this.indentTB;
  131. this.lineHeight = this.fontSize + this.lineInterval;
  132. this.pageLineCount = 1 + Math.floor((this.h - this.fontSize)/this.lineHeight);
  133. //stuff
  134. this.currentTransition = '';
  135. this.pageChangeDirectionDown = true;
  136. this.fontShift = this.fontVertShift/100;
  137. this.textShift = this.textVertShift/100 + this.fontShift;
  138. //drawHelper
  139. this.drawHelper.realWidth = this.realWidth;
  140. this.drawHelper.realHeight = this.realHeight;
  141. this.drawHelper.lastBook = this.lastBook;
  142. this.drawHelper.book = this.book;
  143. this.drawHelper.parsed = this.parsed;
  144. this.drawHelper.pageLineCount = this.pageLineCount;
  145. this.drawHelper.backgroundColor = this.backgroundColor;
  146. this.drawHelper.statusBarColor = this.statusBarColor;
  147. this.drawHelper.fontStyle = this.fontStyle;
  148. this.drawHelper.fontWeight = this.fontWeight;
  149. this.drawHelper.fontSize = this.fontSize;
  150. this.drawHelper.fontName = this.fontName;
  151. this.drawHelper.fontShift = this.fontShift;
  152. this.drawHelper.textColor = this.textColor;
  153. this.drawHelper.textShift = this.textShift;
  154. this.drawHelper.p = this.p;
  155. this.drawHelper.w = this.w;
  156. this.drawHelper.textAlignJustify = this.textAlignJustify;
  157. this.drawHelper.lineHeight = this.lineHeight;
  158. this.drawHelper.context = this.context;
  159. //сообщение "Загрузка шрифтов..."
  160. const flText = 'Загрузка шрифта...';
  161. this.$refs.fontsLoading.innerHTML = flText;
  162. const fontsLoadingStyle = this.$refs.fontsLoading.style;
  163. fontsLoadingStyle.position = 'absolute';
  164. fontsLoadingStyle.fontSize = this.fontSize + 'px';
  165. fontsLoadingStyle.top = (this.realHeight/2 - 2*this.fontSize) + 'px';
  166. fontsLoadingStyle.left = (this.realWidth - this.drawHelper.measureText(flText, {}))/2 + 'px';
  167. //parsed
  168. if (this.parsed) {
  169. this.parsed.p = this.p;
  170. this.parsed.w = this.w;// px, ширина текста
  171. this.parsed.font = this.font;
  172. this.parsed.wordWrap = this.wordWrap;
  173. let t = '';
  174. while (this.drawHelper.measureText(t, {}) < this.w) t += 'Щ';
  175. this.parsed.maxWordLength = t.length - 1;
  176. this.parsed.measureText = this.drawHelper.measureText.bind(this.drawHelper);
  177. }
  178. //statusBar
  179. this.$refs.statusBar.style.left = '0px';
  180. this.$refs.statusBar.style.top = (this.statusBarTop ? 1 : this.realHeight - this.statusBarHeight) + 'px';
  181. this.statusBarColor = this.hex2rgba(this.textColor || '#000000', this.statusBarColorAlpha);
  182. this.statusBarClickable = this.drawHelper.statusBarClickable(this.statusBarTop, this.statusBarHeight);
  183. //scrolling page
  184. const pageDelta = this.h - (this.pageLineCount*this.lineHeight - this.lineInterval);
  185. let y = this.indentTB + pageDelta/2;
  186. if (this.showStatusBar)
  187. y += this.statusBarHeight*(this.statusBarTop ? 1 : 0);
  188. const page1 = this.$refs.scrollBox1;
  189. const page2 = this.$refs.scrollBox2;
  190. page1.style.width = this.w + 'px';
  191. page2.style.width = this.w + 'px';
  192. page1.style.height = (this.h - pageDelta) + 'px';
  193. page2.style.height = (this.h - pageDelta) + 'px';
  194. page1.style.top = y + 'px';
  195. page2.style.top = y + 'px';
  196. page1.style.left = this.indentLR + 'px';
  197. page2.style.left = this.indentLR + 'px';
  198. }
  199. async checkLoadedFonts() {
  200. let loaded = await Promise.all(this.fontList.map(font => document.fonts.check(font)));
  201. if (loaded.some(r => !r)) {
  202. loaded = await Promise.all(this.fontList.map(font => document.fonts.load(font)));
  203. if (loaded.some(r => !r.length))
  204. throw new Error('some font not loaded');
  205. }
  206. }
  207. async loadFonts() {
  208. this.fontsLoading = true;
  209. if (!this.fontsLoaded)
  210. this.fontsLoaded = {};
  211. //загрузка дин.шрифта
  212. const loaded = this.fontsLoaded[this.fontCssUrl];
  213. if (this.fontCssUrl && !loaded) {
  214. loadCSS(this.fontCssUrl);
  215. this.fontsLoaded[this.fontCssUrl] = 1;
  216. }
  217. const waitingTime = 10*1000;
  218. const delay = 100;
  219. let i = 0;
  220. //ждем шрифты
  221. while (i < waitingTime/delay) {
  222. i++;
  223. try {
  224. await this.checkLoadedFonts();
  225. i = waitingTime;
  226. } catch (e) {
  227. await sleep(delay);
  228. }
  229. }
  230. if (i !== waitingTime) {
  231. this.$notify.error({
  232. title: 'Ошибка загрузки',
  233. message: 'Некоторые шрифты не удалось загрузить'
  234. });
  235. }
  236. this.fontsLoading = false;
  237. }
  238. getSettings() {
  239. const settings = this.settings;
  240. for (let prop in rstore.settingDefaults) {
  241. this[prop] = settings[prop];
  242. }
  243. const wf = this.webFontName;
  244. const i = _.findIndex(rstore.webFonts, ['name', wf]);
  245. if (wf && i >= 0) {
  246. this.fontName = wf;
  247. this.fontCssUrl = rstore.webFonts[i].css;
  248. this.fontVertShift = settings.fontShifts[wf] || 0;
  249. }
  250. }
  251. async calcPropsAndLoadFonts(omitLoadFonts) {
  252. this.calcDrawProps();
  253. this.setBackground();
  254. if (!omitLoadFonts)
  255. await this.loadFonts();
  256. this.draw();
  257. // шрифты хрен знает когда подгружаются в div, поэтому
  258. const parsed = this.parsed;
  259. if (!parsed.force) {
  260. let i = 0;
  261. parsed.force = true;
  262. while (i < 10) {
  263. await sleep(1000);
  264. if (this.parsed != parsed)
  265. break;
  266. this.draw();
  267. i++;
  268. }
  269. parsed.force = false;
  270. }
  271. }
  272. loadSettings() {
  273. (async() => {
  274. let fontName = this.fontName;
  275. this.getSettings();
  276. await this.calcPropsAndLoadFonts(fontName == this.fontName);
  277. })();
  278. }
  279. showBook() {
  280. this.$refs.main.focus();
  281. this.toggleLayout = false;
  282. this.updateLayout();
  283. this.book = null;
  284. this.meta = null;
  285. this.fb2 = null;
  286. this.parsed = null;
  287. this.linesUp = null;
  288. this.linesDown = null;
  289. this.statusBarMessage = '';
  290. this.getSettings();
  291. this.calcDrawProps();
  292. this.draw();// пока не загрузили, очистим канвас
  293. if (this.lastBook) {
  294. (async() => {
  295. //подождем ленивый парсинг
  296. this.stopLazyParse = true;
  297. while (this.doingLazyParse) await sleep(10);
  298. const isParsed = await bookManager.hasBookParsed(this.lastBook);
  299. if (!isParsed) {
  300. return;
  301. }
  302. this.book = await bookManager.getBook(this.lastBook);
  303. this.meta = bookManager.metaOnly(this.book);
  304. this.fb2 = this.meta.fb2;
  305. const authorName = _.compact([
  306. this.fb2.lastName,
  307. this.fb2.firstName,
  308. this.fb2.middleName
  309. ]).join(' ');
  310. this.title = _.compact([
  311. authorName,
  312. this.fb2.bookTitle
  313. ]).join(' - ');
  314. this.$root.$emit('set-app-title', this.title);
  315. this.parsed = this.book.parsed;
  316. this.page1 = null;
  317. this.page2 = null;
  318. this.statusBar = null;
  319. await this.stopTextScrolling();
  320. this.calcPropsAndLoadFonts();
  321. this.refreshTime();
  322. if (this.lazyParseEnabled)
  323. this.lazyParsePara();
  324. })();
  325. }
  326. }
  327. updateLayout() {
  328. if (this.inTransition) {
  329. this.$refs.scrollBox1.style.visibility = 'visible';
  330. this.$refs.scrollBox2.style.visibility = 'visible';
  331. } else if (this.toggleLayout) {
  332. this.$refs.scrollBox1.style.visibility = 'visible';
  333. this.$refs.scrollBox2.style.visibility = 'hidden';
  334. } else {
  335. this.$refs.scrollBox1.style.visibility = 'hidden';
  336. this.$refs.scrollBox2.style.visibility = 'visible';
  337. }
  338. }
  339. setBackground() {
  340. this.background = `<div class="layout ${this.wallpaper}" style="width: ${this.realWidth}px; height: ${this.realHeight}px;` +
  341. ` background-color: ${this.backgroundColor}"></div>`;
  342. }
  343. async onResize() {
  344. /*this.page1 = null;
  345. this.page2 = null;
  346. this.statusBar = null;*/
  347. this.calcDrawProps();
  348. this.setBackground();
  349. this.draw();
  350. }
  351. get settings() {
  352. return this.$store.state.reader.settings;
  353. }
  354. get font() {
  355. return `${this.fontStyle} ${this.fontWeight} ${this.fontSize}px ${this.fontName}`;
  356. }
  357. onScrollingTransitionEnd() {
  358. if (this.resolveTransitionFinish)
  359. this.resolveTransitionFinish();
  360. }
  361. startSearch(needle) {
  362. this.drawHelper.needle = '';
  363. const words = needle.split(' ');
  364. for (const word of words) {
  365. if (word != '') {
  366. this.drawHelper.needle = word;
  367. break;
  368. }
  369. }
  370. this.drawHelper.searching = true;
  371. this.draw();
  372. }
  373. stopSearch() {
  374. this.drawHelper.searching = false;
  375. this.draw();
  376. }
  377. async startTextScrolling() {
  378. if (this.doingScrolling || !this.book || !this.parsed.textLength || !this.linesDown || this.pageLineCount < 1 ||
  379. this.linesDown.length <= this.pageLineCount) {
  380. this.$emit('stop-scrolling');
  381. return;
  382. }
  383. this.stopScrolling = false;
  384. this.doingScrolling = true;
  385. const transitionFinish = (timeout) => {
  386. return new Promise(async(resolve) => {
  387. this.resolveTransitionFinish = resolve;
  388. let wait = timeout/100;
  389. while (wait > 0 && !this.stopScrolling) {
  390. wait--;
  391. await sleep(100);
  392. }
  393. resolve();
  394. });
  395. };
  396. if (!this.toggleLayout)
  397. this.page1 = this.page2;
  398. this.toggleLayout = true;
  399. await this.$nextTick();
  400. await sleep(50);
  401. this.cachedPos = -1;
  402. const page = this.$refs.scrollingPage1;
  403. let i = 0;
  404. while (!this.stopScrolling) {
  405. page.style.transition = `${this.scrollingDelay}ms ${this.scrollingType}`;
  406. page.style.transform = `translateY(-${this.lineHeight}px)`;
  407. if (i > 0) {
  408. this.doDown();
  409. if (this.linesDown.length <= this.pageLineCount + 1) {
  410. this.stopScrolling = true;
  411. }
  412. }
  413. await transitionFinish(this.scrollingDelay + 201);
  414. page.style.transition = '';
  415. page.style.transform = 'none';
  416. page.offsetHeight;
  417. i++;
  418. }
  419. this.resolveTransitionFinish = null;
  420. this.doingScrolling = false;
  421. this.$emit('stop-scrolling');
  422. }
  423. async stopTextScrolling() {
  424. this.stopScrolling = true;
  425. const page = this.$refs.scrollingPage1;
  426. page.style.transition = '';
  427. page.style.transform = 'none';
  428. page.offsetHeight;
  429. while (this.doingScrolling) await sleep(10);
  430. }
  431. draw() {
  432. //scrolling
  433. if (this.doingScrolling) {
  434. if (this.cachedPos == this.bookPos) {
  435. this.linesDown = this.linesCached.linesDown;
  436. this.linesUp = this.linesCached.linesUp;
  437. this.page1 = this.pageCached;
  438. } else {
  439. const lines = this.getLines(this.bookPos);
  440. this.linesDown = lines.linesDown;
  441. this.linesUp = lines.linesUp;
  442. this.page1 = this.drawHelper.drawPage(lines.linesDown);
  443. }
  444. //caching next
  445. if (this.cachedPageTimer)
  446. clearTimeout(this.cachedPageTimer);
  447. this.cachedPageTimer = setTimeout(() => {
  448. if (this.linesDown && this.linesDown.length > this.pageLineCount && this.pageLineCount > 0) {
  449. this.cachedPos = this.linesDown[1].begin;
  450. this.linesCached = this.getLines(this.cachedPos);
  451. this.pageCached = this.drawHelper.drawPage(this.linesCached.linesDown);
  452. }
  453. this.cachedPageTimer = null;
  454. }, 20);
  455. this.debouncedDrawStatusBar();
  456. return;
  457. }
  458. //check
  459. if (this.w < minLayoutWidth) {
  460. this.page1 = null;
  461. this.page2 = null;
  462. this.statusBar = null;
  463. return;
  464. }
  465. if (this.book && this.bookPos > 0 && this.bookPos >= this.parsed.textLength) {
  466. this.doEnd();
  467. return;
  468. }
  469. //fast draw prepared
  470. if (this.pageChangeDirectionDown && this.pagePrepared && this.bookPos == this.bookPosPrepared) {
  471. this.toggleLayout = !this.toggleLayout;
  472. this.linesDown = this.linesDownNext;
  473. this.linesUp = this.linesUpNext;
  474. this.doPageTransition();
  475. } else {//normal debounced draw
  476. const lines = this.getLines(this.bookPos);
  477. this.linesDown = lines.linesDown;
  478. this.linesUp = lines.linesUp;
  479. this.debouncedUpdatePage(lines.linesDown);
  480. }
  481. this.pagePrepared = false;
  482. this.debouncedPrepareNextPage();
  483. this.debouncedDrawStatusBar();
  484. if (this.book && this.linesDown && this.linesDown.length < this.pageLineCount) {
  485. this.doEnd();
  486. return;
  487. }
  488. }
  489. async doPageTransition() {
  490. if (this.currentTransition) {
  491. this.inTransition = true;
  492. //switch ()
  493. //this.currentTransition
  494. //this.pageChangeTransitionSpeed
  495. //this.pageChangeDirectionDown
  496. this.inTransition = false;
  497. }
  498. this.currentTransition = '';
  499. this.pageChangeDirectionDown = false;//true только если PgDown
  500. }
  501. getLines(bookPos) {
  502. if (!this.parsed || this.pageLineCount < 1)
  503. return {};
  504. return {
  505. linesDown: this.parsed.getLines(bookPos, 2*this.pageLineCount),
  506. linesUp: this.parsed.getLines(bookPos, -2*this.pageLineCount)
  507. };
  508. }
  509. drawStatusBar(message) {
  510. if (this.w < minLayoutWidth) {
  511. this.statusBar = null;
  512. return;
  513. }
  514. if (this.showStatusBar && this.linesDown && this.pageLineCount > 0) {
  515. const lines = this.linesDown;
  516. let i = this.pageLineCount;
  517. if (this.keepLastToFirst)
  518. i--;
  519. i = (i > lines.length - 1 ? lines.length - 1 : i);
  520. if (i >= 0) {
  521. if (!message)
  522. message = this.statusBarMessage;
  523. if (!message)
  524. message = this.title;
  525. this.statusBar = this.drawHelper.drawStatusBar(this.statusBarTop, this.statusBarHeight,
  526. lines[i].end, this.parsed.textLength, message);
  527. this.bookPosSeen = lines[i].end;
  528. }
  529. } else {
  530. this.statusBar = '';
  531. }
  532. }
  533. blinkCachedLoadMessage(state) {
  534. if (state === 'finish') {
  535. this.statusBarMessage = '';
  536. } else if (state) {
  537. this.statusBarMessage = 'Книга загружена из кэша';
  538. } else {
  539. this.statusBarMessage = ' ';
  540. }
  541. this.drawStatusBar();
  542. }
  543. async lazyParsePara() {
  544. if (!this.parsed || this.doingLazyParse)
  545. return;
  546. this.doingLazyParse = true;
  547. let j = 0;
  548. let k = 0;
  549. let prevPerc = 0;
  550. this.stopLazyParse = false;
  551. for (let i = 0; i < this.parsed.para.length; i++) {
  552. j++;
  553. if (j > 1) {
  554. await sleep(1);
  555. j = 0;
  556. }
  557. if (this.stopLazyParse)
  558. break;
  559. this.parsed.parsePara(i);
  560. k++;
  561. if (k > 100) {
  562. let perc = Math.round(i/this.parsed.para.length*100);
  563. if (perc != prevPerc)
  564. this.drawStatusBar(`Обработка текста ${perc}%`);
  565. prevPerc = perc;
  566. k = 0;
  567. }
  568. }
  569. this.drawStatusBar();
  570. this.doingLazyParse = false;
  571. }
  572. async refreshTime() {
  573. if (!this.timeRefreshing) {
  574. this.timeRefreshing = true;
  575. await sleep(60*1000);
  576. if (this.book && this.parsed.textLength) {
  577. this.debouncedDrawStatusBar();
  578. }
  579. this.timeRefreshing = false;
  580. this.refreshTime();
  581. }
  582. }
  583. prepareNextPage() {
  584. // подготовка следующей страницы заранее
  585. if (!this.book || !this.parsed.textLength || !this.linesDown || this.pageLineCount < 1)
  586. return;
  587. let i = this.pageLineCount;
  588. if (this.keepLastToFirst)
  589. i--;
  590. if (i >= 0 && this.linesDown.length > i) {
  591. this.bookPosPrepared = this.linesDown[i].begin;
  592. const lines = this.getLines(this.bookPosPrepared);
  593. this.linesDownNext = lines.linesDown;
  594. this.linesUpNext = lines.linesUp;
  595. if (this.toggleLayout)
  596. this.page2 = this.drawHelper.drawPage(lines.linesDown);//наоборот
  597. else
  598. this.page1 = this.drawHelper.drawPage(lines.linesDown);
  599. this.pagePrepared = true;
  600. }
  601. }
  602. doDown() {
  603. if (this.linesDown && this.linesDown.length > this.pageLineCount && this.pageLineCount > 0) {
  604. this.bookPos = this.linesDown[1].begin;
  605. }
  606. }
  607. doUp() {
  608. if (this.linesUp && this.linesUp.length > 1 && this.pageLineCount > 0) {
  609. this.bookPos = this.linesUp[1].begin;
  610. }
  611. }
  612. doPageDown() {
  613. if (this.linesDown && this.pageLineCount > 0) {
  614. let i = this.pageLineCount;
  615. if (this.keepLastToFirst)
  616. i--;
  617. if (i >= 0 && this.linesDown.length >= 2*i) {
  618. this.currentTransition = this.pageChangeTransition;
  619. this.pageChangeDirectionDown = true;
  620. this.bookPos = this.linesDown[i].begin;
  621. } else
  622. this.doEnd();
  623. }
  624. }
  625. doPageUp() {
  626. if (this.linesUp && this.pageLineCount > 0) {
  627. let i = this.pageLineCount;
  628. if (this.keepLastToFirst)
  629. i--;
  630. i = (i > this.linesUp.length - 1 ? this.linesUp.length - 1 : i);
  631. if (i >= 0 && this.linesUp.length > i) {
  632. this.currentTransition = this.pageChangeTransition;
  633. this.pageChangeDirectionDown = false;
  634. this.bookPos = this.linesUp[i].begin;
  635. }
  636. }
  637. }
  638. doHome() {
  639. this.bookPos = 0;
  640. }
  641. doEnd() {
  642. if (this.parsed.para.length && this.pageLineCount > 0) {
  643. let i = this.parsed.para.length - 1;
  644. let lastPos = this.parsed.para[i].offset + this.parsed.para[i].length - 1;
  645. const lines = this.parsed.getLines(lastPos, -this.pageLineCount);
  646. if (lines) {
  647. i = this.pageLineCount - 1;
  648. i = (i > lines.length - 1 ? lines.length - 1 : i);
  649. this.bookPos = lines[i].begin;
  650. }
  651. }
  652. }
  653. doToolBarToggle() {
  654. this.$emit('tool-bar-toggle');
  655. }
  656. async doFontSizeInc() {
  657. if (!this.settingsChanging) {
  658. this.settingsChanging = true;
  659. const newSize = (this.settings.fontSize + 1 < 100 ? this.settings.fontSize + 1 : 100);
  660. const newSettings = Object.assign({}, this.settings, {fontSize: newSize});
  661. this.commit('reader/setSettings', newSettings);
  662. await sleep(50);
  663. this.settingsChanging = false;
  664. }
  665. }
  666. async doFontSizeDec() {
  667. if (!this.settingsChanging) {
  668. this.settingsChanging = true;
  669. const newSize = (this.settings.fontSize - 1 > 5 ? this.settings.fontSize - 1 : 5);
  670. const newSettings = Object.assign({}, this.settings, {fontSize: newSize});
  671. this.commit('reader/setSettings', newSettings);
  672. await sleep(50);
  673. this.settingsChanging = false;
  674. }
  675. }
  676. async doScrollingSpeedUp() {
  677. if (!this.settingsChanging) {
  678. this.settingsChanging = true;
  679. const newDelay = (this.settings.scrollingDelay - 50 > 1 ? this.settings.scrollingDelay - 50 : 1);
  680. const newSettings = Object.assign({}, this.settings, {scrollingDelay: newDelay});
  681. this.commit('reader/setSettings', newSettings);
  682. await sleep(50);
  683. this.settingsChanging = false;
  684. }
  685. }
  686. async doScrollingSpeedDown() {
  687. if (!this.settingsChanging) {
  688. this.settingsChanging = true;
  689. const newDelay = (this.settings.scrollingDelay + 50 < 10000 ? this.settings.scrollingDelay + 50 : 10000);
  690. const newSettings = Object.assign({}, this.settings, {scrollingDelay: newDelay});
  691. this.commit('reader/setSettings', newSettings);
  692. await sleep(50);
  693. this.settingsChanging = false;
  694. }
  695. }
  696. keyHook(event) {
  697. let result = false;
  698. if (event.type == 'keydown' && !event.ctrlKey && !event.altKey) {
  699. result = true;
  700. switch (event.code) {
  701. case 'ArrowDown':
  702. if (event.shiftKey)
  703. this.doScrollingSpeedUp();
  704. else
  705. this.doDown();
  706. break;
  707. case 'ArrowUp':
  708. if (event.shiftKey)
  709. this.doScrollingSpeedDown();
  710. else
  711. this.doUp();
  712. break;
  713. case 'PageDown':
  714. case 'ArrowRight':
  715. this.doPageDown();
  716. break;
  717. case 'Space':
  718. if (event.shiftKey)
  719. this.doPageUp();
  720. else
  721. this.doPageDown();
  722. break;
  723. case 'PageUp':
  724. case 'ArrowLeft':
  725. case 'Backspace':
  726. this.doPageUp();
  727. break;
  728. case 'Home':
  729. this.doHome();
  730. break;
  731. case 'End':
  732. this.doEnd();
  733. break;
  734. case 'KeyA':
  735. if (event.shiftKey)
  736. this.doFontSizeDec();
  737. else
  738. this.doFontSizeInc();
  739. break;
  740. case 'Enter':
  741. case 'Backquote'://`
  742. case 'KeyF':
  743. this.$emit('full-screen-toogle');
  744. break;
  745. case 'Tab':
  746. this.doToolBarToggle();
  747. event.preventDefault();
  748. event.stopPropagation();
  749. break;
  750. default:
  751. result = false;
  752. break;
  753. }
  754. }
  755. return result;
  756. }
  757. async startClickRepeat(pointX, pointY) {
  758. this.repX = pointX;
  759. this.repY = pointY;
  760. if (!this.repInit && this.repDoing) {
  761. this.repInit = true;
  762. let delay = 400;
  763. while (this.repDoing) {
  764. this.handleClick(pointX, pointY);
  765. await sleep(delay);
  766. if (delay > 15)
  767. delay *= 0.8;
  768. }
  769. this.repInit = false;
  770. }
  771. }
  772. endClickRepeat() {
  773. this.repDoing = false;
  774. }
  775. onTouchStart(event) {
  776. if (!this.mobile)
  777. return;
  778. this.endClickRepeat();
  779. if (event.touches.length == 1) {
  780. const touch = event.touches[0];
  781. const rect = event.target.getBoundingClientRect();
  782. const x = touch.pageX - rect.left;
  783. const y = touch.pageY - rect.top;
  784. if (this.handleClick(x, y)) {
  785. this.repDoing = true;
  786. this.debouncedStartClickRepeat(x, y);
  787. }
  788. }
  789. }
  790. onTouchEnd() {
  791. if (!this.mobile)
  792. return;
  793. this.endClickRepeat();
  794. }
  795. onTouchCancel() {
  796. if (!this.mobile)
  797. return;
  798. this.endClickRepeat();
  799. }
  800. onMouseDown(event) {
  801. if (this.mobile)
  802. return;
  803. this.endClickRepeat();
  804. if (event.button == 0) {
  805. if (this.handleClick(event.offsetX, event.offsetY)) {
  806. this.repDoing = true;
  807. this.debouncedStartClickRepeat(event.offsetX, event.offsetY);
  808. }
  809. } else if (event.button == 1) {
  810. this.$emit('scrolling-toggle');
  811. } else if (event.button == 2) {
  812. this.doToolBarToggle();
  813. }
  814. }
  815. onMouseUp() {
  816. if (this.mobile)
  817. return;
  818. this.endClickRepeat();
  819. }
  820. onMouseWheel(event) {
  821. if (this.mobile)
  822. return;
  823. if (event.deltaY > 0) {
  824. this.doDown();
  825. } else if (event.deltaY < 0) {
  826. this.doUp();
  827. }
  828. }
  829. onStatusBarClick() {
  830. const url = this.meta.url;
  831. if (url && url.indexOf('file://') != 0) {
  832. window.open(url, '_blank');
  833. } else {
  834. this.$alert('Оригинал недоступен, т.к. файл книги был загружен с локального диска', '', {type: 'warning'});
  835. }
  836. }
  837. handleClick(pointX, pointY) {
  838. const w = pointX/this.realWidth*100;
  839. const h = pointY/this.realHeight*100;
  840. let action = '';
  841. loops: {
  842. for (const x in clickMap) {
  843. for (const y in clickMap[x]) {
  844. if (w < x && h < y) {
  845. action = clickMap[x][y];
  846. break loops;
  847. }
  848. }
  849. }
  850. }
  851. switch (action) {
  852. case 'Down' ://Down
  853. this.doDown();
  854. break;
  855. case 'Up' ://Up
  856. this.doUp();
  857. break;
  858. case 'PgDown' ://PgDown
  859. this.doPageDown();
  860. break;
  861. case 'PgUp' ://PgUp
  862. this.doPageUp();
  863. break;
  864. case 'Menu' :
  865. this.doToolBarToggle();
  866. break;
  867. default :
  868. // Nothing
  869. }
  870. return (action && action != 'Menu');
  871. }
  872. }
  873. //-----------------------------------------------------------------------------
  874. </script>
  875. <style scoped>
  876. .main {
  877. flex: 1;
  878. margin: 0;
  879. padding: 0;
  880. overflow: hidden;
  881. position: relative;
  882. min-width: 200px;
  883. }
  884. .layout {
  885. margin: 0;
  886. padding: 0;
  887. position: absolute;
  888. z-index: 10;
  889. }
  890. .back {
  891. z-index: 5;
  892. }
  893. .events {
  894. z-index: 20;
  895. background-color: rgba(0,0,0,0);
  896. }
  897. </style>
  898. <style>
  899. .paper1 {
  900. background: url("images/paper1.jpg") center;
  901. background-size: cover;
  902. }
  903. .paper2 {
  904. background: url("images/paper2.jpg") center;
  905. background-size: cover;
  906. }
  907. .paper3 {
  908. background: url("images/paper3.jpg") center;
  909. background-size: cover;
  910. }
  911. .paper4 {
  912. background: url("images/paper4.jpg") center;
  913. background-size: cover;
  914. }
  915. .paper5 {
  916. background: url("images/paper5.jpg") center;
  917. background-size: cover;
  918. }
  919. .paper6 {
  920. background: url("images/paper6.jpg") center;
  921. background-size: cover;
  922. }
  923. .paper7 {
  924. background: url("images/paper7.jpg") center;
  925. background-size: cover;
  926. }
  927. .paper8 {
  928. background: url("images/paper8.jpg") center;
  929. background-size: cover;
  930. }
  931. .paper9 {
  932. background: url("images/paper9.jpg");
  933. }
  934. </style>