← All changes | js/setup-wizard.js +283 -147 3.10.1 → 4.0.8 View file →

		@@ -6,67 +6,190 @@
6	6	* @package Visualizer
7	7	*/
8	8	/* jshint unused:false */
9	9	jQuery(function ($) {
10		- var provideContent = function(id, stepDirection, stepPosition, selStep, callback) {
11		- // Import chart data.
12		- if ( 1 == id ) {
13		- var chartType = $(".vz-radio-btn:checked").val();
14		- var percentBarWidth = 100;
15		- var loaderDelay;
16		- $.ajax( {
17		- beforeSend: function() {
18		- loaderDelay = setInterval(function () {
19		- $('.vz-progress-bar').css({
20		- width: percentBarWidth-- + '%'
21		- });
22		- }, 1000);
23		- },
24		- type: 'POST',
25		- url: visualizerSetupWizardData.ajax.url,
26		- dataType: 'json',
27		- data: {
28		- action: 'visualizer_wizard_step_process',
29		- security: visualizerSetupWizardData.ajax.security,
30		- chart_type: chartType,
31		- step: 'step_2',
32		- },
33		- success: function (data) {
34		- clearInterval( loaderDelay );
35		- loaderDelay = setInterval(function () {
36		- $('.vz-progress-bar').css({
37		- width: percentBarWidth-- + '%'
38		- });
39		- if ( percentBarWidth <= 0 ) {
40		- if ( 1 === data.success ) {
41		- var importMessage = jQuery('[data-import_message]');
42		- importMessage
43		- .html( importMessage.data('import_message') )
44		- .addClass('import_message');
45	10
46		- $('#step-2').find('button.disabled').removeClass('disabled');
47		- } else if( 2 === data.status && '' !== data.message ) {
48		- $('#step-2')
49		- .find('.vz-error-notice')
50		- .html( '<p>' + data.message + '</p>' )
51		- .removeClass('hidden');
52		- } else {
53		- $('#smartwizard').smartWizard('reset');
54		- }
55		- $('.vz-progress-bar').css({
56		- width: 0
57		- });
58		- clearInterval( loaderDelay );
	11	+ /**
	12	+ * Check if the user is in live preview mode.
	13	+ * Live Preview is used in WordPress Playground to test the plugin.
	14	+ * Use this check to deactivate any process that does not showcase the plugin features (e.g. subscription to the newsletter, etc.)
	15	+ *
	16	+ * @type {boolean}
	17	+ */
	18	+ const isLivePreview = window.location.search.includes('env=preview');
	19	+ const emailRegex = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
	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	+
	29	+ /**
	30	+ * Redirect to draft page after subscribe (optional).
	31	+ *
	32	+ * @param {Object} postData - Post data.
	33	+ */
	34	+ const goToDraftPage = function ( postData = {} ) {
	35	+ postData ??= {};
	36	+ postData.action ??= 'visualizer_wizard_step_process';
	37	+ postData.security ??= visualizerSetupWizardData.ajax.security;
	38	+ postData.step ??= 'step_subscribe';
	39	+
	40	+ // Subscribe the user using the email if provided. Redirect to the draft page.
	41	+ var $currentStep = $('#step-3');
	42	+
	43	+ $.post(visualizerSetupWizardData.ajax.url, postData, function (res) {
	44	+
	45	+ // Toggle the redirect popup.
	46	+ $('.redirect-popup').find('h3.popup-title').html(res.message);
	47	+ $('.redirect-popup').show();
	48	+
	49	+ if (1 === res.status) {
	50	+ setTimeout(function () {
	51	+ window.location.href = res.redirect_to;
	52	+ }, 5000);
	53	+ } else {
	54	+ $('.redirect-popup').hide();
	55	+ }
	56	+ $currentStep.find('.spinner').removeClass('is-active');
	57	+ }).fail(function () {
	58	+ $('.redirect-popup').hide();
	59	+ $currentStep.find('.spinner').removeClass('is-active');
	60	+ });
	61	+ }
	62	+
	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"]');
	74	+
	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	+ );
59	112	}
60		- }, 100 );
61		- },
62		- error: function() {
63		- $('#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');
64	132	}
65		- } );
	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');
66	148	}
67		- callback();
68		- }
	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	+ };
69	192	$("#smartwizard").smartWizard({
70	193	transition: {
71	194	animation: "fade", // Animation effect on navigation, none|fade|slideHorizontal|slideVertical|slideSwing|css(Animation CSS class also need to specify)
72	195	speed: "400", // Animation speed. Not used if animation is 'css'
		@@ -87,10 +210,9 @@
87	210	// CSS Class settings
88	211	btnCss: "",
89	212	btnNextCss: "btn-primary next-btn",
90	213	btnPrevCss: "btn-light",
91		- },
92		- getContent: provideContent
	214	+ }
93	215	});
94	216
95	217	// click to open accordion.
96	218	$(".vz-accordion .vz-accordion-item .vz-accordion-item__button").on(
		@@ -118,48 +240,25 @@
118	240	"click",
119	241	".btn-primary:not(.next-btn,.vz-create-page,.vz-subscribe)",
120	242	function (e) {
121	243	var stepNumber = $(this).data("step_number");
	244	+
122	245	switch (stepNumber) {
123	246	case 1:
124	247	if ($(".vz-radio-btn").is(":checked")) {
125		- $('#smartwizard').smartWizard('next');
	248	+ runImport();
126	249	}
127	250	break;
128		- case 3:
129		- var urlParams = new URLSearchParams(window.location.search);
130		- urlParams.set('preview_chart', Date.now());
131		- window.location.hash = "#step-3";
132		- window.location.search = urlParams;
	251	+ case 2:
	252	+ if ( isLivePreview ) {
	253	+ $('#smartwizard').smartWizard('next');
	254	+ } else {
	255	+ var urlParams = new URLSearchParams(window.location.search);
	256	+ urlParams.set('preview_chart', Date.now());
	257	+ window.location.hash = "#step-2";
	258	+ window.location.search = urlParams;
	259	+ }
133	260	break;
134		- case 4:
135		- $('#step-4').find('.spinner').addClass('is-active');
136		- $('#step-4').find('.vz-error-notice').addClass('hidden');
137		-
138		- $.post(
139		- visualizerSetupWizardData.ajax.url,
140		- {
141		- action: 'visualizer_wizard_step_process',
142		- security: visualizerSetupWizardData.ajax.security,
143		- slug: 'optimole-wp',
144		- step: 'step_4',
145		- },
146		- function (response) {
147		- if (1 === response.status) {
148		- $('#smartwizard').smartWizard('next');
149		- } else if ( 'undefined' !== typeof response.message ) {
150		- $('#step-4')
151		- .find('.vz-error-notice')
152		- .html("<p>" + response.message + "</p>");
153		- $('#step-4').find('.vz-error-notice').removeClass('hidden');
154		- }
155		- $('#step-4').find('.spinner').removeClass('is-active');
156		- }
157		- ).fail(function () {
158		- $('#step-4').find('.spinner').removeClass('is-active');
159		- });
160		- e.preventDefault();
161		- break;
162	261	default:
163	262	e.preventDefault();
164	263	break;
165	264	}
		@@ -180,9 +279,13 @@
180	279	add_basic_shortcode: $("#insert_shortcode").is(":checked"),
181	280	},
182	281	function (res) {
183	282	if (res.status > 0) {
184		- $("#smartwizard").smartWizard("next");
	283	+ if ( isLivePreview ) {
	284	+ goToDraftPage();
	285	+ } else {
	286	+ $("#smartwizard").smartWizard("next");
	287	+ }
185	288	}
186	289	_this.next(".spinner").removeClass("is-active");
187	290	}
188	291	).fail(function () {
		@@ -191,21 +294,19 @@
191	294	e.preventDefault();
192	295	});
193	296
194	297	// Enable performance feature.
195		- $("#step-4").on("change", "input:checkbox", function () {
196		- if ($(this).is(":checked")) {
197		- $(".skip-improvement").hide();
198		- $(".vz-wizard-install-plugin").show();
199		- } else {
200		- $(".skip-improvement").show();
201		- $(".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;
202	306	}
203		- });
204	307
205		- // Step: 4 Skip and subscribe process.
206		- $(document).on( 'click', '.vz-subscribe', function (e) {
207		- var withSubscribe = $(this).data("vz_subscribe");
	308	+ var withSubscribe = $btn.data("vz_subscribe");
208	309	var postData = {
209	310	action: "visualizer_wizard_step_process",
210	311	security: visualizerSetupWizardData.ajax.security,
211	312	step: "step_subscribe",
		@@ -211,49 +312,104 @@
211	312	step: "step_subscribe",
212	313	};
213	314	var emailElement = $("#vz_subscribe_email");
214	315	// Remove error message.
215		- emailElement.next(".vz-field-error").remove();
	316	+ showNewsletterError(emailElement, '');
	317	+ var newsletterEnabled = $("#enable_newsletter").is(":checked");
216	318
217		- if (withSubscribe) {
218		- var subscribeEmail = emailElement.val();
219		- var EmailTest = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
	319	+ if (withSubscribe && newsletterEnabled) {
	320	+ var subscribeEmail = emailElement.val().trim();
220	321	var errorMessage = "";
221	322
222	323	if ("" === subscribeEmail) {
223	324	errorMessage = visualizerSetupWizardData.errorMessages.requiredEmail;
224		- } else if (!EmailTest.test(subscribeEmail)) {
	325	+ } else if (!emailRegex.test(subscribeEmail)) {
225	326	errorMessage = visualizerSetupWizardData.errorMessages.invalidEmail;
226	327	}
227	328	if ("" !== errorMessage) {
228		- $('<span class="vz-field-error">' + errorMessage + "</span>").insertAfter(emailElement);
	329	+ showNewsletterError(emailElement, errorMessage);
229	330	return false;
230	331	}
231	332
232	333	postData.email = subscribeEmail;
233	334	postData.with_subscribe = withSubscribe;
	335	+ } else {
	336	+ postData.with_subscribe = false;
234	337	}
235		- var currentStep = $( '.vz-wizard-wrap .tab-pane:last-child' );
236		- currentStep.find(".spinner").addClass("is-active");
237	338
238		- $.post(visualizerSetupWizardData.ajax.url, postData, function (res) {
239		- $('.redirect-popup').find('h3.popup-title').html(res.message);
240		- $('.redirect-popup').show();
241		- if (1 === res.status) {
242		- setTimeout(function () {
243		- window.location.href = res.redirect_to;
244		- }, 5000);
245		- } else {
246		- $('.redirect-popup').hide();
	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;
247	354	}
248		- currentStep.find('.spinner').removeClass('is-active');
249		- }).fail(function () {
250		- $('.redirect-popup').hide();
251		- currentStep.find('.spinner').removeClass('is-active');
	355	+ goToDraftPage(postData);
252	356	});
253	357	e.preventDefault();
254	358	});
255	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	+
256	412	// Click to copy.
257	413	var clipboard = new ClipboardJS(".vz-copy-code-btn");
258	414	clipboard.on("success", function (e) {
259	415	var inputElement = $(e.trigger).prev("input:text");
		@@ -262,8 +418,11 @@
262	418	// Remove disabled class from get started button.
263	419	$("#step-1").on("change", "input:radio", function () {
264	420	$("#step-1").find('[data-step_number="1"]').removeClass("disabled");
265	421	});
	422	+ if ( $('#step-1 .vz-radio-btn:checked').length ) {
	423	+ $('#step-1').find('[data-step_number="1"]').removeClass('disabled');
	424	+ }
266	425
267	426	// Change button text.
268	427	$(document).on("change", "#insert_shortcode", function () {
269	428	if ($(this).is(":checked")) {
		@@ -277,31 +436,8 @@
277	436	' <span class="dashicons dashicons-arrow-right-alt"></span>'
278	437	);
279	438	}
280	439	});
281		-
282		- $('.vz-chart-list > ul').slick({
283		- dots: false,
284		- infinite: false,
285		- speed: 400,
286		- slidesToShow: 1,
287		- centerMode: false,
288		- variableWidth: true
289		- })
290		- .on( 'afterChange', function(event, slick, currentSlide) {
291		- // Disable next buttion.
292		- if( currentSlide === 4 ) {
293		- $('.slick-next').attr('disabled', true).css('pointer-events', 'none');
294		- } else {
295		- $('.slick-next').removeAttr('disabled').css('pointer-events', 'all');
296		- }
297		- // Disable prev buttion.
298		- if( currentSlide === 0 ) {
299		- $('.slick-prev').attr('disabled', true).css('pointer-events', 'none');
300		- } else {
301		- $('.slick-prev').removeAttr('disabled').css('pointer-events', 'all');
302		- }
303		- } );
304	440
305	441	$(window).bind('pageshow', function() {
306	442	if ( jQuery('.vz-chart-option input').is(':checked') ) {
307	443	$('#step-1').find('button.disabled').removeClass('disabled');