ContentsPage.vue 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
  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 item q-px-sm no-wrap">
  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 subitem q-px-sm no-wrap">
  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 item q-px-sm no-wrap">
  59. <div class="col row clickable" @click="setBookPos(item.offset)">
  60. <div class="no-expand-button"></div>
  61. <div :style="item.indentStyle"></div>
  62. <div class="q-mr-sm col overflow-hidden column justify-center" :style="item.labelStyle" v-html="item.label"></div>
  63. <div class="column justify-center">{{ item.perc }}%</div>
  64. </div>
  65. </div>
  66. </div>
  67. <div v-if="!images.length" class="column justify-center items-center" style="height: 100px">
  68. Изображения отсутствуют
  69. </div>
  70. </div>
  71. </div>
  72. <div class="tab-panel" v-show="selectedTab == 'bookmarks'">
  73. <div class="column justify-center items-center" style="height: 100px">
  74. Раздел находится в разработке
  75. </div>
  76. </div>
  77. </Window>
  78. </template>
  79. <script>
  80. //-----------------------------------------------------------------------------
  81. import Vue from 'vue';
  82. import Component from 'vue-class-component';
  83. //import _ from 'lodash';
  84. import Window from '../../share/Window.vue';
  85. import * as utils from '../../../share/utils';
  86. export default @Component({
  87. components: {
  88. Window,
  89. },
  90. watch: {
  91. },
  92. })
  93. class ContentsPage extends Vue {
  94. selectedTab = 'contents';
  95. contents = [];
  96. images = [];
  97. created() {
  98. }
  99. async init(currentBook, parsed) {
  100. this.$refs.window.init();
  101. //закладки
  102. //далее формаирование оглавления
  103. if (this.parsed == parsed)
  104. return;
  105. this.parsed = parsed;
  106. this.contents = [];
  107. await this.$nextTick();
  108. const pc = parsed.contents;
  109. const newpc = [];
  110. //преобразуем все, кроме первого, разделы body в title-subtitle
  111. let curSubtitles = [];
  112. let prevBodyIndex = -1;
  113. for (let i = 0; i < pc.length; i++) {
  114. const cont = pc[i];
  115. if (prevBodyIndex != cont.bodyIndex)
  116. curSubtitles = [];
  117. prevBodyIndex = cont.bodyIndex;
  118. if (cont.bodyIndex > 1) {
  119. if (cont.inset < 1) {
  120. newpc.push(Object.assign({}, cont, {subtitles: curSubtitles}));
  121. } else {
  122. curSubtitles.push(Object.assign({}, cont, {inset: cont.inset - 1}));
  123. }
  124. } else {
  125. newpc.push(cont);
  126. }
  127. }
  128. const prepareLabel = (title, bolder = false) => {
  129. let titleParts = title.split('<p>');
  130. const textParts = titleParts.filter(v => v).map(v => `<div>${utils.removeHtmlTags(v)}</div>`);
  131. if (bolder && textParts.length > 1)
  132. textParts[0] = `<b>${textParts[0]}</b>`;
  133. return textParts.join('');
  134. }
  135. const getIndentStyle = inset => `width: ${inset*20}px`;
  136. const getLabelStyle = (inset) => {
  137. const fontSizes = ['110%', '100%', '90%', '85%'];
  138. inset = (inset > 3 ? 3 : inset);
  139. return `font-size: ${fontSizes[inset]}`;
  140. };
  141. //формируем newContents
  142. let i = 0;
  143. const newContents = [];
  144. newpc.forEach((cont) => {
  145. const label = prepareLabel(cont.title, true);
  146. const indentStyle = getIndentStyle(cont.inset);
  147. const labelStyle = getLabelStyle(cont.inset);
  148. let j = 0;
  149. const list = [];
  150. cont.subtitles.forEach((sub) => {
  151. const l = prepareLabel(sub.title);
  152. const s = getIndentStyle(sub.inset + 1);
  153. const ls = getLabelStyle(cont.inset + 1);
  154. const p = parsed.para[sub.paraIndex];
  155. list[j] = {perc: (p.offset/parsed.textLength*100).toFixed(2), label: l, key: j, offset: p.offset, indentStyle: s, labelStyle: ls};
  156. j++;
  157. });
  158. const p = parsed.para[cont.paraIndex];
  159. newContents[i] = {perc: (p.offset/parsed.textLength*100).toFixed(0), label, key: i, offset: p.offset, indentStyle, labelStyle, expanded: false, list};
  160. i++;
  161. });
  162. this.contents = newContents;
  163. //формируем newImages
  164. const newImages = [];
  165. const ims = parsed.images;
  166. for (i = 0; i < ims.length; i++) {
  167. const image = ims[i];
  168. const label = `Изображение ${image.num}`;
  169. const indentStyle = getIndentStyle(0);
  170. const labelStyle = getLabelStyle(0);
  171. const p = parsed.para[image.paraIndex];
  172. newImages.push({perc: (p.offset/parsed.textLength*100).toFixed(0), label, key: i, offset: p.offset, indentStyle, labelStyle});
  173. }
  174. this.images = newImages;
  175. }
  176. async expandClick(key) {
  177. const item = this.contents[key];
  178. const expanded = !item.expanded;
  179. if (!expanded) {
  180. const subitems = this.$refs[`subitem${key}`][0];
  181. subitems.style.height = '0';
  182. await utils.sleep(200);
  183. }
  184. this.$set(this.contents, key, Object.assign({}, item, {expanded}));
  185. if (expanded) {
  186. await this.$nextTick();
  187. const subitems = this.$refs[`subitem${key}`][0];
  188. subitems.style.height = subitems.scrollHeight + 'px';
  189. }
  190. }
  191. async setBookPos(newValue) {
  192. this.$emit('book-pos-changed', {bookPos: newValue});
  193. this.close();
  194. }
  195. close() {
  196. this.$emit('do-action', {action: 'contents'});
  197. }
  198. keyHook(event) {
  199. if (!this.$root.stdDialog.active && event.type == 'keydown' && event.key == 'Escape') {
  200. this.close();
  201. }
  202. return true;
  203. }
  204. }
  205. //-----------------------------------------------------------------------------
  206. </script>
  207. <style scoped>
  208. .tab-panel {
  209. overflow-x: hidden;
  210. overflow-y: auto;
  211. font-size: 90%;
  212. padding: 0 10px 0px 10px;
  213. }
  214. .clickable {
  215. cursor: pointer;
  216. padding: 10px 0 10px 0;
  217. }
  218. .item, .subitem {
  219. border-bottom: 1px solid #e0e0e0;
  220. }
  221. .item:hover, .subitem:hover {
  222. background-color: #f0f0f0;
  223. }
  224. .expand-button, .no-expand-button {
  225. width: 40px;
  226. }
  227. .subitems-transition {
  228. height: 0;
  229. transition: height 0.2s linear;
  230. overflow: hidden;
  231. }
  232. .icon {
  233. transition: transform 0.2s;
  234. }
  235. .expanded-icon {
  236. transform: rotate(90deg);
  237. }
  238. </style>