Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) / 1.8.13

Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) v1.8.13

charitable / assets / js / campaign-builder / campaign-embed-wizard.js

campaign-embed-wizard.js in Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) 1.8.13, at assets/js/campaign-builder/campaign-embed-wizard.js

573 lines 14.4 KB

Raw Download Zip

1	/* global campaign_admin_campaign_embed_wizard, CharitableCampaignBuilder, ajaxurl, charitable_builder, wpchar, Charitable */
2
3	/**
4	* Campaign Embed Wizard function.
5	*
6	* @since 1.8.0
7	*/
8
9	'use strict';
10
11	var CharitableCampaignEmbedWizard = window.CharitableCampaignEmbedWizard \|\| ( function( document, window, $ ) {
12
13	/**
14	* Elements.
15	*
16	* @since 1.8.0
17	*
18	* @type {object}
19	*/
20	var el = {};
21
22	/**
23	* Runtime variables.
24	*
25	* @since 1.8.0
26	*
27	* @type {object}
28	*/
29	var vars = {
30	formId: 0,
31	isBuilder: false,
32	lastEmbedSearchPageTerm: '',
33	};
34
35	/**
36	* Public functions and properties.
37	*
38	* @since 1.8.0
39	*
40	* @type {object}
41	*/
42	var app = {
43
44	/**
45	* Start the engine.
46	*
47	* @since 1.8.0
48	*/
49	init: function() {
50
51	$( app.ready );
52	$( window ).on( 'load', function() {
53
54	// in case of jQuery 3.+ we need to wait for an `ready` event first.
55	if ( typeof $.ready.then === 'function' ) {
56	$.ready.then( app.load );
57	} else {
58	app.load();
59	}
60	} );
61	},
62
63	/**
64	* Document ready.
65	*
66	* @since 1.8.0
67	*/
68	ready: function() {
69
70	//wpchar.debug( 'wizard ready' , 'embed wizard' );
71
72	app.initVars();
73	app.events();
74	},
75
76	/**
77	* Window load.
78	*
79	* @since 1.8.0
80	*/
81	load: function() {
82
83	//wpchar.debug( 'embed wizard load' , 'embed wizard' );
84	//wpchar.debug( vars , 'embed wizard' );
85
86	// Initialize wizard state in the form builder only.
87	if ( vars.isBuilder ) {
88	app.initialStateToggle();
89	}
90
91	app.initSelectPagesChoicesJS();
92	},
93
94	/**
95	* Init variables.
96	*
97	* @since 1.8.0
98	*/
99	initVars: function() {
100
101	//wpchar.debug('wizard initVars', 'embed wizard' );
102
103	// Caching some DOM elements for further use.
104	el = {
105	$wizardContainer: $( '#charitable-admin-campaign-embed-wizard-container' ),
106	$wizard: $( '#charitable-admin-campaign-embed-wizard' ),
107	$contentInitial: $( '#charitable-admin-campaign-embed-wizard-content-initial' ),
108	$contentSelectPage: $( '#charitable-admin-campaign-embed-wizard-content-select-page' ),
109	$contentCreatePage: $( '#charitable-admin-campaign-embed-wizard-content-create-page' ),
110	$sectionBtns: $( '#charitable-admin-campaign-embed-wizard-section-btns' ),
111	$sectionGo: $( '#charitable-admin-campaign-embed-wizard-section-go' ),
112	$newPageTitle: $( '#charitable-admin-campaign-embed-wizard-new-page-title' ),
113	$selectPage: $( '#campaign-setting-campaign-embed-wizard-choicesjs-select-pages' ),
114	$videoTutorial: $( '#charitable-admin-campaign-embed-wizard-tutorial' ),
115	$sectionToggles: $( '#charitable-admin-campaign-embed-wizard-section-toggles' ),
116	$sectionGoBack: $( '#charitable-admin-campaign-embed-wizard-section-goback' ),
117	$shortcode: $( '#charitable-admin-campaign-embed-wizard-shortcode-wrap' ),
118	$shortcodeInput: $( '#charitable-admin-campaign-embed-wizard-shortcode' ),
119	$shortcodeCopy: $( '#charitable-admin-campaign-embed-wizard-shortcode-copy' ),
120	$editorToolTipContainer: $( '#charitable-admin-campaign-embed-wizard-tooltip-content' ),
121	$editorToolTipContainerButton: $( '.charitable-admin-campaign-embed-wizard-done-btn' ),
122	};
123
124	el.$selectPageContainer = el.$selectPage.parents( 'span.choicesjs-select-wrap' );
125
126	// Detect the form builder screen and store the flag.
127	vars.isBuilder = typeof CharitableCampaignBuilder !== 'undefined';
128
129
130	// Are the pages exists?
131	vars.pagesExists = el.$wizard.data( 'pages-exists' ) === 1;
132	},
133
134	/**
135	* Init ChoicesJS for "Select Pages" field in embed.
136	*
137	* @since 1.7.9
138	*/
139	initSelectPagesChoicesJS: function() {
140
141	if ( el.$selectPage.length <= 0 ) {
142	return;
143	}
144
145	const useAjax = el.$selectPage.data( 'use_ajax' ) === 1;
146
147	Charitable.Admin.Builder.CharitableChoicesJS.setup(
148	el.$selectPage[0],
149	{},
150	{
151	action: 'campaign_admin_campaign_embed_wizard_search_pages_choicesjs',
152	nonce: useAjax ? campaign_admin_campaign_embed_wizard.nonce : null,
153	}
154	);
155	},
156
157	/**
158	* Register JS events.
159	*
160	* @since 1.8.0
161	*/
162	events: function() {
163
164	//wpchar.debug('CharitableCampaignEmbedWizard events', 'embed wizard' );
165	//wpchar.debug( el.$wizard , 'embed wizard' );
166
167	// Skip wizard events in the page editor.
168	if ( el.$editorToolTipContainer.length ) {
169	el.$editorToolTipContainer
170	.on( 'click', '.charitable-admin-campaign-embed-wizard-done-btn', app.closeTooltip );
171	return;
172	}
173
174	// Skip wizard events in the page editor.
175	if ( ! el.$wizard.length ) {
176	return;
177	}
178
179	el.$wizard
180	.on( 'click', 'button', app.popupButtonsClick )
181	.on( 'click', '.tutorial-toggle', app.tutorialToggle )
182	.on( 'click', '.shortcode-toggle', app.shortcodeToggle )
183	.on( 'click', '.initialstate-toggle', app.initialStateToggle )
184	.on( 'click', '.charitable-admin-popup-close', app.closePopup )
185	.on( 'click', '#charitable-admin-campaign-embed-wizard-shortcode-copy', app.copyShortcodeToClipboard )
186	.on( 'click', '#charitable-admin-campaign-embed-wizard-tooltip-content .charitable-admin-campaign-embed-wizard-done-btn', app.closeTooltip );
187	},
188
189	/**
190	* Close tooltip.
191	*
192	* @since 1.8.1
193	*/
194	closeTooltip: function() {
195
196	var thisTooltip = $( this ).closest( '.charitable-admin-campaign-embed-wizard-tooltip' ),
197	data = {
198	action : 'campaign_admin_campaign_embed_wizard_clear_meta',
199	_wpnonce: campaign_admin_campaign_embed_wizard.nonce,
200	};
201
202	$.post( ajaxurl, data, function( response ) {
203	if ( response.success ) {
204	// thisTooltip.remove();
205	}
206	} );
207
208	thisTooltip.remove();
209
210	},
211
212	/**
213	* Popup buttons events handler.
214	*
215	* @since 1.8.0
216	*
217	* @param {object} e Event object.
218	*/
219	popupButtonsClick: function( e ) {
220
221	//wpchar.debug('popupButtonsClick', 'embed wizard' );
222
223	var $btn = $( e.target );
224
225	if ( ! $btn.length ) {
226	return;
227	}
228
229	var $div = $btn.closest( 'div' ),
230	action = $btn.data( 'action' ) \|\| '',
231	labelText = $btn.text();
232
233	el.$contentInitial.hide();
234
235	//wpchar.debug('popupButtonsClick with action ' + action , 'embed wizard' );
236
237	switch ( action ) {
238
239	// Select existing page.
240	case 'select-page':
241	el.$newPageTitle.hide();
242	el.$contentSelectPage.show();
243	break;
244
245	// Create a new page.
246	case 'create-page':
247	el.$selectPageContainer.hide();
248	el.$contentCreatePage.show();
249	break;
250
251	// Let's Go!
252	case 'go':
253	if ( el.$selectPageContainer.is( ':visible' ) && el.$selectPage.val() === '' ) {
254	return;
255	}
256	//wpchar.debug('popupButtonsClick disabled button' , 'embed wizard' );
257	//wpchar.debug('popupButtonsClick disabled button text: ' + labelText , 'embed wizard' );
258	$btn.prop( 'disabled', true );
259	$btn.text( charitable_builder.loading + '...' );
260	app.saveFormAndRedirect( $btn, labelText );
261
262	return;
263	}
264
265	$div.hide();
266	$div.next().fadeIn();
267	el.$sectionToggles.hide();
268	el.$sectionGoBack.fadeIn();
269
270	// Set focus to the field that is currently displayed.
271	$.each( [ el.$selectPage, el.$newPageTitle ], function() {
272	if ( this.is( ':visible' ) ) {
273	this.trigger( 'focus' );
274	}
275	} );
276
277	},
278
279	/**
280	* Provide a link but later provide a video tutorial inside popup.
281	*
282	* @since 1.8.0
283	*
284	* @param {object} e Event object.
285	*/
286	tutorialToggle: function( e ) {
287
288	e.preventDefault();
289
290	// open a new window and goto a url.
291	window.open( 'https://www.wpcharitable.com/documentation/creating-a-campaign-page/', '_blank' );
292
293	// close the embed popup.
294	app.closePopup();
295	},
296
297	/**
298	* Toggle shortcode input field.
299	*
300	* @since 1.8.0
301	*
302	* @param {object} e Event object.
303	*/
304	shortcodeToggle: function( e ) {
305
306	e.preventDefault();
307
308	el.$videoTutorial.hide();
309	el.$shortcodeInput.val( '[campaign id="' + vars.formId + '"]' );
310	el.$shortcode.toggle();
311	},
312
313	/**
314	* Copies the shortcode embed code to the clipboard.
315	*
316	* @since 1.8.0
317	*/
318	copyShortcodeToClipboard: function() {
319
320	// Remove disabled attribute, select the text, and re-add disabled attribute.
321	$( '#charitable-admin-campaign-embed-wizard-shortcode' )
322	.prop( 'disabled', false )
323	.select()
324	.prop( 'disabled', true );
325
326	// Copy it.
327	document.execCommand( 'copy' );
328
329	var $icon = el.$shortcodeCopy.find( 'i' );
330
331	// Add visual feedback to copy command.
332	$icon.removeClass( 'fa-files-o' ).addClass( 'fa-check' );
333
334	// Reset visual confirmation back to default state after 2.5 sec.
335	window.setTimeout( function() {
336	$icon.removeClass( 'fa-check' ).addClass( 'fa-files-o' );
337	}, 2500 );
338	},
339
340	/**
341	* Toggle initial state.
342	*
343	* @since 1.8.0
344	*
345	* @param {object} e Event object.
346	*/
347	initialStateToggle: function( e ) {
348
349	if ( e ) {
350	e.preventDefault();
351	}
352
353	el.$contentInitial.show();
354	el.$contentSelectPage.hide();
355	el.$contentCreatePage.hide();
356	el.$selectPageContainer.show();
357	el.$newPageTitle.show();
358	el.$sectionBtns.show();
359	el.$sectionGo.hide();
360	},
361
362	/**
363	* Save the form and redirect to form embed page.
364	*
365	* @since 1.8.0
366	*/
367	saveFormAndRedirect: function( $button = false, labelText = false ) {
368
369	//wpchar.debug('saveFormAndRedirect' , 'embed wizard' );
370
371	// Just redirect if no need to save the form.
372	if ( ! vars.isBuilder \|\| CharitableCampaignBuilder.formIsSaved() ) {
373	app.embedPageRedirect( $button, labelText );
374	return;
375	}
376
377	$.confirm( {
378	title: false,
379	content: charitable_builder.exit_confirm,
380	icon: 'fa fa-exclamation-circle',
381	type: 'orange',
382	closeIcon: true,
383	buttons: {
384	confirm: {
385	text: charitable_builder.save_embed,
386	btnClass: 'btn-confirm',
387	keys: [ 'enter' ],
388	action: function() {
389	CharitableCampaignBuilder.formSave().done( app.embedPageRedirect );
390	},
391	},
392	cancel: {
393	text: charitable_builder.embed,
394	action: function() {
395	CharitableCampaignBuilder.setCloseConfirmation( false );
396	app.embedPageRedirect();
397	},
398	},
399	},
400	onClose: function() {
401	el.$sectionGo.find( 'button' ).prop( 'disabled', false );
402	},
403	} );
404	},
405
406	/**
407	* Prepare data for requesting redirect URL.
408	*
409	* @since 1.8.0
410	*
411	* @returns {object} AJAX data object.
412	*/
413	embedPageRedirectAjaxData: function() {
414
415	var data = {
416	action : 'campaign_admin_campaign_embed_wizard_embed_page_url',
417	_wpnonce: campaign_admin_campaign_embed_wizard.nonce,
418	formId: vars.formId,
419	};
420
421	if ( el.$selectPageContainer.is( ':visible' ) ) {
422	data.pageId = el.$selectPage.val();
423	}
424
425	if ( el.$newPageTitle.is( ':visible' ) ) {
426	data.pageTitle = el.$newPageTitle.val();
427	}
428
429	return data;
430	},
431
432	/**
433	* Redirect to form embed page.
434	*
435	* @since 1.8.0
436	*/
437	embedPageRedirect: function( $button = false, labelText = false ) {
438
439	//wpchar.debug('embedPageRedirect' , 'embed wizard' );
440	//wpchar.debug('embedPageRedirect labelText:' + labelText , 'embed wizard' );
441
442	var data = app.embedPageRedirectAjaxData();
443
444	// Exit if no one page is selected.
445	if ( typeof data.pageId !== 'undefined' && data.pageId === '' ) {
446	return;
447	}
448
449	$.post( ajaxurl, data, function( response ) {
450	//wpchar.debug('embedPageRedirect response ' + response , 'embed wizard' );
451	if ( response.success ) {
452	// open a new tab and goto a url.
453	window.open( response.data, '_blank' );
454	//wpchar.debug('embedPageRedirect ' + $button , 'embed wizard' );
455	//wpchar.debug('embedPageRedirect ' + labelText , 'embed wizard' );
456	if ( $button ) {
457	//wpchar.debug('embedPageRedirect disabling false: ' + $button , 'embed wizard' );
458	$button.prop( 'disabled', false );
459	}
460	if ( labelText !== false && $button ) {
461	$button.html( labelText );
462	}
463	// close the embed popup.
464	app.closePopup();
465	}
466	} );
467	},
468
469	/**
470	* Display wizard popup.
471	*
472	* @since 1.8.0
473	*
474	* @param {numeric} openFormId Form ID to embed. Used only if called outside the form builder.
475	*/
476	openPopup: function( openFormId ) {
477
478	openFormId = openFormId \|\| 0;
479
480	//wpchar.debug('openPopup opening with ' + openFormId , 'embed wizard' );
481
482	vars.formId = vars.isBuilder ? $( '#charitable-builder-form' ).data( 'id' ) : openFormId;
483
484	// Re-init sections.
485	// if ( el.$selectPage.length === 0 ) {
486	// el.$sectionBtns.hide();
487	// el.$sectionGo.show();
488	// } else {
489	el.$sectionBtns.show();
490	el.$sectionGo.hide();
491	// }
492	el.$newPageTitle.show();
493	el.$selectPageContainer.show();
494
495	el.$wizardContainer.fadeIn();
496	},
497
498	/**
499	* Close wizard popup.
500	*
501	* @since 1.8.0
502	*/
503	closePopup: function() {
504
505	//wpchar.debug('closePopup', 'embed wizard' );
506	//wpchar.debug( el.$wizardContainer , 'embed wizard' );
507
508	el.$wizardContainer.fadeOut();
509	app.initialStateToggle();
510
511	$( document ).trigger( 'charitableWizardPopupClose' );
512	},
513
514	/**
515	* Init embed page tooltip.
516	*
517	* @since 1.8.0
518	*/
519	initTooltip: function() {
520
521	if ( typeof $.fn.tooltipster === 'undefined' ) {
522	return;
523	}
524
525	var $dot = $( '<span class="charitable-admin-campaign-embed-wizard-dot"> </span>' ),
526	isGutengerg = app.isGutenberg(),
527	anchor = isGutengerg ? '.block-editor .edit-post-header' : '#wp-content-editor-tools .charitable-insert-form-button';
528
529	var tooltipsterArgs = {
530	content : $( '#charitable-admin-campaign-embed-wizard-tooltip-content' ),
531	trigger : 'custom',
532	interactive : true,
533	animationDuration: 0,
534	delay : 0,
535	theme : [ 'tooltipster-default', 'charitable-admin-campaign-embed-wizard' ],
536	side : isGutengerg ? 'bottom' : 'right',
537	distance : 3,
538	functionReady : function( instance, helper ) { // eslint-disable-line no-unused-vars
539
540	instance._$tooltip.on( 'click', 'button', function() {
541
542	instance.close();
543	$( '.charitable-admin-campaign-embed-wizard-dot' ).remove();
544	} );
545
546	instance.reposition();
547	},
548	};
549
550	$dot.insertAfter( anchor ).tooltipster( tooltipsterArgs ).tooltipster( 'open' );
551	},
552
553	/**
554	* Check if we're in Gutenberg editor.
555	*
556	* @since 1.8.0
557	*
558	* @returns {boolean} Is Gutenberg or not.
559	*/
560	isGutenberg: function() {
561
562	return typeof wp !== 'undefined' && Object.prototype.hasOwnProperty.call( wp, 'blocks' ); // eslint-disable-line no-undef
563	},
564	};
565
566	// Provide access to public functions/properties.
567	return app;
568
569	}( document, window, jQuery ) ); // eslint-disable-line no-undef
570
571	// Initialize.
572	CharitableCampaignEmbedWizard.init();
573