encrypt/gancio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactoring MediaInput

Browse Source
This commit is contained in:
les
2021-07-19 12:15:28 +02:00
parent ab78181538
commit ee6adbd778
5 changed files with 39 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
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-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>