← All changes | assets/src/js/frontend/profile/avatar.js +180 -180 4.3.8 → 4.4.9 View file →

		@@ -1,180 +1,180 @@
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;
	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;