Revamped Signing page to allow multiple signatures and images

src/main/resources/static/js/tab-container.js

@@ -0,0 +1,39 @@
+
+TabContainer = {
+    initTabGroups() {
+        const groups = document.querySelectorAll(".tab-group");
+        const unloadedGroups = [...groups].filter(g => !g.initialised);
+        unloadedGroups.forEach(group => {
+            const containers = group.querySelectorAll(".tab-container");
+            const tabTitles = [...containers].map(c => c.getAttribute("title"));
+            
+            const tabList = document.createElement("div");
+            tabList.classList.add("tab-buttons");
+            tabTitles.forEach(title => {
+                const tabButton = document.createElement("button");
+                tabButton.innerHTML = title;
+                tabButton.onclick = e => {
+                    this.setActiveTab(e.target);
+                }
+                tabList.appendChild(tabButton);
+            });
+            group.prepend(tabList);
+
+            this.setActiveTab(tabList.firstChild);
+
+            group.initialised = true;
+        });
+    },
+    setActiveTab(tabButton) {
+        const group = tabButton.closest(".tab-group")
+
+        group.querySelectorAll(".active").forEach(el => el.classList.remove("active"));
+
+        tabButton.classList.add("active");
+        group.querySelector(`[title="${tabButton.innerHTML}"]`).classList.add("active");
+    },
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    TabContainer.initTabGroups();
+})