mirror of
https://framagit.org/les/gancio.git
synced 2025-01-31 16:42:22 +01:00
refactoring MediaInput
This commit is contained in:
les
parent
ab78181538
commit
ee6adbd778
5 changed files with 39 additions and 22 deletions
|
|
@ -1,7 +1,7 @@
|
|||
<template lang="pug">
|
||||
v-card.h-event.event.d-flex
|
||||
nuxt-link(:to='`/event/${event.slug || event.id}`')
|
||||
v-img.u-featured.img(v-if='event.media' :src='thumbnail' :position='thumbnailPosition' :alt='event.media.length ? event.media[0].name : ""')
|
||||
v-img.u-featured.img(v-if='event.media' aspect-ratio='1.7778' :src='thumbnail' :position='thumbnailPosition' :alt='event.media.length ? event.media[0].name : ""')
|
||||
v-icon.float-right.mr-1(v-if='event.parentId' color='success') mdi-repeat
|
||||
.title.p-name {{event.title}}
|
||||
|
||||
|
|
|
|||
|
|
@ -159,7 +159,10 @@
|
|||
"import_ICS": "Importa da ICS",
|
||||
"import_URL": "Importa da URL (ics o h-event)",
|
||||
"ics": "ICS",
|
||||
"import_description": "Puoi importare eventi da altre piattaforme e da altre istanze attraverso i formati standard (ics e h-event)"
|
||||
"import_description": "Puoi importare eventi da altre piattaforme e da altre istanze attraverso i formati standard (ics e h-event)",
|
||||
"alt_text_description": "Descrizione per utenti con disabilità visive",
|
||||
"choose_focal_point": "Scegli il punto centrale cliccando",
|
||||
"remove_media_confirmation": "Confermi l'eliminazione dell'immagine?"
|
||||
},
|
||||
"admin": {
|
||||
"place_description": "Nel caso in cui un luogo sia errato o cambi indirizzo, puoi modificarlo.<br/>Considera che tutti gli eventi associati a questo luogo cambieranno indirizzo (anche quelli passati).",
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
v-card-text
|
||||
v-row
|
||||
v-col(:span='4' :cols='4')
|
||||
p Scegli il punto centrale cliccando
|
||||
p {{$t('event.choose_focal_point')}}
|
||||
v-img(v-if='mediaPreview'
|
||||
:src='mediaPreview'
|
||||
aspect-ratio='1.7778'
|
||||
|
|
@ -17,23 +17,25 @@
|
|||
persistent-hint
|
||||
@input='v => name=v'
|
||||
:value='value.name' filled
|
||||
hint='Descrizione per utenti con disabilita visive')
|
||||
:hint='$t("event.alt_text_description")')
|
||||
br
|
||||
v-card-actions.justify-space-between
|
||||
v-btn(@click='openMediaDetails=false' color='warning') Cancel
|
||||
v-btn(color='primary' @click='save') Save
|
||||
v-btn(text @click='openMediaDetails=false' color='warning') Cancel
|
||||
v-btn(text color='primary' @click='save') Save
|
||||
|
||||
v-col(:span='8' :cols='8')
|
||||
v-img(
|
||||
v-img.cursorPointer(
|
||||
v-if='mediaPreview' :src='mediaPreview'
|
||||
@click='selectFocal'
|
||||
max-width='88%')
|
||||
@click='selectFocal')
|
||||
|
||||
h3.mb-3.font-weight-regular(v-if='mediaPreview') {{$t('common.media')}}
|
||||
v-img.col-12.col-sm-2.ml-3(v-if='mediaPreview' :src='mediaPreview' aspect-ratio='1.7778' :position='position')
|
||||
v-btn-toggle
|
||||
v-btn(text color='primary' @click='openMediaDetails = true') {{$t('common.edit')}}
|
||||
v-btn(text color='primary' @click='remove') {{$t('common.remove')}}
|
||||
p {{event.media[0].name}}
|
||||
v-card-actions(v-if='mediaPreview')
|
||||
v-spacer
|
||||
v-btn(text color='primary' @click='openMediaDetails = true') {{$t('common.edit')}}
|
||||
v-btn(text color='error' @click='remove') {{$t('common.remove')}}
|
||||
div(v-if='mediaPreview')
|
||||
v-img.col-12.col-sm-2.ml-3(:src='mediaPreview' aspect-ratio='1.7778' :position='`${(this.value.focalpoint[0] + 1) * 50}% ${(this.value.focalpoint[1] + 1) * 50}%`')
|
||||
span.float-right {{event.media[0].name}}
|
||||
v-file-input(
|
||||
v-else
|
||||
:label="$t('common.media')"
|
||||
|
|
@ -52,7 +54,6 @@ export default {
|
|||
event: { type: Object, default: () => {} }
|
||||
},
|
||||
data () {
|
||||
console.error(this.value)
|
||||
return {
|
||||
openMediaDetails: false,
|
||||
name: this.value.name || '',
|
||||
|
|
@ -64,7 +65,7 @@ export default {
|
|||
if (!this.value.url && !this.value.image) {
|
||||
return false
|
||||
}
|
||||
const url = this.value.image ? URL.createObjectURL(this.value.image) : `/media/thumb/${this.value.url}`
|
||||
const url = this.value.image ? URL.createObjectURL(this.value.image) : /^https?:\/\//.test(this.value.url) ? this.value.url : `/media/thumb/${this.value.url}`
|
||||
return url
|
||||
},
|
||||
position () {
|
||||
|
|
@ -73,18 +74,24 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
save () {
|
||||
this.$emit('input', { url: this.value.url, image: this.value.image, name: this.name, focalpoint: this.focalpoint })
|
||||
this.$emit('input', { url: this.value.url, image: this.value.image, name: this.name || '', focalpoint: [...this.focalpoint] })
|
||||
this.openMediaDetails = false
|
||||
},
|
||||
remove () {
|
||||
async remove () {
|
||||
const ret = await this.$root.$confirm('event.remove_media_confirmation')
|
||||
if (!ret) { return }
|
||||
this.$emit('remove')
|
||||
},
|
||||
selectFocal (ev) {
|
||||
const boundingClientRect = ev.target.getBoundingClientRect()
|
||||
|
||||
// get relative coordinate
|
||||
const x = Math.ceil(ev.clientX - boundingClientRect.left)
|
||||
const y = Math.ceil(ev.clientY - boundingClientRect.top)
|
||||
let x = Math.ceil(ev.clientX - boundingClientRect.left)
|
||||
let y = Math.ceil(ev.clientY - boundingClientRect.top)
|
||||
|
||||
// snap to border
|
||||
x = x < 20 ? 0 : x > boundingClientRect.width - 20 ? boundingClientRect.width : x
|
||||
y = y < 20 ? 0 : y > boundingClientRect.height - 20 ? boundingClientRect.height : y
|
||||
|
||||
// map to real image coordinate
|
||||
const posY = -1 + (y / boundingClientRect.height) * 2
|
||||
|
|
@ -95,3 +102,9 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.cursorPointer {
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -132,6 +132,7 @@ module.exports = {
|
|||
}
|
||||
const events = data.items.map(e => {
|
||||
const props = e.properties
|
||||
const media = get(props, 'featured[0]')
|
||||
return {
|
||||
title: get(props, 'name[0]', ''),
|
||||
description: get(props, 'description[0]', ''),
|
||||
|
|
@ -142,7 +143,7 @@ module.exports = {
|
|||
start_datetime: dayjs(get(props, 'start[0]', '')).unix(),
|
||||
end_datetime: dayjs(get(props, 'end[0]', '')).unix(),
|
||||
tags: get(props, 'category', []),
|
||||
media: { url: get(props, 'featured[0]') }
|
||||
media: media ? [{ name: get(props, 'name[0]', ''), url: get(props, 'featured[0]'), focalpoint: [0, 0] }] : []
|
||||
}
|
||||
})
|
||||
return res.json(events)
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ rss(version='2.0' xmlns:atom="http://www.w3.org/2005/Atom")
|
|||
| <h4>#{event.title}</h4>
|
||||
| <strong>#{event.place.name} - #{event.place.address}</strong>
|
||||
| <small>(#{moment.unix(event.start_datetime).format("dddd, D MMMM HH:mm")})</small><br/>
|
||||
if (event.media)
|
||||
if (event.media && event.media.length)
|
||||
| <img alt="#{event.media[0].name}" src="#{settings.baseurl}/media/#{event.media[0].url}"/>
|
||||
| <pre>!{event.description}</pre>
|
||||
| ]]>
|
||||
|
|
|
|||
Loading…
Reference in a new issue