TextPage.vue 38 KB

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