TextPage.vue 38 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188
  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.$refs.scrollingPage1.style.width = this.w + 'px';
  140. this.$refs.scrollingPage2.style.width = this.w + 'px';
  141. //stuff
  142. this.currentAnimation = '';
  143. this.pageChangeDirectionDown = true;
  144. this.fontShift = this.fontVertShift/100;
  145. this.textShift = this.textVertShift/100 + this.fontShift;
  146. //drawHelper
  147. this.drawHelper.realWidth = this.realWidth;
  148. this.drawHelper.realHeight = this.realHeight;
  149. this.drawHelper.lastBook = this.lastBook;
  150. this.drawHelper.book = this.book;
  151. this.drawHelper.parsed = this.parsed;
  152. this.drawHelper.pageLineCount = this.pageLineCount;
  153. this.drawHelper.backgroundColor = this.backgroundColor;
  154. this.drawHelper.statusBarColor = this.statusBarColor;
  155. this.drawHelper.fontStyle = this.fontStyle;
  156. this.drawHelper.fontWeight = this.fontWeight;
  157. this.drawHelper.fontSize = this.fontSize;
  158. this.drawHelper.fontName = this.fontName;
  159. this.drawHelper.fontShift = this.fontShift;
  160. this.drawHelper.textColor = this.textColor;
  161. this.drawHelper.textShift = this.textShift;
  162. this.drawHelper.p = this.p;
  163. this.drawHelper.w = this.w;
  164. this.drawHelper.h = this.h;
  165. this.drawHelper.indentLR = this.indentLR;
  166. this.drawHelper.textAlignJustify = this.textAlignJustify;
  167. this.drawHelper.lineHeight = this.lineHeight;
  168. this.drawHelper.context = this.context;
  169. //сообщение "Загрузка шрифтов..."
  170. const flText = 'Загрузка шрифта...';
  171. this.$refs.fontsLoading.innerHTML = flText;
  172. const fontsLoadingStyle = this.$refs.fontsLoading.style;
  173. fontsLoadingStyle.position = 'absolute';
  174. fontsLoadingStyle.fontSize = this.fontSize + 'px';
  175. fontsLoadingStyle.top = (this.realHeight/2 - 2*this.fontSize) + 'px';
  176. fontsLoadingStyle.left = (this.realWidth - this.drawHelper.measureText(flText, {}))/2 + 'px';
  177. //parsed
  178. if (this.parsed) {
  179. this.parsed.p = this.p;
  180. this.parsed.w = this.w;// px, ширина текста
  181. this.parsed.font = this.font;
  182. this.parsed.fontSize = this.fontSize;
  183. this.parsed.wordWrap = this.wordWrap;
  184. this.parsed.cutEmptyParagraphs = this.cutEmptyParagraphs;
  185. this.parsed.addEmptyParagraphs = this.addEmptyParagraphs;
  186. let t = '';
  187. while (this.drawHelper.measureText(t, {}) < this.w) t += 'Щ';
  188. this.parsed.maxWordLength = t.length - 1;
  189. this.parsed.measureText = this.drawHelper.measureText.bind(this.drawHelper);
  190. this.parsed.lineHeight = this.lineHeight;
  191. this.parsed.showImages = this.showImages;
  192. this.parsed.showInlineImagesInCenter = this.showInlineImagesInCenter;
  193. this.parsed.imageHeightLines = this.imageHeightLines;
  194. this.parsed.imageFitWidth = this.imageFitWidth;
  195. }
  196. //statusBar
  197. this.$refs.statusBar.style.left = '0px';
  198. this.$refs.statusBar.style.top = (this.statusBarTop ? 1 : this.realHeight - this.statusBarHeight) + 'px';
  199. this.statusBarColor = this.hex2rgba(this.textColor || '#000000', this.statusBarColorAlpha);
  200. this.statusBarClickable = this.drawHelper.statusBarClickable(this.statusBarTop, this.statusBarHeight);
  201. //scrolling page
  202. const pageSpace = this.scrollHeight - this.pageLineCount*this.lineHeight;
  203. let y = pageSpace/2;
  204. if (this.showStatusBar)
  205. y += this.statusBarHeight*(this.statusBarTop ? 1 : 0);
  206. let page1 = this.$refs.scrollBox1;
  207. let page2 = this.$refs.scrollBox2;
  208. page1.style.width = this.w + this.indentLR + 'px';
  209. page2.style.width = this.w + this.indentLR + 'px';
  210. page1.style.height = this.scrollHeight - (pageSpace > 0 ? pageSpace : 0) + 'px';
  211. page2.style.height = this.scrollHeight - (pageSpace > 0 ? pageSpace : 0) + 'px';
  212. page1.style.top = y + 'px';
  213. page2.style.top = y + 'px';
  214. page1.style.left = this.indentLR + 'px';
  215. page2.style.left = this.indentLR + 'px';
  216. page1 = this.$refs.scrollingPage1;
  217. page2 = this.$refs.scrollingPage2;
  218. page1.style.width = this.w + this.indentLR + 'px';
  219. page2.style.width = this.w + this.indentLR + 'px';
  220. page1.style.height = this.scrollHeight + this.lineHeight + 'px';
  221. page2.style.height = this.scrollHeight + this.lineHeight + 'px';
  222. }
  223. async checkLoadedFonts() {
  224. let loaded = await Promise.all(this.fontList.map(font => document.fonts.check(font)));
  225. if (loaded.some(r => !r)) {
  226. loaded = await Promise.all(this.fontList.map(font => document.fonts.load(font)));
  227. if (loaded.some(r => !r.length))
  228. throw new Error('some font not loaded');
  229. }
  230. }
  231. async loadFonts() {
  232. this.fontsLoading = true;
  233. if (!this.fontsLoaded)
  234. this.fontsLoaded = {};
  235. //загрузка дин.шрифта
  236. const loaded = this.fontsLoaded[this.fontCssUrl];
  237. if (this.fontCssUrl && !loaded) {
  238. loadCSS(this.fontCssUrl);
  239. this.fontsLoaded[this.fontCssUrl] = 1;
  240. }
  241. const waitingTime = 10*1000;
  242. const delay = 100;
  243. let i = 0;
  244. //ждем шрифты
  245. while (i < waitingTime/delay) {
  246. i++;
  247. try {
  248. await this.checkLoadedFonts();
  249. i = waitingTime;
  250. } catch (e) {
  251. await sleep(delay);
  252. }
  253. }
  254. if (i !== waitingTime) {
  255. this.$notify.error({
  256. title: 'Ошибка загрузки',
  257. message: 'Некоторые шрифты не удалось загрузить'
  258. });
  259. }
  260. this.fontsLoading = false;
  261. }
  262. getSettings() {
  263. const settings = this.settings;
  264. for (let prop in rstore.settingDefaults) {
  265. this[prop] = settings[prop];
  266. }
  267. const wf = this.webFontName;
  268. const i = _.findIndex(rstore.webFonts, ['name', wf]);
  269. if (wf && i >= 0) {
  270. this.fontName = wf;
  271. this.fontCssUrl = rstore.webFonts[i].css;
  272. this.fontVertShift = settings.fontShifts[wf] || 0;
  273. }
  274. }
  275. async calcPropsAndLoadFonts(omitLoadFonts) {
  276. this.calcDrawProps();
  277. this.setBackground();
  278. if (!omitLoadFonts)
  279. await this.loadFonts();
  280. this.draw();
  281. // шрифты хрен знает когда подгружаются в div, поэтому
  282. const parsed = this.parsed;
  283. await sleep(5000);
  284. if (this.parsed === parsed) {
  285. parsed.force = true;
  286. this.draw();
  287. parsed.force = false;
  288. }
  289. }
  290. loadSettings() {
  291. (async() => {
  292. let fontName = this.fontName;
  293. this.getSettings();
  294. await this.calcPropsAndLoadFonts(fontName == this.fontName);
  295. })();
  296. }
  297. showBook() {
  298. this.$refs.main.focus();
  299. this.toggleLayout = false;
  300. this.updateLayout();
  301. this.book = null;
  302. this.meta = null;
  303. this.fb2 = null;
  304. this.parsed = null;
  305. this.linesUp = null;
  306. this.linesDown = null;
  307. this.statusBarMessage = '';
  308. this.getSettings();
  309. this.calcDrawProps();
  310. this.draw();// пока не загрузили, очистим канвас
  311. if (this.lastBook) {
  312. (async() => {
  313. //подождем ленивый парсинг
  314. this.stopLazyParse = true;
  315. while (this.doingLazyParse) await sleep(10);
  316. const isParsed = await bookManager.hasBookParsed(this.lastBook);
  317. if (!isParsed) {
  318. return;
  319. }
  320. this.book = await bookManager.getBook(this.lastBook);
  321. this.meta = bookManager.metaOnly(this.book);
  322. this.fb2 = this.meta.fb2;
  323. let authorNames = [];
  324. if (this.fb2.author) {
  325. authorNames = this.fb2.author.map(a => _.compact([
  326. a.lastName,
  327. a.firstName,
  328. a.middleName
  329. ]).join(' '));
  330. }
  331. this.title = _.compact([
  332. authorNames.join(', '),
  333. this.fb2.bookTitle
  334. ]).join(' - ');
  335. this.$root.$emit('set-app-title', this.title);
  336. this.parsed = this.book.parsed;
  337. this.page1 = null;
  338. this.page2 = null;
  339. this.statusBar = null;
  340. await this.stopTextScrolling();
  341. this.calcPropsAndLoadFonts();
  342. this.refreshTime();
  343. if (this.lazyParseEnabled)
  344. this.lazyParsePara();
  345. })();
  346. }
  347. }
  348. updateLayout() {
  349. if (this.inAnimation) {
  350. this.$refs.scrollBox1.style.visibility = 'visible';
  351. this.$refs.scrollBox2.style.visibility = 'visible';
  352. } else if (this.toggleLayout) {
  353. this.$refs.scrollBox1.style.visibility = 'visible';
  354. this.$refs.scrollBox2.style.visibility = 'hidden';
  355. } else {
  356. this.$refs.scrollBox1.style.visibility = 'hidden';
  357. this.$refs.scrollBox2.style.visibility = 'visible';
  358. }
  359. }
  360. setBackground() {
  361. this.background = `<div class="layout ${this.wallpaper}" style="width: ${this.realWidth}px; height: ${this.realHeight}px;` +
  362. ` background-color: ${this.backgroundColor}"></div>`;
  363. }
  364. async onResize() {
  365. /*this.page1 = null;
  366. this.page2 = null;
  367. this.statusBar = null;*/
  368. this.calcDrawProps();
  369. this.setBackground();
  370. this.draw();
  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(async(resolve) => {
  398. this[waitingHandlerName] = resolve;
  399. let wait = (timeout + 201)/100;
  400. while (wait > 0 && !this[stopPropertyName]) {
  401. wait--;
  402. await sleep(100);
  403. }
  404. resolve();
  405. });
  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.$emit('stop-scrolling');
  413. return;
  414. }
  415. //ждем анимацию
  416. while (this.inAnimation) await 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 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.$emit('stop-scrolling');
  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 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. }
  556. this.resolveAnimation1Finish = null;
  557. this.resolveAnimation2Finish = null;
  558. this.resolveTransition1Finish = null;
  559. this.resolveTransition2Finish = null;
  560. page1.style.animation = '';
  561. page2.style.animation = '';
  562. page1.style.transition = '';
  563. page1.style.transform = 'none';
  564. page1.offsetHeight;
  565. page2.style.transition = '';
  566. page2.style.transform = 'none';
  567. page2.offsetHeight;
  568. this.currentAnimation = '';
  569. this.pageChangeDirectionDown = false;//true только если PgDown
  570. this.inAnimation = false;
  571. this.stopAnimation = false;
  572. }
  573. }
  574. getLines(bookPos) {
  575. if (!this.parsed || this.pageLineCount < 1)
  576. return {};
  577. return {
  578. linesDown: this.parsed.getLines(bookPos, 2*this.pageLineCount),
  579. linesUp: this.parsed.getLines(bookPos, -2*this.pageLineCount)
  580. };
  581. }
  582. drawStatusBar(message) {
  583. if (this.w < minLayoutWidth) {
  584. this.statusBar = null;
  585. return;
  586. }
  587. if (this.showStatusBar && this.linesDown && this.pageLineCount > 0) {
  588. const lines = this.linesDown;
  589. let i = this.pageLineCount;
  590. if (this.keepLastToFirst)
  591. i--;
  592. i = (i > lines.length - 1 ? lines.length - 1 : i);
  593. if (i >= 0) {
  594. if (!message)
  595. message = this.statusBarMessage;
  596. if (!message)
  597. message = this.title;
  598. this.statusBar = this.drawHelper.drawStatusBar(this.statusBarTop, this.statusBarHeight,
  599. lines[i].end, this.parsed.textLength, message);
  600. this.bookPosSeen = lines[i].end;
  601. }
  602. } else {
  603. this.statusBar = '';
  604. }
  605. }
  606. blinkCachedLoadMessage(state) {
  607. if (state === 'finish') {
  608. this.statusBarMessage = '';
  609. } else if (state) {
  610. this.statusBarMessage = 'Книга загружена из кэша';
  611. } else {
  612. this.statusBarMessage = ' ';
  613. }
  614. this.drawStatusBar();
  615. }
  616. async lazyParsePara() {
  617. if (!this.parsed || this.doingLazyParse)
  618. return;
  619. this.doingLazyParse = true;
  620. let j = 0;
  621. let k = 0;
  622. let prevPerc = 0;
  623. this.stopLazyParse = false;
  624. for (let i = 0; i < this.parsed.para.length; i++) {
  625. j++;
  626. if (j > 1) {
  627. await sleep(1);
  628. j = 0;
  629. }
  630. if (this.stopLazyParse)
  631. break;
  632. this.parsed.parsePara(i);
  633. k++;
  634. if (k > 100) {
  635. let perc = Math.round(i/this.parsed.para.length*100);
  636. if (perc != prevPerc)
  637. this.drawStatusBar(`Обработка текста ${perc}%`);
  638. prevPerc = perc;
  639. k = 0;
  640. }
  641. }
  642. this.drawStatusBar();
  643. this.doingLazyParse = false;
  644. }
  645. async refreshTime() {
  646. if (!this.timeRefreshing) {
  647. this.timeRefreshing = true;
  648. await sleep(60*1000);
  649. if (this.book && this.parsed.textLength) {
  650. this.debouncedDrawStatusBar();
  651. }
  652. this.timeRefreshing = false;
  653. this.refreshTime();
  654. }
  655. }
  656. prepareNextPage() {
  657. // подготовка следующей страницы заранее
  658. if (!this.book || !this.parsed.textLength || !this.linesDown || this.pageLineCount < 1)
  659. return;
  660. let i = this.pageLineCount;
  661. if (this.keepLastToFirst)
  662. i--;
  663. if (i >= 0 && this.linesDown.length > i) {
  664. this.bookPosPrepared = this.linesDown[i].begin;
  665. const lines = this.getLines(this.bookPosPrepared);
  666. this.linesDownNext = lines.linesDown;
  667. this.linesUpNext = lines.linesUp;
  668. if (this.toggleLayout)
  669. this.page2 = this.drawHelper.drawPage(lines.linesDown);//наоборот
  670. else
  671. this.page1 = this.drawHelper.drawPage(lines.linesDown);
  672. this.pagePrepared = true;
  673. }
  674. }
  675. doDown() {
  676. if (this.linesDown && this.linesDown.length > this.pageLineCount && this.pageLineCount > 0) {
  677. this.bookPos = this.linesDown[1].begin;
  678. }
  679. }
  680. doUp() {
  681. if (this.linesUp && this.linesUp.length > 1 && this.pageLineCount > 0) {
  682. this.bookPos = this.linesUp[1].begin;
  683. }
  684. }
  685. doPageDown() {
  686. if (this.linesDown && this.pageLineCount > 0) {
  687. let i = this.pageLineCount;
  688. if (this.keepLastToFirst)
  689. i--;
  690. if (i >= 0 && this.linesDown.length >= 2*i) {
  691. this.currentAnimation = this.pageChangeAnimation;
  692. this.pageChangeDirectionDown = true;
  693. this.bookPos = this.linesDown[i].begin;
  694. } else
  695. this.doEnd();
  696. }
  697. }
  698. doPageUp() {
  699. if (this.linesUp && this.pageLineCount > 0) {
  700. let i = this.pageLineCount;
  701. if (this.keepLastToFirst)
  702. i--;
  703. i = (i > this.linesUp.length - 1 ? this.linesUp.length - 1 : i);
  704. if (i >= 0 && this.linesUp.length > i) {
  705. this.currentAnimation = this.pageChangeAnimation;
  706. this.pageChangeDirectionDown = false;
  707. this.bookPos = this.linesUp[i].begin;
  708. }
  709. }
  710. }
  711. doHome() {
  712. this.currentAnimation = this.pageChangeAnimation;
  713. this.pageChangeDirectionDown = false;
  714. this.bookPos = 0;
  715. }
  716. doEnd(noAni) {
  717. if (this.parsed.para.length && this.pageLineCount > 0) {
  718. let i = this.parsed.para.length - 1;
  719. let lastPos = this.parsed.para[i].offset + this.parsed.para[i].length - 1;
  720. const lines = this.parsed.getLines(lastPos, -this.pageLineCount);
  721. if (lines) {
  722. i = this.pageLineCount - 1;
  723. i = (i > lines.length - 1 ? lines.length - 1 : i);
  724. if (!noAni)
  725. this.currentAnimation = this.pageChangeAnimation;
  726. this.pageChangeDirectionDown = true;
  727. this.bookPos = lines[i].begin;
  728. }
  729. }
  730. }
  731. doToolBarToggle() {
  732. this.$emit('tool-bar-toggle');
  733. }
  734. async doFontSizeInc() {
  735. if (!this.settingsChanging) {
  736. this.settingsChanging = true;
  737. const newSize = (this.settings.fontSize + 1 < 100 ? this.settings.fontSize + 1 : 100);
  738. const newSettings = Object.assign({}, this.settings, {fontSize: newSize});
  739. this.commit('reader/setSettings', newSettings);
  740. await sleep(50);
  741. this.settingsChanging = false;
  742. }
  743. }
  744. async doFontSizeDec() {
  745. if (!this.settingsChanging) {
  746. this.settingsChanging = true;
  747. const newSize = (this.settings.fontSize - 1 > 5 ? this.settings.fontSize - 1 : 5);
  748. const newSettings = Object.assign({}, this.settings, {fontSize: newSize});
  749. this.commit('reader/setSettings', newSettings);
  750. await sleep(50);
  751. this.settingsChanging = false;
  752. }
  753. }
  754. async doScrollingSpeedUp() {
  755. if (!this.settingsChanging) {
  756. this.settingsChanging = true;
  757. const newDelay = (this.settings.scrollingDelay - 50 > 1 ? this.settings.scrollingDelay - 50 : 1);
  758. const newSettings = Object.assign({}, this.settings, {scrollingDelay: newDelay});
  759. this.commit('reader/setSettings', newSettings);
  760. await sleep(50);
  761. this.settingsChanging = false;
  762. }
  763. }
  764. async doScrollingSpeedDown() {
  765. if (!this.settingsChanging) {
  766. this.settingsChanging = true;
  767. const newDelay = (this.settings.scrollingDelay + 50 < 10000 ? this.settings.scrollingDelay + 50 : 10000);
  768. const newSettings = Object.assign({}, this.settings, {scrollingDelay: newDelay});
  769. this.commit('reader/setSettings', newSettings);
  770. await sleep(50);
  771. this.settingsChanging = false;
  772. }
  773. }
  774. keyHook(event) {
  775. let result = false;
  776. if (event.type == 'keydown' && !event.ctrlKey && !event.altKey) {
  777. result = true;
  778. switch (event.code) {
  779. case 'ArrowDown':
  780. if (event.shiftKey)
  781. this.doScrollingSpeedUp();
  782. else
  783. this.doDown();
  784. break;
  785. case 'ArrowUp':
  786. if (event.shiftKey)
  787. this.doScrollingSpeedDown();
  788. else
  789. this.doUp();
  790. break;
  791. case 'PageDown':
  792. case 'ArrowRight':
  793. this.doPageDown();
  794. break;
  795. case 'Space':
  796. if (event.shiftKey)
  797. this.doPageUp();
  798. else
  799. this.doPageDown();
  800. break;
  801. case 'PageUp':
  802. case 'ArrowLeft':
  803. case 'Backspace':
  804. this.doPageUp();
  805. break;
  806. case 'Home':
  807. this.doHome();
  808. break;
  809. case 'End':
  810. this.doEnd();
  811. break;
  812. case 'KeyA':
  813. if (event.shiftKey)
  814. this.doFontSizeDec();
  815. else
  816. this.doFontSizeInc();
  817. break;
  818. case 'Enter':
  819. case 'Backquote'://`
  820. case 'KeyF':
  821. this.$emit('full-screen-toogle');
  822. break;
  823. case 'Tab':
  824. case 'KeyQ':
  825. this.doToolBarToggle();
  826. event.preventDefault();
  827. event.stopPropagation();
  828. break;
  829. default:
  830. result = false;
  831. break;
  832. }
  833. }
  834. return result;
  835. }
  836. async startClickRepeat(pointX, pointY) {
  837. this.repX = pointX;
  838. this.repY = pointY;
  839. if (!this.repInit && this.repDoing) {
  840. this.repInit = true;
  841. let delay = 400;
  842. while (this.repDoing) {
  843. this.handleClick(pointX, pointY);
  844. await sleep(delay);
  845. if (delay > 15)
  846. delay *= 0.8;
  847. }
  848. this.repInit = false;
  849. }
  850. }
  851. endClickRepeat() {
  852. this.repDoing = false;
  853. }
  854. onTouchStart(event) {
  855. if (!this.mobile)
  856. return;
  857. this.endClickRepeat();
  858. if (event.touches.length == 1) {
  859. const touch = event.touches[0];
  860. const rect = event.target.getBoundingClientRect();
  861. const x = touch.pageX - rect.left;
  862. const y = touch.pageY - rect.top;
  863. if (this.handleClick(x, y)) {
  864. this.repDoing = true;
  865. this.debouncedStartClickRepeat(x, y);
  866. }
  867. }
  868. }
  869. onTouchEnd() {
  870. if (!this.mobile)
  871. return;
  872. this.endClickRepeat();
  873. }
  874. onTouchCancel() {
  875. if (!this.mobile)
  876. return;
  877. this.endClickRepeat();
  878. }
  879. onMouseDown(event) {
  880. if (this.mobile)
  881. return;
  882. this.endClickRepeat();
  883. if (event.button == 0) {
  884. if (this.handleClick(event.offsetX, event.offsetY)) {
  885. this.repDoing = true;
  886. this.debouncedStartClickRepeat(event.offsetX, event.offsetY);
  887. }
  888. } else if (event.button == 1) {
  889. this.$emit('scrolling-toggle');
  890. } else if (event.button == 2) {
  891. this.doToolBarToggle();
  892. }
  893. }
  894. onMouseUp() {
  895. if (this.mobile)
  896. return;
  897. this.endClickRepeat();
  898. }
  899. onMouseWheel(event) {
  900. if (this.mobile)
  901. return;
  902. if (event.deltaY > 0) {
  903. this.doDown();
  904. } else if (event.deltaY < 0) {
  905. this.doUp();
  906. }
  907. }
  908. onStatusBarClick() {
  909. const url = this.meta.url;
  910. if (url && url.indexOf('file://') != 0) {
  911. window.open(url, '_blank');
  912. } else {
  913. this.$alert('Оригинал недоступен, т.к. файл книги был загружен с локального диска', '', {type: 'warning'});
  914. }
  915. }
  916. handleClick(pointX, pointY) {
  917. const w = pointX/this.realWidth*100;
  918. const h = pointY/this.realHeight*100;
  919. let action = '';
  920. loops: {
  921. for (const x in clickMap) {
  922. for (const y in clickMap[x]) {
  923. if (w < x && h < y) {
  924. action = clickMap[x][y];
  925. break loops;
  926. }
  927. }
  928. }
  929. }
  930. switch (action) {
  931. case 'Down' ://Down
  932. this.doDown();
  933. break;
  934. case 'Up' ://Up
  935. this.doUp();
  936. break;
  937. case 'PgDown' ://PgDown
  938. this.doPageDown();
  939. break;
  940. case 'PgUp' ://PgUp
  941. this.doPageUp();
  942. break;
  943. case 'Menu' :
  944. this.doToolBarToggle();
  945. break;
  946. default :
  947. // Nothing
  948. }
  949. return (action && action != 'Menu');
  950. }
  951. }
  952. //-----------------------------------------------------------------------------
  953. </script>
  954. <style scoped>
  955. .main {
  956. flex: 1;
  957. margin: 0;
  958. padding: 0;
  959. overflow: hidden;
  960. position: relative;
  961. min-width: 200px;
  962. }
  963. .layout {
  964. margin: 0;
  965. padding: 0;
  966. position: absolute;
  967. z-index: 10;
  968. }
  969. .over-hidden {
  970. overflow: hidden;
  971. }
  972. .back {
  973. z-index: 5;
  974. }
  975. .events {
  976. z-index: 20;
  977. background-color: rgba(0,0,0,0);
  978. }
  979. </style>
  980. <style>
  981. .paper1 {
  982. background: url("images/paper1.jpg") center;
  983. background-size: cover;
  984. }
  985. .paper2 {
  986. background: url("images/paper2.jpg") center;
  987. background-size: cover;
  988. }
  989. .paper3 {
  990. background: url("images/paper3.jpg") center;
  991. background-size: cover;
  992. }
  993. .paper4 {
  994. background: url("images/paper4.jpg") center;
  995. background-size: cover;
  996. }
  997. .paper5 {
  998. background: url("images/paper5.jpg") center;
  999. background-size: cover;
  1000. }
  1001. .paper6 {
  1002. background: url("images/paper6.jpg") center;
  1003. background-size: cover;
  1004. }
  1005. .paper7 {
  1006. background: url("images/paper7.jpg") center;
  1007. background-size: cover;
  1008. }
  1009. .paper8 {
  1010. background: url("images/paper8.jpg") center;
  1011. background-size: cover;
  1012. }
  1013. .paper9 {
  1014. background: url("images/paper9.jpg");
  1015. }
  1016. @keyframes page1-animation-thaw {
  1017. 0% { opacity: 0; }
  1018. 100% { opacity: 1; }
  1019. }
  1020. @keyframes page2-animation-thaw {
  1021. 0% { opacity: 1; }
  1022. 100% { opacity: 0; }
  1023. }
  1024. </style>