deadcxap/liberama
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Работа над ContentsPage

Browse Source
This commit is contained in:
Book Pauk
2020-11-13 22:45:34 +07:00
parent e947b887fe
commit 952c337b76
2 changed files with 36 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
client/components/Reader/ContentsPage/ContentsPage.vue
View File

@@ -26,33 +26,34 @@
<div> <div>
<div class="row" v-for="item in contents" :key="item.key"> <div class="row" v-for="item in contents" :key="item.key">
<q-expansion-item v-if="item.list.length" <q-expansion-item v-if="item.list.length"
class="item" class="item separator-bottom"
expand-icon-toggle expand-icon-toggle
switch-toggle-side switch-toggle-side
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" @click="setBookPos(item.offset)"> <div class="row no-wrap clickable" style="width: 465px" @click="setBookPos(item.offset)">
<div :style="item.style"></div>
<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" v-for="subitem in item.list" :key="subitem.key"> <q-item class="subitem separator-top column justify-center" v-for="subitem in item.list" :key="subitem.key">
<div class="row no-wrap clickable" style="padding-left: 115px; width: 470px" @click="setBookPos(subitem.offset)"> <div class="row no-wrap clickable" style="padding-left: 55px; width: 520px" @click="setBookPos(subitem.offset)">
<div :style="subitem.style"></div>
<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">{{ subitem.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"> <q-item v-else class="item separator-bottom">
<div class="row no-wrap clickable" style="margin-left: 55px; width: 470px" @click="setBookPos(item.offset)"> <div class="row no-wrap clickable" style="padding-left: 55px; width: 520px" @click="setBookPos(item.offset)">
<div :style="item.style"></div>
<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>
</q-item> </q-item>
<q-separator />
</div> </div>
</div> </div>
</div> </div>
@@ -91,28 +92,34 @@ class ContentsPage extends Vue {
init(currentBook, parsed) { init(currentBook, parsed) {
this.$refs.window.init(); this.$refs.window.init();
const prepareLabel = (title) => { const prepareLabel = (title, bolder = false) => {
let titleParts = title.split('<p>'); let titleParts = title.split('<p>');
const textParts = titleParts.filter(v => v).map(v => v.replace(/(&nbsp;|<([^>]+)>)/ig, '')); const textParts = titleParts.filter(v => v).map(v => `<div>${v.replace(/(<([^>]+)>)/ig, '')}</div>`);
return textParts.join('<br>'); if (bolder && textParts.length > 1)
textParts[0] = `<b>${textParts[0]}</b>`;
return textParts.join('');
} }
const insetStyle = inset => `width: ${(inset > 1 ? inset - 1 : 0)*20}px`;
let i = 0; let i = 0;
const newContents = []; const newContents = [];
parsed.contents.forEach((cont) => { parsed.contents.forEach((cont) => {
const label = prepareLabel(cont.title); const label = prepareLabel(cont.title, true);
const style = insetStyle(cont.inset);
let j = 0; let j = 0;
const list = []; const list = [];
cont.subtitles.forEach((sub) => { cont.subtitles.forEach((sub) => {
const l = prepareLabel(sub.title); const l = prepareLabel(sub.title);
const s = insetStyle(sub.inset + 1);
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, offset: p.offset}); list.push({perc: (p.offset/parsed.textLength*100).toFixed(2), label: l, key: j, offset: p.offset, style: s});
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, offset: p.offset, list}); newContents.push({perc: (p.offset/parsed.textLength*100).toFixed(0), label, key: i, offset: p.offset, style, list});
i++; i++;
}); });
@@ -157,4 +164,11 @@ class ContentsPage extends Vue {
.subitem:hover { .subitem:hover {
background-color: #e0e0e0; background-color: #e0e0e0;
} }
.separator-top {
border-top: 1px solid #e0e0e0;
}
.separator-bottom {
border-top: 1px solid #e0e0e0;
}
</style> </style>

10
client/components/Reader/share/BookParser.js
View File

@@ -58,6 +58,7 @@ export default class BookParser {
let curSubtitle = {paraIndex: -1, title: ''}; let curSubtitle = {paraIndex: -1, title: ''};
let inTitle = false; let inTitle = false;
let inSubtitle = false; let inSubtitle = false;
let sectionLevel = 0;
let paraIndex = -1; let paraIndex = -1;
let paraOffset = 0; let paraOffset = 0;
@@ -234,7 +235,7 @@ export default class BookParser {
center = true; center = true;
inTitle = true; inTitle = true;
curTitle = {paraIndex, title: '', subtitles: []}; curTitle = {paraIndex, title: '', inset: sectionLevel, subtitles: []};
this.contents.push(curTitle); this.contents.push(curTitle);
} }
@@ -242,6 +243,7 @@ export default class BookParser {
if (!isFirstSection) if (!isFirstSection)
newParagraph(' ', 1); newParagraph(' ', 1);
isFirstSection = false; isFirstSection = false;
sectionLevel++;
} }
if (tag == 'emphasis' || tag == 'strong') { if (tag == 'emphasis' || tag == 'strong') {
@@ -264,7 +266,7 @@ export default class BookParser {
center = true; center = true;
inSubtitle = true; inSubtitle = true;
curSubtitle = {paraIndex, title: ''}; curSubtitle = {paraIndex, inset: sectionLevel, title: ''};
curTitle.subtitles.push(curSubtitle); curTitle.subtitles.push(curSubtitle);
} }
@@ -298,6 +300,10 @@ export default class BookParser {
inTitle = false; inTitle = false;
} }
if (tag == 'section') {
sectionLevel--;
}
if (tag == 'emphasis' || tag == 'strong') { if (tag == 'emphasis' || tag == 'strong') {
growParagraph(`</${tag}>`, 0); growParagraph(`</${tag}>`, 0);
} }