bachir/enfrancais-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update PageView to display notes links + misc fixes

Browse Source
This commit is contained in:
axolotle
2022-05-24 21:29:51 +02:00
parent eef87fd616
commit 0f7ed99ab3
5 changed files with 128 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layouts/PageView.vue
+92 -9
View File
@@ -1,23 +1,66 @@
<template lang="html">
<div class="page" :class="'page-' + slug">
<div class="btn-close-wrapper">
<div v-if="!noClose" class="btn-close-wrapper">
<button-close @click="$emit('close')" />
</div>
<div class="page-wrapper" v-html="page.content" />
<div class="page-footnotes" v-if="page.notes">
<div
v-for="note in page.notes" :key="`note-${note.number}`"
:id="`note-${note.number}`"
>
<div v-if="note.content" class="footnote-content" v-html="note.content" />
<div
v-if="note.links"
class="footnote-child-list"
>
<node-view-title
v-for="link in note.links" :key="link.id"
:node="getLinkObj(link)"
link
@open-node="onFootnoteLinkClick(link)"
>
<dot-button
:variant="link.variant"
class="mr-2"
active
>
{{ $t('variants.' + link.variant) }}
</dot-button>
</node-view-title>
</div>
</div>
</div>
</div>
</template>
<script>
import { getRelation } from '@/store/utils'
import { NodeViewTitle } from '@/components/nodes'
export default {
name: 'PageView',
components: {
NodeViewTitle
},
props: {
page: { type: Object, default: undefined },
slug: { type: String, required: true }
slug: { type: String, required: true },
noClose: { type: Boolean, default: false }
},
methods: {
getLinkObj (link) {
if (link.preTitle || link.italTitle) return link
if (link.type === 'prod' && link.parents && link.parents.length) return link.parents[0]
return link
},
addFootnotes () {
const links = this.$el.querySelectorAll('.page-wrapper a')
links.forEach((link, i) => {
@@ -31,7 +74,7 @@ export default {
if (link.parentElement.nodeName === 'SUP') {
link.parentElement.replaceWith(link)
}
link.onclick = this.onFootnoteLinkClick
link.onclick = this.onFootnoteClick
this.addFootnoteContent(link, number)
}
@@ -39,23 +82,35 @@ export default {
},
addFootnoteContent (link, i) {
const note = document.getElementById(`note-${i}`)
const noteContainer = document.createElement('DIV')
noteContainer.classList.add('page-footnote-content')
noteContainer.classList.add('footnote')
noteContainer.id = link.id + '-content'
noteContainer.innerHTML = this.page.notes.find(note => note.number === i).content
noteContainer.appendChild(note)
// noteContainer.innerHTML = this.page.notes.find(note => note.number === i).content
link.insertAdjacentElement('afterend', noteContainer)
},
onFootnoteLinkClick (e) {
onFootnoteClick (e) {
const container = document.getElementById(e.target.id + '-content')
if (container) {
container.classList.toggle('show')
}
},
onFootnoteLinkClick (node) {
this.$store.dispatch('OPEN_NODE', getRelation(node))
}
},
mounted () {
if (this.page.notes) this.addFootnotes()
if (this.page.notes) {
const ids = this.page.notes.filter(note => (note.links)).reduce((ids, note) => {
return [...ids, ...note.links.map(link => link.id)]
}, [])
this.$store.dispatch('GET_NODES', { ids, dataLevel: 'initial' })
this.addFootnotes()
}
}
}
</script>
@@ -110,6 +165,16 @@ export default {
}
}
img {
display: block;
max-width: 100%;
max-height: 90vh;
}
.page-footnotes {
display: none;
}
&-footnote-link {
display: inline-block;
text-align: center;
@@ -122,7 +187,7 @@ export default {
border-radius: 1em;
padding: 0 .5em;
min-width: 1.25em;
max-height: 1.4em;
max-height: 1.5em;
margin: 0 .2em;
&:hover,
@@ -132,7 +197,7 @@ export default {
}
}
&-footnote-content {
.footnote {
background-color: $black;
color: $white;
font-size: 1.5rem;
@@ -148,6 +213,14 @@ export default {
// @include media-breakpoint-up(lg) {
// max-width: 50%;
// }
&-child-list {
margin-top: 0;
}
&-content + .footnote-child-list {
margin-top: 1rem;
}
&:not(.show) {
display: none;
@@ -161,5 +234,15 @@ export default {
margin: 0 0 1em 2em;
}
}
&.small {
font-size: 1rem;
padding: 0;
.footnote {
font-size: 1rem;
padding: $node-card-spacer-y $node-card-spacer-x;
}
}
}
</style>
src/pages/Gallery.vue
+9 -4
View File
@@ -28,7 +28,11 @@
<side-view id="gallery-index" right>
<template #default="{ hide }">
<div class="gallery-intro" v-html="intro" />
<page-view
v-if="intro"
:page="intro" no-close slug="intro"
class="small"
/>
<ul v-if="creations">
<li v-for="crea in creations" :key="crea.id">
@@ -79,7 +83,7 @@
import { mapGetters } from 'vuex'
import { getRelation } from '@/store/utils'
import { SideView } from '@/components/layouts'
import { PageView, SideView } from '@/components/layouts'
import { NodeViewTitle } from '@/components/nodes'
import { GalleryView, GalleryMap } from '@/pages/gallery'
@@ -88,6 +92,7 @@ export default {
name: 'Gallery',
components: {
PageView,
SideView,
GalleryView,
GalleryMap,
@@ -100,7 +105,7 @@ export default {
data () {
return {
intro: '',
intro: null,
mapIsVisible: false
}
},
@@ -132,7 +137,7 @@ export default {
}
this.$store.dispatch('INIT_GALLERY', parseInt(this.id))
this.$store.dispatch('QUERY_PAGE', 'gallery').then(page => {
this.intro = page.content
this.intro = page
})
}
}
src/pages/_partials/MainHeader.vue
+1
View File
@@ -126,6 +126,7 @@ export default {
.dropdown-menu {
border: 0;
z-index: 1500;
.dropdown-item {
padding: .25rem $header-spacer-sm;
src/pages/kit/KitList.vue
+9 -3
View File
@@ -6,7 +6,11 @@
>
<div class="kit-list-wrapper">
<header class="kit-list-header">
<div class="kit-list-header-intro" v-html="intro" />
<page-view
v-if="intro"
:page="intro" no-close slug="intro"
class="small"
/>
<search-input v-model="search" class="input-search" />
</header>
@@ -27,6 +31,7 @@
import { mapGetters } from 'vuex'
import { NodeView } from '@/components/nodes'
import { PageView } from '@/components/layouts'
import { SearchInput } from '@/components/formItems'
import { searchInNode } from '@/store/utils'
@@ -36,6 +41,7 @@ export default {
components: {
NodeView,
PageView,
SearchInput
},
@@ -45,7 +51,7 @@ export default {
data () {
return {
search: '',
intro: ''
intro: null
}
},
@@ -68,7 +74,7 @@ export default {
async created () {
this.$store.dispatch('INIT_KIT')
this.$store.dispatch('QUERY_PAGE', 'kit').then(page => {
this.intro = page.content
this.intro = page
})
}
}
src/store/modules/pages.js
+17
View File
@@ -43,6 +43,7 @@ export default {
async 'QUERY_PAGE' ({ state, commit, dispatch, getters }, slug) {
if (state[slug] !== undefined) return state[slug]
return api.query(Page, { id: state.ids[slug] }).then(data => {
dispatch('PARSE_PAGE', data.page)
commit('SET_PAGE', { slug, page: data.page })
return state[slug]
})
@@ -67,6 +68,22 @@ export default {
commit('SET_BURGER', burger)
return burger
})
},
'PARSE_PAGE' ({ rootState }, node) {
if (node.notes) {
node.notes.forEach(note => {
if (note.links && note.links.length) {
note.links = note.links.map(link => {
if (!(link.id in rootState.nodes) || rootState.nodes[link.id].dataLevel < 1) {
this.commit('ADD_NODES', [[link], -1])
}
return rootState.nodes[link.id]
})
}
})
}
return node
}
},