|
@@ -51,7 +51,6 @@
|
|
|
:textid="textid"
|
|
|
@onHoverLink="onHoverLink"
|
|
|
@onLeaveLink="onLeaveLink"
|
|
|
- @onNewPageBreaks="onNewPageBreaks"
|
|
|
/>
|
|
|
<infinite-loading
|
|
|
:identifier="textid"
|
|
@@ -61,37 +60,30 @@
|
|
|
</div>
|
|
|
|
|
|
<template #nav>
|
|
|
- <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>
|
|
|
+ <EdToc
|
|
|
+ id="toc"
|
|
|
+ :toc="toc"
|
|
|
+ :loadedtextsuuids="textsuuids"
|
|
|
+ @onClickTocItem="onClickTocItem"
|
|
|
+ />
|
|
|
+ <EdPagination
|
|
|
+ v-if="pagination"
|
|
|
+ id="page-nav"
|
|
|
+ :pagination="pagination"
|
|
|
+ @onClickPaginationItem="onClickPaginationItem"
|
|
|
+ />
|
|
|
</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'
|
|
|
+import EdPagination from '../components/Content/EdPagination'
|
|
|
|
|
|
export default {
|
|
|
name: 'Edition',
|
|
@@ -104,7 +96,8 @@ export default {
|
|
|
components: {
|
|
|
MainContentLayout,
|
|
|
EdText,
|
|
|
- EdToc
|
|
|
+ EdToc,
|
|
|
+ EdPagination
|
|
|
},
|
|
|
data: () => ({
|
|
|
toc: null,
|
|
@@ -126,9 +119,7 @@ export default {
|
|
|
inifinite_load_distance: 10,
|
|
|
reftoscrollto: null,
|
|
|
//
|
|
|
- pages: [],
|
|
|
- pagesOptions: [],
|
|
|
- page_selected: ''
|
|
|
+ pagination: null
|
|
|
}),
|
|
|
computed: {
|
|
|
...mapState({
|
|
@@ -193,10 +184,28 @@ export default {
|
|
|
}
|
|
|
} else {
|
|
|
console.warn('Bad edition uuid', this.$route.params.id, this.$route)
|
|
|
- this.$router.replace({
|
|
|
- name: 'notfound',
|
|
|
- query: { fullpath: this.$route.path }
|
|
|
- })
|
|
|
+ // this.$router.replace({
|
|
|
+ // name: 'notfound',
|
|
|
+ // query: { fullpath: this.$route.path }
|
|
|
+ // })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.warn('Issue with text toc', error)
|
|
|
+ Promise.reject(error)
|
|
|
+ })
|
|
|
+ // get the edition's pagination
|
|
|
+ REST.get(`${window.apipath}/texts/` + this.$route.params.id + `/pagination`, {})
|
|
|
+ .then(({ data }) => {
|
|
|
+ console.log('texts/pagination REST: data', data)
|
|
|
+ if (data.content && data.content !== 'vide') {
|
|
|
+ this.pagination = data.content
|
|
|
+ } else {
|
|
|
+ console.warn('Bad edition uuid', this.$route.params.id, this.$route)
|
|
|
+ // this.$router.replace({
|
|
|
+ // name: 'notfound',
|
|
|
+ // query: { fullpath: this.$route.path }
|
|
|
+ // })
|
|
|
}
|
|
|
})
|
|
|
.catch((error) => {
|
|
@@ -336,71 +345,25 @@ 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])
|
|
|
- }
|
|
|
+ onClickPaginationItem (o) {
|
|
|
+ console.log('onClickPaginationItem', o)
|
|
|
+ if (this.textsuuids.indexOf(o.uuid) !== -1) {
|
|
|
+ // if already loaded, scroll to uuid
|
|
|
+ this.scrollToPage(o)
|
|
|
+ } else {
|
|
|
+ // if not already loaded, change route
|
|
|
+ this.$router.push({
|
|
|
+ name: `editiontext`,
|
|
|
+ params: {
|
|
|
+ id: this.editionid,
|
|
|
+ textid: o.uuid
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
- // 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}"]`
|
|
|
+ this.reftoscrollto = `span[role="pageBreak"][id="${p.code}"]`
|
|
|
}
|
|
|
}
|
|
|
}
|