added text preview in index item's occurences list
This commit is contained in:
+53
-6
@@ -228,16 +228,63 @@ section[role="main-content"]{
|
||||
.occurences{
|
||||
>ul{
|
||||
>li{
|
||||
padding:0 0 1em 0;
|
||||
padding:0 0 2em 0;
|
||||
h3{
|
||||
@include title2black;
|
||||
padding:0 0 0.3em 0;
|
||||
@include title1black;
|
||||
padding:0 0 1em 0;
|
||||
}
|
||||
>ul{
|
||||
>li{
|
||||
padding:0 0 0.3em 0;
|
||||
h4{
|
||||
@include title3black;
|
||||
padding:0 0 1em 0;
|
||||
section{
|
||||
h4{
|
||||
@include title2black;
|
||||
display: inline-block;
|
||||
}
|
||||
span.open-close{
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
svg{
|
||||
transform: rotate(-90deg) scale(0.8);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
path{
|
||||
fill:$bleuroi;
|
||||
}
|
||||
}
|
||||
}
|
||||
div.text{
|
||||
max-height: 0;
|
||||
transition: max-height 0.3s ease-in-out;
|
||||
overflow: hidden;
|
||||
box-sizing: content-box;
|
||||
p, h1, h2, h3, h4, h5, h6{
|
||||
margin: 0.5em 0 0 0;
|
||||
}
|
||||
}
|
||||
a.lire-plus{
|
||||
color: $bleuroi;
|
||||
opacity: 0;
|
||||
display: inline-block;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height, opacity 0.3s ease-in-out;
|
||||
}
|
||||
&.opened{
|
||||
span.open-close{
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
svg{
|
||||
transform: scale(0.8) rotate(0);
|
||||
}
|
||||
}
|
||||
div.text{
|
||||
max-height:100px;
|
||||
}
|
||||
a.lire-plus{
|
||||
opacity: 1;
|
||||
height:1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -24,17 +24,7 @@
|
||||
v-for="oc in ed.occurences"
|
||||
:key="oc.uuid"
|
||||
> -->
|
||||
<h4>
|
||||
<a
|
||||
:href="'/edition/'+ed.item+'/'+oc.uuid"
|
||||
:uuid="oc.uuid"
|
||||
:eduuid="ed.item"
|
||||
@click.prevent="onclick"
|
||||
@keyup.enter="onclick"
|
||||
>
|
||||
{{ oc.title }}
|
||||
</a>
|
||||
</h4>
|
||||
<occurence :ed="ed" :oc="oc" />
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
@@ -43,8 +33,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Occurence from './Occurence'
|
||||
|
||||
export default {
|
||||
name: 'IndexItemOcurrences',
|
||||
components: {
|
||||
Occurence
|
||||
},
|
||||
props: {
|
||||
content: Object
|
||||
},
|
||||
@@ -56,25 +51,6 @@ export default {
|
||||
// not necesseary anymore (KB #758)
|
||||
console.log('Array.isArray(oc)', Array.isArray(oc))
|
||||
return Array.isArray(oc) ? oc : [oc]
|
||||
},
|
||||
onclick (e) {
|
||||
console.log('clicked on text occurence', e)
|
||||
if (e.target.getAttribute('eduuid')) {
|
||||
this.$router.push({
|
||||
name: `editiontext`,
|
||||
params: {
|
||||
id: e.target.getAttribute('eduuid'),
|
||||
textid: e.target.getAttribute('uuid')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$router.push({
|
||||
name: `edition`,
|
||||
params: {
|
||||
id: e.target.getAttribute('uuid')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<section :class="{opened: isopened}">
|
||||
<h4>
|
||||
<a
|
||||
:href="'/edition/'+ed.item+'/'+oc.uuid"
|
||||
:uuid="oc.uuid"
|
||||
:eduuid="ed.item"
|
||||
@click.prevent="onGoToText"
|
||||
@keyup.enter="onGoToText"
|
||||
>
|
||||
{{ oc.title }}
|
||||
</a>
|
||||
</h4>
|
||||
<span
|
||||
class="open-close"
|
||||
@click.prevent="onOpenPreview"
|
||||
@keyup.enter="onOpenPreview"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" role="presentation" class="vs__open-indicator">
|
||||
<path d="M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z" />
|
||||
</svg>
|
||||
</span>
|
||||
<div v-if="content" class="text" v-html="tei" />
|
||||
<a
|
||||
v-if="content"
|
||||
class="lire-plus"
|
||||
:href="'/edition/'+ed.item+'/'+oc.uuid"
|
||||
:uuid="oc.uuid"
|
||||
:eduuid="ed.item"
|
||||
@click.prevent="onGoToText"
|
||||
@keyup.enter="onGoToText"
|
||||
>
|
||||
lire plus
|
||||
</a>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import { REST } from 'api/rest-axios'
|
||||
|
||||
export default {
|
||||
name: 'Occurence',
|
||||
props: {
|
||||
ed: Object,
|
||||
oc: Object
|
||||
},
|
||||
data: () => ({
|
||||
content: null,
|
||||
isopened: false,
|
||||
tei: ''
|
||||
}),
|
||||
created () {
|
||||
console.log('occurence beforeCreate')
|
||||
REST.get(`${window.apipath}/items/` + this.oc.uuid, {})
|
||||
.then(({ data }) => {
|
||||
console.log('occurence text REST: data', data)
|
||||
if (data.content) {
|
||||
this.content = data.content
|
||||
const subString = this.content.tei.substr(0, 500)
|
||||
this.tei = subString.substr(0, subString.lastIndexOf(' ')) + ' …'
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.warn('Issue with nominum', error)
|
||||
Promise.reject(error)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
onGoToText (e) {
|
||||
console.log('clicked on text occurence', e)
|
||||
if (e.target.getAttribute('eduuid')) {
|
||||
this.$router.push({
|
||||
name: `editiontext`,
|
||||
params: {
|
||||
id: e.target.getAttribute('eduuid'),
|
||||
textid: e.target.getAttribute('uuid')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$router.push({
|
||||
name: `edition`,
|
||||
params: {
|
||||
id: e.target.getAttribute('uuid')
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
onOpenPreview (e) {
|
||||
this.isopened = !this.isopened
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -10,6 +10,11 @@
|
||||
{{ content.birthDate }}, {{ content.birthPlace }}<br>
|
||||
{{ content.deathDate }}, {{ content.deathPlace }}
|
||||
</p>
|
||||
<!-- <ul v-if="content.attestedForms.lenght" class="attestedForms">
|
||||
<li v-for="(item, index) in content.attestedForms" :key="index">
|
||||
|
||||
</li>
|
||||
</ul> -->
|
||||
</template>
|
||||
|
||||
<!-- default slot -->
|
||||
|
||||
Reference in New Issue
Block a user