/**
* Requires:
* jquery.cropit.min.js
* initial.min.js
/*! VFM avatar setup */
function Avatars(username) {
var $avaResponse, $btnRemove, $updated, $btnUpload, $btnUpdate, $avatarPanel, $cropPreview, $slider, $uploader, $btnUploader, imageData, imageName, avaimg;
$avaResponse = $('.avatar-response');
$btnRemove = $('.remove-avatar');
$updated = $('<i class="bi bi-check-circle text-success"></i>');
$updatedWrap = $('.updated');
$btnUpload = $('.uppa');
$btnUpdate = $('.export');
$avatarPanel = $('.avatar-panel');
$cropPreview = $('.cropit-preview');
$slider = $('.slider');
$uploader = $('.cropit-image-input');
$btnUploader = $('.uppa');
avaimg = $('.avatar');
var attr = $(avaimg).attr('src');
// hide default thumb and init cropit with current avatar
if (typeof attr !== typeof undefined && attr !== false) {
$avatarPanel.find('.avadefault').addClass('d-none');
$avatarPanel.cropit({
imageState: {
src: $(avaimg).attr('src')
},
allowDragNDrop: false
});
// hide cropit panel and leave default
} else {
$cropPreview.addClass('d-none');
$slider.addClass('d-none');
$btnRemove.addClass('d-none');
}
// Upload new image
$btnUploader.on('click', function(){
// remove checked mark
$updatedWrap.html('');
// init cropit
$avatarPanel.cropit({
allowDragNDrop: false
});
// trigger uploader
$uploader.click();
});
// Change image input
$uploader.on('change', function(){
$btnUpdate.removeClass('d-none');
// hide default
$avatarPanel.find('.avadefault').addClass('d-none');
// show cropit panel
$cropPreview.removeClass('d-none');
$slider.removeClass('d-none');
$btnRemove.removeClass('d-none');
});
// Remove current avatar
$btnRemove.on('click', function(){
// hide button and checked mark
$(this).addClass('d-none');
$updatedWrap.html('');
$cropPreview.addClass('d-none');
$('.cropit-preview-image').attr('src','');
$btnUpdate.removeClass('d-none');
$avatarPanel.find('.avadefault').removeClass('d-none');
});
// Save new avatar
$(document).on('click', '.export', function(){
var d = new Date();
var randy = d.getTime();
var sendData;
var imageData = false;
if ($('.cropit-preview-image').attr('src') !== '') {
imageData = $avatarPanel.cropit('export');
}
imageName = $('.image-name').val();
if (imageData == false) {
// reset avatar and delete old image
$('.avatar').attr('src', '').data('name', username).addClass('avadefault').initial({fontWeight:200, seed:13});
sendData = { imgData: 0, imgName: imageName }
} else {
sendData = { imgData: imageData, imgName: imageName }
}
$.ajax({
method: "POST",
url: "vfm-admin/ajax/avatar.php",
data: sendData
})
.done(function( msg ) {
$updatedWrap.html($updated);
$btnUpdate.addClass('d-none');
// check if response is imge
if (msg.match(/\.(png)$/) != null) {
$('.avatar').attr('src', msg + '?' + randy);
$avatarPanel.cropit('imageSrc', msg + '?' + randy);
} else {
// print message
$avaResponse.html(msg);
}
})
.fail(function() {
$avaResponse.html('<div class="alert alert-danger" role="alert">Error saving avatar</div>');
});
});
}
// init default avatars
$(document).ready(function(){
$('.avadefault').initial({fontWeight:200, seed:13});
});