TextPage.vue 34 KB

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