PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 4.0.8
Visualizer – Tables & Charts Manager with Built-in AI Generator v4.0.8
4.0.8 4.0.7 4.0.6 4.0.5 4.0.4 4.0.3 3.0.5 3.0.6 3.0.7 3.0.8 3.0.9 3.1.0 3.1.1 3.1.2 3.1.3 3.10.0 3.10.1 3.10.10 3.10.11 3.10.12 3.10.13 3.10.14 3.10.15 3.10.2 3.10.3 All 149 releases
← All changes | js/setup-wizard.js +232 -136 3.10.144.0.8 View file →
@@ -15,9 +15,18 @@
15 15 *
16 16 * @type {boolean}
17 17 */
18 18 const isLivePreview = window.location.search.includes('env=preview');
19 + const emailRegex = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
19 20
21 + var showNewsletterError = function ($input, message) {
22 + var $wrap = $input.closest('.vz-option-input');
23 + $wrap.next('.vz-field-error').remove();
24 + if (message) {
25 + $wrap.after('<span class="vz-field-error">' + message + '</span>');
26 + }
27 + };
28 +
20 29 /**
21 30 * Redirect to draft page after subscribe (optional).
22 31 *
23 32 * @param {Object} postData - Post data.
@@ -28,8 +37,10 @@
28 37 postData.security ??= visualizerSetupWizardData.ajax.security;
29 38 postData.step ??= 'step_subscribe';
30 39
31 40 // Subscribe the user using the email if provided. Redirect to the draft page.
41 + var $currentStep = $('#step-3');
42 +
32 43 $.post(visualizerSetupWizardData.ajax.url, postData, function (res) {
33 44
34 45 // Toggle the redirect popup.
35 46 $('.redirect-popup').find('h3.popup-title').html(res.message);
@@ -41,77 +52,144 @@
41 52 }, 5000);
42 53 } else {
43 54 $('.redirect-popup').hide();
44 55 }
45 - currentStep.find('.spinner').removeClass('is-active');
56 + $currentStep.find('.spinner').removeClass('is-active');
46 57 }).fail(function () {
47 58 $('.redirect-popup').hide();
48 - currentStep.find('.spinner').removeClass('is-active');
59 + $currentStep.find('.spinner').removeClass('is-active');
49 60 });
50 61 }
51 62
52 - var provideContent = function(id, stepDirection, stepPosition, selStep, callback) {
53 - // Import chart data.
54 - if ( 1 == id ) {
55 - var chartType = $(".vz-radio-btn:checked").val();
56 - var percentBarWidth = 0;
57 - var loaderDelay;
58 - $.ajax( {
59 - beforeSend: function() {
60 - loaderDelay = setInterval(function () {
61 - $('.vz-progress-bar').css({
62 - width: percentBarWidth++ + '%'
63 - });
64 - }, 1000);
65 - },
66 - type: 'POST',
67 - url: visualizerSetupWizardData.ajax.url,
68 - dataType: 'json',
69 - data: {
70 - action: 'visualizer_wizard_step_process',
71 - security: visualizerSetupWizardData.ajax.security,
72 - chart_type: chartType,
73 - step: 'step_2',
74 - },
75 - success: function (data) {
76 - clearInterval( loaderDelay );
77 - loaderDelay = setInterval(function () {
78 - $('.vz-progress-bar').css({
79 - width: percentBarWidth++ + '%'
80 - });
81 - if ( percentBarWidth >= 100 ) {
82 - if ( 1 === data.success ) {
83 - var importMessage = jQuery('[data-import_message]');
84 - importMessage
85 - .html( importMessage.data('import_message') )
86 - .addClass('import_message');
63 + var runImport = function () {
64 + var chartType = $(".vz-radio-btn:checked").val();
65 + var percentBarWidth = 0;
66 + var loaderDelay;
67 + var $step = $('#step-1');
68 + var $status = $step.find('.vz-import-status');
69 + var $progress = $status.find('.vz-progress-bar');
70 + var $message = $status.find('[data-import_message]');
71 + var $error = $status.find('.vz-error-notice');
72 + var $spinner = $step.find('.spinner');
73 + var $button = $step.find('[data-step_number="1"]');
87 74
88 - $('#step-2').find('button.disabled').removeClass('disabled');
89 - } else if( 2 === data.status && '' !== data.message ) {
90 - $('#step-2')
91 - .find('.vz-error-notice')
92 - .html( '<p>' + data.message + '</p>' )
93 - .removeClass('hidden');
94 - } else {
95 - $('#smartwizard').smartWizard('reset');
96 - }
97 - $('.vz-progress-bar').css({
98 - width: 100 + '%'
99 - });
100 - $('.vz-progress').css({
101 - visibility: 'hidden'
102 - });
103 - clearInterval( loaderDelay );
75 + $status.show();
76 + $progress.css({ width: '0' });
77 + if ($message.length) {
78 + $message
79 + .text($message.data('import_initial'))
80 + .removeClass('import_message');
81 + }
82 + $error.addClass('hidden').empty();
83 + $spinner.addClass('is-active');
84 + $button.addClass('disabled');
85 +
86 + loaderDelay = setInterval(function () {
87 + percentBarWidth = Math.min(percentBarWidth + 4, 90);
88 + $progress.css({ width: percentBarWidth + '%' });
89 + }, 120);
90 +
91 + $.ajax({
92 + type: 'POST',
93 + url: visualizerSetupWizardData.ajax.url,
94 + dataType: 'json',
95 + data: {
96 + action: 'visualizer_wizard_step_process',
97 + security: visualizerSetupWizardData.ajax.security,
98 + chart_type: chartType,
99 + step: 'step_2',
100 + },
101 + success: function (data) {
102 + clearInterval(loaderDelay);
103 + $progress.css({ width: '100%' });
104 +
105 + if (1 === data.success) {
106 + if (data.chart_id) {
107 + var $shortcode = $('#basic_shortcode');
108 + if ($shortcode.length) {
109 + $shortcode.val(
110 + $shortcode.val().replace('{{chart_id}}', data.chart_id)
111 + );
104 112 }
105 - }, 36 );
106 - },
107 - error: function() {
108 - $('#step-2').find('.vz-progress-bar').animate({ width: '0' });
113 + }
114 + if ($message.length) {
115 + $message
116 + .text($message.data('import_message'))
117 + .addClass('import_message');
118 + }
119 +
120 + setTimeout(function () {
121 + $spinner.removeClass('is-active');
122 + $('#smartwizard').smartWizard('next');
123 + }, 200);
124 + } else if (2 === data.status && '' !== data.message) {
125 + $error.html('<p>' + data.message + '</p>').removeClass('hidden');
126 + $spinner.removeClass('is-active');
127 + $button.removeClass('disabled');
128 + } else {
129 + $spinner.removeClass('is-active');
130 + $button.removeClass('disabled');
131 + $('#smartwizard').smartWizard('reset');
109 132 }
110 - } );
133 + },
134 + error: function () {
135 + clearInterval(loaderDelay);
136 + $progress.css({ width: '0' });
137 + $spinner.removeClass('is-active');
138 + $button.removeClass('disabled');
139 + }
140 + });
141 + };
142 +
143 + var collectInstallSlugs = function () {
144 + var slugs = [];
145 + var $optimole = $('#enable_performance');
146 + if ($optimole.length && $optimole.is(':checked') && !$optimole.is(':disabled')) {
147 + slugs.push('optimole-wp');
111 148 }
112 - callback();
113 - }
149 + if ($('#enable_otter_blocks').is(':checked') && !$('#enable_otter_blocks').is(':disabled')) {
150 + slugs.push('otter-blocks');
151 + }
152 + if ($('#enable_page_cache').is(':checked') && !$('#enable_page_cache').is(':disabled')) {
153 + slugs.push('wp-cloudflare-page-cache');
154 + }
155 + return slugs;
156 + };
157 +
158 + var setInstallStatus = function (slug, statusClass) {
159 + var $status = $('[data-install-status="' + slug + '"]');
160 + $status.removeClass('is-installing is-done is-error').addClass(statusClass);
161 + };
162 +
163 + var installPluginsSequentially = function (slugs, onDone) {
164 + if (!slugs.length) {
165 + onDone(true);
166 + return;
167 + }
168 + var slug = slugs.shift();
169 + setInstallStatus(slug, 'is-installing');
170 + $.post(
171 + visualizerSetupWizardData.ajax.url,
172 + {
173 + action: 'visualizer_wizard_step_process',
174 + security: visualizerSetupWizardData.ajax.security,
175 + slug: slug,
176 + step: 'step_4',
177 + },
178 + function (response) {
179 + if (1 === response.status) {
180 + setInstallStatus(slug, 'is-done');
181 + installPluginsSequentially(slugs, onDone);
182 + } else {
183 + setInstallStatus(slug, 'is-error');
184 + onDone(false, response.message);
185 + }
186 + }
187 + ).fail(function () {
188 + setInstallStatus(slug, 'is-error');
189 + onDone(false, '');
190 + });
191 + };
114 192 $("#smartwizard").smartWizard({
115 193 transition: {
116 194 animation: "fade", // Animation effect on navigation, none|fade|slideHorizontal|slideVertical|slideSwing|css(Animation CSS class also need to specify)
117 195 speed: "400", // Animation speed. Not used if animation is 'css'
@@ -132,10 +210,9 @@
132 210 // CSS Class settings
133 211 btnCss: "",
134 212 btnNextCss: "btn-primary next-btn",
135 213 btnPrevCss: "btn-light",
136 - },
137 - getContent: provideContent
214 + }
138 215 });
139 216
140 217 // click to open accordion.
141 218 $(".vz-accordion .vz-accordion-item .vz-accordion-item__button").on(
@@ -167,49 +244,21 @@
167 244
168 245 switch (stepNumber) {
169 246 case 1:
170 247 if ($(".vz-radio-btn").is(":checked")) {
171 - $('#smartwizard').smartWizard('next');
248 + runImport();
172 249 }
173 250 break;
174 - case 3:
251 + case 2:
175 252 if ( isLivePreview ) {
176 253 $('#smartwizard').smartWizard('next');
177 254 } else {
178 255 var urlParams = new URLSearchParams(window.location.search);
179 256 urlParams.set('preview_chart', Date.now());
180 - window.location.hash = "#step-3";
257 + window.location.hash = "#step-2";
181 258 window.location.search = urlParams;
182 259 }
183 260 break;
184 - case 4:
185 - $('#step-4').find('.spinner').addClass('is-active');
186 - $('#step-4').find('.vz-error-notice').addClass('hidden');
187 -
188 - $.post(
189 - visualizerSetupWizardData.ajax.url,
190 - {
191 - action: 'visualizer_wizard_step_process',
192 - security: visualizerSetupWizardData.ajax.security,
193 - slug: 'optimole-wp',
194 - step: 'step_4',
195 - },
196 - function (response) {
197 - if (1 === response.status) {
198 - $('#smartwizard').smartWizard('next');
199 - } else if ( 'undefined' !== typeof response.message ) {
200 - $('#step-4')
201 - .find('.vz-error-notice')
202 - .html("<p>" + response.message + "</p>");
203 - $('#step-4').find('.vz-error-notice').removeClass('hidden');
204 - }
205 - $('#step-4').find('.spinner').removeClass('is-active');
206 - }
207 - ).fail(function () {
208 - $('#step-4').find('.spinner').removeClass('is-active');
209 - });
210 - e.preventDefault();
211 - break;
212 261 default:
213 262 e.preventDefault();
214 263 break;
215 264 }
@@ -245,21 +294,19 @@
245 294 e.preventDefault();
246 295 });
247 296
248 297 // Enable performance feature.
249 - $("#step-4").on("change", "input:checkbox", function () {
250 - if ($(this).is(":checked")) {
251 - $(".skip-improvement").hide();
252 - $(".vz-wizard-install-plugin").show();
253 - } else {
254 - $(".skip-improvement").show();
255 - $(".vz-wizard-install-plugin").hide();
298 + // Step: 4 Skip and subscribe process.
299 + $(document).on( 'click', '.vz-subscribe', function (e) {
300 + var $btn = $(this);
301 +
302 + // Prevent double-clicks while the async flow is running.
303 + if ( $btn.prop('disabled') ) {
304 + e.preventDefault();
305 + return;
256 306 }
257 - });
258 307
259 - // Step: 4 Skip and subscribe process.
260 - $(document).on( 'click', '.vz-subscribe', function (e) {
261 - var withSubscribe = $(this).data("vz_subscribe");
308 + var withSubscribe = $btn.data("vz_subscribe");
262 309 var postData = {
263 310 action: "visualizer_wizard_step_process",
264 311 security: visualizerSetupWizardData.ajax.security,
265 312 step: "step_subscribe",
@@ -265,35 +312,104 @@
265 312 step: "step_subscribe",
266 313 };
267 314 var emailElement = $("#vz_subscribe_email");
268 315 // Remove error message.
269 - emailElement.next(".vz-field-error").remove();
316 + showNewsletterError(emailElement, '');
317 + var newsletterEnabled = $("#enable_newsletter").is(":checked");
270 318
271 - if (withSubscribe) {
272 - var subscribeEmail = emailElement.val();
273 - var EmailTest = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
319 + if (withSubscribe && newsletterEnabled) {
320 + var subscribeEmail = emailElement.val().trim();
274 321 var errorMessage = "";
275 322
276 323 if ("" === subscribeEmail) {
277 324 errorMessage = visualizerSetupWizardData.errorMessages.requiredEmail;
278 - } else if (!EmailTest.test(subscribeEmail)) {
325 + } else if (!emailRegex.test(subscribeEmail)) {
279 326 errorMessage = visualizerSetupWizardData.errorMessages.invalidEmail;
280 327 }
281 328 if ("" !== errorMessage) {
282 - $('<span class="vz-field-error">' + errorMessage + "</span>").insertAfter(emailElement);
329 + showNewsletterError(emailElement, errorMessage);
283 330 return false;
284 331 }
285 332
286 333 postData.email = subscribeEmail;
287 334 postData.with_subscribe = withSubscribe;
335 + } else {
336 + postData.with_subscribe = false;
288 337 }
289 - var currentStep = $( '.vz-wizard-wrap .tab-pane:last-child' );
290 - currentStep.find(".spinner").addClass("is-active");
291 338
292 - goToDraftPage( postData );
339 + $btn.prop('disabled', true);
340 + var $step = $('#step-3');
341 + $step.find(".spinner").addClass("is-active");
342 + var $error = $step.find('.vz-error-notice').first();
343 + $error.addClass('hidden').empty();
344 +
345 + var slugs = collectInstallSlugs();
346 + installPluginsSequentially(slugs.slice(), function (ok, message) {
347 + if (!ok) {
348 + if (message) {
349 + $error.html('<p>' + message + '</p>').removeClass('hidden');
350 + }
351 + $step.find(".spinner").removeClass("is-active");
352 + $btn.prop('disabled', false);
353 + return;
354 + }
355 + goToDraftPage(postData);
356 + });
293 357 e.preventDefault();
294 358 });
295 359
360 + $(document).on('click', '.vz-change-email', function () {
361 + var $card = $(this).closest('.vz-option-card--newsletter');
362 + var $inputWrap = $card.find('.vz-option-input');
363 + $inputWrap.show();
364 + $card.find('#vz_subscribe_email').focus();
365 + validateNewsletterEmail();
366 + });
367 +
368 + var finalizeNewsletterEmail = function ($card) {
369 + var $input = $card.find('#vz_subscribe_email');
370 + var $text = $card.find('.vz-email-text');
371 + var email = $input.val();
372 + if (email) {
373 + $text.text(email);
374 + }
375 + $card.find('.vz-option-input').hide();
376 + };
377 +
378 + $(document).on('click', '.vz-save-email', function () {
379 + var $card = $(this).closest('.vz-option-card--newsletter');
380 + if (!validateNewsletterEmail()) {
381 + return;
382 + }
383 + finalizeNewsletterEmail($card);
384 + });
385 +
386 + var validateNewsletterEmail = function () {
387 + var $input = $("#vz_subscribe_email");
388 + if (!$input.length) {
389 + return true;
390 + }
391 + var $card = $input.closest('.vz-option-card--newsletter');
392 + var $saveButton = $card.find('.vz-save-email');
393 + var email = $input.val().trim();
394 + showNewsletterError($input, '');
395 + if (!email) {
396 + $saveButton.prop('disabled', false);
397 + return true;
398 + }
399 + if (!emailRegex.test(email)) {
400 + showNewsletterError($input, visualizerSetupWizardData.errorMessages.invalidEmail);
401 + $saveButton.prop('disabled', true);
402 + return false;
403 + }
404 + $saveButton.prop('disabled', false);
405 + return true;
406 + };
407 +
408 + $(document).on('input blur', '#vz_subscribe_email', function () {
409 + validateNewsletterEmail();
410 + });
411 +
296 412 // Click to copy.
297 413 var clipboard = new ClipboardJS(".vz-copy-code-btn");
298 414 clipboard.on("success", function (e) {
299 415 var inputElement = $(e.trigger).prev("input:text");
@@ -302,8 +418,11 @@
302 418 // Remove disabled class from get started button.
303 419 $("#step-1").on("change", "input:radio", function () {
304 420 $("#step-1").find('[data-step_number="1"]').removeClass("disabled");
305 421 });
422 + if ( $('#step-1 .vz-radio-btn:checked').length ) {
423 + $('#step-1').find('[data-step_number="1"]').removeClass('disabled');
424 + }
306 425
307 426 // Change button text.
308 427 $(document).on("change", "#insert_shortcode", function () {
309 428 if ($(this).is(":checked")) {
@@ -317,31 +436,8 @@
317 436 ' <span class="dashicons dashicons-arrow-right-alt"></span>'
318 437 );
319 438 }
320 439 });
321 -
322 - $('.vz-chart-list > ul').slick({
323 - dots: false,
324 - infinite: false,
325 - speed: 400,
326 - slidesToShow: 1,
327 - centerMode: false,
328 - variableWidth: true
329 - })
330 - .on( 'afterChange', function(event, slick, currentSlide) {
331 - // Disable next buttion.
332 - if( currentSlide === 4 ) {
333 - $('.slick-next').attr('disabled', true).css('pointer-events', 'none');
334 - } else {
335 - $('.slick-next').removeAttr('disabled').css('pointer-events', 'all');
336 - }
337 - // Disable prev buttion.
338 - if( currentSlide === 0 ) {
339 - $('.slick-prev').attr('disabled', true).css('pointer-events', 'none');
340 - } else {
341 - $('.slick-prev').removeAttr('disabled').css('pointer-events', 'all');
342 - }
343 - } );
344 440
345 441 $(window).bind('pageshow', function() {
346 442 if ( jQuery('.vz-chart-option input').is(':checked') ) {
347 443 $('#step-1').find('button.disabled').removeClass('disabled');