TextPage.vue 33 KB

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