front : retouche et preview de média
This commit is contained in:
Yann Gonidec
parent
18e62666f4
commit
035e72cc02
10 changed files with 785 additions and 287 deletions
|
|
@ -112,9 +112,14 @@ class UploadController extends Controller {
|
|||
$media->hauteur = $height;
|
||||
$media->resolution = $this->get_dpi($destinationPath.$filename);
|
||||
$this->createThumbnail($destinationPath.$filename, $destinationPath.$uid.'_thumb.'.$extension, 200);
|
||||
if($width >= 1500){
|
||||
$this->createThumbnail($destinationPath.$filename, $destinationPath.$uid.'_preview.'.$extension, 1500);
|
||||
}else{
|
||||
$this->createThumbnail($destinationPath.$filename, $destinationPath.$uid.'_preview.'.$extension, $width);
|
||||
}
|
||||
|
||||
break;
|
||||
// Illustration/Vectorielle (2)
|
||||
case 'ai':
|
||||
case 'svg':
|
||||
$media->typemedia_id = 2;
|
||||
break;
|
||||
|
|
@ -137,6 +142,7 @@ class UploadController extends Controller {
|
|||
}
|
||||
break;
|
||||
// Document (5)
|
||||
case 'ai':
|
||||
case 'eps':
|
||||
case 'indd':
|
||||
case 'pdf':
|
||||
|
|
|
|||
|
|
@ -119,7 +119,8 @@ trait MediaTools {
|
|||
],
|
||||
1 => [
|
||||
'load' => 'imagecreatefromgif',
|
||||
'save' => 'imagegif'
|
||||
'save' => 'imagegif',
|
||||
'quality' => 0
|
||||
]
|
||||
];
|
||||
|
||||
|
|
|
|||
199
public/css/app.css
vendored
199
public/css/app.css
vendored
|
|
@ -12141,7 +12141,7 @@ readers do not read off random characters that represent icons */
|
|||
font-weight: 900;
|
||||
font-display: auto;
|
||||
src: url(/fonts/fa-solid-900.eot?11823289c2cdeaf2415c76be9c5e4a09);
|
||||
src: url(/fonts/fa-solid-900.eot?11823289c2cdeaf2415c76be9c5e4a09?#iefix) format("embedded-opentype"), url(/fonts/fa-solid-900.woff2?e57324a466c24a207fd9ad0f5f5e3c9c) format("woff2"), url(/fonts/fa-solid-900.woff?6a9e75ccf66ab99b14f2873840cfc01d) format("woff"), url(/fonts/fa-solid-900.ttf?ff4aabff5dc839470245d1e5043bdd51) format("truetype"), url(/fonts/fa-solid-900.svg?506bcfeaad71580149d11c8fb36af219#fontawesome) format("svg");
|
||||
src: url(/fonts/fa-solid-900.eot?11823289c2cdeaf2415c76be9c5e4a09?#iefix) format("embedded-opentype"), url(/fonts/fa-solid-900.woff2?e57324a466c24a207fd9ad0f5f5e3c9c) format("woff2"), url(/fonts/fa-solid-900.woff?6a9e75ccf66ab99b14f2873840cfc01d) format("woff"), url(/fonts/fa-solid-900.ttf?ff4aabff5dc839470245d1e5043bdd51) format("truetype"), url(/fonts/fa-solid-900.svg?682b2706dced408296098e9706de6044#fontawesome) format("svg");
|
||||
}
|
||||
|
||||
.fa,
|
||||
|
|
@ -12161,7 +12161,7 @@ readers do not read off random characters that represent icons */
|
|||
font-weight: 400;
|
||||
font-display: auto;
|
||||
src: url(/fonts/fa-regular-400.eot?df3024c0f2d296c59947567afffb0a3b);
|
||||
src: url(/fonts/fa-regular-400.eot?df3024c0f2d296c59947567afffb0a3b?#iefix) format("embedded-opentype"), url(/fonts/fa-regular-400.woff2?8cfe82e8c97df9ab3f52ac86af21230d) format("woff2"), url(/fonts/fa-regular-400.woff?239abe3e583864d4ab3d27c34ac37cc6) format("woff"), url(/fonts/fa-regular-400.ttf?bd86e53df8c36e22fbba9d4e60e3c632) format("truetype"), url(/fonts/fa-regular-400.svg?416d58293e221c2b4b8f34c1531d5dfd#fontawesome) format("svg");
|
||||
src: url(/fonts/fa-regular-400.eot?df3024c0f2d296c59947567afffb0a3b?#iefix) format("embedded-opentype"), url(/fonts/fa-regular-400.woff2?8cfe82e8c97df9ab3f52ac86af21230d) format("woff2"), url(/fonts/fa-regular-400.woff?239abe3e583864d4ab3d27c34ac37cc6) format("woff"), url(/fonts/fa-regular-400.ttf?bd86e53df8c36e22fbba9d4e60e3c632) format("truetype"), url(/fonts/fa-regular-400.svg?e95c8bc29ba207aefff8fecc74b04c50#fontawesome) format("svg");
|
||||
}
|
||||
|
||||
.far {
|
||||
|
|
@ -12180,7 +12180,7 @@ readers do not read off random characters that represent icons */
|
|||
font-weight: 300;
|
||||
font-display: auto;
|
||||
src: url(/fonts/fa-light-300.eot?a06baf702fb4e2a21830fa7dfa71c0dc);
|
||||
src: url(/fonts/fa-light-300.eot?a06baf702fb4e2a21830fa7dfa71c0dc?#iefix) format("embedded-opentype"), url(/fonts/fa-light-300.woff2?20bbccf14518922fa95a440f4c217d9e) format("woff2"), url(/fonts/fa-light-300.woff?1008b6dd09c8b71b65e7c449bf881d90) format("woff"), url(/fonts/fa-light-300.ttf?7f384302d16d8bf29d1549de26d0153d) format("truetype"), url(/fonts/fa-light-300.svg?9969a9da0ab8636ad1a428b3838757d4#fontawesome) format("svg");
|
||||
src: url(/fonts/fa-light-300.eot?a06baf702fb4e2a21830fa7dfa71c0dc?#iefix) format("embedded-opentype"), url(/fonts/fa-light-300.woff2?20bbccf14518922fa95a440f4c217d9e) format("woff2"), url(/fonts/fa-light-300.woff?1008b6dd09c8b71b65e7c449bf881d90) format("woff"), url(/fonts/fa-light-300.ttf?7f384302d16d8bf29d1549de26d0153d) format("truetype"), url(/fonts/fa-light-300.svg?de9c5fd90497bb10df2c47dc3470384e#fontawesome) format("svg");
|
||||
}
|
||||
|
||||
.fal {
|
||||
|
|
@ -12199,7 +12199,7 @@ readers do not read off random characters that represent icons */
|
|||
font-weight: normal;
|
||||
font-display: auto;
|
||||
src: url(/fonts/fa-brands-400.eot?72721167aea128f7ddac301c15dab835);
|
||||
src: url(/fonts/fa-brands-400.eot?72721167aea128f7ddac301c15dab835?#iefix) format("embedded-opentype"), url(/fonts/fa-brands-400.woff2?68c177c286c34e1b7b975807dd5d9ed0) format("woff2"), url(/fonts/fa-brands-400.woff?fb481cb3c3d44b2d16d38e93ef118f9a) format("woff"), url(/fonts/fa-brands-400.ttf?29e1f75381d3efde65c48168ebe5c403) format("truetype"), url(/fonts/fa-brands-400.svg?f77645622015337d638b8a3d6266fe43#fontawesome) format("svg");
|
||||
src: url(/fonts/fa-brands-400.eot?72721167aea128f7ddac301c15dab835?#iefix) format("embedded-opentype"), url(/fonts/fa-brands-400.woff2?68c177c286c34e1b7b975807dd5d9ed0) format("woff2"), url(/fonts/fa-brands-400.woff?fb481cb3c3d44b2d16d38e93ef118f9a) format("woff"), url(/fonts/fa-brands-400.ttf?29e1f75381d3efde65c48168ebe5c403) format("truetype"), url(/fonts/fa-brands-400.svg?899ccc90ee651cbda357c41695739d9f#fontawesome) format("svg");
|
||||
}
|
||||
|
||||
.fab {
|
||||
|
|
@ -12383,6 +12383,114 @@ readers do not read off random characters that represent icons */
|
|||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.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%;
|
||||
-webkit-transform: translateX(-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;
|
||||
}
|
||||
|
||||
/******************************************
|
||||
HEADER
|
||||
******************************************/
|
||||
|
|
@ -13083,6 +13191,12 @@ h1 {
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #ffffff;
|
||||
font-size: 17px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.filter_row {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
@ -13682,6 +13796,7 @@ table tfoot tr {
|
|||
#form_media header a:hover,
|
||||
#form_media header a.active {
|
||||
background-color: #272626;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#form_media header .form_media_close {
|
||||
|
|
@ -13718,14 +13833,90 @@ table tfoot tr {
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
#form_media .main_content {
|
||||
height: calc(100% - 43px);
|
||||
}
|
||||
|
||||
#form_media .main_content .tab {
|
||||
height: 100%;
|
||||
display: none;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#form_media .main_content .tab.tab_preview {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#form_media .main_content .tab.tab_preview .controlDiv > div {
|
||||
margin: 0 7px !important;
|
||||
}
|
||||
|
||||
#form_media .main_content .tab.tab_preview audio,
|
||||
#form_media .main_content .tab.tab_preview video {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
#form_media .main_content .tab.tab_preview .svgElt {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#form_media .main_content .tab.tab_edit .tab_content {
|
||||
overflow: auto;
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
#form_media .main_content .tab.tab_edit .button_bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 8px 50px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#form_media .main_content .tab.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#form_media .main_content .tab .wrapper {
|
||||
width: 100%;
|
||||
padding: 30px 10px;
|
||||
}
|
||||
|
||||
#form_media .main_content .tab .wrapper:nth-child(even) {
|
||||
background-color: #3b3b3b;
|
||||
}
|
||||
|
||||
#form_media .main_content .tab .wrapper h3 {
|
||||
margin-bottom: 25px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#form_media .main_content .tab .wrapper .row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 530px;
|
||||
margin: 0 auto 15px auto;
|
||||
}
|
||||
|
||||
#form_media .main_content .tab .wrapper .row label {
|
||||
margin-bottom: 10px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#form_media .main_content .tab .wrapper .row label span {
|
||||
color: #e3342f;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/******************************************
|
||||
PAGE LOGIN
|
||||
******************************************/
|
||||
|
|
|
|||
360
public/js/app.js
vendored
360
public/js/app.js
vendored
|
|
@ -11066,11 +11066,14 @@ $(".form_contact_send").on('click', function (event) {
|
|||
/***/ (function(module, exports) {
|
||||
|
||||
$(document).ready(function () {
|
||||
// ---- Gestion des média : init des dossiers
|
||||
/******************************
|
||||
Liste des dossiers
|
||||
**********************************/
|
||||
// ---- init des dossiers
|
||||
if ($(".media_manager").length) {
|
||||
var sujetId = $("#sujet_selector").val();
|
||||
if (sujetId != "") initFolderManager(sujetId);
|
||||
} // ---- Gestion des média : collapse/expand side menu
|
||||
} // ---- collapse/expand side menu
|
||||
|
||||
|
||||
$(".close_side_menu").on('click', function (event) {
|
||||
|
|
@ -11085,14 +11088,14 @@ $(document).ready(function () {
|
|||
$(".close_side_menu i").removeClass('fa-chevron-left');
|
||||
$(".close_side_menu i").addClass('fa-chevron-right');
|
||||
}
|
||||
}); // ---- Gestion des média : init des dossiers lorsqu'on change de sujet
|
||||
}); // ---- init des dossiers lorsqu'on change de sujet
|
||||
|
||||
$("#sujet_selector").on('change', function (event) {
|
||||
var sujetId = $("#sujet_selector").val();
|
||||
if (sujetId != "") $('.dd').nestable('destroy');
|
||||
$(".currentFolder").val(0);
|
||||
initFolderManager(sujetId);
|
||||
}); // ---- Gestion des média : sélectionner un dossier et favoris
|
||||
}); // ---- sélectionner un dossier et favoris
|
||||
|
||||
$(".folder_container").on('click', '.dd3-content', function (e) {
|
||||
e.preventDefault();
|
||||
|
|
@ -11130,7 +11133,7 @@ $(document).ready(function () {
|
|||
$(window).data('offset', 0);
|
||||
loadMedia(dossier_id, sujet_id);
|
||||
}
|
||||
}); // ---- Gestion des média : sélectionner la racine
|
||||
}); // ---- sélectionner la racine
|
||||
|
||||
$(".folder_container").on('click', '.root_folder', function (event) {
|
||||
event.preventDefault();
|
||||
|
|
@ -11140,7 +11143,7 @@ $(document).ready(function () {
|
|||
var sujetId = $("#sujet_selector").val();
|
||||
$(window).data('offset', 0);
|
||||
loadMedia(0, sujetId);
|
||||
}); // ---- Gestion des média : menu contextuel des dossiers
|
||||
}); // ---- menu contextuel des dossiers
|
||||
|
||||
$(".folder_container").on('contextmenu', '.dd3-content', function (event) {
|
||||
event.preventDefault(); // placement du menu
|
||||
|
|
@ -11160,7 +11163,7 @@ $(document).ready(function () {
|
|||
}
|
||||
|
||||
$(".folder_container .folder_menu").show();
|
||||
}); // ---- Gestion des média : ajouter un dossier
|
||||
}); // ---- ajouter un dossier
|
||||
|
||||
$(".folder_menu").on('click', '.addItem', function (event) {
|
||||
event.preventDefault();
|
||||
|
|
@ -11200,7 +11203,7 @@ $(document).ready(function () {
|
|||
});
|
||||
}
|
||||
});
|
||||
}); // ---- Gestion des média : supprimer un dossier
|
||||
}); // ---- supprimer un dossier
|
||||
|
||||
$(".folder_menu").on('click', '.removeItem', function (event) {
|
||||
event.preventDefault();
|
||||
|
|
@ -11247,7 +11250,7 @@ $(document).ready(function () {
|
|||
type: "error"
|
||||
});
|
||||
}
|
||||
}); // ---- Gestion des média : renommer un dossier
|
||||
}); // ---- renommer un dossier
|
||||
|
||||
$(".folder_menu").on('click', '.renameItem', function (event) {
|
||||
event.preventDefault();
|
||||
|
|
@ -11294,7 +11297,7 @@ $(document).ready(function () {
|
|||
}
|
||||
});
|
||||
}
|
||||
}); // ---- Gestion des média : propriétés d'un dossier
|
||||
}); // ---- propriétés d'un dossier
|
||||
|
||||
$(".folder_menu").on('click', '.propertyItem', function (event) {
|
||||
event.preventDefault();
|
||||
|
|
@ -11335,7 +11338,7 @@ $(document).ready(function () {
|
|||
});
|
||||
}
|
||||
});
|
||||
}); // ---- Gestion des média : enregistre les propriétés d'un dossier
|
||||
}); // ---- enregistre les propriétés d'un dossier
|
||||
|
||||
$("html").on('click', '.form_folder_save', function (event) {
|
||||
event.preventDefault();
|
||||
|
|
@ -11364,101 +11367,7 @@ $(document).ready(function () {
|
|||
});
|
||||
}
|
||||
});
|
||||
}); // ---- Gestion des média : au début du drag, set les valeurs des éléments draggés
|
||||
|
||||
$("html").on("dragstart", ".imageItem", function (event) {
|
||||
var datavalue = [];
|
||||
|
||||
if ($(this).attr("aria-grabbed") == "true") {
|
||||
$(".imageItem").each(function (index, el) {
|
||||
if ($(this).attr("aria-grabbed") == "true") {
|
||||
datavalue.push($(this).attr("data-id"));
|
||||
}
|
||||
});
|
||||
event.originalEvent.dataTransfer.setData('Text', datavalue);
|
||||
} else {
|
||||
$(".imageItem").attr("aria-grabbed", "false");
|
||||
$(this).attr("aria-grabbed", "true");
|
||||
event.originalEvent.dataTransfer.setData('Text', $(this).attr("data-id"));
|
||||
}
|
||||
}); // ---- Gestion des média : déselectionne les éléments si on clique en dehors
|
||||
|
||||
$(".main_content .wrapper").on("click", function (event) {
|
||||
if (event.target !== this) return;
|
||||
$(".imageItem").attr("aria-grabbed", "false");
|
||||
$(".imageItem").removeClass('flip');
|
||||
}); // ---- Gestion des média : clique droit sur un média
|
||||
|
||||
$(".main_content .wrapper").on("contextmenu", '.imageItem', function (event) {
|
||||
event.preventDefault();
|
||||
$(".imageItem").removeClass('flip');
|
||||
$(this).addClass('flip');
|
||||
}); // ---- Edition des média : double-clique sur un média
|
||||
|
||||
$(".main_content .wrapper").on("dblclick", '.imageItem', function (event) {
|
||||
event.preventDefault();
|
||||
$(window).data('current_edit_media', $(this).attr('data-id'));
|
||||
$("#form_media").fadeIn('fast');
|
||||
}); // ---- Edition des média : fermeture de la popup
|
||||
|
||||
$(".form_media_close").on("click", function (event) {
|
||||
event.preventDefault();
|
||||
$("#form_media").fadeOut('fast');
|
||||
}); // ---- Edition des média : gestion des onglets
|
||||
|
||||
$("#form_media .tabbtn").on("click", function (event) {
|
||||
event.preventDefault();
|
||||
var tabId = $(this).attr("data-tab");
|
||||
$("#form_media .tabbtn").removeClass('active');
|
||||
$(this).addClass('active');
|
||||
$("#form_media .main_content .tab").removeClass('active');
|
||||
$("#form_media .main_content .tab").eq(tabId).addClass('active');
|
||||
}); // ---- Gestion des média : 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);
|
||||
}
|
||||
}); // ---- Gestion des média : affichage des dossiers on draghover
|
||||
}); // ---- affichage des dossiers on draghover
|
||||
|
||||
$(".folder_container").on("dragover", ".dd3-content, .root_folder", function (event) {
|
||||
event.preventDefault();
|
||||
|
|
@ -11466,14 +11375,14 @@ $(document).ready(function () {
|
|||
$(".folder_container .dd3-content").removeClass('dragged');
|
||||
$(".folder_container .root_folder").removeClass('dragged');
|
||||
$(this).addClass('dragged');
|
||||
}); // ---- Gestion des média : affichage des dossiers on dragleave
|
||||
}); // ---- affichage des dossiers on dragleave
|
||||
|
||||
$(".folder_container").on("dragleave", ".dd3-content, .root_folder", function (event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$(".folder_container .dd3-content").removeClass('dragged');
|
||||
$(".folder_container .root_folder").removeClass('dragged');
|
||||
}); // ---- Gestion des média : evt lorsque l'on drop des élements dans un dossier
|
||||
}); // ---- evt lorsque l'on drop des élements dans un dossier
|
||||
|
||||
$(".folder_container").on("drop", ".dd3-content, .root_folder", function (event) {
|
||||
event.preventDefault();
|
||||
|
|
@ -11532,6 +11441,207 @@ $(document).ready(function () {
|
|||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
/******************************
|
||||
Gestion des médias
|
||||
**********************************/
|
||||
// ---- au début du drag, set les valeurs des éléments draggés
|
||||
|
||||
$("html").on("dragstart", ".imageItem", function (event) {
|
||||
var datavalue = [];
|
||||
|
||||
if ($(this).attr("aria-grabbed") == "true") {
|
||||
$(".imageItem").each(function (index, el) {
|
||||
if ($(this).attr("aria-grabbed") == "true") {
|
||||
datavalue.push($(this).attr("data-id"));
|
||||
}
|
||||
});
|
||||
event.originalEvent.dataTransfer.setData('Text', datavalue);
|
||||
} else {
|
||||
$(".imageItem").attr("aria-grabbed", "false");
|
||||
$(this).attr("aria-grabbed", "true");
|
||||
event.originalEvent.dataTransfer.setData('Text', $(this).attr("data-id"));
|
||||
}
|
||||
}); // ---- déselectionne les éléments si on clique en dehors
|
||||
|
||||
$(".main_content .wrapper").on("click", function (event) {
|
||||
if (event.target !== this) return;
|
||||
$(".imageItem").attr("aria-grabbed", "false");
|
||||
$(".imageItem").removeClass('flip');
|
||||
}); // ---- clique droit sur un média
|
||||
|
||||
$(".main_content .wrapper").on("contextmenu", '.imageItem', function (event) {
|
||||
event.preventDefault();
|
||||
$(".imageItem").removeClass('flip');
|
||||
$(this).addClass('flip');
|
||||
}); // ---- double-clique sur un média
|
||||
|
||||
var drPlugin = null;
|
||||
var viewer = null;
|
||||
$(".main_content .wrapper").on("dblclick", '.imageItem', function (event) {
|
||||
event.preventDefault();
|
||||
var minWidth = $(document).width();
|
||||
var minHeight = $(document).height() - 43 - 40; // Mémorise le média courant
|
||||
|
||||
$(window).data('current_edit_media', $(this).attr('data-id')); // sélectionne la tab preview à l'ouverture
|
||||
|
||||
$("#form_media .form_media_preview").trigger("click");
|
||||
|
||||
if ($(this).attr('data-typemedia') == 1) {
|
||||
// média image
|
||||
$("#form_media .form_media_retouch").show(); // on active l'onglet ressource
|
||||
// charge l'image de preview
|
||||
|
||||
$(".preview_img").val($(this).attr('data-preview'));
|
||||
$(".tab_preview").html('<div id="openseadragon" ></div>');
|
||||
$("#openseadragon").css('width', '100%');
|
||||
$("#openseadragon").css('height', minHeight);
|
||||
viewer = OpenSeadragon({
|
||||
id: "openseadragon",
|
||||
tileSources: {
|
||||
type: "image",
|
||||
url: $(".preview_img").val()
|
||||
}
|
||||
}); // charge l'image pour la retouche
|
||||
|
||||
$("#form_media .tab_retouch").html('<img id="drTarget" src="" >');
|
||||
$("#drTarget").attr("src", $(this).attr('data-src'));
|
||||
drPlugin = new Darkroom('#drTarget', {
|
||||
minWidth: 200,
|
||||
minHeight: 200,
|
||||
maxWidth: minWidth,
|
||||
maxHeight: minHeight,
|
||||
plugins: {
|
||||
save: {
|
||||
callback: function callback() {
|
||||
var newImage = this.darkroom.sourceCanvas.toDataURL();
|
||||
$(".preview_img").val(newImage);
|
||||
viewer.destroy();
|
||||
viewer = null;
|
||||
viewer = OpenSeadragon({
|
||||
id: "openseadragon",
|
||||
tileSources: {
|
||||
type: "image",
|
||||
url: $(".preview_img").val()
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
} else if ($(this).attr('data-typemedia') == 2) {
|
||||
// média svg
|
||||
$("#form_media .form_media_retouch").hide(); // masque l'onglet retouche
|
||||
// charge le svg
|
||||
|
||||
$(".tab_preview").html('<img class="svgElt" src=""/>');
|
||||
$(".tab_preview img").attr("src", $(this).attr('data-src'));
|
||||
} else if ($(this).attr('data-typemedia') == 4) {
|
||||
// média audio
|
||||
$("#form_media .form_media_retouch").hide(); // masque l'onglet retouche
|
||||
// charge l'audio
|
||||
|
||||
$(".tab_preview").html('<audio controls src=""></audio>');
|
||||
$(".tab_preview audio").attr("src", $(this).attr('data-src'));
|
||||
} else if ($(this).attr('data-typemedia') == 3) {
|
||||
// média video
|
||||
$("#form_media .form_media_retouch").hide(); // masque l'onglet retouche
|
||||
// charge la vidéo
|
||||
|
||||
$(".tab_preview").html('<video src="" controls></video>');
|
||||
$(".tab_preview video").attr("src", $(this).attr('data-src'));
|
||||
} // affiche la popin
|
||||
|
||||
|
||||
$("#form_media").fadeIn('fast');
|
||||
}); // ---- fermeture de la popup d'édition
|
||||
|
||||
$(".form_media_close").on("click", function (event) {
|
||||
event.preventDefault(); // masque la popin
|
||||
|
||||
$("#form_media").fadeOut('fast'); // si le plugin de retouche a déjà été chargé
|
||||
|
||||
if (drPlugin !== null) {
|
||||
drPlugin.selfDestroy();
|
||||
drPlugin = null; // on détruit le plugin de retouche
|
||||
|
||||
viewer.destroy();
|
||||
viewer = null; // on détruit le plugin de preview
|
||||
} // ---- Stop la vidéo ou le son si présent
|
||||
|
||||
|
||||
if ($(".tab_preview video").length) {
|
||||
$(".tab_preview video").get(0).pause();
|
||||
}
|
||||
|
||||
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) {
|
||||
event.preventDefault(); // ---- Affiche l'onglet cliqué
|
||||
|
||||
var tabId = $(this).attr("data-tab");
|
||||
$("#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
|
||||
|
||||
if ($(".tab_preview video").length) {
|
||||
$(".tab_preview video").get(0).pause();
|
||||
}
|
||||
|
||||
if ($(".tab_preview audio").length) {
|
||||
$(".tab_preview audio").get(0).pause();
|
||||
}
|
||||
}); // ---- 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);
|
||||
}
|
||||
}); // ---- Gestion de l'infinite scroll
|
||||
|
||||
$(".main_content .media_container").on("scroll resize", function () {
|
||||
|
|
@ -11545,14 +11655,24 @@ $(document).ready(function () {
|
|||
loadMedia(dossier_id, sujet_id);
|
||||
}
|
||||
});
|
||||
/******************************
|
||||
Edition d'un média
|
||||
**********************************/
|
||||
|
||||
/******************************
|
||||
Upload de média
|
||||
**********************************/
|
||||
// ---- Fermeture de la popup d'upload
|
||||
|
||||
$('#close_upload_form').on('click', function (event) {
|
||||
event.preventDefault();
|
||||
$('.upload_container').hide("fast");
|
||||
});
|
||||
}); // ---- Ouvrir la popup d'upload
|
||||
|
||||
$('.action_add_media').on('click', function (event) {
|
||||
event.preventDefault();
|
||||
$('.upload_container').show("fast");
|
||||
});
|
||||
}); // ---- Initialisation du module d'upload
|
||||
|
||||
if ($('#fileupload').length) {
|
||||
$.ajaxSetup({
|
||||
|
|
@ -11685,7 +11805,7 @@ $(document).ready(function () {
|
|||
}
|
||||
}).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');
|
||||
}
|
||||
}); // ---- Gestion des média : init des dossiers
|
||||
}); // ---- init des dossiers
|
||||
|
||||
function initFolderManager(sujetId) {
|
||||
$(".folder_container .loader").show();
|
||||
|
|
@ -11784,7 +11904,8 @@ function initFolderManager(sujetId) {
|
|||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} // ---- Chargement des média
|
||||
|
||||
|
||||
$(window).data('offset', 0);
|
||||
$(window).data('limit', 50);
|
||||
|
|
@ -11822,13 +11943,20 @@ function loadMedia(dossier_id, sujet_id) {
|
|||
var detail = "";
|
||||
var itemClass = "";
|
||||
var thumb = "";
|
||||
var preview = "";
|
||||
|
||||
switch (item.typemedia_id) {
|
||||
case 1:
|
||||
case 2:
|
||||
ico = '<i class="fas fa-file-image"></i>';
|
||||
detail = " - " + item.largeur + "x" + item.hauteur + "px";
|
||||
thumb = item.source.split('.')[0] + "_thumb." + item.extension;
|
||||
preview = item.source.split('.')[0] + "_preview." + item.extension;
|
||||
break;
|
||||
|
||||
case 2:
|
||||
ico = '<i class="fas fa-file-image"></i>';
|
||||
thumb = item.source;
|
||||
preview = item.source;
|
||||
break;
|
||||
|
||||
case 3:
|
||||
|
|
@ -11851,7 +11979,7 @@ function loadMedia(dossier_id, sujet_id) {
|
|||
default:
|
||||
}
|
||||
|
||||
output += '<div class="imageItem" data-id="' + item.id + '" draggable="true" aria-grabbed="false">';
|
||||
output += '<div class="imageItem" data-id="' + item.id + '" data-typemedia="' + item.typemedia_id + '" data-preview="' + preview + '" data-src="' + item.source + '" draggable="true" aria-grabbed="false">';
|
||||
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>';
|
||||
|
|
@ -11876,7 +12004,7 @@ function loadMedia(dossier_id, sujet_id) {
|
|||
$(window).data('ajaxready', true);
|
||||
}
|
||||
});
|
||||
} // ---- Gestion des média : contruction de l'arborescence des dossiers
|
||||
} // ---- contruction de l'arborescence des dossiers
|
||||
|
||||
|
||||
function buildItem(item) {
|
||||
|
|
@ -11907,7 +12035,7 @@ function buildItem(item) {
|
|||
|
||||
html += "</li>";
|
||||
return html;
|
||||
} // ---- Gestion des média : ajouter un dossier
|
||||
} // ---- ajouter un dossier
|
||||
|
||||
|
||||
function addItem(parent_id, item_id, content) {
|
||||
|
|
|
|||
391
resources/js/media.js
vendored
391
resources/js/media.js
vendored
|
|
@ -1,14 +1,18 @@
|
|||
|
||||
$(document).ready(function() {
|
||||
|
||||
// ---- Gestion des média : init des dossiers
|
||||
/******************************
|
||||
Liste des dossiers
|
||||
**********************************/
|
||||
|
||||
// ---- init des dossiers
|
||||
if ( $( ".media_manager" ).length ) {
|
||||
var sujetId = $("#sujet_selector").val();
|
||||
if(sujetId != "")
|
||||
initFolderManager(sujetId);
|
||||
}
|
||||
|
||||
// ---- Gestion des média : collapse/expand side menu
|
||||
// ---- collapse/expand side menu
|
||||
$(".close_side_menu").on('click', function(event) {
|
||||
event.preventDefault();
|
||||
if($(".side_menu ").hasClass('collapse')){
|
||||
|
|
@ -22,7 +26,7 @@ $(document).ready(function() {
|
|||
}
|
||||
});
|
||||
|
||||
// ---- Gestion des média : init des dossiers lorsqu'on change de sujet
|
||||
// ---- init des dossiers lorsqu'on change de sujet
|
||||
$("#sujet_selector").on('change', function(event) {
|
||||
var sujetId = $("#sujet_selector").val();
|
||||
if(sujetId != "")
|
||||
|
|
@ -31,8 +35,7 @@ $(document).ready(function() {
|
|||
initFolderManager(sujetId);
|
||||
});
|
||||
|
||||
|
||||
// ---- Gestion des média : sélectionner un dossier et favoris
|
||||
// ---- sélectionner un dossier et favoris
|
||||
$(".folder_container").on('click', '.dd3-content', function(e) {
|
||||
e.preventDefault();
|
||||
var target = e.target, $target = $(target);
|
||||
|
|
@ -70,7 +73,7 @@ $(document).ready(function() {
|
|||
|
||||
|
||||
|
||||
// ---- Gestion des média : sélectionner la racine
|
||||
// ---- sélectionner la racine
|
||||
$(".folder_container").on('click', '.root_folder', function(event) {
|
||||
event.preventDefault();
|
||||
$(".folder_container .dd3-content").removeClass('selected');
|
||||
|
|
@ -81,7 +84,7 @@ $(document).ready(function() {
|
|||
loadMedia(0, sujetId);
|
||||
});
|
||||
|
||||
// ---- Gestion des média : menu contextuel des dossiers
|
||||
// ---- menu contextuel des dossiers
|
||||
$(".folder_container").on('contextmenu', '.dd3-content', function(event) {
|
||||
event.preventDefault();
|
||||
// placement du menu
|
||||
|
|
@ -101,7 +104,7 @@ $(document).ready(function() {
|
|||
$(".folder_container .folder_menu").show();
|
||||
});
|
||||
|
||||
// ---- Gestion des média : ajouter un dossier
|
||||
// ---- ajouter un dossier
|
||||
$(".folder_menu").on('click', '.addItem', function(event) {
|
||||
event.preventDefault();
|
||||
var parent_id = $(this).parents(".folder_menu").attr("data-id");
|
||||
|
|
@ -135,7 +138,7 @@ $(document).ready(function() {
|
|||
});
|
||||
});
|
||||
|
||||
// ---- Gestion des média : supprimer un dossier
|
||||
// ---- supprimer un dossier
|
||||
$(".folder_menu").on('click', '.removeItem', function(event) {
|
||||
event.preventDefault();
|
||||
var dossier_id = $(this).parents(".folder_menu").attr("data-id");
|
||||
|
|
@ -170,7 +173,7 @@ $(document).ready(function() {
|
|||
}
|
||||
});
|
||||
|
||||
// ---- Gestion des média : renommer un dossier
|
||||
// ---- renommer un dossier
|
||||
$(".folder_menu").on('click', '.renameItem', function(event) {
|
||||
event.preventDefault();
|
||||
$(".folder_container .folder_menu").hide();
|
||||
|
|
@ -211,7 +214,7 @@ $(document).ready(function() {
|
|||
}
|
||||
});
|
||||
|
||||
// ---- Gestion des média : propriétés d'un dossier
|
||||
// ---- propriétés d'un dossier
|
||||
$(".folder_menu").on('click', '.propertyItem', function(event) {
|
||||
event.preventDefault();
|
||||
$(".folder_container .folder_menu").hide();
|
||||
|
|
@ -250,7 +253,7 @@ $(document).ready(function() {
|
|||
});
|
||||
});
|
||||
|
||||
// ---- Gestion des média : enregistre les propriétés d'un dossier
|
||||
// ---- enregistre les propriétés d'un dossier
|
||||
$("html").on('click', '.form_folder_save', function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
|
|
@ -278,124 +281,27 @@ $(document).ready(function() {
|
|||
});
|
||||
});
|
||||
|
||||
|
||||
// ---- Gestion des média : au début du drag, set les valeurs des éléments draggés
|
||||
$("html").on("dragstart", ".imageItem", function(event) {
|
||||
var datavalue = [];
|
||||
if($(this).attr("aria-grabbed") == "true"){
|
||||
$(".imageItem").each(function(index, el) {
|
||||
if($(this).attr("aria-grabbed") == "true"){
|
||||
datavalue.push($(this).attr("data-id"));
|
||||
}
|
||||
});
|
||||
event.originalEvent.dataTransfer.setData('Text', datavalue);
|
||||
}else{
|
||||
$(".imageItem").attr("aria-grabbed", "false");
|
||||
$(this).attr("aria-grabbed", "true");
|
||||
event.originalEvent.dataTransfer.setData('Text', $(this).attr("data-id"));
|
||||
}
|
||||
});
|
||||
|
||||
// ---- Gestion des média : déselectionne les éléments si on clique en dehors
|
||||
$(".main_content .wrapper").on("click", function(event) {
|
||||
if (event.target !== this) return;
|
||||
$(".imageItem").attr("aria-grabbed", "false");
|
||||
$(".imageItem").removeClass('flip');
|
||||
});
|
||||
|
||||
// ---- Gestion des média : clique droit sur un média
|
||||
$(".main_content .wrapper").on("contextmenu", '.imageItem' , function(event) {
|
||||
event.preventDefault();
|
||||
$(".imageItem").removeClass('flip');
|
||||
$(this).addClass('flip')
|
||||
});
|
||||
|
||||
// ---- Edition des média : double-clique sur un média
|
||||
$(".main_content .wrapper").on("dblclick", '.imageItem' , function(event) {
|
||||
event.preventDefault();
|
||||
$(window).data('current_edit_media', $(this).attr('data-id'));
|
||||
$("#form_media").fadeIn('fast');
|
||||
});
|
||||
// ---- Edition des média : fermeture de la popup
|
||||
$(".form_media_close").on("click" , function(event) {
|
||||
event.preventDefault();
|
||||
$("#form_media").fadeOut('fast');
|
||||
});
|
||||
// ---- Edition des média : gestion des onglets
|
||||
$("#form_media .tabbtn").on("click" , function(event) {
|
||||
event.preventDefault();
|
||||
var tabId = $(this).attr("data-tab");
|
||||
$("#form_media .tabbtn").removeClass('active');
|
||||
$(this).addClass('active')
|
||||
$("#form_media .main_content .tab").removeClass('active');
|
||||
$("#form_media .main_content .tab").eq(tabId).addClass('active');
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// ---- Gestion des média : 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);
|
||||
}
|
||||
});
|
||||
|
||||
// ---- Gestion des média : affichage des dossiers on draghover
|
||||
// ---- affichage des dossiers on draghover
|
||||
$(".folder_container").on("dragover", ".dd3-content, .root_folder", function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$(".folder_container .dd3-content").removeClass('dragged');
|
||||
$(".folder_container .root_folder").removeClass('dragged');
|
||||
$(this).addClass('dragged');
|
||||
});
|
||||
|
||||
// ---- Gestion des média : affichage des dossiers on dragleave
|
||||
// ---- affichage des dossiers on dragleave
|
||||
$(".folder_container").on("dragleave", ".dd3-content, .root_folder", function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$(".folder_container .dd3-content").removeClass('dragged');
|
||||
$(".folder_container .root_folder").removeClass('dragged');
|
||||
});
|
||||
|
||||
// ---- Gestion des média : evt lorsque l'on drop des élements dans un dossier
|
||||
// ---- evt lorsque l'on drop des élements dans un dossier
|
||||
$(".folder_container").on("drop", ".dd3-content, .root_folder", function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$(".folder_container .dd3-content").removeClass('dragged');
|
||||
$(".folder_container .root_folder").removeClass('dragged');
|
||||
// ---- Cible
|
||||
|
|
@ -444,6 +350,198 @@ $(document).ready(function() {
|
|||
}
|
||||
});
|
||||
|
||||
/******************************
|
||||
Gestion des médias
|
||||
**********************************/
|
||||
|
||||
// ---- au début du drag, set les valeurs des éléments draggés
|
||||
$("html").on("dragstart", ".imageItem", function(event) {
|
||||
var datavalue = [];
|
||||
if($(this).attr("aria-grabbed") == "true"){
|
||||
$(".imageItem").each(function(index, el) {
|
||||
if($(this).attr("aria-grabbed") == "true"){
|
||||
datavalue.push($(this).attr("data-id"));
|
||||
}
|
||||
});
|
||||
event.originalEvent.dataTransfer.setData('Text', datavalue);
|
||||
}else{
|
||||
$(".imageItem").attr("aria-grabbed", "false");
|
||||
$(this).attr("aria-grabbed", "true");
|
||||
event.originalEvent.dataTransfer.setData('Text', $(this).attr("data-id"));
|
||||
}
|
||||
});
|
||||
|
||||
// ---- déselectionne les éléments si on clique en dehors
|
||||
$(".main_content .wrapper").on("click", function(event) {
|
||||
if (event.target !== this) return;
|
||||
$(".imageItem").attr("aria-grabbed", "false");
|
||||
$(".imageItem").removeClass('flip');
|
||||
});
|
||||
|
||||
// ---- clique droit sur un média
|
||||
$(".main_content .wrapper").on("contextmenu", '.imageItem' , function(event) {
|
||||
event.preventDefault();
|
||||
$(".imageItem").removeClass('flip');
|
||||
$(this).addClass('flip')
|
||||
});
|
||||
|
||||
// ---- double-clique sur un média
|
||||
var drPlugin = null;
|
||||
var viewer = null;
|
||||
$(".main_content .wrapper").on("dblclick", '.imageItem' , function(event) {
|
||||
event.preventDefault();
|
||||
var minWidth = $(document).width();
|
||||
var minHeight = $(document).height()-43-40;
|
||||
|
||||
// Mémorise le média courant
|
||||
$(window).data('current_edit_media', $(this).attr('data-id'));
|
||||
// sélectionne la tab preview à l'ouverture
|
||||
$("#form_media .form_media_preview").trigger("click");
|
||||
|
||||
if($(this).attr('data-typemedia') == 1){ // média image
|
||||
$("#form_media .form_media_retouch").show(); // on active l'onglet ressource
|
||||
|
||||
// charge l'image de preview
|
||||
$(".preview_img").val($(this).attr('data-preview'));
|
||||
$(".tab_preview").html('<div id="openseadragon" ></div>');
|
||||
|
||||
$("#openseadragon").css('width', '100%');
|
||||
$("#openseadragon").css('height', minHeight);
|
||||
viewer = OpenSeadragon({
|
||||
id: "openseadragon",
|
||||
tileSources: {
|
||||
type: "image",
|
||||
url: $(".preview_img").val(),
|
||||
}
|
||||
});
|
||||
|
||||
// charge l'image pour la retouche
|
||||
$("#form_media .tab_retouch").html('<img id="drTarget" src="" >');
|
||||
$("#drTarget").attr("src", $(this).attr('data-src'));
|
||||
|
||||
drPlugin = new Darkroom('#drTarget', {
|
||||
minWidth: 200,
|
||||
minHeight: 200,
|
||||
maxWidth: minWidth,
|
||||
maxHeight: minHeight,
|
||||
plugins: {
|
||||
save: {
|
||||
callback: function() {
|
||||
var newImage = this.darkroom.sourceCanvas.toDataURL();
|
||||
$(".preview_img").val(newImage);
|
||||
viewer.destroy(); viewer = null;
|
||||
viewer = OpenSeadragon({
|
||||
id: "openseadragon",
|
||||
tileSources: {
|
||||
type: "image",
|
||||
url: $(".preview_img").val(),
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
}else if ($(this).attr('data-typemedia') == 2) { // média svg
|
||||
$("#form_media .form_media_retouch").hide(); // masque l'onglet retouche
|
||||
// charge le svg
|
||||
$(".tab_preview").html('<img class="svgElt" src=""/>');
|
||||
$(".tab_preview img").attr("src", $(this).attr('data-src'));
|
||||
}else if ($(this).attr('data-typemedia') == 4) { // média audio
|
||||
$("#form_media .form_media_retouch").hide(); // masque l'onglet retouche
|
||||
// charge l'audio
|
||||
$(".tab_preview").html('<audio controls src=""></audio>');
|
||||
$(".tab_preview audio").attr("src", $(this).attr('data-src'));
|
||||
}else if ($(this).attr('data-typemedia') == 3) { // média video
|
||||
$("#form_media .form_media_retouch").hide(); // masque l'onglet retouche
|
||||
// charge la vidéo
|
||||
$(".tab_preview").html('<video src="" controls></video>');
|
||||
$(".tab_preview video").attr("src", $(this).attr('data-src'));
|
||||
}
|
||||
// affiche la popin
|
||||
$("#form_media").fadeIn('fast');
|
||||
});
|
||||
|
||||
|
||||
// ---- fermeture de la popup d'édition
|
||||
$(".form_media_close").on("click" , function(event) {
|
||||
event.preventDefault();
|
||||
// masque la popin
|
||||
$("#form_media").fadeOut('fast');
|
||||
// si le plugin de retouche a déjà été chargé
|
||||
if(drPlugin !== null){
|
||||
drPlugin.selfDestroy(); drPlugin = null; // on détruit le plugin de retouche
|
||||
viewer.destroy(); viewer = null; // on détruit le plugin de preview
|
||||
}
|
||||
// ---- Stop la vidéo ou le son si présent
|
||||
if($(".tab_preview video").length){
|
||||
$(".tab_preview video").get(0).pause()
|
||||
}
|
||||
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) {
|
||||
event.preventDefault();
|
||||
// ---- Affiche l'onglet cliqué
|
||||
var tabId = $(this).attr("data-tab");
|
||||
$("#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
|
||||
if($(".tab_preview video").length){
|
||||
$(".tab_preview video").get(0).pause()
|
||||
}
|
||||
if($(".tab_preview audio").length){
|
||||
$(".tab_preview audio").get(0).pause()
|
||||
}
|
||||
});
|
||||
|
||||
// ---- 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);
|
||||
}
|
||||
});
|
||||
|
||||
// ---- Gestion de l'infinite scroll
|
||||
$(".main_content .media_container").on("scroll resize", function() {
|
||||
if ($(window).data('ajaxready') == false) return;
|
||||
|
|
@ -457,24 +555,34 @@ $(document).ready(function() {
|
|||
}
|
||||
});
|
||||
|
||||
$('#close_upload_form').on('click',function(event){
|
||||
event.preventDefault();
|
||||
$('.upload_container').hide("fast");
|
||||
});
|
||||
|
||||
$('.action_add_media').on('click',function(event){
|
||||
event.preventDefault();
|
||||
$('.upload_container').show("fast");
|
||||
});
|
||||
/******************************
|
||||
Edition d'un média
|
||||
**********************************/
|
||||
|
||||
|
||||
/******************************
|
||||
Upload de média
|
||||
**********************************/
|
||||
|
||||
if($('#fileupload').length){
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
}
|
||||
});
|
||||
// ---- Fermeture de la popup d'upload
|
||||
$('#close_upload_form').on('click',function(event){
|
||||
event.preventDefault();
|
||||
$('.upload_container').hide("fast");
|
||||
});
|
||||
|
||||
// ---- Ouvrir la popup d'upload
|
||||
$('.action_add_media').on('click',function(event){
|
||||
event.preventDefault();
|
||||
$('.upload_container').show("fast");
|
||||
});
|
||||
|
||||
// ---- Initialisation du module d'upload
|
||||
if($('#fileupload').length){
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
}
|
||||
});
|
||||
|
||||
var cancel_btn = $('<button/>')
|
||||
.addClass('cancel')
|
||||
|
|
@ -608,7 +716,7 @@ $(document).ready(function() {
|
|||
}
|
||||
});
|
||||
|
||||
// ---- Gestion des média : init des dossiers
|
||||
// ---- init des dossiers
|
||||
function initFolderManager(sujetId){
|
||||
$(".folder_container .loader").show();
|
||||
$.ajaxSetup({
|
||||
|
|
@ -692,6 +800,7 @@ function initFolderManager(sujetId){
|
|||
});
|
||||
}
|
||||
|
||||
// ---- Chargement des média
|
||||
$(window).data('offset', 0);
|
||||
$(window).data('limit', 50);
|
||||
function loadMedia(dossier_id, sujet_id){
|
||||
|
|
@ -725,12 +834,18 @@ function loadMedia(dossier_id, sujet_id){
|
|||
var detail = "";
|
||||
var itemClass = "";
|
||||
var thumb = "";
|
||||
var preview = "";
|
||||
switch (item.typemedia_id) {
|
||||
case 1:
|
||||
case 2:
|
||||
ico = '<i class="fas fa-file-image"></i>';
|
||||
detail = " - "+item.largeur+"x"+item.hauteur+"px";
|
||||
thumb = item.source.split('.')[0]+"_thumb."+item.extension;
|
||||
preview = item.source.split('.')[0]+"_preview."+item.extension;
|
||||
break;
|
||||
case 2:
|
||||
ico = '<i class="fas fa-file-image"></i>';
|
||||
thumb = item.source;
|
||||
preview = item.source;
|
||||
break;
|
||||
case 3:
|
||||
ico = '<i class="fas fa-file-video"></i>';
|
||||
|
|
@ -750,7 +865,7 @@ function loadMedia(dossier_id, sujet_id){
|
|||
|
||||
}
|
||||
|
||||
output += '<div class="imageItem" data-id="'+item.id+'" draggable="true" aria-grabbed="false">';
|
||||
output += '<div class="imageItem" data-id="'+item.id+'" data-typemedia="'+item.typemedia_id+'" data-preview="'+preview+'" data-src="'+ item.source+'" draggable="true" aria-grabbed="false">';
|
||||
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>';
|
||||
|
|
@ -776,7 +891,7 @@ function loadMedia(dossier_id, sujet_id){
|
|||
});
|
||||
}
|
||||
|
||||
// ---- Gestion des média : contruction de l'arborescence des dossiers
|
||||
// ---- contruction de l'arborescence des dossiers
|
||||
function buildItem(item) {
|
||||
var parentClass = "";
|
||||
var handleClass = "";
|
||||
|
|
@ -805,7 +920,7 @@ function buildItem(item) {
|
|||
return html;
|
||||
}
|
||||
|
||||
// ---- Gestion des média : ajouter un dossier
|
||||
// ---- ajouter un dossier
|
||||
function addItem(parent_id, item_id, content){
|
||||
if(!$('.dd .dd-item[data-id="'+parent_id+'"] > ol').length){
|
||||
$('.dd .dd-item[data-id="'+parent_id+'"]').append("<ol class='dd-list'></ol>");
|
||||
|
|
|
|||
1
resources/sass/app.scss
vendored
1
resources/sass/app.scss
vendored
|
|
@ -10,6 +10,7 @@
|
|||
'partials/fontawesome/light.scss',
|
||||
'partials/fontawesome/brands.scss',
|
||||
'partials/fileupload.scss',
|
||||
'partials/darkroom.scss',
|
||||
'partials/common.scss',
|
||||
'partials/form.scss',
|
||||
'partials/media.scss',
|
||||
|
|
|
|||
5
resources/sass/partials/form.scss
vendored
5
resources/sass/partials/form.scss
vendored
|
|
@ -114,6 +114,11 @@ h1{
|
|||
font-size: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
h3{
|
||||
color: $white;
|
||||
font-size: 17px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.filter_row{
|
||||
margin-bottom: 10px;
|
||||
|
|
|
|||
73
resources/sass/partials/media.scss
vendored
73
resources/sass/partials/media.scss
vendored
|
|
@ -424,6 +424,7 @@
|
|||
|
||||
&:hover, &.active{
|
||||
background-color: $lightdark;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -460,11 +461,83 @@
|
|||
}
|
||||
}
|
||||
.main_content{
|
||||
height: calc(100% - 43px);
|
||||
.tab{
|
||||
height: 100%;
|
||||
display: none;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
|
||||
&.tab_preview{
|
||||
text-align: center;
|
||||
|
||||
.controlDiv > div{
|
||||
margin: 0 7px !important;
|
||||
}
|
||||
audio, video{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
.svgElt{
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
&.tab_edit{
|
||||
|
||||
.tab_content{
|
||||
overflow: auto;
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
.button_bar{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 8px 50px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
&.active{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wrapper{
|
||||
width: 100%;
|
||||
padding: 30px 10px;
|
||||
|
||||
&:nth-child(even){
|
||||
background-color: $grey;
|
||||
}
|
||||
|
||||
h3{
|
||||
margin-bottom: 25px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
.row{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 530px;
|
||||
margin: 0 auto 15px auto;
|
||||
|
||||
label{
|
||||
margin-bottom: 10px;
|
||||
color: $white;
|
||||
span{
|
||||
color: $red;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,33 +38,7 @@
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div id="form_media" style="display: none;" data-id="" >
|
||||
<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="tabbtn form_media_close"><i class="fal fa-times"></i></a>
|
||||
</header>
|
||||
<div class="main_content">
|
||||
<div class="tab tab_preview active">
|
||||
content tab_preview
|
||||
</div>
|
||||
<div class="tab tab_edit">
|
||||
content tab_edit
|
||||
</div>
|
||||
<div class="tab tab_retouch">
|
||||
content tab_retouch
|
||||
</div>
|
||||
<div class="tab tab_links">
|
||||
content tab_links
|
||||
</div>
|
||||
<div class="tab tab_history">
|
||||
content tab_history
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@yield('media_edit')
|
||||
|
||||
<div class="uploader-window">
|
||||
<div class="uploader-window-content">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@extends('layouts.app')
|
||||
@include('layouts.header')
|
||||
@include('layouts.media_edit')
|
||||
@section('content')
|
||||
<main class="media_manager template_2col">
|
||||
<div class="side_menu">
|
||||
|
|
@ -106,4 +107,7 @@
|
|||
<script src="{{ asset('js/uploadfile/vendor/jquery.ui.widget.js') }}"></script>
|
||||
<script src="{{ asset('js/uploadfile/jquery.iframe-transport.js') }}"></script>
|
||||
<script src="{{ asset('js/uploadfile/jquery.fileupload.js') }}"></script>
|
||||
<script src="{{ asset('js/fabric.js') }}"></script>
|
||||
<script src="{{ asset('js/darkroom.js') }}"></script>
|
||||
<script src="{{ asset('js/openseadragon.min.js') }}"></script>
|
||||
@endsection
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue