Fixed: quit wizard elements didn't respond.

plausible · Jan 31, 2024 · 1ca1091 · 1ca1091
1 parent 963902c
commit 1ca1091
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 21 deletions.
diff --git a/assets/src/js/admin/main.js b/assets/src/js/admin/main.js
@@ -10,23 +10,23 @@ document.addEventListener('DOMContentLoaded', () => {
 
 	let plausible = {
 		/**
-		 * Elements
+		 * Properties
 		 */
 		showWizardElem: document.getElementById('show_wizard'),
 		createAPITokenElem: document.getElementById('plausible-create-api-token'),
 		domainNameElem: document.getElementById('domain_name'),
 		apiTokenElem: document.getElementById('api_token'),
-		stepElems: document.getElementsByClassName('plausible-analytics-wizard-next-step'),
-		wizardQuitElem: document.getElementById('plausible-analytics-wizard-quit'),
 		buttonElems: document.getElementsByClassName('plausible-analytics-button'),
 		toggleElems: document.getElementsByClassName('plausible-analytics-toggle'),
+		stepElems: document.getElementsByClassName('plausible-analytics-wizard-next-step'),
+		quitWizardElems: document.getElementsByClassName('plausible-analytics-wizard-quit'),
 
 		/**
 		 * Bind events.
 		 */
 		init: function () {
 			if (document.location.hash === '' && document.getElementById('plausible-analytics-wizard') !== null) {
-				document.location.hash = 'welcome_slide';
+				document.location.hash = '#welcome_slide';
 			}
 
 			this.toggleWizardStep();
@@ -49,16 +49,6 @@ document.addEventListener('DOMContentLoaded', () => {
 				this.apiTokenElem.addEventListener('change', this.disableConnectButton);
 			}
 
-			if (this.stepElems.length > 0) {
-				for (let i = 0; i < this.stepElems.length; i++) {
-					this.stepElems[i].addEventListener('click', this.saveOptionsOnNext);
-				}
-			}
-
-			if (this.wizardQuitElem !== null) {
-				this.wizardQuitElem.addEventListener('click', this.quitWizard);
-			}
-
 			if (this.buttonElems.length > 0) {
 				for (let i = 0; i < this.buttonElems.length; i++) {
 					this.buttonElems[i].addEventListener('click', this.saveOption);
@@ -70,6 +60,18 @@ document.addEventListener('DOMContentLoaded', () => {
 					this.toggleElems[i].addEventListener('click', this.toggleOption);
 				}
 			}
+
+			if (this.stepElems.length > 0) {
+				for (let i = 0; i < this.stepElems.length; i++) {
+					this.stepElems[i].addEventListener('click', this.saveOptionOnNext);
+				}
+			}
+
+			if (this.quitWizardElems.length > 0) {
+				for (let i = 0; i < this.quitWizardElems.length; i++) {
+					this.quitWizardElems[i].addEventListener('click', this.quitWizard);
+				}
+			}
 		},
 
 		/**
@@ -167,7 +169,7 @@ document.addEventListener('DOMContentLoaded', () => {
 		 *
 		 * @param e
 		 */
-		saveOptionsOnNext: function (e) {
+		saveOptionOnNext: function (e) {
 			let hash = document.location.hash.replace('#', '');
 
 			if (hash === 'api_token_slide' || hash === 'domain_name_slide') {

diff --git a/src/Admin/Settings/API.php b/src/Admin/Settings/API.php
@@ -202,15 +202,13 @@ private function show_wizard() {
 												   class="plausible-analytics-wizard-next-step no-underline gap-x-2 inline-flex relative inset-0 rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 transition-color">
 													<?php esc_html_e( 'Next', 'plausible-analytics' ); ?>
 												</a>
-												<a id="plausible-analytics-wizard-quit"
-												   data-nonce="<?php echo wp_create_nonce( 'plausible_analytics_quit_wizard' ); ?>" href="#"
-												   class="inline-block mt-4 px-4 py-2 border no-underline text-sm leading-5 font-medium rounded-md text-red-700 bg-white dark:text-white hover:text-red-500 dark:hover:text-red-400 focus:outline-none focus:border-blue-300 focus:ring active:text-red-800 active:bg-gray-50 transition ease-in-out duration-150">
+												<a data-nonce="<?php echo wp_create_nonce( 'plausible_analytics_quit_wizard' ); ?>" href="#"
+												   class="plausible-analytics-wizard-quit inline-block mt-4 px-4 py-2 border no-underline text-sm leading-5 font-medium rounded-md text-red-700 bg-white dark:text-white hover:text-red-500 dark:hover:text-red-400 focus:outline-none focus:border-blue-300 focus:ring active:text-red-800 active:bg-gray-50 transition ease-in-out duration-150">
 													<?php esc_html_e( 'Setup later', 'plausible-analytics' ); ?>
 												</a>
 											<?php else: ?>
-												<a id="plausible-analytics-wizard-quit"
-												   data-nonce="<?php echo wp_create_nonce( 'plausible_analytics_quit_wizard' ); ?>" href="#"
-												   class="no-underline gap-x-2 rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+												<a data-nonce="<?php echo wp_create_nonce( 'plausible_analytics_quit_wizard' ); ?>" href="#"
+												   class="plausible-analytics-wizard-quit no-underline gap-x-2 rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
 													<?php esc_html_e( 'Visit plugin settings', 'plausible-analytics' ); ?>
 												</a>
 											<?php endif; ?>