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

hasMedia / mediaPreview webp

Browse Source
This commit is contained in:
lesion
2022-04-28 23:28:54 +02:00
parent ccdb501979
commit 6d03d7828c
1 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
pages/add/MediaInput.vue
View File

@@ -11,12 +11,15 @@
@mouseup='handleStop' @touchend='handleStop' @mouseup='handleStop' @touchend='handleStop'
) )
div.focalPoint(:style="{ top, left }") div.focalPoint(:style="{ top, left }")
img(v-if='mediaPreview' :src='mediaPreview') picture(v-if='hasMedia')
source(:srcset='mediaPreview("webp")')
img(:src='mediaPreview("jpg")')
v-col.col-12.col-sm-4 v-col.col-12.col-sm-4
p {{$t('event.choose_focal_point')}} p {{$t('event.choose_focal_point')}}
img.mediaPreview.d-none.d-sm-block(v-if='mediaPreview' picture(v-if='hasMedia')
:src='mediaPreview' :style="{ 'object-position': position }") source(:srcset='mediaPreview("webp")')
img.mediaPreview.d-none.d-sm-block(:src='mediaPreview("jpg")' :style="{ 'object-position': position }")
v-textarea.mt-4(type='text' v-textarea.mt-4(type='text'
label='Alternative text' label='Alternative text'
@@ -29,12 +32,12 @@
v-btn(text @click='openMediaDetails=false' color='warning') Cancel v-btn(text @click='openMediaDetails=false' color='warning') Cancel
v-btn(text color='primary' @click='save') Save v-btn(text color='primary' @click='save') Save
h3.mb-3.font-weight-regular(v-if='mediaPreview') {{$t('common.media')}} h3.mb-3.font-weight-regular(v-if='hasMedia') {{$t('common.media')}}
v-card-actions(v-if='mediaPreview') v-card-actions(v-if='hasMedia')
v-spacer v-spacer
v-btn(text color='primary' @click='openMediaDetails = true') {{$t('common.edit')}} v-btn(text color='primary' @click='openMediaDetails = true') {{$t('common.edit')}}
v-btn(text color='error' @click='remove') {{$t('common.remove')}} v-btn(text color='error' @click='remove') {{$t('common.remove')}}
div.col-12.ml-3(v-if='mediaPreview') div.col-12.ml-3(v-if='hasMedia')
picture picture
source(:srcset='mediaPreview("webp")') source(:srcset='mediaPreview("webp")')
img.mediaPreview(:src='mediaPreview("jpg")' :style="{ 'object-position': savedPosition }") img.mediaPreview(:src='mediaPreview("jpg")' :style="{ 'object-position': savedPosition }")
@@ -67,6 +70,9 @@ export default {
} }
}, },
computed: { computed: {
hasMedia () {
return (this.value.url || this.value.image)
},
top () { top () {
return ((this.focalpoint[1] + 1) * 50) + '%' return ((this.focalpoint[1] + 1) * 50) + '%'
}, },