forge-joniko/ldc-dam
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

front : suite popup édition de média 2

Browse source
This commit is contained in:
Yann Gonidec 2019-06-25 16:17:56 +02:00
parent ab44a4fa71
commit 97c7f54281
16 changed files with 884 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
app/Http/Controllers/MediaController.php
View file

@ -4,12 +4,15 @@ namespace App\Http\Controllers;
use Illuminate\Support\Facades\Auth;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
use App\Sujet;
use App\Media;
use App\Typemedia;
use App\Langue;
use App\Copyright;
use App\Etiquette;
use App\Site;
use App\Marque;
class MediaController extends Controller
{
@ -27,12 +30,16 @@ class MediaController extends Controller
$langues = Langue::all();
$copyrights = Copyright::all();
$etiquettes = Etiquette::all();
$sites = Site::all();
$marques = Marque::all();
return view('media_manager')->with([
'sujets'=> $sujets,
'typemedias'=> $typemedias,
'langues'=> $langues,
'copyrights'=> $copyrights,
'etiquettes'=> $etiquettes,
'sites'=> $sites,
'marques'=> $marques,
]);
}
@ -47,11 +54,13 @@ class MediaController extends Controller
$sujet_id = $request->input('sujet_id');
$offset = $request->input('offset');
$limit = $request->input('limit');
$orderField = $request->input('orderField');
$order = $request->input('order');
if($dossier_id == "0"){
$response['data'] = Media::where('sujet_id', $sujet_id)->whereNull('dossier_id')->with('Etiquette')->offset($offset)->limit($limit)->orderBy('created_at', 'desc')->get();
$response['data'] = Media::where('sujet_id', $sujet_id)->whereNull('dossier_id')->with('Etiquette')->offset($offset)->limit($limit)->orderBy($orderField, $order)->get();
}else{
$response['data'] = Media::where('sujet_id', $sujet_id)->where('dossier_id', $dossier_id)->with('Etiquette')->offset($offset)->limit($limit)->orderBy('created_at', 'desc')->get();
$response['data'] = Media::where('sujet_id', $sujet_id)->where('dossier_id', $dossier_id)->with('Etiquette')->offset($offset)->limit($limit)->orderBy($orderField, $order)->get();
}
if(Auth::user()->hasRole([config('roles.const.ADMIN'), config('roles.const.REDACTEUR')] )){
$response['draggable'] = true;
@ -110,11 +119,75 @@ class MediaController extends Controller
{
$response = array();
$media_id = $request->input('media_id');
$media = Media::where('id', $media_id)->with('Sujet')->first();
$media = Media::where('id', $media_id)->with('sujet')->with('sites')->with('marques')->with('tags:libelle')->first();
if($media){
$response['data'] = $media;
foreach ($media->tags as $tag) {
$response['tags'][] = $tag->libelle;
}
}
return json_encode($response);
}
/**
* Sauvegarde toutes les informations d'un média
*
*/
public function saveMedia(Request $request)
{
Auth::user()->authorizeRoles([config('roles.const.ADMIN'), config('roles.const.REDACTEUR'), config('roles.const.CONTRIBUTEUR')]);
$response = array();
return json_encode($response);
}
/**
* Sauvegarde toutes les informations d'un média
*
*/
public function applySticker(Request $request)
{
Auth::user()->authorizeRoles([config('roles.const.ADMIN'), config('roles.const.REDACTEUR'), config('roles.const.CONTRIBUTEUR')]);
$response = array();
$medias = $request->input('medias');
$etiquette_id = $request->input('etiquette_id');
$etiquette = Etiquette::where('etiquette_id', $etiquette_id)->first();
$response = $etiquette;
if($etiquette){
foreach ($medias as $media_id) {
$media = Media::where('id', $media_id)->first();
if($media){
$media->etiquette_id = $etiquette_id;
$media->save();
}
}
}
return json_encode($response);
}
/**
* Sauvegarde une retouche photo
*
*/
public function editPhoto(Request $request)
{
Auth::user()->authorizeRoles([config('roles.const.ADMIN'), config('roles.const.REDACTEUR'), config('roles.const.CONTRIBUTEUR')]);
$response = array();
$media_id = $request->input('media_id');
$image = $request->input('image');
preg_match("/data:image\/(.*?);/",$image,$image_extension); // extract the image extension
$image = preg_replace('/data:image\/(.*?);base64,/','',$image); // remove the type part
$image = str_replace(' ', '+', $image);
$media = Media::where('id', $media_id)->first();
if($media){
Storage::put($media->source, base64_decode($image));
$response = $media;
}
return json_encode($response);
}
}

8
app/Marque.php
View file

@ -30,4 +30,12 @@ class Marque extends Model
return $this->belongsToMany('App\Dossier', 'marques_dossier', 'marque_id', 'dossier_id');
}
/**
* The medias that belong to the marques.
*/
public function medias()
{
return $this->belongsToMany('App\Media', 'medias_marques', 'marque_id', 'media_id');
}
}

24
app/Media.php
View file

@ -65,4 +65,28 @@ class Media extends Model
{
return $this->belongsTo('App\Etiquette', 'etiquette_id');
}
/**
* The tag that belong to the media.
*/
public function tags()
{
return $this->belongsToMany('App\Tag', 'medias_tags', 'media_id', 'tag_id');
}
/**
* The sites that belong to the media.
*/
public function sites()
{
return $this->belongsToMany('App\Site', 'medias_sites', 'media_id', 'site_id');
}
/**
* The marques that belong to the media.
*/
public function marques()
{
return $this->belongsToMany('App\Marque', 'medias_marques', 'media_id', 'marque_id');
}
}

18
app/Site.php Normal file
View file

@ -0,0 +1,18 @@
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Site extends Model
{
/**
* The medias that belong to the sites.
*/
public function medias()
{
return $this->belongsToMany('App\Media', 'medias_sites', 'site_id', 'media_id');
}
}

17
app/Tag.php Normal file
View file

@ -0,0 +1,17 @@
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Tag extends Model
{
/**
* The media that belong to the tags.
*/
public function medias()
{
return $this->belongsToMany('App\Media', 'medias_tags', 'tag_id', 'media_id');
}
}

142
public/css/app.css vendored
View file

@ -123,6 +123,7 @@ body {
color: #aaaaaa;
background-size: 6.1px 5.3px;
height: 100%;
overflow: hidden;
}
ol,
@ -12959,6 +12960,52 @@ readers do not read off random characters that represent icons */
display: none;
}
#form_etiquette {
padding: 30px;
min-width: 340px;
}
#form_etiquette h3 {
font-size: 14px;
margin-bottom: 12px;
font-weight: bold;
color: #ffffff;
}
#form_etiquette hr {
color: #24272e;
border-bottom: 1px solid #2c2f36;
margin-bottom: 20px;
}
#form_etiquette li {
margin-bottom: 5px;
}
#form_etiquette li:hover {
background-color: #2D3139;
}
#form_etiquette li .etiquette {
position: relative;
color: #ffffff;
padding: 4px;
display: inline-block;
}
#form_etiquette li .etiquette::before {
border-color: inherit;
content: "";
top: 0;
border-style: solid;
border-width: 11px;
border-bottom-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
position: absolute;
right: -22px;
}
/******************************************
TEMPLATE
******************************************/
@ -13570,12 +13617,13 @@ table tfoot tr:hover {
.media_manager .main_content header .action_wrapper {
background-color: #3b3b3b;
width: 100%;
min-height: 45px;
height: 45px;
overflow: hidden;
}
.media_manager .main_content header .action_wrapper a {
font-size: 13px;
padding: 15px 17px;
padding: 15px 13px;
display: inline-block;
border-right: 1px solid #505050;
float: left;
@ -13611,6 +13659,42 @@ table tfoot tr:hover {
background-color: #6cb2eb;
}
.media_manager .main_content header .action_wrapper .display {
float: right;
padding: 7px;
}
.media_manager .main_content header .action_wrapper .display i {
font-size: 17px;
color: #ffffff;
padding: 10px;
cursor: pointer;
transition: 0.3s ease-in-out;
}
.media_manager .main_content header .action_wrapper .display i:hover {
background-color: #FFAB57;
}
.media_manager .main_content header .action_wrapper .display i.selected {
background-color: #f6993f;
}
.media_manager .main_content header .action_wrapper .order {
float: right;
padding: 11px;
}
@media screen and (max-width: 1400px) {
.media_manager .main_content header .action_wrapper .order span {
display: none;
}
}
.media_manager .main_content header .action_wrapper .order select {
padding: 5px 0px;
}
.media_manager .main_content .scrollLoader {
position: absolute;
border-bottom: 0;
@ -13638,7 +13722,7 @@ table tfoot tr:hover {
overflow-y: auto;
overflow-x: hidden;
position: relative;
height: calc(100% - 174px);
height: calc(100% - 180px);
}
.media_manager .main_content .media_container .loader {
@ -13688,19 +13772,24 @@ table tfoot tr:hover {
display: none;
}
.media_manager .main_content .media_container .wrapper .imageItem .etiquette i {
position: absolute;
right: -10px;
.media_manager .main_content .media_container .wrapper .imageItem .etiquette::before {
border-color: inherit;
content: "";
top: 0;
font-size: 30px;
line-height: 17px;
border-style: solid;
border-width: 9px;
border-bottom-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
position: absolute;
right: -18px;
}
.media_manager .main_content .media_container .wrapper .imageItem .contextMenu {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
background-color: rgba(0, 0, 0, 0.9);
left: 0px;
top: 0px;
z-index: 2;
@ -13822,6 +13911,41 @@ table tfoot tr:hover {
background-color: #3b3b3b;
}
.media_manager .main_content .media_container .wrapper.inline {
flex-direction: column;
}
.media_manager .main_content .media_container .wrapper.inline .imageItem {
width: 96%;
padding: 4px 10px;
align-items: center;
display: flex;
}
.media_manager .main_content .media_container .wrapper.inline .imageItem .media {
height: 60px;
width: 60px;
display: inline-block;
}
.media_manager .main_content .media_container .wrapper.inline .imageItem .libelle {
display: inline-block;
min-width: 350px;
}
.media_manager .main_content .media_container .wrapper.inline .imageItem .info {
position: static;
display: inline-block;
color: white;
font-size: 13px;
}
.media_manager .main_content .media_container .wrapper.inline .imageItem .contextMenu ul {
display: flex;
justify-content: space-around;
width: 100%;
}
.media_manager [draggable] {
-webkit-user-select: none;
-moz-user-select: none;

249
public/js/app.js vendored
View file

@ -10810,7 +10810,7 @@ $(document).ready(function () {
initSelector(".selector_sujets");
}); // ---- Module de gestion de liste de données
function initSelector($selector) {
window.initSelector = function ($selector) {
var datavalue = []; // Init du module
$($selector + " .selector_values li").each(function () {
@ -10861,7 +10861,7 @@ function initSelector($selector) {
$($selector + " .selector_dataValues").val(datavalue.join());
});
} // --- Fct pour rechercher sur un attribut d'une ligne
}; // --- Fct pour rechercher sur un attribut d'une ligne
function tableSearch(field, attr, search) {
@ -11464,7 +11464,7 @@ $(document).ready(function () {
}
}); // ---- déselectionne les éléments si on clique en dehors
$(".main_content .wrapper").on("click", function (event) {
$(".main_content .media_container").on("click", function (event) {
if (event.target !== this) return;
$(".imageItem").attr("aria-grabbed", "false");
$(".imageItem").removeClass('flip');
@ -11493,7 +11493,26 @@ $(document).ready(function () {
} else if ($target.hasClass('deleteItem')) {
// supprimer le média
removeMedias([$(this).attr('data-id')]);
} else if ($target.hasClass('tagItem')) {// Appliquer une étiquette
} else if ($target.hasClass('tagItem')) {
// Appliquer une étiquette
var medias = [];
medias.push($(this).attr("data-id"));
$("#form_etiquette").fancybox({
type: 'inline',
opts: {
animationDuration: 350,
animationEffect: 'material'
},
beforeShow: function beforeShow() {
$('#form_etiquette .etiquette').removeClass('selected');
},
afterClose: function afterClose() {
if ($('#form_etiquette .etiquette.selected').length) {
var id = $('#form_etiquette .etiquette.selected').attr('data-id');
applyEtiquette(id, medias);
}
}
}).trigger("click");
}
return false;
@ -11552,6 +11571,31 @@ $(document).ready(function () {
var dossier_id = $(".currentFolder").val();
loadMedia(dossier_id, sujet_id);
}
}); // ---- Mode d'affichage
$(".action_wrapper .display i").on("click", function (event) {
if ($(this).hasClass('fa-th')) {
// mode mosaique
if (!$(this).hasClass('selected')) {
$(".action_wrapper .display .fa-list").removeClass('selected');
$(this).addClass('selected');
$(".media_container .wrapper").removeClass('inline');
}
} else {
// mode liste
if (!$(this).hasClass('selected')) {
$(".action_wrapper .display .fa-th").removeClass('selected');
$(this).addClass('selected');
$(".media_container .wrapper").addClass('inline');
}
}
}); // ---- Gestion de l'ordre d'affichage
$(".action_wrapper #order_select").on("change", function (event) {
var sujet_id = $("#sujet_selector").val();
var dossier_id = $(".currentFolder").val();
$(window).data('offset', 0);
loadMedia(dossier_id, sujet_id);
});
/******************************
Edition d'un média
@ -11563,10 +11607,12 @@ $(document).ready(function () {
$(".main_content .wrapper").on("dblclick", '.imageItem', function (event) {
event.preventDefault(); // initialise le nuage de Tags
$('#tag-editor').val('');
$('#tag-editor').tagEditor({
placeholder: 'Saissisez des tags',
removeDuplicates: false,
clickDelete: true
clickDelete: true,
initialTags: []
});
var minWidth = $(document).width();
var minHeight = $(document).height() - 43 - 40; // récupère l'image de preview
@ -11575,7 +11621,7 @@ $(document).ready(function () {
$(window).data('current_edit_media', $(this).attr('data-id')); // sélectionne la tab preview à l'ouverture
$("#form_media .form_media_preview").trigger("click");
$("#form_media .form_media_preview").trigger("click"); // initiliasation des aperçu et du mode retouche selon le type de média
if ($(this).attr('data-typemedia') == 1) {
// média image
@ -11605,14 +11651,40 @@ $(document).ready(function () {
plugins: {
save: {
callback: function callback() {
var newImage = this.darkroom.sourceCanvas.toDataURL();
viewer.destroy();
viewer = null;
viewer = OpenSeadragon({
id: "openseadragon",
tileSources: {
type: "image",
url: newImage
// récupère la nouvelle image
var newImage = this.darkroom.sourceCanvas.toDataURL(); // sauvegarde de l'image en base
$.ajax({
url: '/ajax/edit-photo',
method: 'POST',
dataType: 'json',
data: {
media_id: $(window).data('current_edit_media'),
image: newImage
},
success: function success(result) {
// MAJ de l'aperçu
viewer.destroy();
viewer = null;
viewer = OpenSeadragon({
id: "openseadragon",
tileSources: {
type: "image",
url: newImage
}
}); // MAJ du visuel dans la Liste
var mediaId = $(window).data('current_edit_media');
var $media = $(".media_container .imageItem[data-id='" + mediaId + "'] .media");
var mediaBg = $media.css('background-image', 'url(' + result.source + new Date().getTime() + ')');
},
error: function error(jqXHR, textStatus, errorThrown) {
$.fancybox.close();
$.fancyMessage({
title: "Attention",
message: "Erreur lors de la sauvegarde de l'image, merci d'actualiser la page.",
type: "error"
});
}
});
}
@ -11695,14 +11767,28 @@ $(document).ready(function () {
$(".tab_edit #typemedias").val(result.data.typemedia_id); //$(".tab_edit #variantes").val(result.data.etiquette_id);
$(".tab_edit #langues").val(result.data.langue_id);
$(".tab_edit #commentaire").val(result.data.commentaire); //$(".tab_edit #version").val(result.data.version);
$(".tab_edit #commentaire").val(result.data.commentaire);
$(".tab_edit #version").val(result.data.version);
$(".tab_edit #created_at").val(result.data.created_at);
$(".tab_edit #updated_at").val(result.data.updated_at);
$(".tab_edit #published_at").val(result.data.published_at); // liste des produits liés
// marque lié
// site lié
// tags $('#demo3').tagEditor('addTag', 'example');
$(".tab_edit .selector_marques .selector_values").html('');
$.each(result.data.marques, function (index, marque) {
$(".tab_edit .selector_marques .selector_values").append('<li data-value="' + marque.COD_MARQUE + '" >' + marque.LIBELLE + '</li>');
});
initSelector(".selector_marques"); // site lié
$(".tab_edit .selector_sites .selector_values").html('');
$.each(result.data.sites, function (index, site) {
$(".tab_edit .selector_sites .selector_values").append('<li data-value="' + site.id + '" >' + site.libelle + '</li>');
});
initSelector(".selector_sites"); // tags
if (result.tags) {
$('#tag-editor').tagEditor('addTag', result.tags);
}
$(".tab_edit #etiquettes").val(result.data.etiquette_id);
$(".tab_edit #extension").val(result.data.extension);
@ -11711,7 +11797,30 @@ $(document).ready(function () {
$(".tab_edit #hauteur").val(result.data.hauteur);
$(".tab_edit #resolution").val(result.data.resolution);
$(".tab_edit #largeur_mm").val(result.data.largeur_mm);
$(".tab_edit #hauteur_mm").val(result.data.hauteur_mm); // affiche la popin
$(".tab_edit #hauteur_mm").val(result.data.hauteur_mm); // Config de la fiche d'édition
var sujetId = $("#sujet_selector").val();
$(".tab_edit .article_form, .tab_edit .marque_form, .tab_edit .site_form").hide();
switch (sujetId) {
case '1':
// Visuel Article
$(".tab_edit .article_form").show();
break;
case '2':
// Marque
$(".tab_edit .marque_form").show();
break;
case '3':
// Sociétés
$(".tab_edit .site_form").show();
break;
default:
} // affiche la popin
$("#form_media").fadeIn('fast');
},
@ -11729,8 +11838,7 @@ $(document).ready(function () {
}
$('#tag-editor').tagEditor('destroy');
$('.ed_on').hide();
$('.ed_off').show(); // on détruit le plugin de tag
$('#tag-editor').val(''); // on détruit le plugin de tag
$.fancyMessage({
title: "Edition d'un média",
@ -11758,8 +11866,7 @@ $(document).ready(function () {
}
$('#tag-editor').tagEditor('destroy');
$('.ed_on').hide();
$('.ed_off').show(); // on détruit le plugin de tag
$('#tag-editor').val(''); // on détruit le plugin de tag
// ---- Stop la vidéo ou le son si présent
if ($(".tab_preview video").length) {
@ -11780,6 +11887,47 @@ $(document).ready(function () {
}
});
removeMedias(medias);
}); // ---- Popup pour Appliquer une étiquette à un média en masse
$('.action_tag_media').on('click', function (event) {
event.preventDefault();
var medias = [];
$('.media_container .imageItem').each(function (index) {
if ($(this).attr("aria-grabbed") == "true") {
medias.push($(this).attr("data-id"));
}
});
if (medias.length == 0) {
$.fancyMessage({
title: "Appliquer une étiquette",
message: "Veuillez sélectionner au moins un média.",
type: "info"
});
} else {
$("#form_etiquette").fancybox({
type: 'inline',
opts: {
animationDuration: 350,
animationEffect: 'material'
},
beforeShow: function beforeShow() {
$('#form_etiquette .etiquette').removeClass('selected');
},
afterClose: function afterClose() {
if ($('#form_etiquette .etiquette.selected').length) {
var id = $('#form_etiquette .etiquette.selected').attr('data-id');
applyEtiquette(id, medias);
}
}
}).trigger("click");
}
}); // ---- Appliquer une étiquette à un média en masse
$('#form_etiquette .etiquette').on('click', function (event) {
event.preventDefault();
$(this).addClass('selected');
$.fancybox.close();
}); // ---- gestion des onglets de la popup d'édition
$("#form_media .tabbtn").on("click", function (event) {
@ -11804,9 +11952,8 @@ $(document).ready(function () {
$(".btn_tab_edit_save").on("click", function (event) {
// recupère les tags
//$('#tag-editor').tagEditor('getTags')[0].tags
// ferme la popin
$(".form_media_close, .btn_tab_edit_cancel").trigger('click');
$('#tag-editor').tagEditor('getTags')[0].tags; // ferme la popin
//$(".form_media_close, .btn_tab_edit_cancel").trigger('click');
});
/******************************
Upload de média
@ -12086,7 +12233,9 @@ function loadMedia(dossier_id, sujet_id) {
dossier_id: dossier_id,
sujet_id: sujet_id,
offset: $(window).data('offset'),
limit: $(window).data('limit')
limit: $(window).data('limit'),
orderField: $("#order_select").val(),
order: $('#order_select option:selected').attr('data-order')
},
success: function success(result) {
var data = result.data;
@ -12145,7 +12294,7 @@ function loadMedia(dossier_id, sujet_id) {
}
output += '<div class="imageItem" data-id="' + item.id + '" data-ext="' + item.extension + '" data-typemedia="' + item.typemedia_id + '" data-preview="' + preview + '" data-src="' + item.source + '" draggable="' + draggable + '" aria-grabbed="false">';
output += '<div class="etiquette" style="background-color:' + item.etiquette.color + ';" data-id="' + item.etiquette.etiquette_id + '" >' + item.etiquette.libelle + '<i style="color:' + item.etiquette.color + ';" class="fas fa-caret-right"></i></div>';
output += '<div class="etiquette" style="background-color:' + item.etiquette.color + '; border-color:' + item.etiquette.color + ';" data-id="' + item.etiquette.etiquette_id + '" >' + item.etiquette.libelle + '</div>';
output += '<div class="contextMenu"><ul>';
output += '<li class="menu-option editItem"><i class="fas fa-edit"></i> Editer</li>';
output += '<li class="menu-option downloadItem"><i class="fas fa-file-download"></i> Télécharger</li>';
@ -12155,7 +12304,7 @@ function loadMedia(dossier_id, sujet_id) {
output += '</ul></div>';
output += '<div class="media ' + itemClass + '" style="background-image:url(' + thumb + ')"></div>';
output += '<p class="libelle">' + item.libelle + '</p>';
output += '<div class="info">' + ico + item.extension + ' - ' + item.taille + detail + '</div>';
output += '<div class="info">' + ico + item.extension + ' - ' + item.taille + detail + ' - v' + item.version + '</div>';
output += '</div>';
});
$('.media_container .wrapper').append(output);
@ -12176,9 +12325,9 @@ function loadMedia(dossier_id, sujet_id) {
function removeMedias(medias) {
if (medias.length == 0) {
$.fancyMessage({
title: "Attention",
title: "Supprimer un média",
message: "Veuillez sélectionner les médias à supprimer.",
type: "error"
type: "info"
});
} else {
$.fancyConfirm({
@ -12223,6 +12372,44 @@ function removeMedias(medias) {
}
});
}
} // ---- Appliquer une etiquette à un ou plusieurs médias
function applyEtiquette(etiquette_id, medias) {
if (medias.length == 0) {
$.fancyMessage({
title: "Appliquer une étiquette",
message: "Veuillez sélectionner au moins un média.",
type: "info"
});
} else {
$.ajax({
url: '/ajax/apply-sticker',
method: 'POST',
dataType: 'json',
data: {
medias: medias,
etiquette_id: etiquette_id
},
success: function success(result) {
$.each(medias, function (index, value) {
var $etiquette = $(".media_container .imageItem[data-id='" + value + "'] .etiquette");
$etiquette.attr('data-id', result.etiquette_id);
$etiquette.html(result.libelle);
$etiquette.css('background-color', result.color);
$etiquette.css('border-color', result.color);
});
},
error: function error(jqXHR, textStatus, errorThrown) {
$.fancybox.close();
$.fancyMessage({
title: "Attention",
message: "Erreur lors du changement d'étiquette, merci d'actualiser la page.",
type: "error"
});
}
});
}
} // ---- contruction de l'arborescence des dossiers

2
resources/js/admin.js vendored
View file

@ -116,7 +116,7 @@ $(document).ready(function() {
// ---- Module de gestion de liste de données
function initSelector($selector){
window.initSelector = function($selector){
var datavalue = [];
// Init du module

216
resources/js/media.js vendored
View file

@ -372,7 +372,7 @@ $(document).ready(function() {
});
// ---- déselectionne les éléments si on clique en dehors
$(".main_content .wrapper").on("click", function(event) {
$(".main_content .media_container").on("click", function(event) {
if (event.target !== this) return;
$(".imageItem").attr("aria-grabbed", "false");
$(".imageItem").removeClass('flip');
@ -401,6 +401,25 @@ $(document).ready(function() {
}else if ($target.hasClass('deleteItem')) { // supprimer le média
removeMedias([$(this).attr('data-id')]);
}else if ($target.hasClass('tagItem')) { // Appliquer une étiquette
var medias = [];
medias.push($(this).attr("data-id"));
$("#form_etiquette").fancybox({
type : 'inline',
opts : {
animationDuration : 350,
animationEffect : 'material',
},
beforeShow : function() {
$('#form_etiquette .etiquette').removeClass('selected');
},
afterClose : function() {
if($('#form_etiquette .etiquette.selected').length){
var id = $('#form_etiquette .etiquette.selected').attr('data-id');
applyEtiquette(id, medias);
}
}
}).trigger("click");
}
return false;
}
@ -455,6 +474,31 @@ $(document).ready(function() {
}
});
// ---- Mode d'affichage
$(".action_wrapper .display i").on("click", function(event) {
if($(this).hasClass('fa-th')){ // mode mosaique
if(!$(this).hasClass('selected')){
$(".action_wrapper .display .fa-list").removeClass('selected');
$(this).addClass('selected');
$(".media_container .wrapper").removeClass('inline');
}
}else{ // mode liste
if(!$(this).hasClass('selected')){
$(".action_wrapper .display .fa-th").removeClass('selected');
$(this).addClass('selected');
$(".media_container .wrapper").addClass('inline');
}
}
});
// ---- Gestion de l'ordre d'affichage
$(".action_wrapper #order_select").on("change", function(event) {
var sujet_id = $("#sujet_selector").val();
var dossier_id = $(".currentFolder").val();
$(window).data('offset', 0);
loadMedia(dossier_id, sujet_id);
});
/******************************
Edition d'un média
**********************************/
@ -466,10 +510,12 @@ $(document).ready(function() {
event.preventDefault();
// initialise le nuage de Tags
$('#tag-editor').val('');
$('#tag-editor').tagEditor({
placeholder: 'Saissisez des tags',
removeDuplicates : false,
clickDelete : true
clickDelete : true,
initialTags: []
});
var minWidth = $(document).width();
@ -483,6 +529,7 @@ $(document).ready(function() {
// sélectionne la tab preview à l'ouverture
$("#form_media .form_media_preview").trigger("click");
// initiliasation des aperçu et du mode retouche selon le type de média
if($(this).attr('data-typemedia') == 1){ // média image
$("#form_media .form_media_retouch").show(); // on active l'onglet retouche
$("#form_media .form_media_preview").show(); // on active l'onglet aperçu
@ -511,15 +558,40 @@ $(document).ready(function() {
plugins: {
save: {
callback: function() {
// récupère la nouvelle image
var newImage = this.darkroom.sourceCanvas.toDataURL();
viewer.destroy(); viewer = null;
viewer = OpenSeadragon({
id: "openseadragon",
tileSources: {
type: "image",
url: newImage,
}
});
// sauvegarde de l'image en base
$.ajax({
url: '/ajax/edit-photo',
method: 'POST',
dataType : 'json',
data: {
media_id: $(window).data('current_edit_media'),
image : newImage
},
success: function(result){
// MAJ de l'aperçu
viewer.destroy(); viewer = null;
viewer = OpenSeadragon({
id: "openseadragon",
tileSources: {
type: "image",
url: newImage,
}
});
// MAJ du visuel dans la Liste
var mediaId = $(window).data('current_edit_media')
var $media = $(".media_container .imageItem[data-id='"+mediaId+"'] .media");
var mediaBg = $media.css('background-image', 'url('+result.source+ new Date().getTime()+')');
},
error: function(jqXHR, textStatus, errorThrown) {
$.fancybox.close();
$.fancyMessage({title : "Attention", message : "Erreur lors de la sauvegarde de l'image, merci d'actualiser la page.", type : "error"});
}
});
}
},
}
@ -594,14 +666,30 @@ $(document).ready(function() {
//$(".tab_edit #variantes").val(result.data.etiquette_id);
$(".tab_edit #langues").val(result.data.langue_id);
$(".tab_edit #commentaire").val(result.data.commentaire);
//$(".tab_edit #version").val(result.data.version);
$(".tab_edit #version").val(result.data.version);
$(".tab_edit #created_at").val(result.data.created_at);
$(".tab_edit #updated_at").val(result.data.updated_at);
$(".tab_edit #published_at").val(result.data.published_at);
// liste des produits liés
// marque lié
$(".tab_edit .selector_marques .selector_values").html('');
$.each(result.data.marques, function (index, marque) {
$(".tab_edit .selector_marques .selector_values").append('<li data-value="'+marque.COD_MARQUE+'" >'+marque.LIBELLE+'</li>');
});
initSelector(".selector_marques");
// site lié
// tags $('#demo3').tagEditor('addTag', 'example');
$(".tab_edit .selector_sites .selector_values").html('');
$.each(result.data.sites, function (index, site) {
$(".tab_edit .selector_sites .selector_values").append('<li data-value="'+site.id+'" >'+site.libelle+'</li>');
});
initSelector(".selector_sites");
// tags
if(result.tags){
$('#tag-editor').tagEditor('addTag', result.tags);
}
$(".tab_edit #etiquettes").val(result.data.etiquette_id);
$(".tab_edit #extension").val(result.data.extension);
$(".tab_edit #copyrights").val(result.data.copyright_id);
@ -611,6 +699,22 @@ $(document).ready(function() {
$(".tab_edit #largeur_mm").val(result.data.largeur_mm);
$(".tab_edit #hauteur_mm").val(result.data.hauteur_mm);
// Config de la fiche d'édition
var sujetId = $("#sujet_selector").val();
$(".tab_edit .article_form, .tab_edit .marque_form, .tab_edit .site_form").hide();
switch (sujetId) {
case '1': // Visuel Article
$(".tab_edit .article_form").show();
break;
case '2': // Marque
$(".tab_edit .marque_form").show();
break;
case '3': // Sociétés
$(".tab_edit .site_form").show();
break;
default:
}
// affiche la popin
$("#form_media").fadeIn('fast');
},
@ -623,7 +727,7 @@ $(document).ready(function() {
if(viewer !== null){
viewer.destroy(); viewer = null; // on détruit le plugin de preview
}
$('#tag-editor').tagEditor('destroy'); $('.ed_on').hide();$('.ed_off').show(); // on détruit le plugin de tag
$('#tag-editor').tagEditor('destroy'); $('#tag-editor').val(''); // on détruit le plugin de tag
$.fancyMessage({title : "Edition d'un média", message : "Ouverture du média impossible. Merci d'actualiser la page.", type : "error"});
}
});
@ -644,7 +748,7 @@ $(document).ready(function() {
if(viewer !== null){
viewer.destroy(); viewer = null; // on détruit le plugin de preview
}
$('#tag-editor').tagEditor('destroy'); $('.ed_on').hide();$('.ed_off').show(); // on détruit le plugin de tag
$('#tag-editor').tagEditor('destroy'); $('#tag-editor').val(''); // on détruit le plugin de tag
// ---- Stop la vidéo ou le son si présent
if($(".tab_preview video").length){
$(".tab_preview video").get(0).pause()
@ -666,6 +770,47 @@ $(document).ready(function() {
removeMedias(medias);
});
// ---- Popup pour Appliquer une étiquette à un média en masse
$('.action_tag_media').on('click',function(event){
event.preventDefault();
var medias = [];
$('.media_container .imageItem').each(function (index) {
if( $(this ).attr("aria-grabbed") == "true" ){
medias.push($(this ).attr("data-id"));
}
});
if(medias.length == 0){
$.fancyMessage({title : "Appliquer une étiquette", message : "Veuillez sélectionner au moins un média.", type : "info"});
}else{
$("#form_etiquette").fancybox({
type : 'inline',
opts : {
animationDuration : 350,
animationEffect : 'material',
},
beforeShow : function() {
$('#form_etiquette .etiquette').removeClass('selected');
},
afterClose : function() {
if($('#form_etiquette .etiquette.selected').length){
var id = $('#form_etiquette .etiquette.selected').attr('data-id');
applyEtiquette(id, medias);
}
}
}).trigger("click");
}
});
// ---- Appliquer une étiquette à un média en masse
$('#form_etiquette .etiquette').on('click',function(event){
event.preventDefault();
$(this).addClass('selected');
$.fancybox.close();
});
// ---- gestion des onglets de la popup d'édition
$("#form_media .tabbtn").on("click" , function(event) {
event.preventDefault();
@ -690,9 +835,10 @@ $(document).ready(function() {
// ---- sauvegarde de la popup d'édition
$(".btn_tab_edit_save").on("click" , function(event) {
// recupère les tags
//$('#tag-editor').tagEditor('getTags')[0].tags
$('#tag-editor').tagEditor('getTags')[0].tags
// ferme la popin
$(".form_media_close, .btn_tab_edit_cancel").trigger('click');
//$(".form_media_close, .btn_tab_edit_cancel").trigger('click');
});
/******************************
@ -967,6 +1113,8 @@ function loadMedia(dossier_id, sujet_id){
sujet_id : sujet_id,
offset : $(window).data('offset'),
limit : $(window).data('limit'),
orderField : $("#order_select").val(),
order : $('#order_select option:selected').attr('data-order')
},
success: function(result){
var data = result.data;
@ -1017,7 +1165,7 @@ function loadMedia(dossier_id, sujet_id){
}
output += '<div class="imageItem" data-id="'+item.id+'" data-ext="'+item.extension+'" data-typemedia="'+item.typemedia_id+'" data-preview="'+preview+'" data-src="'+ item.source+'" draggable="'+draggable+'" aria-grabbed="false">';
output += '<div class="etiquette" style="background-color:'+item.etiquette.color+';" data-id="'+item.etiquette.etiquette_id+'" >'+item.etiquette.libelle+'<i style="color:'+item.etiquette.color+';" class="fas fa-caret-right"></i></div>';
output += '<div class="etiquette" style="background-color:'+item.etiquette.color+'; border-color:'+item.etiquette.color+';" data-id="'+item.etiquette.etiquette_id+'" >'+item.etiquette.libelle+'</div>';
output += '<div class="contextMenu"><ul>';
output += '<li class="menu-option editItem"><i class="fas fa-edit"></i> Editer</li>';
output += '<li class="menu-option downloadItem"><i class="fas fa-file-download"></i> Télécharger</li>';
@ -1027,7 +1175,7 @@ function loadMedia(dossier_id, sujet_id){
output += '</ul></div>';
output += '<div class="media '+itemClass+'" style="background-image:url('+thumb+')"></div>';
output += '<p class="libelle">'+item.libelle+'</p>';
output += '<div class="info">'+ico+item.extension+' - '+item.taille+detail+'</div>';
output += '<div class="info">'+ico+item.extension+' - '+item.taille+detail+' - v'+item.version+'</div>';
output += '</div>';
});
$('.media_container .wrapper').append(output);
@ -1047,7 +1195,7 @@ function loadMedia(dossier_id, sujet_id){
function removeMedias(medias){
if(medias.length == 0){
$.fancyMessage({title : "Attention", message : "Veuillez sélectionner les médias à supprimer.", type : "error"});
$.fancyMessage({title : "Supprimer un média", message : "Veuillez sélectionner les médias à supprimer.", type : "info"});
}else{
$.fancyConfirm({
title : "Suppression de média",
@ -1088,6 +1236,36 @@ function removeMedias(medias){
}
}
// ---- Appliquer une etiquette à un ou plusieurs médias
function applyEtiquette(etiquette_id, medias){
if(medias.length == 0){
$.fancyMessage({title : "Appliquer une étiquette", message : "Veuillez sélectionner au moins un média.", type : "info"});
}else{
$.ajax({
url: '/ajax/apply-sticker',
method: 'POST',
dataType : 'json',
data: {
medias: medias,
etiquette_id : etiquette_id
},
success: function(result){
$.each(medias, function (index, value) {
var $etiquette = $(".media_container .imageItem[data-id='"+value+"'] .etiquette");
$etiquette.attr('data-id', result.etiquette_id);
$etiquette.html(result.libelle);
$etiquette.css('background-color', result.color);
$etiquette.css('border-color', result.color);
});
},
error: function(jqXHR, textStatus, errorThrown) {
$.fancybox.close();
$.fancyMessage({title : "Attention", message : "Erreur lors du changement d'étiquette, merci d'actualiser la page.", type : "error"});
}
});
}
}
// ---- contruction de l'arborescence des dossiers
function buildItem(item) {
var parentClass = "";

1
resources/sass/partials/app_variables.scss vendored
View file

@ -17,6 +17,7 @@ $purple: #9561e2;
$pink: #f66D9b;
$red: #e3342f;
$orange: #f6993f;
$lightorange: #FFAB57;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;

45
resources/sass/partials/common.scss vendored
View file

@ -268,6 +268,51 @@
}
}
#form_etiquette{
padding: 30px;
min-width: 340px;
h3{
font-size: 14px;
margin-bottom: 12px;
font-weight: bold;
color: $white;
}
hr{
color: #24272e;
border-bottom: 1px solid #2c2f36;
margin-bottom: 20px;
}
li{
margin-bottom: 5px;
&:hover{
background-color: #2D3139;
}
.etiquette{
position: relative;
color: $white;
padding: 4px;
display: inline-block;
&::before {
border-color: inherit;
content: "";
top: 0;
border-style: solid;
border-width: 11px;
border-bottom-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
position: absolute;
right: -22px;
}
}
}
}
/******************************************
TEMPLATE
******************************************/

91
resources/sass/partials/media.scss vendored
View file

@ -33,11 +33,12 @@
.action_wrapper{
background-color: $grey;
width: 100%;
min-height: 45px;
height: 45px;
overflow: hidden;
a{
font-size: 13px;
padding: 15px 17px;
padding: 15px 13px;
display: inline-block;
border-right: 1px solid #505050;
float: left;
@ -69,6 +70,37 @@
background-color: $cyan;
}
}
.display{
float: right;
padding: 7px;
i{
font-size: 17px;
color: $white;
padding: 10px;
cursor: pointer;
transition: 0.3s ease-in-out;
&:hover{
background-color: $lightorange;
}
&.selected{
background-color: $orange;
}
}
}
.order{
float: right;
padding: 11px;
span{
@media screen and (max-width: 1400px) {
display: none;
}
}
select{
padding: 5px 0px;
}
}
}
}
@ -96,7 +128,7 @@
overflow-y: auto;
overflow-x: hidden;
position: relative;
height: calc(100% - 174px);
height: calc(100% - 180px);
.loader{
position: sticky;
@ -140,12 +172,17 @@
display: none;
}
i{
position: absolute;
right: -10px;
top: 0;
font-size: 30px;
line-height: 17px;
&::before {
border-color: inherit;
content: "";
top: 0;
border-style: solid;
border-width: 9px;
border-bottom-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
position: absolute;
right: -18px;
}
}
@ -153,7 +190,7 @@
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
background-color: rgba(0,0,0,0.9);
left: 0px;
top: 0px;
z-index: 2;
@ -276,6 +313,40 @@
background-color: $grey;
}
}
&.inline{
flex-direction: column;
.imageItem{
width: 96%;
padding: 4px 10px;
align-items: center;
display: flex;
.media{
height: 60px;
width: 60px;
display: inline-block;
}
.libelle{
display: inline-block;
min-width: 350px;
}
.info{
position: static;
display: inline-block;
color: white;
font-size: 13px;
}
.contextMenu{
ul{
display: flex;
justify-content: space-around;
width: 100%;
}
}
}
}
}
}
}

1
resources/sass/partials/reset.scss vendored
View file

@ -41,6 +41,7 @@ body {
color: $grey2;
background-size: 6.10px 5.30px;
height: 100%;
overflow: hidden;
}
ol, ul {
list-style: none;

34
resources/views/layouts/media_edit.blade.php
View file

@ -73,7 +73,39 @@
</div>
<div class="wrapper">
<h3>Informations liées au sujet</h3>
<div class="row_xl">
<div class="row site_form dataform">
<label for="site">Site</label>
<div class="selector_form selector_sites">
<input type="text" class="selector_filter" name="search" value="" placeholder="Rechercher..." autocomplete="off">
<div class="selector_list">
<ul class="selector_choices" >
@foreach ($sites as $site)
<li data-value="{{$site->id}}" >{{$site->libelle}}</li>
@endforeach
</ul>
<ul class="selector_values" >
</ul>
<input class="selector_dataValues" type="hidden" name="marques" value="">
</div>
</div>
</div>
<div class="row marque_form dataform">
<label for="marque">Marque</label>
<div class="selector_form selector_marques">
<input type="text" class="selector_filter" name="search" value="" placeholder="Rechercher..." autocomplete="off">
<div class="selector_list">
<ul class="selector_choices" >
@foreach ($marques as $marque)
<li data-value="{{$marque->COD_MARQUE}}" >{{$marque->LIBELLE}}</li>
@endforeach
</ul>
<ul class="selector_values" >
</ul>
<input class="selector_dataValues" type="hidden" name="marques" value="">
</div>
</div>
</div>
<div class="row_xl article_form">
<label for="tag">Articles associées</label>
<div class="article_selector">
<table>

28
resources/views/media_manager.blade.php
View file

@ -64,6 +64,24 @@
@if (Auth::user()->hasRole([config('roles.const.CONTRIBUTEUR'), config('roles.const.ADMIN'), config('roles.const.REDACTEUR')]))
<a href="#" class="action_tag_media"><i class="fas fa-tags"></i> Etiquette</a>
@endif
<div class="display">
<i class="fas fa-th selected"></i>
<i class="fal fa-list"></i>
</div>
<div class="order">
<span>Trier par : </span>
<select id="order_select" >
<option value="created_at" data-order="desc" >Date de création &#9660;</option>
<option value="created_at" data-order="asc" >Date de création &#9650;</option>
<option value="updated_at" data-order="desc" >Date de modification &#9660;</option>
<option value="updated_at" data-order="asc" >Date de modification &#9650;</option>
<option value="libelle" data-order="desc" >Libellé &#9660;</option>
<option value="libelle" data-order="asc" >Libellé &#9650;</option>
<option value="version" data-order="desc" >Version &#9660;</option>
<option value="version" data-order="asc" >Version &#9650;</option>
</select>
</div>
</div>
</header>
<div style="display:none;" class="scrollLoader"><div class="animated slideInUp"><i class="fal fa-circle-notch fa-spin"></i> Chargements des médias</div></div>
@ -85,6 +103,16 @@
</p>
</div>
<div id="form_etiquette" style="display: none;" data-id="" >
<h3>Appliquez une étiquette</h3>
<hr/>
<ul>
@foreach ($etiquettes as $etiquette)
<li><a class="etiquette" data-id="{{$etiquette->etiquette_id}}" href="#" style="background-color:{{$etiquette->color}}; border-color:{{$etiquette->color}}" >{{$etiquette->libelle}}</a></li>
@endforeach
</ul>
</div>
<div class="upload_container">
<span class="fileinput-button">
<i class="fas fa-plus-circle"></i><span> Ajouter vos médias</span>

3
routes/web.php
View file

@ -35,6 +35,9 @@ Route::group(['middleware' => ['auth']], function(){
Route::post('/ajax/move-media', 'MediaController@moveMedia');
Route::post('/ajax/remove-media', 'MediaController@removeMedia');
Route::post('/ajax/get-media', 'MediaController@getOneMedia');
Route::post('/ajax/save-media', 'MediaController@saveMedia');
Route::post('/ajax/apply-sticker', 'MediaController@applySticker');
Route::post('/ajax/edit-photo', 'MediaController@editPhoto');
// Ajax pour la gestion de l'upload de média
Route::post('/ajax/upload-media', 'UploadController@storeMedia');