Работа над ContentsPage

client/components/Reader/ContentsPage/ContentsPage.vue

@@ -1,8 +1,67 @@
 <template>
     <Window width="600px" ref="window" @close="close">
         <template slot="header">
+            Оглавление/закладки
         </template>
 
+    <div class="bg-grey-3 row">
+        <q-tabs
+            v-model="selectedTab"
+            active-color="black"
+            active-bg-color="white"
+            indicator-color="white"
+            dense
+            no-caps
+            inline-label
+            class="no-mp bg-grey-4 text-grey-7"
+        >
+            <q-tab name="contents" icon="la la-list" label="Оглавление" />
+            <q-tab name="bookmarks"  icon="la la-bookmark" label="Закладки" />
+        </q-tabs>
+    </div>
+
+    <div class="q-mb-sm"/>
+
+    <div class="tab-panel" v-show="selectedTab == 'contents'">
+        <div>
+            <div class="row" v-for="item in contents" :key="item.key">                
+                <q-expansion-item v-if="item.list.length"
+                    class="item"
+                    expand-icon-toggle
+                    switch-toggle-side
+                    expand-icon="la la-arrow-circle-down"
+                >
+                    <template slot="header">
+                        <div class="row no-wrap clickable" style="width: 470px">
+                            <div class="q-mr-sm col overflow-hidden column justify-center" v-html="item.label"></div>
+                            <div class="column justify-center">{{ item.perc }}%</div>
+                        </div>
+                    </template>
+
+                    <q-item class="subitem clickable" v-for="subitem in item.list" :key="subitem.key">
+                        <div class="row no-wrap" style="margin-left: 55px; padding-left: 60px; width: 470px">
+                            <div class="q-mr-sm col overflow-hidden column justify-center"  v-html="subitem.label"></div>
+                            <div class="column justify-center">{{ item.perc }}%</div>
+                        </div>
+                    </q-item>
+                </q-expansion-item>
+                <q-item v-else class="item clickable">
+                    <div class="row no-wrap" style="margin-left: 55px; width: 470px">
+                        <div class="q-mr-sm col overflow-hidden column justify-center" v-html="item.label"></div>
+                        <div class="column justify-center">{{ item.perc }}%</div>
+                    </div>
+                </q-item>
+
+                <q-separator />
+            </div>
+        </div>
+    </div>
+
+    <div class="tab-panel" v-show="selectedTab == 'bookmarks'">
+        <div>
+        </div>
+    </div>
+
     </Window>
 </template>
 
@@ -23,11 +82,42 @@ export default @Component({
     },
 })
 class ContentsPage extends Vue {
+    selectedTab = 'contents';
+    contents = [];
+
     created() {
     }
 
-    init() {
+    init(currentBook, parsed) {
         this.$refs.window.init();
+
+        const prepareLabel = (title) => {
+            let titleParts = title.split('<p>');
+            const textParts = titleParts.filter(v => v).map(v => v.replace(/(&nbsp;|<([^>]+)>)/ig, ''));
+            return textParts.join('<br>');
+        }
+
+        let i = 0;
+        const newContents = [];
+        parsed.contents.forEach((cont) => {
+            const label = prepareLabel(cont.title);
+
+            let j = 0;
+            const list = [];
+            cont.subtitles.forEach((sub) => {
+                const l = prepareLabel(sub.title);
+                const p = parsed.para[sub.paraIndex];
+                list.push({perc: (p.offset/parsed.textLength*100).toFixed(2), label: l, key: j});
+                j++;
+            });
+
+            const p = parsed.para[cont.paraIndex];
+            newContents.push({perc: (p.offset/parsed.textLength*100).toFixed(0), label, key: i, list});
+
+            i++;
+        });
+
+        this.contents = newContents;
     }
 
     close() {
@@ -45,4 +135,22 @@ class ContentsPage extends Vue {
 </script>
 
 <style scoped>
+.tab-panel {
+    overflow-x: hidden;
+    overflow-y: auto;
+    font-size: 90%;
+    padding: 0 10px 0px 10px;
+}
+
+.clickable {
+    cursor: pointer;
+}
+
+.item:hover {
+    background-color: #f0f0f0;
+}
+
+.subitem:hover {
+    background-color: #e0e0e0;
+}
 </style>