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

front : suite popup édition

Browse source
This commit is contained in:
Yann Gonidec 2019-06-05 16:03:25 +02:00
parent 035e72cc02
commit 00818c977d
26 changed files with 948 additions and 141 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
app/Http/Controllers/UploadController.php
View file

@ -149,6 +149,32 @@ class UploadController extends Controller {
case 'psd':
default:
$media->typemedia_id = 5;
if($extension == 'pdf'){
$im = new \imagick();
$im->readImage($destinationPath.$filename.'[0]');
$im->setImageFormat('jpg');
$imageprops = $im->getImageGeometry();
$width = $imageprops['width'];
$height = $imageprops['height'];
// create preview
$fp = $destinationPath.$uid.'_preview.jpg';
if($width >= 1500){
$newHeight = (1500 * $height) / $width;
$im->resizeImage(1500,$newHeight, \imagick::FILTER_LANCZOS, 0.9, true);
}
$im->writeImage($fp);
// create thumb
$newHeight = (200 * $height) / $width;
$im->resizeImage(200, $newHeight, \imagick::FILTER_LANCZOS, 0.9, true);
$fp = $destinationPath.$uid.'_thumb.jpg';
$im->writeImage($fp);
}
break;
}

236
public/css/app.css vendored
View file

@ -12491,6 +12491,178 @@ readers do not read off random characters that represent icons */
fill: #fff;
}
/* surrounding tag container */
.tag-editor {
list-style-type: none;
padding: 0 5px 0 0;
margin: 0;
overflow: hidden;
border: 1px solid #eee;
cursor: text;
font: normal 14px sans-serif;
color: #555;
background: #fff;
line-height: 20px;
}
/* core styles usually need no change */
.tag-editor li {
display: block;
float: left;
overflow: hidden;
margin: 3px 0;
}
.tag-editor div {
float: left;
padding: 0 4px;
}
.tag-editor .placeholder {
padding: 0 8px;
color: #bbb;
}
.tag-editor .tag-editor-spacer {
padding: 0;
width: 8px;
overflow: hidden;
color: transparent;
background: none;
}
.tag-editor input {
vertical-align: inherit;
border: 0;
outline: none;
padding: 0;
margin: 0;
cursor: text;
font-family: inherit;
font-weight: inherit;
font-size: inherit;
font-style: inherit;
box-shadow: none;
background: none;
color: #444;
}
/* hide original input field or textarea visually to allow tab navigation */
.tag-editor-hidden-src {
position: absolute !important;
left: -99999px;
}
/* hide IE10 "clear field" X */
.tag-editor ::-ms-clear {
display: none;
}
/* tag style */
.tag-editor .tag-editor-tag {
padding-left: 5px;
color: #fff;
background: #555;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
border-radius: 2px 0 0 2px;
}
/* delete icon */
.tag-editor .tag-editor-delete {
background: #555;
cursor: pointer;
border-radius: 0 2px 2px 0;
padding-left: 3px;
padding-right: 4px;
}
.tag-editor .tag-editor-delete i {
line-height: 18px;
display: inline-block;
}
.tag-editor .tag-editor-delete i:before {
font-size: 16px;
color: #fff;
content: "\D7";
font-style: normal;
}
.tag-editor .tag-editor-delete:hover i:before {
color: #d65454;
}
.tag-editor .tag-editor-tag.active + .tag-editor-delete,
.tag-editor .tag-editor-tag.active + .tag-editor-delete i {
visibility: hidden;
cursor: text;
}
.tag-editor .tag-editor-tag.active {
background: none !important;
}
/* jQuery UI autocomplete - code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css */
.ui-autocomplete {
position: absolute;
top: 0;
left: 0;
cursor: default;
font-size: 14px;
}
.ui-front {
z-index: 9999;
}
.ui-menu {
list-style: none;
padding: 1px;
margin: 0;
display: block;
outline: none;
}
.ui-menu .ui-menu-item a {
text-decoration: none;
display: block;
padding: 2px 0.4em;
line-height: 1.4;
min-height: 0;
/* support: IE7 */
}
.ui-widget-content {
border: 1px solid #bbb;
background: #fff;
color: #555;
}
.ui-widget-content a {
color: #46799b;
}
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
background: #e0eaf1;
}
.ui-helper-hidden-accessible {
display: none;
}
/******************************************
HEADER
******************************************/
@ -13215,11 +13387,11 @@ h3 {
table {
width: 100%;
background-color: #1a1a1a;
background-color: #3b3b3b;
}
table th {
background-color: #272626;
background-color: #333333;
font-weight: bold;
color: #ffffff;
}
@ -13240,15 +13412,23 @@ table tr {
border-bottom: 1px solid #505050;
}
table tr:nth-child(even) {
background-color: #333333;
}
table tr:hover {
background-color: #272626;
background-color: rgba(46, 168, 229, 0.2);
}
table tfoot tr {
background-color: #272626;
background-color: #333333;
border: none;
}
table tfoot tr:hover {
background-color: #333333;
}
.dataform .form-field {
display: flex;
flex-direction: row;
@ -13878,6 +14058,41 @@ table tfoot tr {
width: 100%;
padding: 8px 50px;
text-align: right;
background-color: #272626;
}
#form_media .main_content .tab.tab_edit .cloud_tag_plugin {
position: relative;
}
#form_media .main_content .tab.tab_edit table td {
padding: 9px 7px;
text-align: left;
}
#form_media .main_content .tab.tab_links table {
margin: 0 auto;
width: 950px;
}
#form_media .main_content .tab.tab_links th:first-child {
width: 270px;
}
#form_media .main_content .tab.tab_links i {
font-size: 18px;
margin-left: 10px;
color: #ffffff;
cursor: pointer;
}
#form_media .main_content .tab.tab_links input {
width: 625px;
}
#form_media .main_content .tab.tab_history table {
margin: 0 auto;
width: 950px;
}
#form_media .main_content .tab.active {
@ -13899,24 +14114,31 @@ table tfoot tr {
text-align: center;
}
#form_media .main_content .tab .wrapper .row {
#form_media .main_content .tab .wrapper .row,
#form_media .main_content .tab .wrapper .row_xl {
display: flex;
flex-direction: column;
width: 530px;
margin: 0 auto 15px auto;
}
#form_media .main_content .tab .wrapper .row label {
#form_media .main_content .tab .wrapper .row label,
#form_media .main_content .tab .wrapper .row_xl label {
margin-bottom: 10px;
color: #ffffff;
}
#form_media .main_content .tab .wrapper .row label span {
#form_media .main_content .tab .wrapper .row label span,
#form_media .main_content .tab .wrapper .row_xl label span {
color: #e3342f;
font-weight: bold;
font-size: 14px;
}
#form_media .main_content .tab .wrapper .row_xl {
width: 100%;
}
/******************************************
PAGE LOGIN
******************************************/

8
public/images/image.dzi Normal file
View file

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<Image xmlns="http://schemas.microsoft.com/deepzoom/2008"
Format="png"
Overlap="2"
TileSize="256" >
<Size Height="9221"
Width="7026"/>
</Image>

BIN
public/images/zoomin_grouphover.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
public/images/zoomin_hover.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
public/images/zoomin_pressed.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
public/images/zoomin_rest.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
public/images/zoomout_grouphover.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
public/images/zoomout_hover.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
public/images/zoomout_pressed.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
public/images/zoomout_rest.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

187
public/js/app.js vendored
View file

@ -11474,12 +11474,99 @@ $(document).ready(function () {
event.preventDefault();
$(".imageItem").removeClass('flip');
$(this).addClass('flip');
}); // ---- double-clique sur un média
}); // ---- gère la sélection des éléments
var lastSelected;
$("html").on("click", ".imageItem", function (event) {
event.preventDefault();
$(".imageItem").removeClass('flip'); // Gestion des actions accessibles lors du clic droit sur un media
var target = event.target,
$target = $(target);
if ($target.hasClass('menu-option')) {
if ($target.hasClass('editItem')) {
// Editer un média
$(this).dblclick();
} else if ($target.hasClass('downloadItem')) {// Télécharger le média
} else if ($target.hasClass('addBasket')) {// ajouter le média au panier
} else if ($target.hasClass('deleteItem')) {// supprimer le média
} else if ($target.hasClass('tagItem')) {// Appliquer une étiquette
}
return false;
} // Sélection avec touche controle
if (event.ctrlKey) {
if ($(this).attr("aria-grabbed") == "true") {
$(this).attr("aria-grabbed", "false");
} else {
$(this).attr("aria-grabbed", "true");
}
lastSelected = $(this);
} else if (event.shiftKey) {
// Sélection avec touche shift
var select;
if (lastSelected == null) {
lastSelected = $(this);
select = true;
} else {
select = lastSelected.attr("aria-grabbed");
}
$(".imageItem").attr("aria-grabbed", "false");
var imageItem = $(".imageItem");
var last = imageItem.index(lastSelected);
var first = imageItem.index($(this));
var start = Math.min(first, last);
var end = Math.max(first, last);
for (var i = start; i <= end; i++) {
imageItem.eq(i).attr("aria-grabbed", select);
}
} else {
// Sélection simple
if ($(this).attr("aria-grabbed") == "true") {
$(".imageItem").attr("aria-grabbed", "false");
} else {
$(".imageItem").attr("aria-grabbed", "false");
$(this).attr("aria-grabbed", "true");
}
lastSelected = $(this);
}
}); // ---- Gestion de l'infinite scroll
$(".main_content .media_container").on("scroll resize", function () {
if ($(window).data('ajaxready') == false) return;
if ($(window).data('noMedia') == true) return;
if ($(".media_container").scrollTop() + $(".media_container").height() == $(".media_container .wrapper").height()) {
$(window).data('ajaxready', false);
var sujet_id = $("#sujet_selector").val();
var dossier_id = $(".currentFolder").val();
loadMedia(dossier_id, sujet_id);
}
});
/******************************
Edition d'un média
**********************************/
// ---- double-clique sur un média
var drPlugin = null;
var viewer = null;
$(".main_content .wrapper").on("dblclick", '.imageItem', function (event) {
event.preventDefault();
event.preventDefault(); // initialise le nuage de Tags
$('#tag-editor').tagEditor({
initialTags: ['Paysage', 'Nature', 'Soleil'],
placeholder: 'Saissisez des tags',
removeDuplicates: false,
clickDelete: true
});
var minWidth = $(document).width();
var minHeight = $(document).height() - 43 - 40; // Mémorise le média courant
@ -11550,13 +11637,20 @@ $(document).ready(function () {
$(".tab_preview").html('<video src="" controls></video>');
$(".tab_preview video").attr("src", $(this).attr('data-src'));
} else if ($(this).attr('data-typemedia') == 5) {
// média document
$("#form_media .form_media_retouch").hide(); // masque l'onglet retouche
// charge l'aperçu
$(".tab_preview").html('<img class="svgElt" src=""/>');
$(".tab_preview img").attr("src", $(this).attr('data-preview'));
} // affiche la popin
$("#form_media").fadeIn('fast');
}); // ---- fermeture de la popup d'édition
$(".form_media_close").on("click", function (event) {
$(".form_media_close, .btn_tab_edit_cancel").on("click", function (event) {
event.preventDefault(); // masque la popin
$("#form_media").fadeOut('fast'); // si le plugin de retouche a déjà été chargé
@ -11567,8 +11661,12 @@ $(document).ready(function () {
viewer.destroy();
viewer = null; // on détruit le plugin de preview
} // ---- Stop la vidéo ou le son si présent
}
$('#tag-editor').tagEditor('destroy');
$('.ed_on').hide();
$('.ed_off').show(); // 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();
@ -11577,8 +11675,6 @@ $(document).ready(function () {
if ($(".tab_preview audio").length) {
$(".tab_preview audio").get(0).pause();
}
$(".tab_edit .tab_content").scrollTop(0); // on remonte la scrollbar de la tab edition
}); // ---- gestion des onglets de la popup d'édition
$("#form_media .tabbtn").on("click", function (event) {
@ -11588,7 +11684,9 @@ $(document).ready(function () {
$("#form_media .tabbtn").removeClass('active');
$(this).addClass('active');
$("#form_media .main_content .tab").removeClass('active');
$("#form_media .main_content .tab").eq(tabId).addClass('active'); // ---- Stop la vidéo ou le son si présent
$("#form_media .main_content .tab").eq(tabId).addClass('active');
$(".tab_edit .tab_content").scrollTop(0); // on remonte la scrollbar de la tab edition
// ---- Stop la vidéo ou le son si présent
if ($(".tab_preview video").length) {
$(".tab_preview video").get(0).pause();
@ -11597,68 +11695,14 @@ $(document).ready(function () {
if ($(".tab_preview audio").length) {
$(".tab_preview audio").get(0).pause();
}
}); // ---- gère la sélection des éléments
}); // ---- sauvegarde de la popup d'édition
var lastSelected;
$("html").on("click", ".imageItem", function (event) {
event.preventDefault();
$(".imageItem").removeClass('flip');
if (event.ctrlKey) {
if ($(this).attr("aria-grabbed") == "true") {
$(this).attr("aria-grabbed", "false");
} else {
$(this).attr("aria-grabbed", "true");
}
lastSelected = $(this);
} else if (event.shiftKey) {
var select;
if (lastSelected == null) {
lastSelected = $(this);
select = true;
} else {
select = lastSelected.attr("aria-grabbed");
}
$(".imageItem").attr("aria-grabbed", "false");
var imageItem = $(".imageItem");
var last = imageItem.index(lastSelected);
var first = imageItem.index($(this));
var start = Math.min(first, last);
var end = Math.max(first, last);
for (var i = start; i <= end; i++) {
imageItem.eq(i).attr("aria-grabbed", select);
}
} else {
if ($(this).attr("aria-grabbed") == "true") {
$(".imageItem").attr("aria-grabbed", "false");
} else {
$(".imageItem").attr("aria-grabbed", "false");
$(this).attr("aria-grabbed", "true");
}
lastSelected = $(this);
}
}); // ---- Gestion de l'infinite scroll
$(".main_content .media_container").on("scroll resize", function () {
if ($(window).data('ajaxready') == false) return;
if ($(window).data('noMedia') == true) return;
if ($(".media_container").scrollTop() + $(".media_container").height() == $(".media_container .wrapper").height()) {
$(window).data('ajaxready', false);
var sujet_id = $("#sujet_selector").val();
var dossier_id = $(".currentFolder").val();
loadMedia(dossier_id, sujet_id);
}
$(".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');
});
/******************************
Edition d'un média
**********************************/
/******************************
Upload de média
**********************************/
@ -11973,7 +12017,14 @@ function loadMedia(dossier_id, sujet_id) {
case 5:
ico = '<i class="fas fa-file"></i>';
itemClass = "doc";
if (item.extension = "pdf") {
thumb = item.source.split('.')[0] + "_thumb.jpg";
preview = item.source.split('.')[0] + "_preview.jpg";
} else {
itemClass = "doc";
}
break;
default:

1
public/js/darkroom.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

8
public/js/fabric.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

2
public/js/jquery.caret.min.js vendored Normal file
View file

@ -0,0 +1,2 @@
// http://code.accursoft.com/caret - 1.3.3
!function(e){e.fn.caret=function(e){var t=this[0],n="true"===t.contentEditable;if(0==arguments.length){if(window.getSelection){if(n){t.focus();var o=window.getSelection().getRangeAt(0),r=o.cloneRange();return r.selectNodeContents(t),r.setEnd(o.endContainer,o.endOffset),r.toString().length}return t.selectionStart}if(document.selection){if(t.focus(),n){var o=document.selection.createRange(),r=document.body.createTextRange();return r.moveToElementText(t),r.setEndPoint("EndToEnd",o),r.text.length}var e=0,c=t.createTextRange(),r=document.selection.createRange().duplicate(),a=r.getBookmark();for(c.moveToBookmark(a);0!==c.moveStart("character",-1);)e++;return e}return t.selectionStart?t.selectionStart:0}if(-1==e&&(e=this[n?"text":"val"]().length),window.getSelection)n?(t.focus(),window.getSelection().collapse(t.firstChild,e)):t.setSelectionRange(e,e);else if(document.body.createTextRange)if(n){var c=document.body.createTextRange();c.moveToElementText(t),c.moveStart("character",e),c.collapse(!0),c.select()}else{var c=t.createTextRange();c.move("character",e),c.select()}return n||t.focus(),e}}(jQuery);

3
public/js/jquery.tag-editor.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

9
public/js/openseadragon.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
public/js/openseadragon.min.js.map Normal file
View file

File diff suppressed because one or more lines are too long

163
resources/js/media.js vendored
View file

@ -385,11 +385,93 @@ $(document).ready(function() {
$(this).addClass('flip')
});
// ---- gère la sélection des éléments
var lastSelected ;
$("html").on("click", ".imageItem", function(event) {
event.preventDefault();
$(".imageItem").removeClass('flip');
// Gestion des actions accessibles lors du clic droit sur un media
var target = event.target, $target = $(target);
if($target.hasClass('menu-option')){
if($target.hasClass('editItem')){ // Editer un média
$(this).dblclick();
}else if ($target.hasClass('downloadItem')) { // Télécharger le média
}else if ($target.hasClass('addBasket')) { // ajouter le média au panier
}else if ($target.hasClass('deleteItem')) { // supprimer le média
}else if ($target.hasClass('tagItem')) { // Appliquer une étiquette
}
return false;
}
// Sélection avec touche controle
if(event.ctrlKey){
if($(this).attr("aria-grabbed") == "true"){
$(this).attr("aria-grabbed", "false");
}else{
$(this).attr("aria-grabbed", "true");
}
lastSelected = $(this);
}else if(event.shiftKey){ // Sélection avec touche shift
var select;
if(lastSelected == null){
lastSelected = $(this);
select = true
}else{
select = lastSelected.attr("aria-grabbed");
}
$(".imageItem").attr("aria-grabbed", "false");
var imageItem = $(".imageItem");
var last = imageItem.index(lastSelected);
var first = imageItem.index( $(this));
var start = Math.min(first, last);
var end = Math.max(first, last);
for (var i = start; i <= end; i++) {
imageItem.eq(i).attr("aria-grabbed", select);
}
}else{ // Sélection simple
if($(this).attr("aria-grabbed") == "true"){
$(".imageItem").attr("aria-grabbed", "false");
}else{
$(".imageItem").attr("aria-grabbed", "false");
$(this).attr("aria-grabbed", "true");
}
lastSelected = $(this);
}
});
// ---- Gestion de l'infinite scroll
$(".main_content .media_container").on("scroll resize", function() {
if ($(window).data('ajaxready') == false) return;
if ($(window).data('noMedia') == true) return;
if( ($(".media_container").scrollTop() + $(".media_container").height() ) == $(".media_container .wrapper").height() ) {
$(window).data('ajaxready', false);
var sujet_id = $("#sujet_selector").val();
var dossier_id = $(".currentFolder").val();
loadMedia(dossier_id, sujet_id);
}
});
/******************************
Edition d'un média
**********************************/
// ---- double-clique sur un média
var drPlugin = null;
var viewer = null;
$(".main_content .wrapper").on("dblclick", '.imageItem' , function(event) {
event.preventDefault();
// initialise le nuage de Tags
$('#tag-editor').tagEditor({
initialTags: ['Paysage', 'Nature', 'Soleil'],
placeholder: 'Saissisez des tags',
removeDuplicates : false,
clickDelete : true
});
var minWidth = $(document).width();
var minHeight = $(document).height()-43-40;
@ -456,6 +538,11 @@ $(document).ready(function() {
// charge la vidéo
$(".tab_preview").html('<video src="" controls></video>');
$(".tab_preview video").attr("src", $(this).attr('data-src'));
}else if ($(this).attr('data-typemedia') == 5) { // média document
$("#form_media .form_media_retouch").hide(); // masque l'onglet retouche
// charge l'aperçu
$(".tab_preview").html('<img class="svgElt" src=""/>');
$(".tab_preview img").attr("src", $(this).attr('data-preview'));
}
// affiche la popin
$("#form_media").fadeIn('fast');
@ -463,7 +550,7 @@ $(document).ready(function() {
// ---- fermeture de la popup d'édition
$(".form_media_close").on("click" , function(event) {
$(".form_media_close, .btn_tab_edit_cancel").on("click" , function(event) {
event.preventDefault();
// masque la popin
$("#form_media").fadeOut('fast');
@ -472,6 +559,7 @@ $(document).ready(function() {
drPlugin.selfDestroy(); drPlugin = null; // on détruit le plugin de retouche
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
// ---- Stop la vidéo ou le son si présent
if($(".tab_preview video").length){
$(".tab_preview video").get(0).pause()
@ -479,7 +567,6 @@ $(document).ready(function() {
if($(".tab_preview audio").length){
$(".tab_preview audio").get(0).pause()
}
$(".tab_edit .tab_content").scrollTop( 0 ); // on remonte la scrollbar de la tab edition
});
// ---- gestion des onglets de la popup d'édition
@ -492,6 +579,8 @@ $(document).ready(function() {
$("#form_media .main_content .tab").removeClass('active');
$("#form_media .main_content .tab").eq(tabId).addClass('active');
$(".tab_edit .tab_content").scrollTop( 0 ); // on remonte la scrollbar de la tab edition
// ---- Stop la vidéo ou le son si présent
if($(".tab_preview video").length){
$(".tab_preview video").get(0).pause()
@ -501,65 +590,14 @@ $(document).ready(function() {
}
});
// ---- gère la sélection des éléments
var lastSelected ;
$("html").on("click", ".imageItem", function(event) {
event.preventDefault();
$(".imageItem").removeClass('flip');
if(event.ctrlKey){
if($(this).attr("aria-grabbed") == "true"){
$(this).attr("aria-grabbed", "false");
}else{
$(this).attr("aria-grabbed", "true");
}
lastSelected = $(this);
}else if(event.shiftKey){
var select;
if(lastSelected == null){
lastSelected = $(this);
select = true
}else{
select = lastSelected.attr("aria-grabbed");
}
$(".imageItem").attr("aria-grabbed", "false");
var imageItem = $(".imageItem");
var last = imageItem.index(lastSelected);
var first = imageItem.index( $(this));
var start = Math.min(first, last);
var end = Math.max(first, last);
for (var i = start; i <= end; i++) {
imageItem.eq(i).attr("aria-grabbed", select);
}
}else{
if($(this).attr("aria-grabbed") == "true"){
$(".imageItem").attr("aria-grabbed", "false");
}else{
$(".imageItem").attr("aria-grabbed", "false");
$(this).attr("aria-grabbed", "true");
}
lastSelected = $(this);
}
// ---- sauvegarde de la popup d'édition
$(".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');
});
// ---- Gestion de l'infinite scroll
$(".main_content .media_container").on("scroll resize", function() {
if ($(window).data('ajaxready') == false) return;
if ($(window).data('noMedia') == true) return;
if( ($(".media_container").scrollTop() + $(".media_container").height() ) == $(".media_container .wrapper").height() ) {
$(window).data('ajaxready', false);
var sujet_id = $("#sujet_selector").val();
var dossier_id = $(".currentFolder").val();
loadMedia(dossier_id, sujet_id);
}
});
/******************************
Edition d'un média
**********************************/
/******************************
Upload de média
**********************************/
@ -859,7 +897,12 @@ function loadMedia(dossier_id, sujet_id){
break;
case 5:
ico = '<i class="fas fa-file"></i>';
itemClass = "doc";
if(item.extension = "pdf"){
thumb = item.source.split('.')[0]+"_thumb.jpg";
preview = item.source.split('.')[0]+"_preview.jpg";
}else{
itemClass = "doc";
}
break;
default:

1
resources/sass/app.scss vendored
View file

@ -11,6 +11,7 @@
'partials/fontawesome/brands.scss',
'partials/fileupload.scss',
'partials/darkroom.scss',
'partials/tag-editor.scss',
'partials/common.scss',
'partials/form.scss',
'partials/media.scss',

102
resources/sass/partials/darkroom.scss vendored Normal file
View file

@ -0,0 +1,102 @@
.darkroom-container {
position: relative
}
.darkroom-image-container {
top: 0;
left: 0
}
#darkroom-icons{
display: none;
}
.darkroom-toolbar {
display: block;
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
background: #444;
height: 40px;
min-width: 40px;
z-index: 99;
border-radius: 2px;
white-space: nowrap;
padding: 0 5px
}
/*
.darkroom-toolbar:before {
content: "";
position: absolute;
bottom: -7px;
left: 20px;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #444
}
*/
.darkroom-button-group {
display: inline-block;
margin: 0;
padding: 0
}
.darkroom-button-group:last-child {
border-right: none
}
.darkroom-button {
box-sizing: border-box;
background: transparent;
border: none;
outline: none;
padding: 2px 0 0 0;
width: 40px;
height: 40px
}
.darkroom-button:hover {
cursor: pointer;
background: #555
}
.darkroom-button:active {
cursor: pointer;
background: #333
}
.darkroom-button:disabled .darkroom-icon {
fill: #666
}
.darkroom-button:disabled:hover {
cursor: default;
background: transparent
}
.darkroom-button.darkroom-button-active .darkroom-icon {
fill: #33b5e5
}
.darkroom-button.darkroom-button-hidden {
display: none
}
.darkroom-button.darkroom-button-success .darkroom-icon {
fill: #99cc00
}
.darkroom-button.darkroom-button-warning .darkroom-icon {
fill: #FFBB33
}
.darkroom-button.darkroom-button-danger .darkroom-icon {
fill: #FF4444
}
.darkroom-icon {
width: 24px;
height: 24px;
fill: #fff
}

15
resources/sass/partials/form.scss vendored
View file

@ -135,10 +135,10 @@ h3{
table{
width: 100%;
background-color: $dark;
background-color: $grey;
th{
background-color: $lightdark;
background-color: $grey3;
font-weight: bold;
color: $white;
}
@ -153,13 +153,20 @@ table{
}
tr{
border-bottom: 1px solid #505050;
&:nth-child(even){
background-color: $grey3;
}
&:hover{
background-color: $lightdark;
background-color: rgba(46, 168, 229, 0.2);
}
}
tfoot tr{
background-color: $lightdark;
background-color: $grey3;
border: none;
&:hover{
background-color: $grey3;
}
}
}

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

@ -499,7 +499,42 @@
width: 100%;
padding: 8px 50px;
text-align: right;
background-color: $lightdark;
}
.cloud_tag_plugin{
position: relative;
}
table td{
padding: 9px 7px;
text-align: left;
}
}
&.tab_links{
table{
margin: 0 auto;
width: 950px;
}
th{
&:first-child{
width: 270px;
}
}
i{
font-size: 18px;
margin-left: 10px;
color: $white;
cursor: pointer;
}
input{
width: 625px;
}
}
&.tab_history {
table{
margin: 0 auto;
width: 950px;
}
}
&.active{
@ -519,7 +554,7 @@
display: block;
text-align: center;
}
.row{
.row, .row_xl{
display: flex;
flex-direction: column;
width: 530px;
@ -534,7 +569,9 @@
font-size: 14px;
}
}
}
.row_xl{
width: 100%;
}
}

45
resources/sass/partials/tag-editor.scss vendored Normal file
View file

@ -0,0 +1,45 @@
/* surrounding tag container */
.tag-editor {
list-style-type: none; padding: 0 5px 0 0; margin: 0; overflow: hidden; border: 1px solid #eee; cursor: text;
font: normal 14px sans-serif; color: #555; background: #fff; line-height: 20px;
}
/* core styles usually need no change */
.tag-editor li { display: block; float: left; overflow: hidden; margin: 3px 0; }
.tag-editor div { float: left; padding: 0 4px; }
.tag-editor .placeholder { padding: 0 8px; color: #bbb; }
.tag-editor .tag-editor-spacer { padding: 0; width: 8px; overflow: hidden; color: transparent; background: none; }
.tag-editor input {
vertical-align: inherit; border: 0; outline: none; padding: 0; margin: 0; cursor: text;
font-family: inherit; font-weight: inherit; font-size: inherit; font-style: inherit;
box-shadow: none; background: none; color: #444;
}
/* hide original input field or textarea visually to allow tab navigation */
.tag-editor-hidden-src { position: absolute !important; left: -99999px; }
/* hide IE10 "clear field" X */
.tag-editor ::-ms-clear { display: none; }
/* tag style */
.tag-editor .tag-editor-tag {
padding-left: 5px; color: #fff; background: #555; white-space: nowrap;
overflow: hidden; cursor: pointer; border-radius: 2px 0 0 2px;
}
/* delete icon */
.tag-editor .tag-editor-delete { background: #555; cursor: pointer; border-radius: 0 2px 2px 0; padding-left: 3px; padding-right: 4px; }
.tag-editor .tag-editor-delete i { line-height: 18px; display: inline-block; }
.tag-editor .tag-editor-delete i:before { font-size: 16px; color: #fff; content: "×"; font-style: normal; }
.tag-editor .tag-editor-delete:hover i:before { color: #d65454; }
.tag-editor .tag-editor-tag.active+.tag-editor-delete, .tag-editor .tag-editor-tag.active+.tag-editor-delete i { visibility: hidden; cursor: text; }
.tag-editor .tag-editor-tag.active { background: none !important; }
/* jQuery UI autocomplete - code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css */
.ui-autocomplete { position: absolute; top: 0; left: 0; cursor: default; font-size: 14px; }
.ui-front { z-index: 9999; }
.ui-menu { list-style: none; padding: 1px; margin: 0; display: block; outline: none; }
.ui-menu .ui-menu-item a { text-decoration: none; display: block; padding: 2px .4em; line-height: 1.4; min-height: 0; /* support: IE7 */ }
.ui-widget-content { border: 1px solid #bbb; background: #fff; color: #555; }
.ui-widget-content a { color: #46799b; }
.ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { background: #e0eaf1; }
.ui-helper-hidden-accessible { display: none; }

239
resources/views/layouts/media_edit.blade.php Normal file
View file

@ -0,0 +1,239 @@
@section('media_edit')
<div id="form_media" style="display: none;" >
<header class="group">
<a href="#" class="tabbtn form_media_preview active" data-tab="0">Aperçu</a>
<a href="#" class="tabbtn form_media_edit" data-tab="1">Edition</a>
<a href="#" class="tabbtn form_media_retouch" data-tab="2">Retouche</a>
<a href="#" class="tabbtn form_media_links" data-tab="3">Vignettes</a>
<a href="#" class="tabbtn form_media_history" data-tab="4">Historique</a>
<a href="#" class="form_media_close"><i class="fal fa-times"></i></a>
</header>
<div class="main_content">
<input type="hidden" class="preview_img" name="" value="">
<div class="tab tab_preview active"></div>
<div class="tab tab_edit">
<div class="tab_content">
<div class="wrapper">
<h3>Informations générales</h3>
<div class="row">
<label for="codearcadia">Code Arcadia</label>
<input type="text" value="" name="codearcadia" disabled >
</div>
<div class="row">
<label for="libelle">Intitulé <span>*</span></label>
<input type="text" value="" name="libelle" required >
</div>
<div class="row">
<label for="typesujet">Type de sujet</label>
<input type="text" value="Visuel article" name="typesujet" disabled >
</div>
<div class="row">
<label for="typevue">Type de vue</label>
<select class="" name="typevue">
<option value="">Vue de face</option>
</select>
</div>
<div class="row">
<label for="typemedia">Type de média</label>
<select class="" name="typemedia">
<option value="">Photo</option>
</select>
</div>
<div class="row">
<label for="typevariante">Type de variante</label>
<select class="" name="typevariante">
<option value="">Permanent</option>
</select>
</div>
<div class="row">
<label for="langue">Langue</label>
<select class="" name="langue">
<option value="">Français</option>
</select>
</div>
<div class="row">
<label for="commentaire">Commentaire</label>
<textarea name="commentaire" ></textarea>
</div>
<div class="row">
<label for="version">Version</label>
<input type="text" value="" name="version" disabled >
</div>
<div class="row">
<label for="datecreation">Date de création</label>
<input type="text" value="" name="datecreation" disabled >
</div>
<div class="row">
<label for="datemodification">Date de modification</label>
<input type="text" value="" name="datemodification" disabled >
</div>
<div class="row">
<label for="datepublication">Date de publication</label>
<input type="text" value="" name="datepublication" disabled >
</div>
</div>
<div class="wrapper">
<h3>Informations liées au sujet</h3>
<div class="row_xl">
<label for="tag">Articles associées</label>
<div class="article_selector">
<table>
<thead>
<tr>
<th>No Article</th>
<th>Famille Vente</th>
<th>Marque</th>
<th>Gencod Administratif</th>
<th>Gencod Symbolise</th>
<th>Gencod Poids</th>
<th></th>
</tr>
</thead>
<tr>
<td>94073 : 2 QUICHE 3 FROM FAB.M FE 6X300G</td>
<td>188 : QUICHE - TOURTE - TARTE</td>
<td>44 : NEUTRE groupe LDC (produit pr gms)</td>
<td>3366760035766</td>
<td></td>
<td></td>
<td><i class="far fa-times"></i></td>
</tr>
<tr>
<td>94073 : 2 QUICHE 3 FROM FAB.M FE 6X300G</td>
<td>188 : QUICHE - TOURTE - TARTE</td>
<td>44 : NEUTRE groupe LDC (produit pr gms)</td>
<td>3366760035766</td>
<td></td>
<td></td>
<td><i class="far fa-times"></i></td>
</tr>
<tfoot>
<tr><td colspan="7"></td></tr>
</tfoot>
</table><br/>
<button class="btn btn-black btn-square floatr" type="button" name="button"><i class="far fa-plus"></i> Ajouter</button>
</div>
</div>
</div>
<div class="wrapper">
<h3>Tags & étiquettes</h3>
<div class="row">
<label for="tag">Nuage de tags</label>
<div class="cloud_tag_plugin">
<textarea id="tag-editor"></textarea>
</div>
</div>
<div class="row">
<label for="etiquette">Etiquette</label>
<select class="" name="etiquette">
<option value="">Validé</option>
</select>
</div>
</div>
<div class="wrapper">
<h3>Informations techniques</h3>
<div class="row">
<label for="extension">Extension</label>
<input type="text" value="" name="extension" disabled >
</div>
<div class="row">
<label for="copyright">Copyright</label>
<select class="" name="copyright">
<option value="">Aucun</option>
</select>
</div>
<div class="row">
<label for="largeur">Largeur</label>
<input type="text" value="" name="largeur" >
</div>
<div class="row">
<label for="hauteur">Hauteur</label>
<input type="text" value="" name="hauteur" >
</div>
<div class="row">
<label for="resolution">Résolution</label>
<input type="text" value="" name="resolution" >
</div>
<div class="row">
<label for="largeurmm">Largeur en mm</label>
<input type="text" value="" name="largeurmm" >
</div>
<div class="row">
<label for="hauteurmm">Hauteur en mm</label>
<input type="text" value="" name="hauteurmm" >
</div>
</div>
</div>
<div class="button_bar">
<a href="#" class="btn btn-black mr-10 btn_tab_edit_cancel">Annuler</a> <button class="btn btn_tab_edit_save" type="button" name="button">Sauvegarder</button>
</div>
</div>
<div class="tab tab_retouch"></div>
<div class="tab tab_links">
<div class="tab_content">
<div class="wrapper">
<h3>Liens vers les vignettes</h3>
<table>
<tr>
<th>FORMAT</th>
<th>URL</th>
</tr>
<tr>
<td>Format original jpg 2683 x 1958 px</td>
<td><input type="text" readonly value="https://dam.ldc.test/medias/5cf67c1be9343/63ab8f4d-4c6d-4c3f-b8d8-beacc9b0ad93_preview.jpg" name="" ><i class="fal fa-copy"></i></td>
</tr>
<tr>
<td>Format pré-généré jpg 1900 x 1387 px</td>
<td><input type="text" readonly value="https://dam.ldc.test/medias/5cf67c1be9343/63ab8f4d-4c6d-4c3f-b8d8-beacc9b0ad93_preview.jpg" name="" ><i class="fal fa-copy"></i></td>
</tr>
<tr>
<td>Format pré-généré jpg 607 x 443 px</td>
<td><input type="text" readonly value="https://dam.ldc.test/medias/5cf67c1be9343/63ab8f4d-4c6d-4c3f-b8d8-beacc9b0ad93_preview.jpg" name="" ><i class="fal fa-copy"></i></td>
</tr>
<tr>
<td>Format pré-généré jpg 224 x 163 px</td>
<td><input type="text" readonly value="https://dam.ldc.test/medias/5cf67c1be9343/63ab8f4d-4c6d-4c3f-b8d8-beacc9b0ad93_preview.jpg" name="" ><i class="fal fa-copy"></i></td>
</tr>
<tr>
<td>Format pré-généré jpg 112 x 82 px</td>
<td><input type="text" readonly value="https://dam.ldc.test/medias/5cf67c1be9343/63ab8f4d-4c6d-4c3f-b8d8-beacc9b0ad93_preview.jpg" name="" ><i class="fal fa-copy"></i></td>
</tr>
<tfoot>
<tr>
<td colspan="2">
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<div class="tab tab_history">
<div class="tab_content">
<div class="wrapper">
<h3>Historique des actions</h3>
<table>
<tr>
<th>DATE</th>
<th>UTILISATEUR</th>
<th>TYPE</th>
<th>COMMENTAIRE</th>
</tr>
<tr><td>02/05/2019 10:02</td><td>Sandrine Bellaud</td><td>Ajout</td><td>création du média</td></tr>
<tr><td>03/05/2019 09:20</td><td>Nicolas Mitavu</td><td>Modification</td><td>Modification des informations</td></tr>
<tr><td>05/05/2019 15:30</td><td>Nicolas Mitavu</td><td>Etiquette</td><td>Etiquette "A valider"</td></tr>
<tr><td>05/05/2019 15:48</td><td>Sandrine Bellaud</td><td>Etiquette</td><td>Etiquette "valider"</td></tr>
<tr><td>06/05/2019 11:36</td><td>Blandine Durand</td><td>Arcadia</td><td>Ajout au référentiel</td></tr>
<tfoot>
<tr>
<td colspan="4">
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
@endsection

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

@ -110,4 +110,6 @@
<script src="{{ asset('js/fabric.js') }}"></script>
<script src="{{ asset('js/darkroom.js') }}"></script>
<script src="{{ asset('js/openseadragon.min.js') }}"></script>
<script src="{{ asset('js/jquery.caret.min.js') }}"></script>
<script src="{{ asset('js/jquery.tag-editor.min.js') }}"></script>
@endsection