70 lines
2.0 KiB
Vue
70 lines
2.0 KiB
Vue
<script>
|
|
import spotIcon from './spotIcon.vue';
|
|
import projectRelTime from './projectRelTime.vue';
|
|
|
|
export default {
|
|
components: {
|
|
spotIcon,
|
|
projectRelTime
|
|
},
|
|
props: {
|
|
options: Object,
|
|
type: String
|
|
},
|
|
emits: ['opening-lightbox'],
|
|
data() {
|
|
return {
|
|
title:''
|
|
}
|
|
},
|
|
inject: ['lang'],
|
|
mounted() {
|
|
this.title =
|
|
(this.$refs.comment?this.$refs.comment.outerHTML:'') +
|
|
this.$refs[this.type=='marker'?'takenon':'postedon'].outerHTML +
|
|
this.$refs[this.type=='marker'?'postedon':'takenon'].outerHTML
|
|
;
|
|
},
|
|
methods: {
|
|
openMedia() {
|
|
this.$refs.link.click();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<a
|
|
class="media-link drill"
|
|
:href="options.media_path"
|
|
:data-lightbox="type+'-medias'"
|
|
:data-type="options.subtype"
|
|
:data-id="options.id_media"
|
|
:data-title="title"
|
|
:data-orientation="options.rotate"
|
|
@click="$emit('opening-lightbox', $event)"
|
|
ref="link"
|
|
>
|
|
<img
|
|
:src="options.thumb_path"
|
|
:width="options.width"
|
|
:height="options.height"
|
|
:title="lang.get((options.subtype == 'video')?'media.click_watch':'media.click_zoom')"
|
|
class="clickable"
|
|
/>
|
|
<span class="drill-icon"><spotIcon :icon="'drill-'+options.subtype" /></span>
|
|
<span v-if="options.comment && type == 'post'" class="comment">{{ options.comment }}</span>
|
|
</a>
|
|
<div style="display:none">
|
|
<span v-if="options.comment" ref="comment" class="lb-caption-line comment desktop">
|
|
<spotIcon :icon="'post'" width="fixed" size="lg" :text-classes="'comment-text'" :text="options.comment" />
|
|
</span>
|
|
<span ref="postedon" class="lb-caption-line">
|
|
<projectRelTime :icon="'upload'" :localTime="options.posted_on_formatted_time_local" :siteTime="options.posted_on_formatted_time" :offset="options.posted_on_day_offset" />
|
|
</span>
|
|
<span ref="takenon" class="lb-caption-line">
|
|
<projectRelTime :icon="options.subtype+'-shot'" :localTime="options.taken_on_formatted_time_local" :siteTime="options.taken_on_formatted_time" :offset="options.taken_on_day_offset" />
|
|
</span>
|
|
</div>
|
|
</template>
|