← All changes | assets/src/js/frontend/profile/cover-image.js +257 -257 4.3.8 → 4.4.9 View file →

		@@ -1,257 +1,257 @@
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 profileCoverImage = () => {
9		- const lpSet = new Set();
10		- let cropper;
11		- let elBtnSave, elBtnRemove, elBtnChoose, elBtnCancel,
12		- elImagePreview, elCoverImageBackground, elImgCoverImageBackground, elImageEmpty,
13		- formCoverImage, elInputFile, elAction, imgUrlOriginal;
14		- const className = {
15		- formCoverImage: 'lp-user-cover-image',
16		- BtnChooseCoverImage: 'lp-btn-choose-cover-image',
17		- BtnSaveCoverImage: 'lp-btn-save-cover-image',
18		- BtnRemoveCoverImage: 'lp-btn-remove-cover-image',
19		- BtnCancelCoverImage: 'lp-btn-cancel-cover-image',
20		- BtnToEditCoverImage: 'lp-btn-to-edit-cover-image',
21		- CoverImagePreview: 'lp-cover-image-preview',
22		- CoverImageEmpty: 'lp-cover-image-empty',
23		- CoverImageBackground: 'lp-user-cover-image_background',
24		- InputFile: 'lp-cover-image-file',
25		- loading: 'loading',
26		- hidden: 'lp-hidden',
27		- };
28		-
29		- /**
30		- * Get elements to use.
31		- */
32		- const getElements = () => {
33		- elBtnSave = formCoverImage.querySelector( `.${ className.BtnSaveCoverImage }` );
34		- elBtnChoose = formCoverImage.querySelector( `.${ className.BtnChooseCoverImage }` );
35		- elBtnRemove = formCoverImage.querySelector( `.${ className.BtnRemoveCoverImage }` );
36		- elBtnCancel = formCoverImage.querySelector( `.${ className.BtnCancelCoverImage }` );
37		- elImagePreview = formCoverImage.querySelector( `.${ className.CoverImagePreview }` );
38		- elCoverImageBackground = document.querySelector( `.${ className.CoverImageBackground }` );
39		- elImgCoverImageBackground = elCoverImageBackground.querySelector( `img` );
40		- elImageEmpty = formCoverImage.querySelector( `.${ className.CoverImageEmpty }` );
41		- elAction = formCoverImage.querySelector( 'input[name=action]' );
42		- elInputFile = formCoverImage.querySelector( 'input[name=lp-cover-image-file]' );
43		-
44		- if ( ! lpSet.has( 'everClick' ) ) {
45		- imgUrlOriginal = elImagePreview.src;
46		- lpSet.add( 'everClick' );
47		- }
48		- };
49		-
50		- const fetchAPI = ( formData ) => {
51		- const callBack = {
52		- success: ( response ) => {
53		- const { status, message, data } = response;
54		-
55		- Toastify( {
56		- text: message,
57		- gravity: lpData.toast.gravity, // `top` or `bottom`
58		- position: lpData.toast.position, // `left`, `center` or `right`
59		- className: `${ lpData.toast.classPrefix } ${ status }`,
60		- close: lpData.toast.close == 1,
61		- stopOnFocus: lpData.toast.stopOnFocus == 1,
62		- duration: lpData.toast.duration,
63		- } ).showToast();
64		-
65		- if ( 'remove' === data.action ) {
66		- Util.lpShowHideEl( elBtnRemove, 0 );
67		- Util.lpShowHideEl( elBtnChoose, 0 );
68		- elImagePreview.src = '';
69		- Util.lpShowHideEl( elImagePreview, 0 );
70		- Util.lpShowHideEl( elImageEmpty, 1 );
71		- if ( elCoverImageBackground ) {
72		- Util.lpShowHideEl( elCoverImageBackground, 0 );
73		- }
74		- } else if ( 'upload' === data.action ) {
75		- Util.lpShowHideEl( elImagePreview, 1 );
76		- elImagePreview.src = data.url;
77		- imgUrlOriginal = data.url;
78		- cropper.destroy();
79		- }
80		-
81		- imgUrlOriginal = elImagePreview.src;
82		- },
83		- error: ( error ) => {
84		- console.log( error );
85		- },
86		- completed: () => {
87		- Util.lpShowHideEl( elBtnSave, 0 );
88		- Util.lpSetLoadingEl( elBtnSave, 0 );
89		- Util.lpSetLoadingEl( elBtnRemove, 0 );
90		- Util.lpShowHideEl( elBtnCancel, 0 );
91		-
92		- if ( ! elImagePreview.src || elImagePreview.src === window.location.href ) {
93		- Util.lpShowHideEl( elBtnRemove, 0 );
94		- } else {
95		- Util.lpShowHideEl( elBtnRemove, 1 );
96		- }
97		- },
98		- };
99		-
100		- const url = API.frontend.apiProfileCoverImage;
101		- const option = { headers: {} };
102		- if ( 0 !== parseInt( lpData.user_id ) ) {
103		- option.headers[ 'X-WP-Nonce' ] = lpData.nonce;
104		- }
105		-
106		- option.method = 'POST';
107		- option.body = formData;
108		-
109		- Util.lpFetchAPI( url, option, callBack );
110		- };
111		-
112		- // Events
113		- document.addEventListener( 'click', ( e ) => {
114		- const target = e.target;
115		-
116		- if ( target.classList.contains( className.BtnToEditCoverImage ) ) {
117		- formCoverImage = document.querySelector( `.${ className.formCoverImage }` );
118		- if ( ! formCoverImage ) {
119		- return;
120		- }
121		-
122		- const isCorrectSection = target.dataset.sectionCorrect == 1;
123		- if ( isCorrectSection ) {
124		- e.preventDefault();
125		- formCoverImage.scrollIntoView( { behavior: 'smooth', block: 'center' } );
126		- }
127		- }
128		-
129		- formCoverImage = target.closest( `.${ className.formCoverImage }` );
130		- if ( ! formCoverImage ) {
131		- return;
132		- }
133		-
134		- getElements();
135		- if ( target.classList.contains( className.BtnChooseCoverImage ) ) {
136		- e.preventDefault();
137		- elInputFile.click();
138		- }
139		- if ( target.classList.contains( className.BtnSaveCoverImage ) ) {
140		- Util.lpSetLoadingEl( elBtnSave, 1 );
141		- }
142		- if ( target.classList.contains( className.BtnCancelCoverImage ) ) {
143		- e.preventDefault();
144		- cropper.destroy();
145		- elImagePreview.src = imgUrlOriginal;
146		- if ( imgUrlOriginal === window.location.href ) {
147		- Util.lpShowHideEl( elImageEmpty, 1 );
148		- Util.lpShowHideEl( elBtnChoose, 0 );
149		- Util.lpShowHideEl( elImagePreview, 0 );
150		- } else {
151		- Util.lpShowHideEl( elBtnRemove, 1 );
152		- }
153		-
154		- Util.lpShowHideEl( elBtnSave, 0 );
155		- Util.lpShowHideEl( elBtnCancel, 0 );
156		- }
157		- if ( target.classList.contains( className.BtnRemoveCoverImage ) ) {
158		- e.preventDefault();
159		- target.classList.add( 'loading' );
160		- if ( cropper ) {
161		- cropper.destroy();
162		- cropper = undefined;
163		- }
164		- elAction.value = 'remove';
165		- elBtnSave.click();
166		- }
167		- if ( target.classList.contains( className.CoverImageEmpty ) ) {
168		- e.preventDefault();
169		- elInputFile.click();
170		- }
171		- } );
172		- document.addEventListener( 'change', ( e ) => {
173		- const target = e.target;
174		-
175		- formCoverImage = target.closest( `.${ className.formCoverImage }` );
176		- if ( ! formCoverImage ) {
177		- return;
178		- }
179		-
180		- getElements();
181		- if ( target.classList.contains( className.InputFile ) ) {
182		- e.preventDefault();
183		- const file = target.files[ 0 ];
184		- if ( ! file ) {
185		- return;
186		- }
187		-
188		- const allowType = [ 'image/png', 'image/jpeg', 'image/webp' ];
189		- if ( allowType.indexOf( file.type ) < 0 ) {
190		- return;
191		- }
192		-
193		- elAction.value = 'upload';
194		- Util.lpShowHideEl( elImagePreview, 1 );
195		- Util.lpShowHideEl( elImageEmpty, 0 );
196		- Util.lpShowHideEl( elBtnRemove, 0 );
197		- Util.lpShowHideEl( elBtnSave, 1 );
198		- Util.lpShowHideEl( elBtnChoose, 1 );
199		- Util.lpShowHideEl( elBtnCancel, 1 );
200		-
201		- const reader = new FileReader();
202		- reader.onload = function( e ) {
203		- elImagePreview.src = e.target.result;
204		- // Destroy previous cropper instance if any
205		- if ( cropper ) {
206		- cropper.destroy();
207		- }
208		- // Initialize cropper
209		- cropper = new Cropper( elImagePreview, {
210		- aspectRatio: lpData.coverImageRatio,
211		- viewMode: 1,
212		- zoomOnWheel: false,
213		- } );
214		- };
215		- reader.readAsDataURL( file );
216		- }
217		- } );
218		- document.addEventListener( 'submit', ( e ) => {
219		- const target = e.target;
220		-
221		- if ( target.classList.contains( className.formCoverImage ) ) {
222		- e.preventDefault();
223		- const formData = new FormData( target );
224		-
225		- if ( undefined !== cropper ) {
226		- const canvas = cropper.getCroppedCanvas( {} );
227		- if ( elCoverImageBackground ) {
228		- const dataUrl = canvas.toDataURL( 'image/png' );
229		- elCoverImageBackground.style.backgroundImage = `url(${ dataUrl })`;
230		- elImgCoverImageBackground.src = dataUrl;
231		- Util.lpShowHideEl( elCoverImageBackground, 1 );
232		- }
233		-
234		- canvas.toBlob( ( blob ) => {
235		- formData.append( 'image', blob, 'cover.png' );
236		-
237		- fetchAPI( formData );
238		- }, 'image/png' );
239		- } else {
240		- fetchAPI( formData );
241		- }
242		- }
243		- } );
244		- document.addEventListener( 'DOMContentLoaded', ( e ) => {
245		- const elBtnToEditCoverImage = document.querySelector( `.${ className.BtnToEditCoverImage }` );
246		- const formCoverImage = document.querySelector( `.${ className.formCoverImage }` );
247		-
248		- if ( elBtnToEditCoverImage && formCoverImage ) {
249		- const isCorrectSection = elBtnToEditCoverImage.dataset.sectionCorrect == 1;
250		- if ( isCorrectSection ) {
251		- formCoverImage.scrollIntoView( { behavior: 'smooth', block: 'center' } );
252		- }
253		- }
254		- } );
255		-};
256		-
257		-export default profileCoverImage;
	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 profileCoverImage = () => {
	9	+ const lpSet = new Set();
	10	+ let cropper;
	11	+ let elBtnSave, elBtnRemove, elBtnChoose, elBtnCancel,
	12	+ elImagePreview, elCoverImageBackground, elImgCoverImageBackground, elImageEmpty,
	13	+ formCoverImage, elInputFile, elAction, imgUrlOriginal;
	14	+ const className = {
	15	+ formCoverImage: 'lp-user-cover-image',
	16	+ BtnChooseCoverImage: 'lp-btn-choose-cover-image',
	17	+ BtnSaveCoverImage: 'lp-btn-save-cover-image',
	18	+ BtnRemoveCoverImage: 'lp-btn-remove-cover-image',
	19	+ BtnCancelCoverImage: 'lp-btn-cancel-cover-image',
	20	+ BtnToEditCoverImage: 'lp-btn-to-edit-cover-image',
	21	+ CoverImagePreview: 'lp-cover-image-preview',
	22	+ CoverImageEmpty: 'lp-cover-image-empty',
	23	+ CoverImageBackground: 'lp-user-cover-image_background',
	24	+ InputFile: 'lp-cover-image-file',
	25	+ loading: 'loading',
	26	+ hidden: 'lp-hidden',
	27	+ };
	28	+
	29	+ /**
	30	+ * Get elements to use.
	31	+ */
	32	+ const getElements = () => {
	33	+ elBtnSave = formCoverImage.querySelector( `.${ className.BtnSaveCoverImage }` );
	34	+ elBtnChoose = formCoverImage.querySelector( `.${ className.BtnChooseCoverImage }` );
	35	+ elBtnRemove = formCoverImage.querySelector( `.${ className.BtnRemoveCoverImage }` );
	36	+ elBtnCancel = formCoverImage.querySelector( `.${ className.BtnCancelCoverImage }` );
	37	+ elImagePreview = formCoverImage.querySelector( `.${ className.CoverImagePreview }` );
	38	+ elCoverImageBackground = document.querySelector( `.${ className.CoverImageBackground }` );
	39	+ elImgCoverImageBackground = elCoverImageBackground.querySelector( `img` );
	40	+ elImageEmpty = formCoverImage.querySelector( `.${ className.CoverImageEmpty }` );
	41	+ elAction = formCoverImage.querySelector( 'input[name=action]' );
	42	+ elInputFile = formCoverImage.querySelector( 'input[name=lp-cover-image-file]' );
	43	+
	44	+ if ( ! lpSet.has( 'everClick' ) ) {
	45	+ imgUrlOriginal = elImagePreview.src;
	46	+ lpSet.add( 'everClick' );
	47	+ }
	48	+ };
	49	+
	50	+ const fetchAPI = ( formData ) => {
	51	+ const callBack = {
	52	+ success: ( response ) => {
	53	+ const { status, message, data } = response;
	54	+
	55	+ Toastify( {
	56	+ text: message,
	57	+ gravity: lpData.toast.gravity, // `top` or `bottom`
	58	+ position: lpData.toast.position, // `left`, `center` or `right`
	59	+ className: `${ lpData.toast.classPrefix } ${ status }`,
	60	+ close: lpData.toast.close == 1,
	61	+ stopOnFocus: lpData.toast.stopOnFocus == 1,
	62	+ duration: lpData.toast.duration,
	63	+ } ).showToast();
	64	+
	65	+ if ( 'remove' === data.action ) {
	66	+ Util.lpShowHideEl( elBtnRemove, 0 );
	67	+ Util.lpShowHideEl( elBtnChoose, 0 );
	68	+ elImagePreview.src = '';
	69	+ Util.lpShowHideEl( elImagePreview, 0 );
	70	+ Util.lpShowHideEl( elImageEmpty, 1 );
	71	+ if ( elCoverImageBackground ) {
	72	+ Util.lpShowHideEl( elCoverImageBackground, 0 );
	73	+ }
	74	+ } else if ( 'upload' === data.action ) {
	75	+ Util.lpShowHideEl( elImagePreview, 1 );
	76	+ elImagePreview.src = data.url;
	77	+ imgUrlOriginal = data.url;
	78	+ cropper.destroy();
	79	+ }
	80	+
	81	+ imgUrlOriginal = elImagePreview.src;
	82	+ },
	83	+ error: ( error ) => {
	84	+ console.log( error );
	85	+ },
	86	+ completed: () => {
	87	+ Util.lpShowHideEl( elBtnSave, 0 );
	88	+ Util.lpSetLoadingEl( elBtnSave, 0 );
	89	+ Util.lpSetLoadingEl( elBtnRemove, 0 );
	90	+ Util.lpShowHideEl( elBtnCancel, 0 );
	91	+
	92	+ if ( ! elImagePreview.src || elImagePreview.src === window.location.href ) {
	93	+ Util.lpShowHideEl( elBtnRemove, 0 );
	94	+ } else {
	95	+ Util.lpShowHideEl( elBtnRemove, 1 );
	96	+ }
	97	+ },
	98	+ };
	99	+
	100	+ const url = API.frontend.apiProfileCoverImage;
	101	+ const option = { headers: {} };
	102	+ if ( 0 !== parseInt( lpData.user_id ) ) {
	103	+ option.headers[ 'X-WP-Nonce' ] = lpData.nonce;
	104	+ }
	105	+
	106	+ option.method = 'POST';
	107	+ option.body = formData;
	108	+
	109	+ Util.lpFetchAPI( url, option, callBack );
	110	+ };
	111	+
	112	+ // Events
	113	+ document.addEventListener( 'click', ( e ) => {
	114	+ const target = e.target;
	115	+
	116	+ if ( target.classList.contains( className.BtnToEditCoverImage ) ) {
	117	+ formCoverImage = document.querySelector( `.${ className.formCoverImage }` );
	118	+ if ( ! formCoverImage ) {
	119	+ return;
	120	+ }
	121	+
	122	+ const isCorrectSection = target.dataset.sectionCorrect == 1;
	123	+ if ( isCorrectSection ) {
	124	+ e.preventDefault();
	125	+ formCoverImage.scrollIntoView( { behavior: 'smooth', block: 'center' } );
	126	+ }
	127	+ }
	128	+
	129	+ formCoverImage = target.closest( `.${ className.formCoverImage }` );
	130	+ if ( ! formCoverImage ) {
	131	+ return;
	132	+ }
	133	+
	134	+ getElements();
	135	+ if ( target.classList.contains( className.BtnChooseCoverImage ) ) {
	136	+ e.preventDefault();
	137	+ elInputFile.click();
	138	+ }
	139	+ if ( target.classList.contains( className.BtnSaveCoverImage ) ) {
	140	+ Util.lpSetLoadingEl( elBtnSave, 1 );
	141	+ }
	142	+ if ( target.classList.contains( className.BtnCancelCoverImage ) ) {
	143	+ e.preventDefault();
	144	+ cropper.destroy();
	145	+ elImagePreview.src = imgUrlOriginal;
	146	+ if ( imgUrlOriginal === window.location.href ) {
	147	+ Util.lpShowHideEl( elImageEmpty, 1 );
	148	+ Util.lpShowHideEl( elBtnChoose, 0 );
	149	+ Util.lpShowHideEl( elImagePreview, 0 );
	150	+ } else {
	151	+ Util.lpShowHideEl( elBtnRemove, 1 );
	152	+ }
	153	+
	154	+ Util.lpShowHideEl( elBtnSave, 0 );
	155	+ Util.lpShowHideEl( elBtnCancel, 0 );
	156	+ }
	157	+ if ( target.classList.contains( className.BtnRemoveCoverImage ) ) {
	158	+ e.preventDefault();
	159	+ target.classList.add( 'loading' );
	160	+ if ( cropper ) {
	161	+ cropper.destroy();
	162	+ cropper = undefined;
	163	+ }
	164	+ elAction.value = 'remove';
	165	+ elBtnSave.click();
	166	+ }
	167	+ if ( target.classList.contains( className.CoverImageEmpty ) ) {
	168	+ e.preventDefault();
	169	+ elInputFile.click();
	170	+ }
	171	+ } );
	172	+ document.addEventListener( 'change', ( e ) => {
	173	+ const target = e.target;
	174	+
	175	+ formCoverImage = target.closest( `.${ className.formCoverImage }` );
	176	+ if ( ! formCoverImage ) {
	177	+ return;
	178	+ }
	179	+
	180	+ getElements();
	181	+ if ( target.classList.contains( className.InputFile ) ) {
	182	+ e.preventDefault();
	183	+ const file = target.files[ 0 ];
	184	+ if ( ! file ) {
	185	+ return;
	186	+ }
	187	+
	188	+ const allowType = [ 'image/png', 'image/jpeg', 'image/webp' ];
	189	+ if ( allowType.indexOf( file.type ) < 0 ) {
	190	+ return;
	191	+ }
	192	+
	193	+ elAction.value = 'upload';
	194	+ Util.lpShowHideEl( elImagePreview, 1 );
	195	+ Util.lpShowHideEl( elImageEmpty, 0 );
	196	+ Util.lpShowHideEl( elBtnRemove, 0 );
	197	+ Util.lpShowHideEl( elBtnSave, 1 );
	198	+ Util.lpShowHideEl( elBtnChoose, 1 );
	199	+ Util.lpShowHideEl( elBtnCancel, 1 );
	200	+
	201	+ const reader = new FileReader();
	202	+ reader.onload = function( e ) {
	203	+ elImagePreview.src = e.target.result;
	204	+ // Destroy previous cropper instance if any
	205	+ if ( cropper ) {
	206	+ cropper.destroy();
	207	+ }
	208	+ // Initialize cropper
	209	+ cropper = new Cropper( elImagePreview, {
	210	+ aspectRatio: lpData.coverImageRatio,
	211	+ viewMode: 1,
	212	+ zoomOnWheel: false,
	213	+ } );
	214	+ };
	215	+ reader.readAsDataURL( file );
	216	+ }
	217	+ } );
	218	+ document.addEventListener( 'submit', ( e ) => {
	219	+ const target = e.target;
	220	+
	221	+ if ( target.classList.contains( className.formCoverImage ) ) {
	222	+ e.preventDefault();
	223	+ const formData = new FormData( target );
	224	+
	225	+ if ( undefined !== cropper ) {
	226	+ const canvas = cropper.getCroppedCanvas( {} );
	227	+ if ( elCoverImageBackground ) {
	228	+ const dataUrl = canvas.toDataURL( 'image/png' );
	229	+ elCoverImageBackground.style.backgroundImage = `url(${ dataUrl })`;
	230	+ elImgCoverImageBackground.src = dataUrl;
	231	+ Util.lpShowHideEl( elCoverImageBackground, 1 );
	232	+ }
	233	+
	234	+ canvas.toBlob( ( blob ) => {
	235	+ formData.append( 'image', blob, 'cover.png' );
	236	+
	237	+ fetchAPI( formData );
	238	+ }, 'image/png' );
	239	+ } else {
	240	+ fetchAPI( formData );
	241	+ }
	242	+ }
	243	+ } );
	244	+ document.addEventListener( 'DOMContentLoaded', ( e ) => {
	245	+ const elBtnToEditCoverImage = document.querySelector( `.${ className.BtnToEditCoverImage }` );
	246	+ const formCoverImage = document.querySelector( `.${ className.formCoverImage }` );
	247	+
	248	+ if ( elBtnToEditCoverImage && formCoverImage ) {
	249	+ const isCorrectSection = elBtnToEditCoverImage.dataset.sectionCorrect == 1;
	250	+ if ( isCorrectSection ) {
	251	+ formCoverImage.scrollIntoView( { behavior: 'smooth', block: 'center' } );
	252	+ }
	253	+ }
	254	+ } );
	255	+};
	256	+
	257	+export default profileCoverImage;