bachir/gdp_vuewp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bibliography improvment #1257

Browse Source
This commit is contained in:
bachir
2022-04-07 22:49:12 +02:00
parent ff79fa47d9
commit 10c4abfa82
3 changed files with 274 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.scss
+78 -4
View File
@@ -31,8 +31,8 @@ that is currently Firefox-only */
body{
color: #1a1a1a;
background-image: url('/static/img/grille-ligne-de-base.png');
background-repeat: repeat;
// background-image: url('/static/img/grille-ligne-de-base.png');
// background-repeat: repeat;
}
#root{
@@ -927,14 +927,88 @@ section[role="main-content"]{
padding:0;
li{
padding:0;
margin:0 0 1.5em 0;
margin:0 0 $base-line 0;
h2{
margin:0;
@include title2black;
@include title1black;
}
p{
margin:0;
}
span.date{
@include title2black;
font-weight: 600;
}
aside{
overflow: hidden;
h5{
@include title2black;
margin: $base-line / 2 0;
cursor: pointer;
// padding-left: 1em;
// position: relative;
&:before{
cursor: pointer;
content:"\2304";
position: relative;
display: inline-block;
top: -4px;
// transform-origin: center;
// transform: rotateZ(-90deg);
}
}
ul{
max-height: 1px;
transition: all 0.3s ease-in-out;
padding-left: 1em;
li{
margin-bottom: $base-line / 2;
}
}
&.opened{
h5{
&:before{
top: 4px;
content:"\2303";
// transform: rotateZ(90deg);
}
}
ul{
max-height: 100em;
}
}
}
}
&.manifestations{
li{
max-height: 0.2px;
margin-bottom:0;
overflow: hidden;
transition: all 1s ease-in-out;
&.active{
max-height: 10em;
}
.wrapper{
margin-bottom: $base-line;
}
}
}
}
ul.authors-filters{
li{
@include title4black;
line-height: $base-line / 2;
span{
cursor: pointer;
color: $gris;
&.active{
color: $grisfonce;
}
}
}
}
}
assets/css/base/_fonts.scss
+9
View File
@@ -55,6 +55,15 @@ footer[role="tools"] .row>nav{
line-height: $base-line / 2;
}
@mixin title2blue {
@include fontserif;
font-size: 1.134em;
color: $grisfonce;
font-weight: 400;
margin:0;
line-height: $base-line / 2;
}
@mixin title3black {
@include fontserif;
font-size: 1em;
src/pages/Bibliographie.vue
+187 -19
View File
@@ -28,39 +28,94 @@
</template>
<!-- default slot -->
<!-- expressions or manifestations list -->
<template v-if="!uuid">
<!-- expressions list -->
<template v-if="!uuid && type === 'expressions'">
<ul class="item-list">
<li v-for="item in content" :key="item.uuid">
<li v-for="item in expressions" :key="item.uuid">
<h2>
<router-link
v-if="item.authors"
:to="{ name:'bibliographieItem', params:{ type:type, uuid:item.uuid } }"
>
{{ item.authors }}
</router-link>
<span v-else>/!\ No authors /!\</span>
</h2>
<p class="date">{{ item.dates }}</p>
<p class="titles">{{ item.titles }}</p>
<em class="titles">{{ item.titles }}</em>
<aside v-if="item.manifestations.length">
<h5
@click.prevent="onToggleManifs"
@keyup.enter="onToggleManifs"
>Manifestations</h5>
<ul>
<li v-for="manif in item.manifestations" :key="manif.uuid">
<span class="date">{{ manif.dates }} </span>
<router-link
:to="{ name:'bibliographieItem', params:{ type:'manifestations', uuid:manif.uuid } }"
>
<em>{{ manif.titles }}</em>
</router-link>
</li>
</ul>
</aside>
</li>
</ul>
</template>
<!-- manifestations list -->
<template v-if="!uuid && type === 'manifestations'">
<ul class="item-list manifestations">
<li
v-for="item in manifestations" :key="item.uuid"
:class="isInActiveAuthors(item.authors)"
>
<div class="wrapper">
<span class="date">{{ item.dates }} </span>
<router-link
:to="{ name:'bibliographieItem', params:{ type:'manifestations', uuid:item.uuid } }"
>
<em class="titles">{{ item.titles }}</em>
</router-link>
<!-- <p class="authors">{{ item.authors }}</p> -->
</div>
</li>
</ul>
</template>
<!-- or item -->
<template v-else>
<div class="biblio-item">
<h2>{{ content.authors }}</h2>
<p v-if="content.dates" class="date">{{ content.dates }}</p>
<p class="titles">{{ content.titles }}</p>
<ul vi-if="content.manifestations.length" class="item-list">
<li v-for="item in content.manifestations" :key="item.uuid">
<h2>{{ item.authors }}</h2>
<p v-if="item.dates" class="date">{{ item.dates }}</p>
<p class="titles">{{ item.titles }}</p>
<p class="tei">{{ item.tei }}</p>
<ul vi-if="item.manifestations.length" class="item-list">
<li v-for="manif in item.manifestations" :key="manif.uuid">
<router-link
:to="{ name:'bibliographieItem', params:{ type:'manifestations', uuid:item.uuid } }"
v-html="item.tei"
:to="{ name:'bibliographieItem', params:{ type:'manifestations', uuid:manif.uuid } }"
v-html="manif.tei"
/>
</li>
</ul>
<ul vi-if="item.idno.length" class="item-list">
<li v-for="id in item.idno" :key="id.url">
<a :href="id.url">{{ id.type }}: {{ id.url }}</a>
</li>
</ul>
</div>
</template>
<template #nav />
<template #nav>
<ul v-if="!uuid && type === 'manifestations'" class="authors-filters">
<li
v-for="author in authors" :key="author"
>
<span
:class="isInActiveAuthors(author)"
@click.prevent="onToggleAuthors(author)"
@keyup.enter="onToggleAuthors(author)"
>{{ author }}</span>
</li>
</ul>
</template>
</MainContentLayout>
</template>
@@ -82,32 +137,145 @@ export default {
uuid: String
},
data: () => ({
content: Array
content: Array,
manifestations: Array,
expressions: Array,
authors: Array,
activeAuthors: Array,
item: Array
}),
computed: {
},
watch: {
$route (to, from) {
this.getContent()
console.log('watch $route to', to)
// this.getContent()
if (to.params.uuid) {
this.getItem(to.params.type, to.params.uuid)
}
}
},
created () {
// this.type = this.$route.params.type || 'expressions'
// this.uuid = this.$route.params.id || null
this.activeAuthors = []
this.getContent()
if (this.$route.params.uuid) {
this.getItem(this.$route.params.type, this.$route.params.uuid)
}
},
methods: {
getContent () {
// ?_format=json
REST.get(`${window.apipath}/bibliography/${this.type}/${this.uuid || ''}`, {})
REST.get(`${window.apipath}/bibliography/expressions`, {})
.then(({ data }) => {
console.log('Biblio REST: data', data)
console.log('Biblio REST expressions: data', data)
if (data.content) {
this.content = data.content
this.expressions = data.content
REST.get(`${window.apipath}/bibliography/manifestations`, {})
.then(({ data }) => {
console.log('Biblio REST manifestations: data', data)
if (data.content) {
this.manifestations = data.content
}
this.parseContents()
})
.catch((error) => {
console.warn('Issue with bibliographie manifestations', error)
Promise.reject(error)
})
}
})
.catch((error) => {
console.warn('Issue with bibliographie', error)
console.warn('Issue with bibliographie expressions', error)
Promise.reject(error)
})
// // ?_format=json
// REST.get(`${window.apipath}/bibliography/${this.type}/${this.uuid || ''}`, {})
// .then(({ data }) => {
// console.log('Biblio REST: data', data)
// if (data.content) {
// this.content = data.content
// }
// })
// .catch((error) => {
// console.warn('Issue with bibliographie', error)
// Promise.reject(error)
// })
},
getItem (type, uuid) {
REST.get(`${window.apipath}/bibliography/${type}/${uuid}`, {})
.then(({ data }) => {
console.log('Biblio REST item: data', data)
if (data.content) {
this.item = data.content
}
})
.catch((error) => {
console.warn('Issue with bibliographie get item', error)
Promise.reject(error)
})
},
parseContents () {
this.expressions = this.expressions.sort((a, b) => {
let Adate = parseInt(a.dates)
let Bdate = parseInt(b.dates)
if (Adate < Bdate) {
return -1
} else if (Adate > Bdate) {
return 1
} else {
return 0
}
})
this.manifestations = this.manifestations.sort((a, b) => {
let Adate = parseInt(a.dates)
let Bdate = parseInt(b.dates)
if (Adate < Bdate) {
return -1
} else if (Adate > Bdate) {
return 1
} else {
return 0
}
})
this.authors = []
this.manifestations.forEach(manif => {
// console.log('this.authors', this.authors)
if (this.authors.indexOf(manif.authors) === -1) {
this.authors.push(manif.authors)
this.activeAuthors.push(manif.authors)
}
// console.log('authors', this.authors)
})
this.expressions.forEach((expr, i) => {
let manifs = []
this.manifestations.forEach((manif, j) => {
if (manif.authors !== '' && manif.authors === expr.authors) {
manifs.push(manif)
}
})
this.expressions[i].manifestations = manifs
})
this.content = this.expressions
// console.log(this.expressions)
},
onToggleManifs (e) {
console.log('togle manifs', e)
let aside = e.originalTarget.parentNode
// console.log('aside', aside)
aside.classList.toggle('opened')
},
isInActiveAuthors (authors) {
return this.activeAuthors.indexOf(authors) !== -1 ? 'active' : null
},
onToggleAuthors (author) {
if (this.activeAuthors.indexOf(author) === -1) {
this.activeAuthors.push(author)
} else {
this.activeAuthors.splice(this.activeAuthors.indexOf(author), 1)
}
}
}
}