templates/project/crud/galleryscriptLogo.html.twig line 1

Open in your IDE?
  1. var indexOfPoint{{idcontent}},
  2.     indexOf{{idcontent}},
  3.     element{{idcontent}},
  4.     dropArea{{idcontent}},
  5.     dragText{{idcontent}},
  6.     nfile{{idcontent}},
  7.     fileType{{idcontent}},
  8.     validExtensions{{idcontent}},
  9.     fileReader{{idcontent}},
  10.     fileURL{{idcontent}},
  11.     mvalidExtension{{idcontent}},
  12.     button{{idcontent}},
  13.     rescheckext,
  14.     input{{idcontent}};
  17. $("#{{projectlogoid}}").attr('data-bs-toggle', 'modal');
  18. $("#{{projectlogoid}}").attr('data-bs-target', '#modal-gallery-content{{idcontent}}');
  19. $("#{{projectlogoid}}").prop('readonly', true);
  20. $("#{{projectlogoid}}").attr('onclick', 'getdirfilesProjet{{idcontent}}(document.getElementById("{{projectlogoid}}").value, "nnvalid")');
  22. $("<div class='input-group-prepend' style='margin-bottom: -3%; margin-left: 100%;'><i class='fa fa-trash-o mx-2' style='cursor: pointer;' onclick='trashgallProjet{{idcontent}}()'></i></div>").insertBefore("#{{projectlogoid}}");
  24. $('#{{projectlogoid}}').keypress(function (e) {
  25.     return false;
  26. });
  29. // onclick="sendCode('', 'text-')"
  30. function getdirfilesProjet{{idcontent}} (dirname, valid) {
  31.     selected = '';
  32.     indexOfPoint{{idcontent}} = dirname.lastIndexOf(".");
  33.     if (indexOfPoint{{idcontent}} >= 0) {
  34.         const substringContent{{idcontent}} = dirname.slice(indexOfPoint{{idcontent}}, dirname.length);
  35.     if (dirname.includes(substringContent{{idcontent}})) {
  36.     indexOf{{idcontent}} = dirname.lastIndexOf("/");
  37.     selected = dirname.slice(indexOf{{idcontent}}, dirname.length);
  38.     dirname = dirname.replace(selected, '') + '/';
  39.     // "data-123".replace(/data-/g,'');
  40. }
  41.     }
  43.     if ('{{entity.instance.switchEnLigne}}') {
  44.         $.ajax({
  45.             url: "{{ path('get_dirs_content_projet_logos') }}",
  46.             type: 'POST',
  47.             timeout: 15000,
  48.             data: {
  49.                 'dirname': dirname,
  50.                 'selected': selected,
  51.                 'validinput': valid,
  52.                 'idcontent': '{{idcontent}}',
  53.                 'imageFtpServer': '{{entity.instance.imageFtpServerEnligne}}',
  54.                 'imageFtpLogin': '{{entity.instance.imageFtpLoginEnligne}}',
  55.                 'imageFtpMdp': '{{entity.instance.imageFtpMdpEnligne}}',
  56.                 'imageHttpServer': '{{entity.instance.imageHttpServerEnligne}}',
  57.             },
  58.             dataType: 'json',
  59.             success: function (data) {
  60.                 $('#valdircontentProjet{{idcontent}}').html(data.content);
  61.                 $('#dirPathNiveauIndicatorProjet{{idcontent}}').html(data.niveauindicator);
  62.             }
  63.         });
  64.     } else {
  65.         $.ajax({
  66.             url: "{{ path('get_dirs_content_projet_logos') }}",
  67.             type: 'POST',
  68.             timeout: 15000,
  69.             data: {
  70.                 'dirname': dirname,
  71.                 'selected': selected,
  72.                 'validinput': valid,
  73.                 'idcontent': '{{idcontent}}',
  74.                 'imageFtpServer': '{{entity.instance.imageFtpServer}}',
  75.                 'imageFtpLogin': '{{entity.instance.imageFtpLogin}}',
  76.                 'imageFtpMdp': '{{entity.instance.imageFtpMdp}}',
  77.                 'imageHttpServer': '{{entity.instance.imageHttpServer}}',
  78.             },
  79.             dataType: 'json',
  80.             success: function (data) {
  81.                 $('#valdircontentProjet{{idcontent}}').html(data.content);
  82.                 $('#dirPathNiveauIndicatorProjet{{idcontent}}').html(data.niveauindicator);
  83.             }
  84.         });
  85.     }
  87. }
  89. function selectedimageProjet{{idcontent}} (obj) {
  90.     element{{idcontent}} = $(obj);
  91.     $('.selectedFtpImgProjet{{idcontent}}').css("border", "0px");
  92.     $('.selectedFtpImgProjet{{idcontent}}').css("border-color", "");
  93.     $('.selectedFtpImgProjet{{idcontent}}').css("background-color", "white");
  94.     element{{idcontent}}.css("border", "1px solid #5656b5;");
  95.     element{{idcontent}}.css("border-color", "#5656b5");
  96.     element{{idcontent}}.css("background-color", "#5656b5");
  97.     $('#{{projectlogoid}}').val(element{{idcontent}}.attr('data-dir'));
  99.     rescheckext = checkcurrentExtProjet{{idcontent}}($('#{{projectlogoid}}').val());
  101.     if (rescheckext == 'file') {
  102.         var {{projetlogopreview}} = '<img id="{{projetlogopreviewremove}}" src="images/fileicon.webp" class="img-fluid mt-2" style="max-height: 100px;">';
  103.     } else if (rescheckext == 'json') {
  104.         var {{projetlogopreview}} = '<img id="{{projetlogopreviewremove}}" src="images/jsonfileicon.png" class="img-fluid mt-2" style="max-height: 100px;">';
  105.     } else {
  106.         var {{projetlogopreview}} = '<img id="{{projetlogopreviewremove}}" src="' + element{{idcontent}}.attr('data-racine') + $('#{{projectlogoid}}').val() + '" class="img-fluid mt-2">';
  107.     }
  109.     
  110. $("#{{projetlogopreviewremove}}").remove();
  111. $(".{{projetlogopreview}}").append({{projetlogopreview}});
  112. }
  113. // clickedImg
  116. // image preview
  117. const imgphtmlContent{{idcontent}} = $(".{{projetlogopreview}}");
  120. rescheckext = checkcurrentExtProjet{{idcontent}}($('#{{projectlogoid}}').val());
  122. if (rescheckext == 'file') {
  123.     var {{projetlogopreview}} = '<img id="{{projetlogopreviewremove}}" src="images/fileicon.webp" class="img-fluid mt-2" style="max-height: 100px;">';
  124. } else if (rescheckext == 'json') {
  125.     var {{projetlogopreview}} = '<img id="{{projetlogopreviewremove}}" src="images/jsonfileicon.png" class="img-fluid mt-2" style="max-height: 100px;">';
  126. } else {
  127.     if ('{{entity.instance.switchEnLigne}}') {
  128.         var {{projetlogopreview}} = '<img id="{{projetlogopreviewremove}}" src="{{entity.instance.imageHttpServerEnligne}}' + $('#{{projectlogoid}}').val() + '" class="img-fluid mt-2">';
  129.     } else {
  130.         var {{projetlogopreview}} = '<img id="{{projetlogopreviewremove}}" src="{{entity.instance.imageHttpServer}}' + $('#{{projectlogoid}}').val() + '" class="img-fluid mt-2">';
  131.     }
  132.     
  133. }
  137. if ($('#{{projectlogoid}}').val() != '' && $('#{{projectlogoid}}').val() != undefined) {
  138.     imgphtmlContent{{idcontent}}.append({{projetlogopreview}});
  139. }
  141. $(".{{projetlogopreview}}").change(function () {
  142.     $("#{{projetlogopreviewremove}}").remove();
  143. });
  146. // reset text in image
  147. function trashgallProjet{{idcontent}} () {
  148.     $('#{{projectlogoid}}').val('');
  149.     $("#{{projetlogopreviewremove}}").remove();
  150. }
  158. // umpload image script
  160. // selecting all required elements
  161. dropArea{{idcontent}} = document.querySelector(".drag-area-content{{idcontent}}");
  162. dragText{{idcontent}} = dropArea{{idcontent}}.querySelector("header");
  163. button{{idcontent}} = dropArea{{idcontent}}.querySelector("button");
  164. input{{idcontent}} = dropArea{{idcontent}}.querySelector("input");
  165. nfile{{idcontent}}; // this is a global variable and we'll use it inside multiple functions
  167. button{{idcontent}}.onclick = () => {
  168.     input{{idcontent}}.click(); // if user click on the button then the input also clicked
  169. };
  171. input{{idcontent}}.addEventListener("change", function () { // getting user select file and [0] this means if user select multiple files then we'll select only the first one
  172.     nfile{{idcontent}} = this.files[0];
  173.     dropArea{{idcontent}}.classList.add("active");
  175.     //file.forEach(showFileContent);
  176.     showFileContent{{idcontent}} (); // calling function
  177. });
  179. // If user Drag File Over DropArea
  180. dropArea{{idcontent}}.addEventListener("dragover", (event) => {
  181.     event.preventDefault(); // preventing from default behaviour
  182.     dropArea{{idcontent}}.classList.add("active");
  183.     dragText{{idcontent}}.textContent = "Libérer pour télécharger le fichier";
  184. });
  186. // If user leave dragged File from DropArea
  187. dropArea{{idcontent}}.addEventListener("dragleave", () => {
  188.     dropArea{{idcontent}}.classList.remove("active");
  189.     dragText{{idcontent}}.textContent = "Drag & Drop pour télécharger le fichier";
  190. });
  192. // If user drop File on DropArea
  193. dropArea{{idcontent}}.addEventListener("drop", (event) => {
  194.     event.preventDefault();
  195.     // preventing from default behaviour
  196.     // getting user select file and [0] this means if user select multiple files then we'll select only the first one
  197.     nfile{{idcontent}} = event.dataTransfer.files[0];
  198.     input{{idcontent}}.file = event.dataTransfer.files[0];
  200.     //file.forEach(showFileContent);
  201.     showFileContent{{idcontent}} (); // calling function
  202. });
  204. function showFileContent{{idcontent}} () {
  206.     fileType{{idcontent}} = nfile{{idcontent}}.type; //getting selected file type
  207.     validExtensions{{idcontent}} = ["image/jpg", "image/jpeg", "image/bmp", "image/gif", "image/png", "image/apng", "image/webp", "image/ico", "image/cur", "image/jfif", "image/pjpeg", "image/pjp", "image/svg", "image/svg+xml", "image/x-icon"]; //adding some valid image extensions in array
  208.     
  209.     if (validExtensions{{idcontent}}.includes(fileType{{idcontent}})) { //if user selected file is an image file
  210.         fileReader{{idcontent}} = new FileReader(); //creating new FileReader object
  211.         fileReader{{idcontent}}.onload = () => {
  212.             fileURL{{idcontent}} = fileReader{{idcontent}}.result; //passing user file source in fileURL variable
  213.             
  214.             
  215.             filename{{idcontent}} = '<img src="' + fileURL{{idcontent}} + '" data-name="' + nfile{{idcontent}}.name + '" id="imageToUploadContent{{idcontent}}" class="h-100">';
  216.             $("#uploadedimgdisplayContent{{idcontent}}").html(filename{{idcontent}});
  217.         $("#dropImageAreaContent{{idcontent}}").removeClass("d-none");
  218.         $("#dragAreaContent{{idcontent}}").addClass("d-none");
  219.     }
  220.     fileReader{{idcontent}}.readAsDataURL(nfile{{idcontent}});
  221.     } else {
  222.         /* alert("This is not an Image File!");
  223.         dropArea.classList.remove("active");
  224.         dragText.textContent = "Drag & Drop to Upload File"; */
  226.         alert("Ceci n'est pas un Image!");
  227.         alert(fileType{{idcontent}});
  228.         dropArea{{idcontent}}.classList.remove("active");
  229.         dragText{{idcontent}}.textContent = "Drag & Drop pour télécharger l'image";
  231. }
  232. }
  234. function setuploadimgvalueContent{{idcontent}} () {
  235.     /* console.log($("#imageToUploadContent").attr('src'));
  236.     console.log($("#imageToUploadContent").attr('data-name')); */
  237.     $('#{{projectlogoid}}').val('/upload/' + $("#imageToUploadContent{{idcontent}}").attr('data-name'));
  238.     
  239. rescheckext = checkcurrentExtProjet{{idcontent}}($("#imageToUploadContent{{idcontent}}").attr('data-name'));
  240. // console.log(rescheckext);
  241. if (rescheckext == 'file') {
  242.     var {{projetlogopreview}} = '<img id="{{projetlogopreviewremove}}" src="images/fileicon.webp" class="img-fluid mt-2" style="max-height: 100px;">';
  243. } else if (rescheckext == 'json') {
  244.     var {{projetlogopreview}} = '<img id="{{projetlogopreviewremove}}" src="images/jsonfileicon.png" class="img-fluid mt-2" style="max-height: 100px;">';
  245. } else {
  246.     var {{projetlogopreview}} = '<img id="{{projetlogopreviewremove}}" src="' + $("#imageToUploadContent{{idcontent}}").attr('src') + '" class="img-fluid mt-2">';
  247. }
  249.     
  250. $("#{{projetlogopreviewremove}}").remove();
  251. $(".{{projetlogopreview}}").append({{projetlogopreview}});
  253.     if ('{{entity.instance.switchEnLigne}}') {
  255.         $.ajax({
  256.             url: "{{ path('get_image_projet_upload') }}",
  257.             type: 'POST',
  258.             timeout: 15000,
  259.             data: {
  260.                 'file': $("#imageToUploadContent{{idcontent}}").attr('src'),
  261.                 'name': $("#imageToUploadContent{{idcontent}}").attr('data-name'),
  262.                 'imageFtpServer': '{{entity.instance.imageFtpServerEnligne}}',
  263.                 'imageFtpLogin': '{{entity.instance.imageFtpLoginEnligne}}',
  264.                 'imageFtpMdp': '{{entity.instance.imageFtpMdpEnligne}}',
  265.                 'imageHttpServer': '{{entity.instance.imageHttpServerEnligne}}',
  266.             },
  267.             dataType: 'json',
  268.             success: function (data) {
  269.                 // console.log(data.content);
  270.                 // console.log();
  271.                 // console.log(data.msg);
  272.             }
  273.         });
  274.     } else {
  275.         $.ajax({
  276.             url: "{{ path('get_image_projet_upload') }}",
  277.             type: 'POST',
  278.             timeout: 15000,
  279.             data: {
  280.                 'file': $("#imageToUploadContent{{idcontent}}").attr('src'),
  281.                 'name': $("#imageToUploadContent{{idcontent}}").attr('data-name'),
  282.                 'imageFtpServer': '{{entity.instance.imageFtpServer}}',
  283.                 'imageFtpLogin': '{{entity.instance.imageFtpLogin}}',
  284.                 'imageFtpMdp': '{{entity.instance.imageFtpMdp}}',
  285.                 'imageHttpServer': '{{entity.instance.imageHttpServer}}',
  286.             },
  287.             dataType: 'json',
  288.             success: function (data) {
  289.                 // console.log(data.content);
  290.                 // console.log();
  291.                 // console.log(data.msg);
  292.             }
  293.         });
  294.     }
  296. }
  299. function resetuploadvaluesContent{{idcontent}} () {
  300.     $("#dropImageAreaContent{{idcontent}}").addClass("d-none");
  301.     $("#dragAreaContent{{idcontent}}").removeClass("d-none");
  302.     $("#imageToUploadContent{{idcontent}}").attr("src", "");
  303. }
  305. function checkImageGalleyExtProjet{{idcontent}} () {
  306.     mvalidExtension{{idcontent}} = ["jpg",
  307.         "jpeg", "bmp",
  308.         "gif", "png",
  309.         "apng", "webp",
  310.         "ico", "icon", "cur",
  311.         "jfif", "pjpeg",
  312.         "pjp", "svg"];
  314.     $('[id=imagegelleryProjet{{idcontent}}]').each(function () {
  315.         // console.log($(this).attr("src"));
  316.         // console.log(mvalidExtension.includes(getFileExtension($(this).attr("src"))));
  317.         // console.log(getFileExtension($(this).attr("src")));
  318.         
  319.         if (getFileExtension{{idcontent}}($(this).attr("src")) == 'json') {
  320.             $(this).attr("src", "images/jsonfileicon.png");
  321.             $(this).css("width", "80px");
  322.         } 
  323.         
  324.         if (!mvalidExtension{{idcontent}}.includes(getFileExtension{{idcontent}}($(this).attr("src")))) {
  325.             $(this).attr("src", "images/fileicon.webp");
  326.             $(this).css("width", "80px");
  327.         } 
  329.     });
  330. }
  333. function getFileExtension{{idcontent}}(filename) {
  334.     var ext = /^.+\.([^.]+)$/.exec(filename);
  335.     return ext == null ? "" : ext[1];
  336. }
  338. function checkcurrentExtProjet{{idcontent}}(idtocheck) {
  339.     mvalidExtension{{idcontent}} = ["jpg",
  340.         "jpeg", "bmp",
  341.         "gif", "png",
  342.         "apng", "webp",
  343.         "ico", "icon", "cur",
  344.         "jfif", "pjpeg",
  345.         "pjp", "svg"];
  347.         // console.log(getFileExtension{{idcontent}}(idtocheck));
  348.         // console.log(idtocheck);
  349.         
  350.         if (getFileExtension{{idcontent}}(idtocheck) == 'json') {
  351.             return 'json';
  352.         } else if (mvalidExtension{{idcontent}}.includes(getFileExtension{{idcontent}}(idtocheck))) {
  353.             return 'image';
  354.         } else {
  355.             return 'file';
  356.         }
  357. }