TextPage.vue 37 KB

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