From 97c7f542810c857f1c3d65367a93239696a8adc4 Mon Sep 17 00:00:00 2001 From: Yann Gonidec Date: Tue, 25 Jun 2019 16:17:56 +0200 Subject: [PATCH] =?UTF-8?q?front=20:=20suite=20popup=20=C3=A9dition=20de?= =?UTF-8?q?=20m=C3=A9dia=202?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/Http/Controllers/MediaController.php | 79 +++++- app/Marque.php | 8 + app/Media.php | 24 ++ app/Site.php | 18 ++ app/Tag.php | 17 ++ public/css/app.css | 142 ++++++++++- public/js/app.js | 249 ++++++++++++++++--- resources/js/admin.js | 2 +- resources/js/media.js | 216 ++++++++++++++-- resources/sass/partials/app_variables.scss | 1 + resources/sass/partials/common.scss | 45 ++++ resources/sass/partials/media.scss | 91 ++++++- resources/sass/partials/reset.scss | 1 + resources/views/layouts/media_edit.blade.php | 34 ++- resources/views/media_manager.blade.php | 28 +++ routes/web.php | 3 + 16 files changed, 884 insertions(+), 74 deletions(-) create mode 100644 app/Site.php create mode 100644 app/Tag.php diff --git a/app/Http/Controllers/MediaController.php b/app/Http/Controllers/MediaController.php index 445995e..af6f34e 100644 --- a/app/Http/Controllers/MediaController.php +++ b/app/Http/Controllers/MediaController.php @@ -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); + } } diff --git a/app/Marque.php b/app/Marque.php index 76ecd34..a49eaf7 100644 --- a/app/Marque.php +++ b/app/Marque.php @@ -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'); + } + } diff --git a/app/Media.php b/app/Media.php index 9c8557b..22c46d9 100644 --- a/app/Media.php +++ b/app/Media.php @@ -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'); + } } diff --git a/app/Site.php b/app/Site.php new file mode 100644 index 0000000..87fd9ef --- /dev/null +++ b/app/Site.php @@ -0,0 +1,18 @@ +belongsToMany('App\Media', 'medias_sites', 'site_id', 'media_id'); + } + +} diff --git a/app/Tag.php b/app/Tag.php new file mode 100644 index 0000000..a985c4d --- /dev/null +++ b/app/Tag.php @@ -0,0 +1,17 @@ +belongsToMany('App\Media', 'medias_tags', 'tag_id', 'media_id'); + } +} diff --git a/public/css/app.css b/public/css/app.css index 3592b8e..69f09ab 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -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; diff --git a/public/js/app.js b/public/js/app.js index fd360fd..37b4347 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -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('
  • ' + marque.LIBELLE + '
    • '); + }); + 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('
  • ' + site.libelle + '
    • '); + }); + 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 += '
    '; - output += '
    ' + item.etiquette.libelle + '
    '; + output += '
    ' + item.etiquette.libelle + '
    '; output += '
      '; output += '
    • Editer
      • '; output += '
    • Télécharger
      • '; @@ -12155,7 +12304,7 @@ function loadMedia(dossier_id, sujet_id) { output += '
    '; output += '
    '; output += '

    ' + item.libelle + '

    '; - output += '
    ' + ico + item.extension + ' - ' + item.taille + detail + '
    '; + output += '
    ' + ico + item.extension + ' - ' + item.taille + detail + ' - v' + item.version + '
    '; output += '
    '; }); $('.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 diff --git a/resources/js/admin.js b/resources/js/admin.js index 8585341..eb81fbb 100644 --- a/resources/js/admin.js +++ b/resources/js/admin.js @@ -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 diff --git a/resources/js/media.js b/resources/js/media.js index 61ee71d..492a22b 100644 --- a/resources/js/media.js +++ b/resources/js/media.js @@ -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('
  • '+marque.LIBELLE+'
    • '); + }); + 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('
  • '+site.libelle+'
    • '); + }); + 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 += '
    '; - output += '
    '+item.etiquette.libelle+'
    '; + output += '
    '+item.etiquette.libelle+'
    '; output += '
      '; output += '
    • Editer
      • '; output += '
    • Télécharger
      • '; @@ -1027,7 +1175,7 @@ function loadMedia(dossier_id, sujet_id){ output += '
    '; output += '
    '; output += '

    '+item.libelle+'

    '; - output += '
    '+ico+item.extension+' - '+item.taille+detail+'
    '; + output += '
    '+ico+item.extension+' - '+item.taille+detail+' - v'+item.version+'
    '; output += '
    '; }); $('.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 = ""; diff --git a/resources/sass/partials/app_variables.scss b/resources/sass/partials/app_variables.scss index 59fdaee..4a5fb3a 100644 --- a/resources/sass/partials/app_variables.scss +++ b/resources/sass/partials/app_variables.scss @@ -17,6 +17,7 @@ $purple: #9561e2; $pink: #f66D9b; $red: #e3342f; $orange: #f6993f; +$lightorange: #FFAB57; $yellow: #ffed4a; $green: #38c172; $teal: #4dc0b5; diff --git a/resources/sass/partials/common.scss b/resources/sass/partials/common.scss index b3f24ec..ee8ed23 100644 --- a/resources/sass/partials/common.scss +++ b/resources/sass/partials/common.scss @@ -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 ******************************************/ diff --git a/resources/sass/partials/media.scss b/resources/sass/partials/media.scss index 190a4af..33cfcfd 100644 --- a/resources/sass/partials/media.scss +++ b/resources/sass/partials/media.scss @@ -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%; + } + } + } + } + } } } diff --git a/resources/sass/partials/reset.scss b/resources/sass/partials/reset.scss index ca8f321..b5cc72c 100644 --- a/resources/sass/partials/reset.scss +++ b/resources/sass/partials/reset.scss @@ -41,6 +41,7 @@ body { color: $grey2; background-size: 6.10px 5.30px; height: 100%; + overflow: hidden; } ol, ul { list-style: none; diff --git a/resources/views/layouts/media_edit.blade.php b/resources/views/layouts/media_edit.blade.php index cb2f943..47f37f2 100644 --- a/resources/views/layouts/media_edit.blade.php +++ b/resources/views/layouts/media_edit.blade.php @@ -73,7 +73,39 @@

    Informations liées au sujet

    -
    +
    + +
    + +
    +
      + @foreach ($sites as $site) +
    • {{$site->libelle}}
      • + @endforeach +
    +
      +
    + +
    +
    +
    +
    + +
    + +
    +
      + @foreach ($marques as $marque) +
    • {{$marque->LIBELLE}}
      • + @endforeach +
    +
      +
    + +
    +
    +
    +
    diff --git a/resources/views/media_manager.blade.php b/resources/views/media_manager.blade.php index a8dfe07..d2d71e3 100644 --- a/resources/views/media_manager.blade.php +++ b/resources/views/media_manager.blade.php @@ -64,6 +64,24 @@ @if (Auth::user()->hasRole([config('roles.const.CONTRIBUTEUR'), config('roles.const.ADMIN'), config('roles.const.REDACTEUR')])) Etiquette @endif + +
    + + +
    +
    + Trier par : + +
    @@ -85,6 +103,16 @@

    + +
    Ajouter vos médias diff --git a/routes/web.php b/routes/web.php index a4f5678..b06b62c 100644 --- a/routes/web.php +++ b/routes/web.php @@ -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');