PluginProbe
Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) / 1.8.11
Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) v1.8.11
1.8.13.1 1.8.13 1.8.12.3 1.8.12.2 1.8.12.1 1.8.12 1.8.11.3 1.8.11.2 1.8.11.1 1.8.11 1.6.6 1.6.60 1.6.7 1.6.8 1.6.9 1.7.0 1.7.0.1 1.7.0.11 1.7.0.12 1.7.0.14 1.7.0.2 1.7.0.3 1.7.0.5 1.7.0.6 1.7.0.7 All 212 releases
charitable / assets / js / campaign-builder / admin-onboarding.js

admin-onboarding.js in Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) 1.8.11, at assets/js/campaign-builder/admin-onboarding.js

581 lines 14.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* global Charitable, CharitableCampaignBuilder, wpchar */
2 /**
3 * Charitable Onboarding function.
4 *
5 * @since 1.8.1.12
6 */
7 'use strict';
8
9 var CharitableOnboarding = window.CharitableOnboarding || ( function( document, window, $ ) {
10
11 /**
12 * Public functions and properties.
13 *
14 * @since 1.8.1.12
15 *
16 * @type {object}
17 */
18 var app = {
19
20 /**
21 * Start the engine.
22 *
23 * @since 1.8.1.12
24 */
25 init: function() {
26
27 $( app.ready );
28 $( window ).on( 'load', function() {
29
30 // in case of jQuery 3.+ we need to wait for an `ready` event first.
31 if ( typeof $.ready.then === 'function' ) {
32 $.ready.then( app.load );
33 } else {
34 app.load();
35 }
36 } );
37 },
38
39 /**
40 * Document ready.
41 *
42 * @since 1.8.1.12
43 */
44 ready: function() {
45 },
46
47 /**
48 * Window load.
49 *
50 * @since 1.8.1.12
51 */
52 load: function() {
53
54 },
55
56 /**
57 * Initial setup.
58 *
59 * @since 1.8.1.12
60 */
61 setup: function() {
62
63 if ( typeof charitable_admin_builder_onboarding === 'undefined' || typeof charitable_admin_builder_onboarding.option === 'undefined' || typeof charitable_admin_builder_onboarding.option.status === 'undefined' ) { // eslint-disable-line
64 return;
65 }
66
67 // possible values: 'init', 'started', 'completed', 'skipped'.
68
69 if ( charitable_admin_builder_onboarding.option.status === 'init' ) { // eslint-disable-line
70 app.clearLocalStorage();
71 app.showWelcomePopup();
72 } else if ( charitable_admin_builder_onboarding.option.status === 'started' ) { // eslint-disable-line
73 if ( app.loadStep() >= 1 ) {
74 app.clearLocalStorage();
75 app.stepCompleted( 1 );
76 app.eventSelectTemplate();
77 app.updateTooltipUI();
78 }
79 }
80
81 },
82
83 /**
84 * Register JS events.
85 *
86 * @since 1.8.1.12
87 */
88 events: function() {
89
90 // Start the Onboarding.
91 $( '#charitable-onboarding-welcome-builder-popup' ).on( 'click', 'button', function() {
92 app.startOnboarding();
93 } );
94
95 // Step 1.
96 $( '.charitable-onboarding-step1-done' ).on( 'click', function() {
97 app.stepCompleted( 1 );
98 } );
99
100 $( '#charitable-builder' )
101
102 // Register select template event when the setup panel is ready.
103 .on( 'charitableBuilderSetupReady', function() {
104 app.eventSelectTemplate();
105 } )
106
107 // Restore tooltips when switching builder panels/sections.
108 .on( 'charitablePanelSwitch charitablePanelSectionSwitch', function() {
109 app.updateTooltipUI();
110 } );
111
112 // Step 3 - Add fields.
113 $( '.charitable-onboarding-step3-done' ).on( 'click', function() {
114 app.stepCompleted( 3 );
115 } );
116
117 // Step 4 - Save Campaign.
118 $( '.charitable-onboarding-step4-done' ).on( 'click', function() {
119 app.stepCompleted( 4 );
120 app.gotoDraftPublishStep();
121 } );
122
123 // Step 5 - Draft And Publish..
124 $( '.charitable-onboarding-step5-done' ).on( 'click', function() {
125 app.undoDraftPublishStep();
126 app.stepCompleted( 5 );
127 } );
128
129 // Step 6 - Publish and View.
130 $( '.charitable-onboarding-step6-done' ).on( 'click', function() {
131 app.stepCompleted( 6 );
132 } );
133
134 // Step 7 - Embed.
135 $( '.charitable-onboarding-step7-done' ).on( 'click', function() {
136 app.stepCompleted( 7 );
137 app.gotoSettingsStep();
138 } );
139
140 $( '.charitable-onboarding-step8-done' ).on( 'click', function() {
141 app.stepCompleted( 8 );
142 CharitableCampaignBuilder.panelSwitch( 'design' );
143 app.showClosingRemarksPopup();
144 } );
145
146
147 if ( app.loadStep() == 4 ) {
148 app.gotoDraftPublishStep();
149 }
150
151 if ( app.loadStep() == 7 ) {
152 app.gotoSettingsStep();
153 }
154
155 // Step 4 - Notifications.
156 $( document ).on( 'click', '.charitable-onboarding-step16-done', app.showEmbedPopup );
157
158 // Tooltipster ready.
159 $.tooltipster.on( 'ready', app.tooltipsterReady );
160
161 // Move to step 3 if onboarding is forced and existing form is opened.
162 $( document ).on( 'charitableCampaignFormScreen', function() {
163 //if ( $( '.charitable-panel-fields-button' ).hasClass( 'active' ) && app.loadStep() <= 2 ) {
164 app.stepCompleted( 1 );
165 app.stepCompleted( 2 );
166 // }
167 } );
168
169 $( '#charitable-onboarding-goodbye-builder-popup .charitable-onboarding-popup-btn' ).on( 'click', function() {
170 app.saveOnboardingOption( { status: 'completed' } );
171 // close the popup.
172 $( '#charitable-onboarding-goodbye-builder-popup' ).fadeOut();
173 $( '.charitable-onboarding-popup-container' ).fadeOut();
174 });
175
176 },
177
178 /**
179 * Register select template event.
180 *
181 * @since 1.6.8
182 */
183 eventSelectTemplate: function() {
184
185 $( '#charitable-panel-setup' )
186 // Step 2 - Select the Form template.
187 .off( 'click', '.charitable-template-select' ) // Intercept Form Builder's form template selection and apply own logic.
188 .on( 'click', '.charitable-template-select', function( e ) {
189 app.builderTemplateSelect( this, e );
190 } );
191
192 },
193
194 /**
195 * Start the Onboarding.
196 *
197 * @since 1.8.1.12
198 */
199 startOnboarding: function() {
200
201 app.saveOnboardingOption( { status: 'started' } );
202 // app.initListUI( 'started' );
203 $( '.charitable-onboarding-popup-container' ).fadeOut( function() {
204 $( '#charitable-onboarding-welcome-builder-popup' ).hide();
205 } );
206 // app.timer.run( app.timer.initialSecondsLeft );
207 app.updateTooltipUI();
208 },
209
210 /**
211 * Go to Step.
212 *
213 * @since 1.8.1.12
214 *
215 * @param {number|string} step Last saved step.
216 */
217 gotoStep: function( step ) { // eslint-disable-line
218 console.warn( 'WARNING! Function "CharitableOnboarding.builder.gotoStep()" has been deprecated.' );
219 },
220
221 /**
222 * Save the second step before a template is selected.
223 *
224 * @since 1.8.1.12
225 *
226 * @param {string} el Element selector.
227 * @param {object} e Event.
228 */
229 builderTemplateSelect: function( el, e ) {
230
231 app.resumeOnboardingAndExec( e, function() {
232
233 app.stepCompleted( 2 )
234 .done( Charitable.Admin.Builder.Setup.selectTemplate.bind( el, e ) );
235 } );
236 },
237
238 /**
239 * Tooltipster ready event callback.
240 *
241 * @since 1.8.1.12
242 *
243 * @param {object} e Event object.
244 */
245 tooltipsterReady: function( e ) {
246
247 var step = $( e.origin ).data( 'charitable-onboarding-step' );
248 var formId = $( '#charitable-builder-form' ).data( 'id' );
249
250 step = parseInt( step, 10 ) || 0;
251 formId = parseInt( formId, 10 ) || 0;
252
253 // Save onboarding form ID right after it's created.
254 if ( 3 === step && formId > 0 ) {
255 app.saveOnboardingOption( { form_id: formId } ); // eslint-disable-line camelcase
256 }
257 },
258
259 /**
260 * Display 'Welcome to the Form Builder' popup.
261 *
262 * @since 1.8.1.12
263 */
264 showWelcomePopup: function() {
265
266 // $( '#charitable-onboarding-welcome-builder-popup' ).show();
267 // $( '.charitable-onboarding-popup-container' ).fadeIn();
268
269 // Once the fade is completed, fade in the builder-popup.
270 $( '.charitable-onboarding-popup-container' ).fadeIn( function() {
271 $( '#charitable-onboarding-welcome-builder-popup' ).fadeIn();
272 } );
273
274
275 },
276
277 /**
278 * Display 'Closing Remarks' popup.
279 *
280 * @since 1.8.1.12
281 */
282 showClosingRemarksPopup: function() {
283
284 // Once the fade is completed, fade in the builder-popup.
285 $( '.charitable-onboarding-popup-container' ).fadeIn( function() {
286 $( '#charitable-onboarding-goodbye-builder-popup' ).fadeIn();
287 } );
288
289
290 },
291
292 /**
293 * Go to Notification step.
294 *
295 * @since 1.8.1.12
296 *
297 * @param {object} e Event object.
298 */
299 gotoNotificationStep: function( e ) { // eslint-disable-line
300
301 // app.stepCompleted( 3 ).done( function() {
302
303 // CharitableBuilder.panelSwitch( 'settings' );
304 // CharitableBuilder.panelSectionSwitch( $( '.charitable-panel .charitable-panel-sidebar-section-notifications' ) );
305 // } );
306 },
307
308 /**
309 * Simulate the dropdown, etc.
310 *
311 * @since 1.8.1.12
312 *
313 * @param {object} e Event object.
314 */
315 gotoDraftPublishStep: function( e ) { // eslint-disable-line
316
317 app.stepCompleted( 4 ).done( function() {
318
319 var $dropdown = $( '#charitable-status-button' );
320
321 $dropdown.parent().find('ul#charitable-status-dropdown').removeClass('charitable-hidden');
322 $dropdown.addClass( 'active' );
323 app.updateTooltipUI();
324
325 } );
326
327 },
328
329 undoDraftPublishStep: function( e ) { // eslint-disable-line
330
331 var $dropdown = $( '#charitable-status-button' );
332
333 $dropdown.parent().find('ul#charitable-status-dropdown').addClass('charitable-hidden');
334 $dropdown.removeClass( 'active' );
335 app.updateTooltipUI();
336
337 },
338
339 gotoSettingsStep: function( e ) { // eslint-disable-line
340
341 CharitableCampaignBuilder.panelSwitch( 'settings' );
342 app.updateTooltipUI();
343
344 },
345
346 /**
347 * Display 'Embed in a Page' popup.
348 *
349 * @since 1.8.1.12
350 */
351 showEmbedPopup: function() {
352
353 },
354
355 /**
356 * Enable Embed button when Embed popup is closed.
357 *
358 * @since 1.7.4
359 */
360 enableEmbed: function() {
361
362 $( '#charitable-embed' ).removeClass( 'charitable-disabled' );
363 },
364
365 /**
366 * Set Onboarding parameter(s) to Onboarding option.
367 *
368 * @since 1.8.1.12
369 *
370 * @param {object} optionData Query using option schema keys.
371 *
372 * @returns {promise} jQuery.post() promise interface.
373 */
374 saveOnboardingOption: function( optionData ) {
375
376 if ( typeof charitable_admin_builder_onboarding === 'undefined' ) {
377 return;
378 }
379
380 var data = {
381 action : 'charitable_onboarding_save_option',
382 option_data: optionData,
383 _wpnonce : charitable_admin_builder_onboarding.nonce,
384 };
385
386 // Save window closed (collapsed) state as well. Check if the option is set.
387 if ( typeof charitable_admin_builder_onboarding.option.window_closed !== 'undefined' ) {
388 data.option_data.window_closed = charitable_admin_builder_onboarding.option.window_closed;
389 } else {
390 data.option_data.window_closed = false;
391 }
392
393 $.extend( charitable_admin_builder_onboarding.option, optionData );
394
395 return $.post( charitable_builder.ajax_url, data, function( response ) {
396 if ( ! response.success ) {
397 console.error( 'Error saving Chartiable Onboarding option.' );
398 }
399 } );
400 },
401
402 /**
403 * Update a step with backend data.
404 *
405 * @since 1.8.1.12
406 */
407 refreshStep: function() {
408
409 var savedStep = el.$onboarding.data( 'charitable-onboarding-saved-step' );
410 savedStep = parseInt( savedStep, 10 ) || 0;
411
412 // Step saved on a backend has a priority.
413 if ( app.loadStep() !== savedStep ) {
414 app.saveStep( savedStep );
415 }
416 },
417
418 /**
419 * Complete onboarding step.
420 *
421 * @since 1.8.1.12
422 *
423 * @param {number|string} step Step to complete.
424 *
425 * @returns {object} jqXHR object from saveStep().
426 */
427 stepCompleted: function( step ) {
428
429 // app.updateListUI( step );
430 app.updateTooltipUI( step );
431
432 return app.saveStep( step );
433 },
434
435 /**
436 * Initialize onboarding tooltips.
437 *
438 * @since 1.8.1.12
439 *
440 * @param {number|string} step Last saved step.
441 * @param {string} anchor Element selector to bind tooltip to.
442 * @param {object} args Tooltipster arguments.
443 */
444 initTooltips: function( step, anchor, args ) {
445
446 if ( typeof $.fn.tooltipster === 'undefined' ) {
447 return;
448 }
449
450 var $dot = $( '<span class="charitable-onboarding-dot charitable-onboarding-dot-step' + step + '" data-charitable-onboarding-step="' + step + '">&nbsp;</span>' );
451 var tooltipsterArgs = {
452 content : $( '#tooltip-content' + step ),
453 trigger : null,
454 interactive : true,
455 animationDuration: 0,
456 delay : 0,
457 theme : [ 'tooltipster-default', 'charitable-onboarding-tooltip' ],
458 side : [ 'top' ],
459 distance : 3,
460 functionReady : function( instance, helper ) {
461
462 $( helper.tooltip ).addClass( 'charitable-onboarding-tooltip-step' + step );
463
464 // Custom positioning.
465 if ( step === 3 || step === 4 || step === 6 || step === 7 || step === 8 ) {
466 instance.option( 'side', 'bottom' );
467 } else if ( step === 5 ) {
468 instance.option( 'side', 'left' );
469 } else if ( step === 1 ) {
470 instance.option( 'side', 'bottom' );
471 }
472
473 // Reposition is needed to render max-width CSS correctly.
474 instance.reposition();
475 }
476 };
477
478 if ( typeof args === 'object' && args !== null ) {
479 $.extend( tooltipsterArgs, args );
480 }
481
482 if ( step === 5 ) {
483 $dot.insertBefore( anchor ).tooltipster( tooltipsterArgs );
484 } else {
485 $dot.insertAfter( anchor ).tooltipster( tooltipsterArgs );
486 }
487 },
488
489 /**
490 * Update tooltips appearance.
491 *
492 * @since 1.8.1.12
493 *
494 * @param {number|string} step Last saved step.
495 */
496 updateTooltipUI: function( step ) {
497
498 var nextStep;
499
500 step = step || app.loadStep();
501 nextStep = step + 1;
502
503 $( '.charitable-onboarding-dot' ).each( function( i, el ) {
504
505 var $dot = $( el ),
506 elStep = $dot.data( 'charitable-onboarding-step' );
507
508 if ( elStep < nextStep ) {
509 $dot.addClass( 'charitable-onboarding-dot-completed' );
510 }
511
512 if ( elStep > nextStep ) {
513 $dot.addClass( 'charitable-onboarding-dot-next' );
514 }
515
516 if ( elStep === nextStep ) {
517 $dot.removeClass( 'charitable-onboarding-dot-completed charitable-onboarding-dot-next' );
518 }
519
520 // Zero timeout is needed to properly detect $el visibility.
521 setTimeout( function() {
522 if ( $dot.is( ':visible' ) && elStep === nextStep ) {
523 $dot.tooltipster( 'open' );
524 } else {
525 $dot.tooltipster( 'close' );
526 }
527 }, 0 );
528 } );
529 },
530
531
532 /**
533 * Get last saved step.
534 *
535 * @since 1.8.1.12
536 *
537 * @returns {number} Last saved step.
538 */
539 loadStep: function() {
540
541 var step = localStorage.getItem( 'charitableOnboardingStep' );
542 step = parseInt( step, 10 ) || 0;
543
544 return step;
545 },
546
547 /**
548 * Save Onboarding step.
549 *
550 * @param {number|string} step Step to save.
551 *
552 * @returns {object} jqXHR object from saveOnboardingOption().
553 */
554 saveStep: function( step ) {
555
556 localStorage.setItem( 'charitableOnboardingStep', step );
557
558 return app.saveOnboardingOption( { step: step } );
559 },
560
561 /**
562 * Clear all Onboarding frontend saved data.
563 *
564 * @since 1.8.1.12
565 */
566 clearLocalStorage: function() {
567
568 localStorage.removeItem( 'charitableOnboardingStep' );
569 },
570
571
572 };
573
574 // Provide access to public functions/properties.
575 return app;
576
577 }( document, window, jQuery ) ); // eslint-disable-line
578
579 // Initialize.
580 CharitableOnboarding.init();
581