pagination navigation is working
This commit is contained in:
+63
-47
@@ -342,8 +342,14 @@ section[role="main-content"]{
|
||||
}
|
||||
|
||||
>nav{
|
||||
>section{
|
||||
padding:0 0 0 1.5em;
|
||||
padding-bottom: 0;
|
||||
$pager_h:2em;
|
||||
section#toc{
|
||||
box-sizing: content-box;
|
||||
padding:0 0 1em 1.5em;
|
||||
height:calc(100% - #{$pager_h});
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
>ul{
|
||||
ul{
|
||||
li{
|
||||
@@ -396,7 +402,17 @@ section[role="main-content"]{
|
||||
span.toc-title{font-size: 0.882em;}
|
||||
}
|
||||
}
|
||||
|
||||
div#page-nav{
|
||||
height:$pager_h;
|
||||
overflow: hidden;
|
||||
box-sizing: content-box;
|
||||
padding:0 1.5em;
|
||||
select{
|
||||
option{
|
||||
padding:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -683,62 +699,62 @@ footer[role="tools"]{
|
||||
text-transform: uppercase;
|
||||
padding:0;
|
||||
}
|
||||
.v-select{
|
||||
|
||||
}
|
||||
.v-select{
|
||||
padding:0;
|
||||
div[role="combobox"]{
|
||||
background-color: #fff;
|
||||
padding:0;
|
||||
div[role="combobox"]{
|
||||
background-color: #fff;
|
||||
padding:0;
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
}
|
||||
input[type="search"]{
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
.vs__search{
|
||||
&, &:focus{
|
||||
font-size: 0.756em;
|
||||
line-height: 1;
|
||||
height:1.2em;
|
||||
border:none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
input[type="search"]{
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
.vs__search{
|
||||
&, &:focus{
|
||||
font-size: 0.756em;
|
||||
line-height: 1;
|
||||
height:1.2em;
|
||||
border:none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.vs__actions{
|
||||
padding:1px 3px;
|
||||
svg[role="presentation"]{
|
||||
transform: scale(0.8);
|
||||
path{
|
||||
fill: $bleuroi;
|
||||
}
|
||||
}
|
||||
.vs__actions{
|
||||
padding:1px 3px;
|
||||
svg[role="presentation"]{
|
||||
}
|
||||
.vs__selected{
|
||||
margin:0;
|
||||
padding:0;
|
||||
line-height:1;
|
||||
font-size: 0.756em;
|
||||
}
|
||||
// border-radius: 2px;
|
||||
// border: none;
|
||||
}
|
||||
.v-select{
|
||||
.vs__selected{
|
||||
background-color: #fff;
|
||||
border:none;
|
||||
padding:0.3em 0.5em;
|
||||
button{
|
||||
svg{
|
||||
transform: scale(0.8);
|
||||
path{
|
||||
fill: $bleuroi;
|
||||
}
|
||||
}
|
||||
}
|
||||
.vs__selected{
|
||||
margin:0;
|
||||
padding:0;
|
||||
line-height:1;
|
||||
font-size: 0.756em;
|
||||
}
|
||||
// border-radius: 2px;
|
||||
// border: none;
|
||||
}
|
||||
fieldset.filters .v-select{
|
||||
.vs__selected{
|
||||
background-color: #fff;
|
||||
border:none;
|
||||
padding:0.3em 0.5em;
|
||||
button{
|
||||
svg{
|
||||
transform: scale(0.8);
|
||||
path{
|
||||
fill: $bleuroi;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// vue-select
|
||||
ul[role="listbox"]{
|
||||
@include fontsans;
|
||||
|
||||
@@ -11,7 +11,8 @@ export default {
|
||||
},
|
||||
data: () => ({
|
||||
template: null,
|
||||
html: null
|
||||
html: null,
|
||||
pages: []
|
||||
}),
|
||||
watch: {
|
||||
tei: function (newtei, oldtei) {
|
||||
@@ -26,6 +27,9 @@ export default {
|
||||
this.buildTemplate()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$emit('onNewPageBreaks', this.pages)
|
||||
},
|
||||
methods: {
|
||||
buildTemplate () {
|
||||
// console.log('EdText buildTemplate: tei', this.tei)
|
||||
@@ -85,7 +89,7 @@ export default {
|
||||
},
|
||||
parsePageBreaks () {
|
||||
let pbs = this.html.match(/<span role="pageBreak"[^>]+><\/span>/g)
|
||||
console.log('pagebreaks', pbs)
|
||||
// console.log('pagebreaks', pbs)
|
||||
if (pbs) {
|
||||
let pbparts, newpb, num
|
||||
for (var i = 0; i < pbs.length; i++) {
|
||||
@@ -93,14 +97,16 @@ export default {
|
||||
if (!pbparts) {
|
||||
console.warn(`pageBreak ${i} maformed`, pbs[i])
|
||||
} else {
|
||||
console.log('pbparts', pbparts)
|
||||
// console.log('pbparts', pbparts)
|
||||
num = pbparts[1]
|
||||
this.pages.push(num)
|
||||
newpb = `<span` +
|
||||
// ` id="page-break-${num}"` +
|
||||
` role="pageBreak"` +
|
||||
` data-num="${num}"` +
|
||||
` data-num-prev="${num - 1}"` +
|
||||
` />`
|
||||
console.log('newpb', newpb)
|
||||
// console.log('newpb', newpb)
|
||||
this.html = this.html.replace(pbs[i], newpb)
|
||||
}
|
||||
}
|
||||
|
||||
+98
-3
@@ -48,6 +48,7 @@
|
||||
:textid="textid"
|
||||
@onHoverLink="onHoverLink"
|
||||
@onLeaveLink="onLeaveLink"
|
||||
@onNewPageBreaks="onNewPageBreaks"
|
||||
/>
|
||||
<infinite-loading
|
||||
:identifier="textid"
|
||||
@@ -57,16 +58,34 @@
|
||||
</div>
|
||||
|
||||
<template #nav>
|
||||
<EdToc :toc="toc" :loadedtextsuuids="textsuuids" @onClickTocItem="onClickTocItem" />
|
||||
<EdToc id="toc" :toc="toc" :loadedtextsuuids="textsuuids" @onClickTocItem="onClickTocItem" />
|
||||
<div v-if="pages.length" id="page-nav">
|
||||
<!-- <select class="" name="page-nav" v-model="page_selected" placeholder="Pages">
|
||||
<option value="" disabled selected>Pages</option>
|
||||
<option v-for="(page, index) in pages" :key="index" :value="page">{{ page }}</option>
|
||||
</select> -->
|
||||
<v-select
|
||||
id="page-nav-select"
|
||||
type="select"
|
||||
placeholder="Aller à la page ..."
|
||||
append-to-body
|
||||
:calculate-position="dropDownMenuPos"
|
||||
:options="pages"
|
||||
:clearable="false"
|
||||
:value="page_selected"
|
||||
@input="onPageSelected"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</MainContentLayout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { createPopper } from '@popperjs/core'
|
||||
|
||||
import { REST } from 'api/rest-axios'
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
|
||||
import MainContentLayout from '../components/Layouts/MainContentLayout'
|
||||
import EdText from '../components/Content/EdText'
|
||||
import EdToc from '../components/Content/EdToc'
|
||||
@@ -102,7 +121,11 @@ export default {
|
||||
next_loaded: false,
|
||||
center_scrolled: false,
|
||||
inifinite_load_distance: 10,
|
||||
reftoscrollto: null
|
||||
reftoscrollto: null,
|
||||
//
|
||||
pages: [],
|
||||
pagesOptions: [],
|
||||
page_selected: ''
|
||||
}),
|
||||
computed: {
|
||||
...mapState({
|
||||
@@ -115,11 +138,17 @@ export default {
|
||||
console.log('textid watcher', this, oldid, newid)
|
||||
this.texts = []
|
||||
this.textsuuids = []
|
||||
this.pages = []
|
||||
this.pagesOtpions = []
|
||||
this.getTextContent(newid)
|
||||
},
|
||||
textdata: function (newtxtdata, oldtxtdata) {
|
||||
console.log('textdata watcher', oldtxtdata, newtxtdata)
|
||||
this.metainfotitle = `${this.title} ${newtxtdata.meta.title}`
|
||||
},
|
||||
page_selected: function (newp, oldp) {
|
||||
console.log('page_selected watcher', oldp, newp)
|
||||
this.scrollToPage(newp)
|
||||
}
|
||||
},
|
||||
beforeCreate () {
|
||||
@@ -276,6 +305,72 @@ export default {
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
onNewPageBreaks (p) {
|
||||
// console.log('onNewPageBreaks', p)
|
||||
for (var i = 0; i < p.length; i++) {
|
||||
if (this.pages.indexOf(p[i]) === -1) {
|
||||
this.pages.push(p[i])
|
||||
}
|
||||
}
|
||||
// reorder array
|
||||
this.pages.sort((a, b) => a - b)
|
||||
// this.pagesOptions = []
|
||||
// for (var j = 0; j < this.pages.length; j++) {
|
||||
// this.pagesOptions.push({ code: this.pages[j], label: `page ${this.pages[j]}` })
|
||||
// }
|
||||
},
|
||||
dropDownMenuPos (dropdownList, component, { width }) {
|
||||
/**
|
||||
* We need to explicitly define the dropdown width since
|
||||
* it is usually inherited from the parent with CSS.
|
||||
*/
|
||||
dropdownList.style.width = width
|
||||
|
||||
/**
|
||||
* Here we position the dropdownList relative to the $refs.toggle Element.
|
||||
*
|
||||
* The 'offset' modifier aligns the dropdown so that the $refs.toggle and
|
||||
* the dropdownList overlap by 1 pixel.
|
||||
*
|
||||
* The 'toggleClass' modifier adds a 'drop-up' class to the Vue Select
|
||||
* wrapper so that we can set some styles for when the dropdown is placed
|
||||
* above.
|
||||
*/
|
||||
const popper = createPopper(component.$refs.toggle, dropdownList, {
|
||||
placement: 'top',
|
||||
modifiers: [
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: [0, -1]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'toggleClass',
|
||||
enabled: true,
|
||||
phase: 'write',
|
||||
fn ({ state }) {
|
||||
component.$el.classList.toggle('drop-up', state.placement === 'top')
|
||||
}
|
||||
}]
|
||||
})
|
||||
|
||||
/**
|
||||
* To prevent memory leaks Popper needs to be destroyed.
|
||||
* If you return function, it will be called just before dropdown is removed from DOM.
|
||||
*/
|
||||
return () => popper.destroy()
|
||||
},
|
||||
onPageSelected (e) {
|
||||
console.log('onPageSelected', e)
|
||||
this.page_selected = e
|
||||
this.scrollToPage(e)
|
||||
// this.scrollToPage(e.code)
|
||||
},
|
||||
scrollToPage (p) {
|
||||
// console.log('scrollToPage', p)
|
||||
this.reftoscrollto = `span[role="pageBreak"][data-num="${p}"]`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user