NoLog.cz/gancio-upstream
6
0
Fork 0
mirror of https://framagit.org/les/gancio.git synced 2025-01-31 16:42:22 +01:00
Code Issues Projects Releases Packages Wiki Activity

refactoring MediaInput

Browse source
This commit is contained in:
les 2021-07-19 12:15:28 +02:00
parent ab78181538
commit ee6adbd778
No known key found for this signature in database
GPG key ID: 352918250B012177
5 changed files with 39 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/Event.vue
View file

@ -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}}

5
locales/it.json
View file

@ -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).",

47
pages/add/MediaInput.vue
View file

@ -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-card-actions(v-if='mediaPreview')
v-spacer
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-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>

3
server/helpers.js
View file

@ -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)

2
views/feed/rss.pug
View file

@ -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>
| ]]>