123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276 |
- <template>
- <div class="text-wrapper">
- <EdTextRefLink :uuid="uuid" :url="url" />
- <div
- class="tei"
- :class="{ active: uuid === textid }"
- :data-uuid="uuid"
- v-html="teiparsed"
- />
- </div>
- </template>
- <script>
- // import Vue from 'vue'
- import EdTextRefLink from './EdTextRefLink'
- export default {
- name: 'EdText',
- components: {
- EdTextRefLink
- },
- props: {
- tei: String,
- uuid: String,
- textid: String,
- extractid: String,
- url: String
- },
- data: () => ({
- template: null,
- html: null,
- pages: [],
- teiparsed: null
- }),
- watch: {
- tei: function (newtei, oldtei) {
- // console.log('tei watcher', oldtei, newtei)
- // we need this watcher to update display as route is changing
- // this.buildTemplate()
- this.parseTei()
- }
- },
- beforeMount () {
- // console.log('EdText beforeMount', this.tei)
- if (this.tei) {
- // this.buildTemplate()
- this.parseTei()
- }
- },
- // mounted () {
- // this.$emit('onNewPageBreaks', this.pages)
- // },
- methods: {
- // buildTemplate () {
- // // console.log('EdText buildTemplate: tei', this.tei)
- // // to get Vue.compile working we have to use the full build of vuejs
- // // https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds
- // // in /build/webpack.config.base.js alias -> 'vue': 'vue/dist/vue.js',
- // this.buildHtml()
- // this.template = Vue.compile(this.html)
- // this.$options.staticRenderFns = []
- // this._staticTrees = []
- // this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)))
- // },
- // buildHtml () {
- // this.html = `<div` +
- // ` class="tei${this.uuid === this.textid ? ' active' : ''}"` +
- // ` data-uuid="${this.uuid}"` +
- // `>` +
- // `<a` +
- // ` href="http://${window.apipath}/items/${this.uuid}"` +
- // ` title="Copy to clipboard ${this.uuid}"` +
- // ` class="text-item-link"` +
- // ` @click.prevent="onClickCopyClipboard"` +
- // `>` +
- // `<span class="mdi mdi-open-in-new" />` +
- // `</a>` +
- // `${this.tei}</div>`
- // this.parseLinks()
- // this.parseFigures()
- // // this.parsePageBreaks()
- // // console.log('EdText: builded html', this.html)
- // },
- parseTei () {
- this.teiparsed = this.tei
- this.parseIndexItems()
- this.parseLinks()
- this.parseFigures()
- if (this.textid === this.uuid) {
- this.parseExtract()
- }
- },
- parseIndexItems () {
- let items = this.teiparsed.match(/<span[^>]*class="(persName|objectName|placeName)"[^>]*>[^<]+<\/span>/g)
- console.log('items', items)
- if (items) {
- let itemparts, icon, newspan
- for (var i = 0; i < items.length; i++) {
- itemparts = RegExp(/(<span[^>]*class="([^"]+)"[^>]*>)(.+)<\/span>/g).exec(items[i], 'g')
- // console.log('itemparts', itemparts)
- switch (itemparts[2]) {
- case 'placeName':
- icon = '<span class="index-item-icon mdi mdi-map-marker"></span>'
- break
- case 'objectName':
- icon = '<span class="index-item-icon mdi mdi-card-bulleted"></span>'
- break
- case 'persName':
- icon = '<span class="index-item-icon mdi mdi-account"></span>'
- break
- }
- // newspan = `${items[i]} ${icon}`
- // newspan = `<span class="no-wrap">${items[i]} ${icon}</span>`
- // newspan = `${itemparts[1]}${itemparts[3]}${' '}${icon}</span>`
- let words = itemparts[3].split(' ')
- let lastword = words.splice(words.length - 1, 1)
- newspan = `${itemparts[1]}${words.join(' ')} <span class="no-wrap">${lastword} ${icon}</span></span>`
- this.teiparsed = this.teiparsed.replace(items[i], newspan)
- }
- }
- },
- parseLinks () {
- let links = this.teiparsed.match(/<a[^<]+<\/a>/g)
- // console.log('links', links)
- if (links) {
- // let domparser = new DOMParser()
- // let domlink
- let linkparts, newlink, uuid
- let index = null
- for (var i = 0; i < links.length; i++) {
- // console.log(`link ${i}:`, links[i])
- linkparts = RegExp(/<a class="(.+)" href="(.+)" data-index="(.+)">(.+)<\/a>/g).exec(links[i], 'g')
- // console.log('linkparts', linkparts)
- if (!linkparts) {
- console.warn(`link ${i} malformed:`, links[i])
- } else {
- index = linkparts[3]
- uuid = linkparts[2].replace('#', '')
- newlink = `<a` +
- ` class="${linkparts[1]} active-link"` +
- ` data-index="${index}"` +
- ` data-uuid="${uuid}"` +
- ` href="/${index}/${uuid}"` +
- ` @click.prevent="onClickRef"` +
- ` @keyup.enter="onClickRef"` +
- ` @mouseover="onHoverLink"` +
- ` @mouseleave="onLeaveLink"` +
- // prevent click on this one
- ` v-touch:tap.prevent="onTapLink"` +
- ` v-touch-class="'tapped'"` +
- `>${linkparts[4]}` +
- // `<sup class="mdi mdi-message-text-outline" />` +
- `</a>`
- // console.log('newlink', newlink)
- this.teiparsed = this.teiparsed.replace(links[i], newlink)
- }
- }
- // console.log('this.html', this.html)
- }
- },
- parseFigures () {
- // console.log('parseFigures this.tei', this.teiparsed)
- let imgs = this.teiparsed.match(/<img[^>]*>/g)
- console.log('imgs', imgs)
- if (imgs) {
- let imgparts, newsrc, newimg
- for (var i = 0; i < imgs.length; i++) {
- // console.log(`link ${i}:`, links[i])
- imgparts = RegExp(/<img src="(.+)" alt="(.+)">/g).exec(imgs[i], 'g')
- console.log('imgparts', imgparts)
- if (!imgparts) {
- console.warn(`img ${i} malformed:`, imgs[i])
- } else {
- newsrc = `${imgparts[1]}/full/1000,/0/native.jpg`
- newimg = `<img` +
- ` src="${newsrc}"` +
- ` alt="${imgparts[2]}"` +
- `/>`
- // console.log('newlink', newlink)
- this.teiparsed = this.teiparsed.replace(imgs[i], newimg)
- }
- }
- }
- },
- parseExtract () {
- console.log('Parse extract', this.extractid)
- // let regexp = RegExp(this.extract, 'gim')
- let regexp = RegExp(`<span[^>]* id="${this.extractid}"[^>]*>[^<]*</span>`)
- // let regexp = RegExp(`<(\w+)((?:\s+\w+(?:\s*=\s*(?:"[\s\S]*?"|'[\s\S]*?'|[^'">\s]+))?)+\s*|\s*)>([\s\S]*?)<\/\1>`)
- let index = 0
- function marking (str) {
- index++
- return `<mark class="extract" id="mark-${index}">${str}</mark>`
- }
- this.teiparsed = this.teiparsed.replace(regexp, marking)
- },
- // parsePageBreaks () {
- // let pbs = this.html.match(/<span role="pageBreak"[^>]+><\/span>/g)
- // console.log('pagebreaks', pbs)
- // if (pbs) {
- // let pbparts, newpb, num
- // for (var i = 0; i < pbs.length; i++) {
- // pbparts = RegExp(/<span role="pageBreak" data-num="(.+)"><\/span>/).exec(pbs[i], 'g')
- // if (!pbparts) {
- // console.warn(`pageBreak ${i} maformed`, pbs[i])
- // } else {
- // // console.log('pbparts', pbparts)
- // num = pbparts[1]
- // this.pages.push(num)
- // newpb = `<span` +
- // // ` id="page-break-${num}"` +
- // ` role="pageBreak"` +
- // ` data-num="${num}"` +
- // ` data-num-prev="${num - 1}"` +
- // ` />`
- // // console.log('newpb', newpb)
- // this.html = this.html.replace(pbs[i], newpb)
- // }
- // }
- // }
- // },
- onClickRef (e) {
- console.log('onClickRef(e)', e)
- if (e.target.classList.contains('tapped')) {
- this.$router.push({
- name: e.target.dataset.index,
- params: { id: e.target.dataset.uuid }
- })
- }
- },
- onHoverLink (e) {
- console.log('EdText onHoverLink(e)', e)
- this.$emit('onHoverLink', {
- uuid: e.target.dataset.uuid,
- index: e.target.dataset.index,
- rect: e.target.getBoundingClientRect()
- })
- },
- onTapLink (e) {
- console.log('EdText onTapLink(e)', e)
- this.$emit('onHoverLink', {
- uuid: e.target.dataset.uuid,
- index: e.target.dataset.index,
- rect: e.target.getBoundingClientRect()
- })
- },
- onLeaveLink (e) {
- // console.log('EdText onLeaveLink(e)', e)
- this.$emit('onLeaveLink')
- }
- // ,
- // onClickCopyClipboard (e) {
- // e.preventDefault()
- // console.log('onClickCopyClipboard', e)
- // // navigator.clipboard.writeText(e.target.getAttribute('href'))
- // this.$copyText(e.target.getAttribute('href'))
- // return false
- // }
- }
- // render (h) {
- // // console.log('EdText render()')
- // if (!this.template) {
- // return h('span', 'Chargement ...')
- // } else {
- // return this.template.render.call(this)
- // }
- // }
- }
- </script>
- <style lang="scss" scoped>
- </style>
|