ContentsPage.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436
  1. <template>
  2. <Window width="600px" ref="window" @close="close">
  3. <template slot="header">
  4. Оглавление/закладки
  5. </template>
  6. <div class="bg-grey-3 row">
  7. <q-tabs
  8. v-model="selectedTab"
  9. active-color="black"
  10. active-bg-color="white"
  11. indicator-color="white"
  12. dense
  13. no-caps
  14. inline-label
  15. class="no-mp bg-grey-4 text-grey-7"
  16. >
  17. <q-tab name="contents" icon="la la-list" label="Оглавление" />
  18. <q-tab name="images" icon="la la-image" label="Изображения" />
  19. <q-tab name="bookmarks" icon="la la-bookmark" label="Закладки" />
  20. </q-tabs>
  21. </div>
  22. <div class="q-mb-sm"/>
  23. <div class="tab-panel" v-show="selectedTab == 'contents'">
  24. <div>
  25. <div v-for="item in contents" :key="item.key" class="column" style="width: 540px">
  26. <div class="row q-px-sm no-wrap" :class="{'item': !item.isBookPos, 'item-book-pos': item.isBookPos}">
  27. <div v-if="item.list.length" class="row justify-center items-center expand-button clickable" @click="expandClick(item.key)">
  28. <q-icon name="la la-caret-right" class="icon" :class="{'expanded-icon': item.expanded}" color="green-8" size="20px"/>
  29. </div>
  30. <div v-else class="no-expand-button clickable" @click="setBookPos(item.offset)">
  31. <q-icon name="la la-stop" class="icon" style="visibility: hidden" size="20px"/>
  32. </div>
  33. <div class="col row clickable" @click="setBookPos(item.offset)">
  34. <div :style="item.indentStyle"></div>
  35. <div class="q-mr-sm col overflow-hidden column justify-center" :style="item.labelStyle" v-html="item.label"></div>
  36. <div class="column justify-center">{{ item.perc }}%</div>
  37. </div>
  38. </div>
  39. <div v-if="item.expanded" :ref="`subitem${item.key}`" class="subitems-transition">
  40. <div v-for="subitem in item.list" :key="subitem.key" class="row q-px-sm no-wrap" :class="{'subitem': !subitem.isBookPos, 'subitem-book-pos': subitem.isBookPos}">
  41. <div class="col row clickable" @click="setBookPos(subitem.offset)">
  42. <div class="no-expand-button"></div>
  43. <div :style="subitem.indentStyle"></div>
  44. <div class="q-mr-sm col overflow-hidden column justify-center" :style="item.labelStyle" v-html="subitem.label"></div>
  45. <div class="column justify-center">{{ subitem.perc }}%</div>
  46. </div>
  47. </div>
  48. </div>
  49. </div>
  50. <div v-if="!contents.length" class="column justify-center items-center" style="height: 100px">
  51. Оглавление отсутствует
  52. </div>
  53. </div>
  54. </div>
  55. <div class="tab-panel" v-show="selectedTab == 'images'">
  56. <div>
  57. <div v-for="item in images" :key="item.key" class="column" style="width: 540px">
  58. <div class="row q-px-sm no-wrap" :class="{'item': !item.isBookPos, 'item-book-pos': item.isBookPos}">
  59. <div class="col row clickable" @click="setBookPos(item.offset)">
  60. <div class="image-thumb-box row justify-center items-center">
  61. <div v-show="!imageLoaded[item.id]" class="image-thumb column justify-center"><i class="loading-img-icon la la-images"></i></div>
  62. <img v-show="imageLoaded[item.id]" class="image-thumb" :src="imageSrc[item.id]"/>
  63. </div>
  64. <div class="no-expand-button column justify-center items-center">
  65. <div class="image-num">{{ item.num }}</div>
  66. <div v-show="item.type == 'image/jpeg'" class="image-type it-jpg-color row justify-center">JPG</div>
  67. <div v-show="item.type == 'image/png'" class="image-type it-png-color row justify-center">PNG</div>
  68. <div v-show="!item.local" class="image-type it-net-color row justify-center">INET</div>
  69. </div>
  70. <div :style="item.indentStyle"></div>
  71. <div class="q-mr-sm col overflow-hidden column justify-center" :style="item.labelStyle" v-html="item.label"></div>
  72. <div class="column justify-center">{{ item.perc }}%</div>
  73. </div>
  74. </div>
  75. </div>
  76. <div v-if="!images.length" class="column justify-center items-center" style="height: 100px">
  77. Изображения отсутствуют
  78. </div>
  79. </div>
  80. </div>
  81. <div class="tab-panel" v-show="selectedTab == 'bookmarks'">
  82. <div class="column justify-center items-center" style="height: 100px">
  83. Раздел находится в разработке
  84. </div>
  85. </div>
  86. </Window>
  87. </template>
  88. <script>
  89. //-----------------------------------------------------------------------------
  90. import Vue from 'vue';
  91. import Component from 'vue-class-component';
  92. //import _ from 'lodash';
  93. import Window from '../../share/Window.vue';
  94. import * as utils from '../../../share/utils';
  95. const ContentsPageProps = Vue.extend({
  96. props: {
  97. bookPos: Number,
  98. isVisible: Boolean,
  99. }
  100. });
  101. export default @Component({
  102. components: {
  103. Window,
  104. },
  105. watch: {
  106. bookPos: function() {
  107. this.updateBookPosSelection();
  108. }
  109. },
  110. })
  111. class ContentsPage extends ContentsPageProps {
  112. selectedTab = 'contents';
  113. contents = [];
  114. images = [];
  115. imageSrc = [];
  116. imageLoaded = [];
  117. created() {
  118. }
  119. async init(currentBook, parsed) {
  120. this.$refs.window.init();
  121. //закладки
  122. //проверим, надо ли обновлять списки
  123. if (this.parsed == parsed) {
  124. this.updateBookPosSelection();
  125. return;
  126. }
  127. //далее формирование оглавления
  128. this.parsed = parsed;
  129. this.contents = [];
  130. await this.$nextTick();
  131. const pc = parsed.contents;
  132. const ims = parsed.images;
  133. const newpc = [];
  134. if (pc.length) {//если есть оглавление
  135. //преобразуем все, кроме первого, разделы body в title-subtitle
  136. let curSubtitles = [];
  137. let prevBodyIndex = -1;
  138. for (let i = 0; i < pc.length; i++) {
  139. const cont = pc[i];
  140. if (prevBodyIndex != cont.bodyIndex)
  141. curSubtitles = [];
  142. prevBodyIndex = cont.bodyIndex;
  143. if (cont.bodyIndex > 1) {
  144. if (cont.inset < 1) {
  145. newpc.push(Object.assign({}, cont, {subtitles: curSubtitles}));
  146. } else {
  147. curSubtitles.push(Object.assign({}, cont, {inset: cont.inset - 1}));
  148. }
  149. } else {
  150. newpc.push(cont);
  151. }
  152. }
  153. } else {//попробуем вытащить из images
  154. for (let i = 0; i < ims.length; i++) {
  155. const image = ims[i];
  156. if (image.alt) {
  157. newpc.push({paraIndex: image.paraIndex, title: image.alt, inset: 1, bodyIndex: 0, subtitles: []});
  158. }
  159. }
  160. }
  161. const prepareLabel = (title, bolder = false) => {
  162. let titleParts = title.split('<p>');
  163. const textParts = titleParts.filter(v => v).map(v => `<div>${utils.removeHtmlTags(v)}</div>`);
  164. if (bolder && textParts.length > 1)
  165. textParts[0] = `<b>${textParts[0]}</b>`;
  166. return textParts.join('');
  167. }
  168. const getIndentStyle = inset => `width: ${inset*20}px`;
  169. const getLabelStyle = (inset) => {
  170. const fontSizes = ['110%', '100%', '90%', '85%'];
  171. inset = (inset > 3 ? 3 : inset);
  172. return `font-size: ${fontSizes[inset]}`;
  173. };
  174. //формируем newContents
  175. let i = 0;
  176. const newContents = [];
  177. newpc.forEach((cont) => {
  178. const label = prepareLabel(cont.title, true);
  179. const indentStyle = getIndentStyle(cont.inset);
  180. const labelStyle = getLabelStyle(cont.inset);
  181. let j = 0;
  182. const list = [];
  183. cont.subtitles.forEach((sub) => {
  184. const l = prepareLabel(sub.title);
  185. const s = getIndentStyle(sub.inset + 1);
  186. const ls = getLabelStyle(cont.inset + 1);
  187. const p = parsed.para[sub.paraIndex];
  188. list[j] = {perc: (p.offset/parsed.textLength*100).toFixed(2), label: l, key: j, offset: p.offset, indentStyle: s, labelStyle: ls};
  189. j++;
  190. });
  191. const p = parsed.para[cont.paraIndex];
  192. newContents[i] = {perc: (p.offset/parsed.textLength*100).toFixed(0), label, key: i, offset: p.offset, indentStyle, labelStyle, expanded: false, list};
  193. i++;
  194. });
  195. this.contents = newContents;
  196. //формируем newImages
  197. const newImages = [];
  198. for (i = 0; i < ims.length; i++) {
  199. const image = ims[i];
  200. const bin = parsed.binary[image.id];
  201. const type = (bin ? bin.type : '');
  202. const label = (image.alt ? image.alt : '<span style="font-size: 90%; color: #dddddd"><i>Без названия</i></span>');
  203. const indentStyle = getIndentStyle(1);
  204. const labelStyle = getLabelStyle(0);
  205. const p = parsed.para[image.paraIndex];
  206. newImages.push({perc: (p.offset/parsed.textLength*100).toFixed(0), label, key: i, offset: p.offset,
  207. indentStyle, labelStyle, type, num: image.num, id: image.id, local: image.local});
  208. }
  209. this.images = newImages;
  210. if (this.selectedTab == 'contents' && !this.contents.length && this.images.length)
  211. this.selectedTab = 'images';
  212. //выделим на bookPos
  213. this.updateBookPosSelection();
  214. //асинхронная загрузка изображений
  215. this.imageSrc = [];
  216. this.imageLoaded = [];
  217. await utils.sleep(50);
  218. (async() => {
  219. for (i = 0; i < ims.length; i++) {
  220. const {id, local} = ims[i];
  221. const bin = this.parsed.binary[id];
  222. if (local)
  223. this.$set(this.imageSrc, id, (bin ? `data:${bin.type};base64,${bin.data}` : ''));
  224. else
  225. this.$set(this.imageSrc, id, id);
  226. this.imageLoaded[id] = true;
  227. await utils.sleep(5);
  228. }
  229. })();
  230. }
  231. async updateBookPosSelection() {
  232. if (!this.isVisible)
  233. return;
  234. await utils.sleep(50);
  235. const bp = this.bookPos;
  236. for (let i = 0; i < this.contents.length; i++) {
  237. const item = this.contents[i];
  238. const nextOffset = (i < this.contents.length - 1 ? this.contents[i + 1].offset : this.parsed.textLength);
  239. for (let j = 0; j < item.list.length; j++) {
  240. const subitem = item.list[j];
  241. const nextSubOffset = (j < item.list.length - 1 ? item.list[j + 1].offset : nextOffset);
  242. if (bp >= subitem.offset && bp < nextSubOffset) {
  243. subitem.isBookPos = true;
  244. this.$set(this.contents, i, Object.assign(item, {list: item.list}));
  245. } else if (subitem.isBookPos) {
  246. subitem.isBookPos = false;
  247. this.$set(this.contents, i, Object.assign(item, {list: item.list}));
  248. }
  249. }
  250. if (bp >= item.offset && bp < nextOffset) {
  251. this.$set(this.contents, i, Object.assign(item, {isBookPos: true}));
  252. } else if (item.isBookPos) {
  253. this.$set(this.contents, i, Object.assign(item, {isBookPos: false}));
  254. }
  255. }
  256. for (let i = 0; i < this.images.length; i++) {
  257. const img = this.images[i];
  258. const nextOffset = (i < this.images.length - 1 ? this.images[i + 1].offset : this.parsed.textLength);
  259. if (bp >= img.offset && bp < nextOffset) {
  260. this.$set(this.images, i, Object.assign(img, {isBookPos: true}));
  261. } else if (img.isBookPos) {
  262. this.$set(this.images, i, Object.assign(img, {isBookPos: false}));
  263. }
  264. }
  265. }
  266. async expandClick(key) {
  267. const item = this.contents[key];
  268. const expanded = !item.expanded;
  269. if (!expanded) {
  270. const subitems = this.$refs[`subitem${key}`][0];
  271. subitems.style.height = '0';
  272. await utils.sleep(200);
  273. }
  274. this.$set(this.contents, key, Object.assign({}, item, {expanded}));
  275. if (expanded) {
  276. await this.$nextTick();
  277. const subitems = this.$refs[`subitem${key}`][0];
  278. subitems.style.height = subitems.scrollHeight + 'px';
  279. }
  280. }
  281. async setBookPos(newValue) {
  282. this.$emit('book-pos-changed', {bookPos: newValue});
  283. this.close();
  284. }
  285. close() {
  286. this.$emit('do-action', {action: 'contents'});
  287. }
  288. keyHook(event) {
  289. if (!this.$root.stdDialog.active && event.type == 'keydown' && event.key == 'Escape') {
  290. this.close();
  291. }
  292. return true;
  293. }
  294. }
  295. //-----------------------------------------------------------------------------
  296. </script>
  297. <style scoped>
  298. .tab-panel {
  299. overflow-x: hidden;
  300. overflow-y: auto;
  301. font-size: 90%;
  302. padding: 0 10px 0px 10px;
  303. }
  304. .clickable {
  305. cursor: pointer;
  306. padding: 10px 0 10px 0;
  307. }
  308. .item, .subitem, .item-book-pos, .subitem-book-pos {
  309. border-bottom: 1px solid #e0e0e0;
  310. }
  311. .item:hover, .subitem:hover {
  312. background-color: #f0f0f0;
  313. }
  314. .item-book-pos {
  315. background-color: #b0f0b0;
  316. }
  317. .subitem-book-pos {
  318. background-color: #d0f5d0;
  319. }
  320. .item-book-pos:hover {
  321. background-color: #b0e0b0;
  322. }
  323. .subitem-book-pos:hover {
  324. background-color: #d0f0d0;
  325. }
  326. .expand-button, .no-expand-button {
  327. width: 40px;
  328. }
  329. .subitems-transition {
  330. height: 0;
  331. transition: height 0.2s linear;
  332. overflow: hidden;
  333. }
  334. .icon {
  335. transition: transform 0.2s;
  336. }
  337. .expanded-icon {
  338. transform: rotate(90deg);
  339. }
  340. .image-num {
  341. font-size: 120%;
  342. padding-bottom: 3px;
  343. }
  344. .image-type {
  345. border: 1px solid black;
  346. border-radius: 6px;
  347. font-size: 80%;
  348. padding: 2px 0 2px 0;
  349. width: 34px;
  350. }
  351. .it-jpg-color {
  352. background: linear-gradient(to right, #fabc3d, #ffec6d);
  353. }
  354. .it-png-color {
  355. background: linear-gradient(to right, #4bc4e5, #6bf4ff);
  356. }
  357. .it-net-color {
  358. background: linear-gradient(to right, #00c400, #00f400);
  359. }
  360. .image-thumb-box {
  361. width: 120px;
  362. overflow: hidden;
  363. }
  364. .image-thumb {
  365. height: 50px;
  366. }
  367. .loading-img-icon {
  368. font-size: 250%;
  369. }
  370. </style>