UI - Reverting JS change to tabs (the better fix was the W3C HTML validation)

changedetectionio/static/js/tabs.js

@@ -1,66 +1,48 @@
-(function ($) {
-    $.fn.hashTabs = function (options) {
-        var settings = $.extend({
-            tabContainer: ".tabs ul",
-            tabSelector: "li a",
-            tabContent: ".tab-pane-inner",
-            activeClass: "active",
-            errorClass: ".messages .error",
-            bodyClassToggle: "full-width"
-        }, options);
+// Rewrite this is a plugin.. is all this JS really 'worth it?'
 
-        var $tabs = $(settings.tabContainer).find(settings.tabSelector);
+window.addEventListener('hashchange', function () {
+    var tabs = document.getElementsByClassName('active');
+    while (tabs[0]) {
+        tabs[0].classList.remove('active');
+        document.body.classList.remove('full-width');
+    }
+    set_active_tab();
+}, false);
 
-        function setActiveTab() {
-            var hash = window.location.hash;
-            var $activeTab = $tabs.filter("[href='" + hash + "']");
+var has_errors = document.querySelectorAll(".messages .error");
+if (!has_errors.length) {
+    if (document.location.hash == "") {
+        location.replace(document.querySelector(".tabs ul li:first-child a").hash);
+    } else {
+        set_active_tab();
+    }
+} else {
+    focus_error_tab();
+}
 
-            // Remove active class from all tabs
-            $(settings.tabContainer).find("li").removeClass(settings.activeClass);
+function set_active_tab() {
+    document.body.classList.remove('full-width');
+    var tab = document.querySelectorAll("a[href='" + location.hash + "']");
+    if (tab.length) {
+        tab[0].parentElement.className = "active";
+    }
 
-            // Add active class to selected tab
-            if ($activeTab.length) {
-                $activeTab.parent().addClass(settings.activeClass);
-            }
+}
 
-            // Show the correct content
-            $(settings.tabContent).hide();
-            if (hash) {
-                $(hash).show();
-            }
+function focus_error_tab() {
+    // time to use jquery or vuejs really,
+    // activate the tab with the error
+    var tabs = document.querySelectorAll('.tabs li a'), i;
+    for (i = 0; i < tabs.length; ++i) {
+        var tab_name = tabs[i].hash.replace('#', '');
+        var pane_errors = document.querySelectorAll('#' + tab_name + ' .error')
+        if (pane_errors.length) {
+            document.location.hash = '#' + tab_name;
+            return true;
         }
-
-        function focusErrorTab() {
-            $tabs.each(function () {
-                var tabName = this.hash.replace("#", "");
-                if ($("#" + tabName).find(settings.errorClass).length) {
-                    window.location.hash = "#" + tabName;
-                    return false; // Stop loop on first error tab
-                }
-            });
-        }
-
-        function initializeTabs() {
-            if ($(settings.errorClass).length) {
-                focusErrorTab();
-            } else if (!window.location.hash) {
-                window.location.replace($tabs.first().attr("href"));
-            } else {
-                setActiveTab();
-            }
-        }
-
-        // Listen for hash changes
-        $(window).on("hashchange", setActiveTab);
-
-        // Initialize on page load
-        initializeTabs();
-
-        return this; // Enable jQuery chaining
-    };
-})(jQuery);
+    }
+    return false;
+}
+
 
 
-$(document).ready(function () {
-    $(".tabs").hashTabs();
-});

changedetectionio/static/styles/scss/styles.scss

@@ -945,7 +945,15 @@ $form-edge-padding: 20px;
 }
 
 .tab-pane-inner {
-  display: none;
+
+  &:not(:target) {
+    display: none;
+  }
+
+  &:target {
+    display: block;
+  }
+
   // doesnt need padding because theres another row of buttons/activity
   padding: 0px;
 }

changedetectionio/static/styles/styles.css

@@ -1159,8 +1159,11 @@ textarea::placeholder {
   border-radius: 5px; }
 
 .tab-pane-inner {
-  display: none;
   padding: 0px; }
+  .tab-pane-inner:not(:target) {
+    display: none; }
+  .tab-pane-inner:target {
+    display: block; }
 
 .beta-logo {
   height: 50px;