307 lines
8.7 KiB
Vue
307 lines
8.7 KiB
Vue
<template>
|
|
<main class="public_basket" v-on:click.prevent="unselectAllMedia($event)">
|
|
<div class="main_content">
|
|
<header>
|
|
<div class="basket_title">
|
|
{{ basket.libelle }}
|
|
</div>
|
|
<div class="basket_Info">
|
|
<button
|
|
ref="basket_select_all"
|
|
v-on:click.prevent="selectAllMedia"
|
|
class="btn_basket_select_all"
|
|
title="Selectionner tous les médias"
|
|
>
|
|
<font-awesome-icon icon="check-circle" />
|
|
</button>
|
|
<button
|
|
ref="btn_basket_download"
|
|
v-on:click.prevent="showDownloadMediaList"
|
|
class="btn_standAloneBasket btn_basket_download"
|
|
title="Téléchargez des médias"
|
|
>
|
|
<font-awesome-icon icon="arrow-circle-down" />
|
|
</button>
|
|
<button
|
|
ref="btn_basket_Info"
|
|
v-on:click.prevent="showBasketInfo"
|
|
class="btn_standAloneBasket btn_basket_Info"
|
|
title="Informations sur ce panier"
|
|
>
|
|
<font-awesome-icon icon="info-circle" />
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<div class="media_container">
|
|
<div class="wrapper">
|
|
<div
|
|
v-for="media in basket.media_list"
|
|
class="imageItem"
|
|
draggable="false"
|
|
:aria-grabbed="media.grabbed"
|
|
v-on:click.prevent="selectedMedia(media)"
|
|
v-on:dbclick.prevent="displayImage(media)"
|
|
:data-id="media.id"
|
|
:data-ext="media.extension.value"
|
|
:data-typemedia="media.type_media_id"
|
|
>
|
|
<div
|
|
v-if="media.type_media_id === 1 || media.type_media_id === 5"
|
|
:class="`media ${
|
|
media.type_media_id === 3
|
|
? 'video'
|
|
: media.type_media_id === 4
|
|
? 'son'
|
|
: ''
|
|
}`"
|
|
:style="`background-image:url('${media.thumb_url}')`"
|
|
></div>
|
|
<div
|
|
v-if="media.type_media_id === 2"
|
|
class="media"
|
|
:style="`background-image:url('${media.url}')`"
|
|
></div>
|
|
<div v-if="media.type_media_id === 3" class="media video">
|
|
<font-awesome-icon icon="file-video" />
|
|
</div>
|
|
<div v-if="media.type_media_id === 4" class="media son">
|
|
<font-awesome-icon icon="file-audio" />
|
|
</div>
|
|
|
|
<p class="libelle">{{ media.libelle }}</p>
|
|
<div class="info">
|
|
<font-awesome-icon
|
|
v-if="
|
|
media.type_media_id === 1 ||
|
|
media.type_media_id === 2 ||
|
|
media.type_media_id === 5
|
|
"
|
|
icon="file-image"
|
|
/>
|
|
<font-awesome-icon v-if="media.type_media_id === 3" icon="file-video" />
|
|
<font-awesome-icon v-if="media.type_media_id === 4" icon="file-audio" />
|
|
<span>{{
|
|
`${media.extension} - ${media.taille} - ${
|
|
media.type_media_id === 1
|
|
? `${media.largeur}x${media.hauteur}px`
|
|
: media.type_media_id === 3 || media.type_media_id === 4
|
|
? `durée ${media.duree}`
|
|
: ""
|
|
} - v${media.version}`
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div ref="form_download" style="display: none" data-id="">
|
|
<h3>Téléchargez</h3>
|
|
<hr />
|
|
<p>Sélectionnez l'un des formats ci-dessous pour télécharger votre sélection.</p>
|
|
<form
|
|
ref="downloadMedias"
|
|
id="the_form_download"
|
|
target="_blank"
|
|
:action="`/ajax/download-media-public${
|
|
selectedFormat ? '/' + selectedFormat : ''
|
|
}`"
|
|
method="POST"
|
|
>
|
|
<select class="download_format" v-model="selectedFormat">
|
|
<option :value="null">Format original</option>
|
|
<option v-for="item in formats" :value="item.id">
|
|
{{ item.libelle }} {{ item.largeur }}x{{ item.hauteur }}px
|
|
{{ item.extension }}
|
|
</option>
|
|
</select>
|
|
<input type="hidden" name="_token" :value="csrf" />
|
|
<input
|
|
type="hidden"
|
|
name="mediaList[]"
|
|
v-for="media of basket.media_list"
|
|
v-if="media.grabbed"
|
|
:value="media.id"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
class="btn btn_form_download ml-10"
|
|
@click="performDownload"
|
|
>
|
|
<font-awesome-icon icon="arrow-circle-down" />
|
|
<span> Télécharger</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div
|
|
ref="form_basket_property"
|
|
id="form_basket_property"
|
|
style="display: none"
|
|
data-id=""
|
|
>
|
|
<h3>Informations sur ce panier</h3>
|
|
<hr />
|
|
<p>Libellé : {{ basket.libelle }}</p>
|
|
<p>Description :</p>
|
|
<p>{{ basket.description }}</p>
|
|
<p>
|
|
Créé le :
|
|
{{
|
|
new Date(basket.created_at).toLocaleDateString("fr-FR", {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
})
|
|
}}
|
|
</p>
|
|
<hr />
|
|
<p class="button_bar">
|
|
<button data-fancybox-close="" class="btn close_popup btn-black btn-square">
|
|
<span>Fermer</span>
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<script>
|
|
import Resumable from "resumablejs";
|
|
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
|
|
|
export default {
|
|
name: "StandAlonePanierComponent",
|
|
components: { FontAwesomeIcon },
|
|
mounted() {
|
|
const data = JSON.parse(this.$parent.$options.json);
|
|
this.basket = data.basket;
|
|
this.formats = data.formats;
|
|
this.csrf = data.csrf;
|
|
|
|
for (let media of this.basket.media_list) {
|
|
media.grabbed = false;
|
|
}
|
|
},
|
|
computed: {},
|
|
data() {
|
|
return {
|
|
csrf: "",
|
|
basket: {},
|
|
formats: [],
|
|
selectedFormat: null,
|
|
};
|
|
},
|
|
watch: {},
|
|
methods: {
|
|
displayImage(media) {
|
|
switch (media.type_media_id) {
|
|
case 1:
|
|
case 2:
|
|
case 5:
|
|
$.fancybox.open(
|
|
`<img style="width: 640px; height:auto;" src="${media.preview_url}" alt="" />`
|
|
);
|
|
break;
|
|
case 3:
|
|
$.fancybox.open(`<video src="${media.url}" controls></video>`);
|
|
break;
|
|
}
|
|
|
|
// * Image
|
|
if (
|
|
media.type_media_id == 1 ||
|
|
media.type_media_id == 2 ||
|
|
media.type_media_id == 5
|
|
) {
|
|
} else if (media.type_media_id == 3) {
|
|
// vidéo
|
|
$.fancybox.open(
|
|
'<video src="' + $(this).attr("data-src") + '" controls></video>'
|
|
);
|
|
} else if ($(this).attr("data-typemedia") == 4) {
|
|
// Audio
|
|
$.fancybox.open(
|
|
'<audio controls src="' + $(this).attr("data-src") + '"></audio>'
|
|
);
|
|
}
|
|
},
|
|
selectedMedia(media) {
|
|
media.grabbed = !media.grabbed;
|
|
this.$forceUpdate();
|
|
},
|
|
selectAllMedia() {
|
|
for (let media of this.basket.media_list) {
|
|
media.grabbed = true;
|
|
}
|
|
this.$forceUpdate();
|
|
},
|
|
unselectAllMedia(e) {
|
|
if (
|
|
this.$refs.downloadMedias.contains(e.target) ||
|
|
this.$refs.form_basket_property.contains(e.target) ||
|
|
this.$refs.basket_select_all.contains(e.target) ||
|
|
this.$refs.btn_basket_download.contains(e.target) ||
|
|
this.$refs.btn_basket_Info.contains(e.target) ||
|
|
e.target.closest(".imageItem")
|
|
) {
|
|
return;
|
|
}
|
|
for (let media of this.basket.media_list) {
|
|
media.grabbed = false;
|
|
}
|
|
this.$forceUpdate();
|
|
},
|
|
showBasketInfo() {
|
|
$.fancybox.open({
|
|
src: "#form_basket_property",
|
|
type: "inline",
|
|
opts: {
|
|
animationDuration: 350,
|
|
animationEffect: "material",
|
|
},
|
|
});
|
|
},
|
|
showDownloadMediaList() {
|
|
const mediaList = this.basket.media_list.filter((media) => {
|
|
return media.grabbed;
|
|
});
|
|
|
|
if (mediaList.length == 0) {
|
|
$.fancyMessage({
|
|
title: "Télécharger des médias",
|
|
message: "Veuillez sélectionner au moins un média.",
|
|
type: "info",
|
|
});
|
|
return;
|
|
}
|
|
|
|
$(this.$refs.form_download)
|
|
.fancybox({
|
|
type: "inline",
|
|
opts: {
|
|
animationDuration: 350,
|
|
animationEffect: "material",
|
|
},
|
|
})
|
|
.trigger("click");
|
|
},
|
|
performDownload() {
|
|
this.$refs.downloadMedias.submit();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "./../../scss/classes";
|
|
.btn_basket_select_all,
|
|
.btn_basket_download,
|
|
.btn_basket_Info {
|
|
@include resetButton;
|
|
cursor: pointer;
|
|
transition: all 0.5s;
|
|
color: rgb(255, 255, 255, 0.7);
|
|
&:hover {
|
|
color: rgb(255, 255, 255, 0.9);
|
|
}
|
|
}
|
|
</style>
|