Convert FX switcher to vanilla JavaScript (from jQuery)

wolffe · Dec 5, 2024 · be26591 · be26591
1 parent 47f8f14
commit be26591
Showing 1 changed file with 45 additions and 28 deletions.
diff --git a/includes/builder/assets/switcher.js b/includes/builder/assets/switcher.js
@@ -1,39 +1,56 @@
-jQuery(document).ready(function ($) {
-    /* Click Tab */
-    $(document.body).on('click', '#fxb-switcher a.nav-tab', function (e) {
-        e.preventDefault();
+document.addEventListener('DOMContentLoaded', function () {
+    // Click Tab
+    document.body.addEventListener('click', function (e) {
+        const target = e.target;
 
-        /* Bail */
-        if ($(this).hasClass('nav-tab-active')) {
-            return false;
-        }
+        // Check if the clicked element is a nav-tab link
+        if (target.matches('#fxb-switcher a.nav-tab')) {
+            e.preventDefault();
 
-        /* Confirm ? */
-        if (!$(this).hasClass('switch-confirmed')) {
-            if (true !== confirm($(this).data('confirm'))) {
+            // Bail if the clicked tab is already active
+            if (target.classList.contains('nav-tab-active')) {
                 return false;
             }
-        }
 
-        /* Add Confirmed Class */
-        $(this).addClass('switch-confirmed');
+            // Confirm switch
+            if (!target.classList.contains('switch-confirmed')) {
+                const confirmationMessage = target.getAttribute('data-confirm');
+                if (!confirm(confirmationMessage)) {
+                    return false;
+                }
+            }
+
+            // Add Confirmed Class
+            target.classList.add('switch-confirmed');
 
-        /* Force Switch to Visual Editor */
-        $.fn.fxB_switchEditor("fxb_editor");
+            // Force Switch to Visual Editor
+            if (typeof window.fxB_switchEditor === 'function') {
+                window.fxB_switchEditor('fxb_editor');
+            }
 
-        var this_data = $(this).data('fxb-switcher');
+            const switcherData = target.getAttribute('data-fxb-switcher');
 
-        /* Clicking "Editor" */
-        if ('editor' == this_data) {
-            $('html').removeClass('fx_builder_active');
-            $('input[name="_fxb_active"]').val('');
-            $(this).addClass('nav-tab-active');
-            $(this).siblings('.nav-tab').removeClass('nav-tab-active');
-        } else if ('builder' == this_data) {
-            $('html').addClass('fx_builder_active');
-            $('input[name="_fxb_active"]').val('1');
-            $(this).addClass('nav-tab-active');
-            $(this).siblings('.nav-tab').removeClass('nav-tab-active');
+            if (switcherData === 'editor') {
+                document.documentElement.classList.remove('fx_builder_active');
+                document.querySelector('input[name="_fxb_active"]').value = '';
+                target.classList.add('nav-tab-active');
+                const siblings = target.parentElement.querySelectorAll('.nav-tab');
+                siblings.forEach(function (sibling) {
+                    if (sibling !== target) {
+                        sibling.classList.remove('nav-tab-active');
+                    }
+                });
+            } else if (switcherData === 'builder') {
+                document.documentElement.classList.add('fx_builder_active');
+                document.querySelector('input[name="_fxb_active"]').value = '1';
+                target.classList.add('nav-tab-active');
+                const siblings = target.parentElement.querySelectorAll('.nav-tab');
+                siblings.forEach(function (sibling) {
+                    if (sibling !== target) {
+                        sibling.classList.remove('nav-tab-active');
+                    }
+                });
+            }
         }
     });
 });