first commit
This commit is contained in:
maher
397
assets/javascript/backend/annonce.js
Normal file
397
assets/javascript/backend/annonce.js
Normal file
@@ -0,0 +1,397 @@
|
||||
import "jquery-ui";
|
||||
import 'datatables.net-bs5';
|
||||
|
||||
import 'cropperjs/dist/cropper.css';
|
||||
import "jquery-cropper/dist/jquery-cropper.js";
|
||||
|
||||
|
||||
|
||||
if(typeof pathUplodImageAdd !== 'undefined'){
|
||||
|
||||
uploderImagesAnnonce();
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function uploderImagesAnnonce()
|
||||
{
|
||||
let cropper;
|
||||
let base64Home;
|
||||
let base64Search;
|
||||
let base64Detail1;
|
||||
let base64Detail2;
|
||||
let base64Detail3;
|
||||
let base64Detail4;
|
||||
|
||||
|
||||
$( "#resize-image" ).click(function() {
|
||||
|
||||
let typeImage = $("#imgPreviewCropper").attr("data-type-img");
|
||||
|
||||
if(typeImage == "home"){
|
||||
|
||||
base64Home = $("#imgPreviewCropper").cropper('getCroppedCanvas', {width: widthImgAccueil, height: heightImgAccueil}).toDataURL('image/jpeg', 1);
|
||||
|
||||
$('#img-preview-home').attr('src', base64Home);
|
||||
|
||||
}else if(typeImage == "search"){
|
||||
|
||||
base64Search = $("#imgPreviewCropper").cropper('getCroppedCanvas', {width: 438, height: 240}).toDataURL('image/jpeg', 1);
|
||||
$('#img-preview-search').attr('src', base64Search);
|
||||
}
|
||||
$('#cropperModal').modal('hide');
|
||||
});
|
||||
|
||||
|
||||
/***************************************************************************** */
|
||||
|
||||
$("#upload_image_accueil").on('change', function(e) {
|
||||
const file = e.target.files[0];
|
||||
|
||||
if (file) {
|
||||
let reader = new FileReader();
|
||||
|
||||
reader.onload = function (event) {
|
||||
|
||||
$("#imgPreviewCropper").attr("src", event.target.result);
|
||||
$("#imgPreviewCropper").attr("data-type-img", "home");
|
||||
|
||||
var image = new Image();
|
||||
image.src = reader.result;
|
||||
image.onload = function() {
|
||||
|
||||
if(image.width != widthImgAccueil){
|
||||
$('#imgPreviewCropper').cropper('destroy');
|
||||
|
||||
cropper = $("#imgPreviewCropper").cropper({
|
||||
minContainerWidth: widthImgAccueil,
|
||||
minContainerHeight: heightImgAccueil,
|
||||
minCropBoxWidth: widthImgAccueil,
|
||||
minCropBoxHeight: heightImgAccueil,
|
||||
zoomable: true,
|
||||
dragMode: 'move',
|
||||
});
|
||||
|
||||
if(largeurAnnonce == 1){
|
||||
$('.modal-dialog').css({'max-width':"476px"});
|
||||
}else if(largeurAnnonce == 2){
|
||||
$('.modal-dialog').css({'max-width':"914px"});
|
||||
}else if(largeurAnnonce == 3){
|
||||
$('.modal-dialog').css({'max-width':"1352px"});
|
||||
}else if(largeurAnnonce == 4){
|
||||
$('.modal-dialog').css({'max-width':"1790px"});
|
||||
}
|
||||
|
||||
$('#cropperModal').modal('show');
|
||||
|
||||
}else{
|
||||
base64Home = event.target.result;
|
||||
$("#img-preview-home").attr("src", event.target.result);
|
||||
}
|
||||
};
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
$("#progress-bar-accueil").css({'width':"0%"});
|
||||
$("#progress-bar-accueil").empty().append("0%");
|
||||
}
|
||||
});
|
||||
|
||||
$( "#submit-image-accueil" ).click(function() {
|
||||
$.ajax({
|
||||
url: pathUplodImageAdd,
|
||||
type: 'POST',
|
||||
data: {type:'home', image64:base64Home},
|
||||
xhr: function() {
|
||||
var xhr = $.ajaxSettings.xhr();
|
||||
if (xhr.upload) {
|
||||
xhr.upload.addEventListener('progress', function(evt) {
|
||||
var percent = (evt.loaded / evt.total) * 100;
|
||||
$("#progress-bar-accueil").css({'width': percent + "%"});
|
||||
$("#progress-bar-accueil").empty().append(percent + "%");
|
||||
}, false);
|
||||
}
|
||||
return xhr;
|
||||
},
|
||||
success: function() {
|
||||
$("#progress-bar-accueil").empty().append("Terminer");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
/****************************************************************************** */
|
||||
|
||||
$("#upload_image_search").on('change', function(e) {
|
||||
const file = e.target.files[0];
|
||||
|
||||
if (file) {
|
||||
let reader = new FileReader();
|
||||
|
||||
reader.onload = function (event) {
|
||||
|
||||
$("#imgPreviewCropper").attr("src", event.target.result);
|
||||
$("#imgPreviewCropper").attr("data-type-img", "search");
|
||||
|
||||
var image = new Image();
|
||||
image.src = reader.result;
|
||||
image.onload = function() {
|
||||
if(image.width != widthImgAccueil){
|
||||
$('#imgPreviewCropper').cropper('destroy');
|
||||
|
||||
cropper = $("#imgPreviewCropper").cropper({
|
||||
minContainerWidth: 438,
|
||||
minContainerHeight: 240,
|
||||
minCropBoxWidth: 438,
|
||||
minCropBoxHeight: 240,
|
||||
zoomable: true,
|
||||
dragMode: 'move',
|
||||
});
|
||||
|
||||
$('.modal-dialog').css({'max-width':"476px"});
|
||||
$('#cropperModal').modal('show');
|
||||
}else{
|
||||
base64Search = event.target.result;
|
||||
$("#img-preview-search").attr("src", event.target.result);
|
||||
}
|
||||
};
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
$("#progress-bar-search").css({'width':"0%"});
|
||||
$("#progress-bar-search").empty().append("0%");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
$( "#submit-image-search" ).click(function() {
|
||||
$.ajax({
|
||||
url: pathUplodImageAdd,
|
||||
type: 'POST',
|
||||
data: {type:'search', image64:base64Search},
|
||||
xhr: function() {
|
||||
var xhr = $.ajaxSettings.xhr();
|
||||
if (xhr.upload) {
|
||||
xhr.upload.addEventListener('progress', function(evt) {
|
||||
var percent = (evt.loaded / evt.total) * 100;
|
||||
$("#progress-bar-search").css({'width': percent + "%"});
|
||||
$("#progress-bar-search").empty().append(percent + "%");
|
||||
}, false);
|
||||
}
|
||||
return xhr;
|
||||
},
|
||||
success: function() {
|
||||
$("#progress-bar-search").empty().append("Terminer");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
/*********************************************************************************** */
|
||||
|
||||
|
||||
$("#upload_image_detail1").on('change', function(e) {
|
||||
|
||||
const file = e.target.files[0];
|
||||
|
||||
if (file) {
|
||||
let reader = new FileReader();
|
||||
|
||||
reader.onloadend = function (event) {
|
||||
|
||||
$("#img-preview-detail1").attr("src", event.target.result);
|
||||
|
||||
base64Detail1 = event.target.result;
|
||||
|
||||
//console.log(base64Detail1);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
$("#progress-bar-detail1").css({'width':"0%"});
|
||||
$("#progress-bar-detail1").empty().append("0%");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
$( "#submit-image-detail1" ).click(function() {
|
||||
$.ajax({
|
||||
url: pathUplodImageAdd,
|
||||
type: 'POST',
|
||||
data: {type:'detail1', image64:base64Detail1},
|
||||
xhr: function() {
|
||||
var xhr = $.ajaxSettings.xhr();
|
||||
if (xhr.upload) {
|
||||
xhr.upload.addEventListener('progress', function(evt) {
|
||||
var percent = (evt.loaded / evt.total) * 100;
|
||||
$("#progress-bar-detail1").css({'width': percent + "%"});
|
||||
$("#progress-bar-detail1").empty().append(percent + "%");
|
||||
}, false);
|
||||
}
|
||||
return xhr;
|
||||
},
|
||||
success: function() {
|
||||
$("#progress-bar-detail1").empty().append("Terminer");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
/******************************************************************************** */
|
||||
|
||||
|
||||
$("#upload_image_detail2").on('change', function(e) {
|
||||
|
||||
const file = e.target.files[0];
|
||||
|
||||
if (file) {
|
||||
let reader = new FileReader();
|
||||
|
||||
reader.onloadend = function (event) {
|
||||
|
||||
$("#img-preview-detail2").attr("src", event.target.result);
|
||||
|
||||
base64Detail2 = event.target.result;
|
||||
|
||||
//console.log(base64Detail2);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
$("#progress-bar-detail2").css({'width':"0%"});
|
||||
$("#progress-bar-detail2").empty().append("0%");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
$( "#submit-image-detail2" ).click(function() {
|
||||
$.ajax({
|
||||
url: pathUplodImageAdd,
|
||||
type: 'POST',
|
||||
data: {type:'detail2', image64:base64Detail2},
|
||||
xhr: function() {
|
||||
var xhr = $.ajaxSettings.xhr();
|
||||
if (xhr.upload) {
|
||||
xhr.upload.addEventListener('progress', function(evt) {
|
||||
var percent = (evt.loaded / evt.total) * 100;
|
||||
$("#progress-bar-detail2").css({'width': percent + "%"});
|
||||
$("#progress-bar-detail2").empty().append(percent + "%");
|
||||
}, false);
|
||||
}
|
||||
return xhr;
|
||||
},
|
||||
success: function() {
|
||||
$("#progress-bar-detail2").empty().append("Terminer");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
/*********************************************************************** */
|
||||
|
||||
$("#upload_image_detail3").on('change', function(e) {
|
||||
|
||||
const file = e.target.files[0];
|
||||
|
||||
if (file) {
|
||||
let reader = new FileReader();
|
||||
|
||||
reader.onloadend = function (event) {
|
||||
|
||||
$("#img-preview-detail3").attr("src", event.target.result);
|
||||
|
||||
base64Detail3 = event.target.result;
|
||||
|
||||
//console.log(base64Detail3);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
$("#progress-bar-detail3").css({'width':"0%"});
|
||||
$("#progress-bar-detail3").empty().append("0%");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
$( "#submit-image-detail3" ).click(function() {
|
||||
$.ajax({
|
||||
url: pathUplodImageAdd,
|
||||
type: 'POST',
|
||||
data: {type:'detail3', image64:base64Detail3},
|
||||
xhr: function() {
|
||||
var xhr = $.ajaxSettings.xhr();
|
||||
if (xhr.upload) {
|
||||
xhr.upload.addEventListener('progress', function(evt) {
|
||||
var percent = (evt.loaded / evt.total) * 100;
|
||||
$("#progress-bar-detail3").css({'width': percent + "%"});
|
||||
$("#progress-bar-detail3").empty().append(percent + "%");
|
||||
}, false);
|
||||
}
|
||||
return xhr;
|
||||
},
|
||||
success: function() {
|
||||
$("#progress-bar-detail3").empty().append("Terminer");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
/**************************************************************************** */
|
||||
|
||||
$("#upload_image_detail4").on('change', function(e) {
|
||||
|
||||
const file = e.target.files[0];
|
||||
|
||||
if (file) {
|
||||
let reader = new FileReader();
|
||||
|
||||
reader.onloadend = function (event) {
|
||||
|
||||
$("#img-preview-detail4").attr("src", event.target.result);
|
||||
|
||||
base64Detail4 = event.target.result;
|
||||
|
||||
//console.log(base64Detail4);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
$("#progress-bar-detail4").css({'width':"0%"});
|
||||
$("#progress-bar-detail4").empty().append("0%");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
$( "#submit-image-detail4" ).click(function() {
|
||||
$.ajax({
|
||||
url: pathUplodImageAdd,
|
||||
type: 'POST',
|
||||
data: {type:'detail4', image64:base64Detail4},
|
||||
xhr: function() {
|
||||
var xhr = $.ajaxSettings.xhr();
|
||||
if (xhr.upload) {
|
||||
xhr.upload.addEventListener('progress', function(evt) {
|
||||
var percent = (evt.loaded / evt.total) * 100;
|
||||
$("#progress-bar-detail4").css({'width': percent + "%"});
|
||||
$("#progress-bar-detail4").empty().append(percent + "%");
|
||||
}, false);
|
||||
}
|
||||
return xhr;
|
||||
},
|
||||
success: function() {
|
||||
$("#progress-bar-detail4").empty().append("Terminer");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
$('#dataTableAnnonce').DataTable({
|
||||
language: {
|
||||
url: '../../assets/json/fr-FR.json',
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user