reintroduce bitty and add progressive enhancement and tabs

data/static/css/style.css

@@ -905,6 +905,9 @@ ol.sortable-list {
   }
 }
 
+.js-only {
+  display: none;
+}
 
 @media (max-width: 768px) {
   body {

data/static/js/bits/progressive-enhancement.js

@@ -0,0 +1,17 @@
+export const b = {
+  init: 'enhance',
+}
+
+export function enhance(_, __, el) {
+  console.log(el);
+  if (el.classList.contains('js-only')) {
+    el.classList.remove('js-only');
+  }
+
+  if (el.disabled) {
+    el.disabled = false;
+    if (el.title.search('JavaScript') !== -1) {
+      el.title = '';
+    }
+  }
+}

data/static/js/bits/ui.js

@@ -0,0 +1,25 @@
+export const b = {}
+
+export function setTab(_, sender, el) {
+  if (sender.ariaSelected === 'true') {
+    return;
+  }
+  if (!el.contains(sender)) {
+    return;
+  }
+  const tabIndex = parseInt(sender.dataset.tabIndex);
+  const tabPanels = el.querySelectorAll('.tab-content');
+  const tabButtons = el.querySelectorAll('.tab-bar button');
+
+  for (let i = 0; i < tabPanels.length; i++) {
+    const tabPanel = tabPanels[i];
+    const tabButton = tabButtons[i];
+    if (i === tabIndex) {
+      tabPanel.classList.remove('hidden');
+      tabButton.ariaSelected = 'true';
+    } else if (!tabPanel.classList.contains('hidden')) {
+      tabPanel.classList.add('hidden');
+      tabButton.ariaSelected = 'false';
+    }
+  }
+}