| 1 |
import 'cropperjs/dist/cropper.css'; |
| 2 |
import Cropper from 'cropperjs'; |
| 3 |
import * as Util from '../../utils.js'; |
| 4 |
// import API from '../../api.js'; |
| 5 |
import Toastify from 'toastify-js'; |
| 6 |
import 'toastify-js/src/toastify.css'; |
| 7 |
|
| 8 |
const profileAvatarImage = () => { |
| 9 |
const lpAvatarWrapper = document.querySelector( '#learnpress-avatar-upload' ); |
| 10 |
if ( ! lpAvatarWrapper ) { |
| 11 |
return; |
| 12 |
} |
| 13 |
let cropper, avatarPreviewSrc, imgUrlOriginal; |
| 14 |
let avatarForm = lpAvatarWrapper.querySelector( '.lp_avatar__form' ); |
| 15 |
const btnRemove = lpAvatarWrapper.querySelector( '.lp-btn-remove-avatar' ), |
| 16 |
btnReplace = lpAvatarWrapper.querySelector( '.lp-btn-choose-avatar' ), |
| 17 |
btnSave = lpAvatarWrapper.querySelector( '.lp-btn-save-avatar' ), |
| 18 |
btnCancel = lpAvatarWrapper.querySelector( '.lp-btn-cancel-avatar' ), |
| 19 |
avatarPreviewImage = lpAvatarWrapper.querySelector( '.lp-avatar-image' ), |
| 20 |
avatarInputFile = lpAvatarWrapper.querySelector( '#avatar-file' ), |
| 21 |
profileAvatar = document.querySelector( '.wrapper-profile-header .user-avatar img' ); |
| 22 |
const avatarRatio = parseFloat( ( lpProfileSettings.avatar_dimensions.width / lpProfileSettings.avatar_dimensions.height ).toFixed( 2 ) ); |
| 23 |
|
| 24 |
lpAvatarWrapper.addEventListener( 'click', ( e ) => { |
| 25 |
const target = e.target; |
| 26 |
if ( target === btnReplace ) { |
| 27 |
e.preventDefault(); |
| 28 |
avatarInputFile.click(); |
| 29 |
} else if ( target === btnSave ) { |
| 30 |
Util.lpSetLoadingEl( btnSave, 1 ); |
| 31 |
btnSave.disabled = true; |
| 32 |
if ( undefined !== cropper ) { |
| 33 |
const canvas = cropper.getCroppedCanvas( { |
| 34 |
width: lpProfileSettings.avatar_dimensions.width, |
| 35 |
height: lpProfileSettings.avatar_dimensions.height, |
| 36 |
} ); |
| 37 |
const newCropSrc = canvas.toDataURL( 'image/png' ); |
| 38 |
if ( profileAvatar ) { |
| 39 |
profileAvatar.src = newCropSrc; |
| 40 |
} |
| 41 |
avatarPreviewImage.src = newCropSrc; |
| 42 |
const formData = new FormData(); |
| 43 |
formData.append( 'file', newCropSrc ); |
| 44 |
uploadAvatar( formData ); |
| 45 |
} |
| 46 |
} else if ( target === btnCancel ) { |
| 47 |
e.preventDefault(); |
| 48 |
cropper.destroy(); |
| 49 |
avatarPreviewImage.src = imgUrlOriginal; |
| 50 |
if ( imgUrlOriginal === window.location.href ) { |
| 51 |
Util.lpShowHideEl( avatarForm, 1 ); |
| 52 |
Util.lpShowHideEl( btnReplace, 0 ); |
| 53 |
Util.lpShowHideEl( avatarPreviewImage, 0 ); |
| 54 |
} else { |
| 55 |
Util.lpShowHideEl( btnRemove, 1 ); |
| 56 |
} |
| 57 |
|
| 58 |
Util.lpShowHideEl( btnSave, 0 ); |
| 59 |
Util.lpShowHideEl( btnCancel, 0 ); |
| 60 |
} else if ( target === btnRemove ) { |
| 61 |
btnRemove.disabled = true; |
| 62 |
Util.lpSetLoadingEl( btnRemove, 1 ); |
| 63 |
removeAvatar(); |
| 64 |
} |
| 65 |
} ); |
| 66 |
lpAvatarWrapper.addEventListener( 'change', ( e ) => { |
| 67 |
const target = e.target; |
| 68 |
if ( target === avatarInputFile ) { |
| 69 |
const file = avatarInputFile.files[ 0 ]; |
| 70 |
if ( ! file ) { |
| 71 |
return; |
| 72 |
} |
| 73 |
|
| 74 |
const allowType = [ 'image/png', 'image/jpeg', 'image/webp' ]; |
| 75 |
if ( allowType.indexOf( file.type ) < 0 ) { |
| 76 |
return; |
| 77 |
} |
| 78 |
|
| 79 |
const reader = new FileReader(); |
| 80 |
reader.onload = function( e ) { |
| 81 |
avatarPreviewImage.src = e.target.result; |
| 82 |
// Destroy previous cropper instance if any |
| 83 |
if ( cropper ) { |
| 84 |
cropper.destroy(); |
| 85 |
} |
| 86 |
// Initialize cropper |
| 87 |
cropper = new Cropper( avatarPreviewImage, { |
| 88 |
aspectRatio: avatarRatio, |
| 89 |
viewMode: 1, |
| 90 |
zoomOnWheel: false, |
| 91 |
} ); |
| 92 |
}; |
| 93 |
|
| 94 |
reader.readAsDataURL( file ); |
| 95 |
if ( ! avatarPreviewImage.classList.contains( 'lp-hidden' ) ) { |
| 96 |
Util.lpShowHideEl( avatarPreviewImage, 1 ); |
| 97 |
} |
| 98 |
Util.lpShowHideEl( avatarForm, 0 ); |
| 99 |
Util.lpShowHideEl( btnSave, 1 ); |
| 100 |
Util.lpShowHideEl( btnReplace, 1 ); |
| 101 |
Util.lpShowHideEl( btnCancel, 1 ); |
| 102 |
Util.lpShowHideEl( btnRemove, 0 ); |
| 103 |
} |
| 104 |
} ); |
| 105 |
const uploadAvatar = ( formData ) => { |
| 106 |
fetch( `${ lpData.lp_rest_url }lp/v1/profile/upload-avatar`, { |
| 107 |
method: 'POST', |
| 108 |
headers: { |
| 109 |
'X-WP-Nonce': lpData.nonce, |
| 110 |
}, |
| 111 |
body: formData, |
| 112 |
} ) // wrapped |
| 113 |
.then( ( res ) => res.json() ) |
| 114 |
.then( ( res ) => { |
| 115 |
if ( res.status === 'error' ) { |
| 116 |
throw new Error( res.message ); |
| 117 |
} |
| 118 |
|
| 119 |
Util.lpShowHideEl( avatarPreviewImage, 1 ); |
| 120 |
showMessage( 'success', res.message ); |
| 121 |
if ( undefined !== cropper ) { |
| 122 |
cropper.destroy(); |
| 123 |
} |
| 124 |
|
| 125 |
imgUrlOriginal = avatarPreviewImage.src; |
| 126 |
} ).finally( () => { |
| 127 |
Util.lpShowHideEl( btnSave, 0 ); |
| 128 |
btnSave.disabled = false; |
| 129 |
Util.lpSetLoadingEl( btnSave, 0 ); |
| 130 |
Util.lpShowHideEl( btnCancel, 0 ); |
| 131 |
Util.lpShowHideEl( btnRemove, 1 ); |
| 132 |
} ).catch( ( err ) => console.log( err ) ); |
| 133 |
}; |
| 134 |
const removeAvatar = () => { |
| 135 |
fetch( `${ lpData.lp_rest_url }lp/v1/profile/remove-avatar`, { |
| 136 |
method: 'POST', |
| 137 |
headers: { |
| 138 |
'X-WP-Nonce': lpData.nonce, |
| 139 |
}, |
| 140 |
} ) // wrapped |
| 141 |
.then( ( res ) => res.json() ) |
| 142 |
.then( ( res ) => { |
| 143 |
if ( res.status === 'error' ) { |
| 144 |
throw new Error( res.message ); |
| 145 |
} |
| 146 |
showMessage( 'success', res.message ); |
| 147 |
Util.lpShowHideEl( avatarPreviewImage, 0 ); |
| 148 |
Util.lpShowHideEl( avatarForm, 1 ); |
| 149 |
imgUrlOriginal = avatarPreviewSrc = ''; |
| 150 |
profileAvatar.src = lpProfileSettings.default_avatar; |
| 151 |
// window.location.href = window.location.href; |
| 152 |
} ).finally( () => { |
| 153 |
btnRemove.disabled = false; |
| 154 |
Util.lpShowHideEl( btnRemove, 0 ); |
| 155 |
Util.lpSetLoadingEl( btnRemove, 0 ); |
| 156 |
Util.lpShowHideEl( btnReplace, 0 ); |
| 157 |
} ).catch( ( err ) => console.log( err ) ); |
| 158 |
}; |
| 159 |
|
| 160 |
const showMessage = ( status, message ) => { |
| 161 |
Toastify( { |
| 162 |
text: message, |
| 163 |
gravity: lpData.toast.gravity, // `top` or `bottom` |
| 164 |
position: lpData.toast.position, // `left`, `center` or `right` |
| 165 |
className: `${ lpData.toast.classPrefix } ${ status }`, |
| 166 |
close: lpData.toast.close == 1, |
| 167 |
stopOnFocus: lpData.toast.stopOnFocus == 1, |
| 168 |
duration: lpData.toast.duration, |
| 169 |
} ).showToast(); |
| 170 |
}; |
| 171 |
|
| 172 |
Util.lpOnElementReady( '.lp-avatar-image', () => { |
| 173 |
imgUrlOriginal = avatarPreviewImage.src; |
| 174 |
} ); |
| 175 |
|
| 176 |
Util.lpOnElementReady( '#learnpress-avatar-upload', ( e ) => { |
| 177 |
e.scrollIntoView( { behavior: 'smooth', block: 'center' } ); |
| 178 |
} ); |
| 179 |
}; |
| 180 |
export default profileAvatarImage; |
| 181 |
|
