TextPage.vue 40 KB

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