Работа над ContentsPage

This commit is contained in:
Book Pauk
2020-11-13 19:10:15 +07:00
parent bd1e5485d7
commit e947b887fe
2 changed files with 13 additions and 9 deletions

View File

@@ -32,21 +32,21 @@
expand-icon="la la-arrow-circle-down" expand-icon="la la-arrow-circle-down"
> >
<template slot="header"> <template slot="header">
<div class="row no-wrap clickable" style="width: 470px"> <div class="row no-wrap clickable" style="width: 470px" @click="setBookPos(item.offset)">
<div class="q-mr-sm col overflow-hidden column justify-center" v-html="item.label"></div> <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 class="column justify-center">{{ item.perc }}%</div>
</div> </div>
</template> </template>
<q-item class="subitem clickable" v-for="subitem in item.list" :key="subitem.key"> <q-item class="subitem" 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="row no-wrap clickable" style="padding-left: 115px; width: 470px" @click="setBookPos(subitem.offset)">
<div class="q-mr-sm col overflow-hidden column justify-center" v-html="subitem.label"></div> <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 class="column justify-center">{{ subitem.perc }}%</div>
</div> </div>
</q-item> </q-item>
</q-expansion-item> </q-expansion-item>
<q-item v-else class="item clickable"> <q-item v-else class="item">
<div class="row no-wrap" style="margin-left: 55px; width: 470px"> <div class="row no-wrap clickable" style="margin-left: 55px; width: 470px" @click="setBookPos(item.offset)">
<div class="q-mr-sm col overflow-hidden column justify-center" v-html="item.label"></div> <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 class="column justify-center">{{ item.perc }}%</div>
</div> </div>
@@ -107,12 +107,12 @@ class ContentsPage extends Vue {
cont.subtitles.forEach((sub) => { cont.subtitles.forEach((sub) => {
const l = prepareLabel(sub.title); const l = prepareLabel(sub.title);
const p = parsed.para[sub.paraIndex]; const p = parsed.para[sub.paraIndex];
list.push({perc: (p.offset/parsed.textLength*100).toFixed(2), label: l, key: j}); list.push({perc: (p.offset/parsed.textLength*100).toFixed(2), label: l, key: j, offset: p.offset});
j++; j++;
}); });
const p = parsed.para[cont.paraIndex]; const p = parsed.para[cont.paraIndex];
newContents.push({perc: (p.offset/parsed.textLength*100).toFixed(0), label, key: i, list}); newContents.push({perc: (p.offset/parsed.textLength*100).toFixed(0), label, key: i, offset: p.offset, list});
i++; i++;
}); });
@@ -120,6 +120,10 @@ class ContentsPage extends Vue {
this.contents = newContents; this.contents = newContents;
} }
setBookPos(newValue) {
this.$emit('book-pos-changed', {bookPos: newValue});
}
close() { close() {
this.$emit('do-action', {action: 'contents'}); this.$emit('do-action', {action: 'contents'});
} }

View File

@@ -99,7 +99,7 @@
<HelpPage v-if="helpActive" ref="helpPage" @do-action="doAction"></HelpPage> <HelpPage v-if="helpActive" ref="helpPage" @do-action="doAction"></HelpPage>
<ClickMapPage v-show="clickMapActive" ref="clickMapPage"></ClickMapPage> <ClickMapPage v-show="clickMapActive" ref="clickMapPage"></ClickMapPage>
<ServerStorage v-show="hidden" ref="serverStorage"></ServerStorage> <ServerStorage v-show="hidden" ref="serverStorage"></ServerStorage>
<ContentsPage v-show="contentsPageActive" ref="contentsPage" @do-action="doAction"></ContentsPage> <ContentsPage v-show="contentsPageActive" ref="contentsPage" @do-action="doAction" @book-pos-changed="bookPosChanged"></ContentsPage>
<ReaderDialogs ref="dialogs" @donate-toggle="donateToggle" @version-history-toggle="versionHistoryToggle"></ReaderDialogs> <ReaderDialogs ref="dialogs" @donate-toggle="donateToggle" @version-history-toggle="versionHistoryToggle"></ReaderDialogs>
</div> </div>