Select Git revision
Letter.vue 5.57 KiB
<template>
<v-container grid-list-md>
<v-layout row wrap>
<v-flex xs12>
<h3>
<v-btn :to="letters[0].link" flat icon>
<v-icon>keyboard_arrow_left</v-icon>
</v-btn>
{{underscore(lettername)}}
<v-btn :to="letters[1].link" flat icon>
<v-icon>keyboard_arrow_right</v-icon>
</v-btn>
</h3>
</v-flex>
</v-layout>
<v-layout row wrap v-if="letter">
<!-- Author Data -->
<v-flex xs6>
<v-card flat>
<v-card-text>
<ul style="list-style-type:none;">
<li v-for="(value, key) in letter.teiHeader.fileDesc.titleStmt">
<span class="body-2">{{ capitalize(key) }}:</span> {{ value._text }}
</li>
</ul>
</v-card-text>
</v-card>
</v-flex>
<!-- Images -->
<v-flex xs6>
<v-layout row wrap>
<v-flex d-flex v-for="(image,i) in images" :key="i" >
<v-card flat hover target="_blank" :href="imgfolder(image._attributes.url)">
<v-card-text class="text-xs-center">
<v-avatar size="120px">
<img v-bind:src="imgfolder(image._attributes.url)" :alt="image._attributes.url">
</v-avatar>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-flex>
<!-- Text -->
<v-flex xs5>
<v-card>
<v-card-text>
<v-checkbox label="Show Comments" v-model="showComments"></v-checkbox>
<ul style="list-style-type:none;" class="letter-text">
<li v-for="(value, key) in letter.text.body.l" :class="value._attributes.no" v-if="hasText(formatText(value._text))">
{{value._attributes.no }}: {{ formatText(value._text) }}
</li>
</ul>
</v-card-text>
</v-card>
</v-flex>
<!-- Features -->
<v-flex xs7>
<v-expansion-panel>
<v-expansion-panel-content v-for="feature in features" :key="feature.text">
<div slot="header">{{feature.text}}</div>
<v-card>
<v-card-text>
<feature :root="feature.root" />
</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-flex>
</v-layout>
<!-- Progress Bar -->
<v-layout v-else>
<v-flex xs12 >
<v-progress-linear indeterminate color="primary"></v-progress-linear>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
export default {
// Single Letter Component
name: 'Letter',
data () {
return {
lettername: '',
letter: null,
images: [],
showComments: true,
features: [],
letters: []
}
},
methods: {
hasText (text) {
// Check if string is empty
return text.length !== 0
},
formatText (text) {
// Remove [Stuff] from text
if (!this.showComments) {
text = text.replace(/\[.*\]/, '')
}
return text
},
capitalize (word) {
// Capitalize first letter of a String
return word.charAt(0).toUpperCase() + word.slice(1)
},
imgfolder (img) {
// Add static image folder to path
return '/static/' + img
},
underscore (str) {
return str.replace('_', ' ')
},
breadcrumbs (doc, docs) {
// Create a list of precursor/predecessor elements for showing links to them
let idx = docs.findIndex(function (elem) {
return elem.name.replace(' ', '_') === doc
})
// If its the first element we push the last one, negative indexing would be nice
if (idx === 0) {
this.letters.push(docs[docs.length - 1])
} else {
this.letters.push(docs[idx - 1])
}
// this.letters.push(docs[idx])
// If its the last element we push the first one, negative indexing would be nice
if (idx === docs.length - 1) {
this.letters.push(docs[0])
} else {
this.letters.push(docs[idx + 1])
}
},
load (name) {
// Clear variables for idempotence
this.lettername = name
this.images = []
this.features = []
this.letter = null
this.$http.get('http://localhost:3000/api/letters/' + this.lettername).then(function (data) {
// If there's only one element xml-js makes no array... great stuff -.-
let doc = data.body.object
if (doc.TEI.text.head.graphic instanceof Array) {
this.images = doc.TEI.text.head.graphic
} else {
this.images.push(doc.TEI.text.head.graphic)
}
// So we can iterate in the templatep
this.features.push({text: 'Material and Visuals', root: doc.TEI.teiHeader.xenoData.paratext})
this.features.push({text: 'Graphemics', root: doc.TEI.teiHeader.xenoData.sprachliche_ebene.graphische_charaktersitika})
this.features.push({text: 'Lexical', root: doc.TEI.teiHeader.xenoData.sprachliche_ebene.lexikalische_charaktersitika})
this.features.push({text: 'Morphosyntactics', root: doc.TEI.teiHeader.xenoData.sprachliche_ebene.morphosyntaktische_charakterisitka})
this.features.push({text: 'Pragmatics', root: doc.TEI.teiHeader.xenoData.sprachliche_ebene.textstrukturelle_pragmatische_charakterisitka})
this.features.push({text: 'Discourse', root: doc.TEI.teiHeader.xenoData.sprachliche_ebene.diskurstraditionelle_ebene})
// Do this last for progress bar
this.letter = doc.TEI
// Load breadcrumbs
this.$http.get('http://localhost:3000/api/metadata/table').then(function (data) {
this.breadcrumbs(name, data.body)
})
})
}
},
created () {
this.load(this.$route.params.letter)
}
}
</script>