Implement alias editing views and templates

core/static/modal.js

@@ -0,0 +1,17 @@
+var modal = document.querySelector('.modal');  // assuming you have only 1
+var html = document.querySelector('html');
+modal.querySelector('.modal-background').addEventListener('click', function(e) {
+  e.preventDefault();
+  modal.classList.remove('is-active');
+  html.classList.remove('is-clipped');
+});
+modal.querySelector('.modal-close').addEventListener('click', function(e) {
+  e.preventDefault();
+  modal.classList.remove('is-active');
+  html.classList.remove('is-clipped');
+});
+modal.querySelector('.modal-close-button').addEventListener('click', function(e) {
+  e.preventDefault();
+  modal.classList.remove('is-active');
+  html.classList.remove('is-clipped');
+});

core/static/tabs.css

@@ -0,0 +1,7 @@
+#tab-content div {
+    display: none;
+}
+
+#tab-content div.is-active {
+    display: block;
+}

core/static/tabs.js

@@ -0,0 +1,35 @@
+    // tabbed browsing for the modal
+    function initTabs() {
+        TABS.forEach((tab) => {
+          tab.addEventListener('click', (e) => {
+            let selected = tab.getAttribute('data-tab');
+            updateActiveTab(tab);
+            updateActiveContent(selected);
+          })
+        })
+      }
+    
+      function updateActiveTab(selected) {
+        TABS.forEach((tab) => {
+          if (tab && tab.classList.contains(ACTIVE_CLASS)) {
+            tab.classList.remove(ACTIVE_CLASS);
+          }
+        });
+        selected.classList.add(ACTIVE_CLASS);
+      }
+    
+      function updateActiveContent(selected) {
+        CONTENT.forEach((item) => {
+          if (item && item.classList.contains(ACTIVE_CLASS)) {
+            item.classList.remove(ACTIVE_CLASS);
+          }
+          let data = item.getAttribute('data-content');
+          if (data === selected) {
+            item.classList.add(ACTIVE_CLASS);
+          }
+        });
+      }
+var TABS = [...document.querySelectorAll('#tabs li')];
+var CONTENT = [...document.querySelectorAll('#tab-content div')];
+var ACTIVE_CLASS = 'is-active';
+initTabs();