DJANGO Phase 1

backend/staticfiles/admin_interface/tabbed-changeform/tabbed-changeform.js

@@ -0,0 +1,73 @@
+(function (AdminInterface) {
+
+    var scope = AdminInterface;
+
+    scope.tabbedChangeForm = {
+
+        openTab: function (event, tabName) {
+            this.openTabByName(tabName);
+        },
+
+        openTabByName: function(tabName) {
+            let tablinkEl = document.getElementById("tablink-" + tabName);
+            let tabcontentEl = document.getElementById("tabcontent-" + tabName);
+            if (!tablinkEl || !tabcontentEl) {
+                return false;
+            }
+
+            let tablinks = document.getElementsByClassName("tabbed-changeform-tablink");
+            let tabcontents = document.getElementsByClassName("tabbed-changeform-tabcontent");
+
+            // toggle tab link
+            for (let tablink of tablinks) {
+                tablink.classList.remove("active");
+            }
+            tablinkEl.classList.add("active");
+
+            // toggle tab content
+            for (let tabcontent of tabcontents) {
+                tabcontent.classList.remove("active");
+            }
+            tabcontentEl.classList.add("active");
+
+            // update location hash
+            let history = window.history;
+            if (history) {
+                history.replaceState(undefined, undefined, "#" + tabName);
+            }
+
+            return true;
+        },
+
+        openTabByLocationHash: function() {
+            let hash = window.location.hash;
+            if (hash && hash !== "#") {
+                let tabName = hash.substring(1);
+                if (this.openTabByName(tabName)) {
+                    this.scrollTabsToTabByName(tabName);
+                }
+            }
+        },
+
+        scrollTabsToTabByName: function(tabName) {
+            let tabsEl = document.getElementById("tabbed-changeform-tabs");
+            let tablinkEl = document.getElementById("tablink-" + tabName);
+            if (!tabsEl || !tablinkEl) {
+                return;
+            }
+            let tablinkLeft = (tablinkEl.offsetLeft - tabsEl.offsetLeft);
+            let tabsScrollLeft = Math.ceil(tablinkLeft);
+            tabsEl.scrollTo({
+                top: 0,
+                left: tabsScrollLeft,
+                behavior: "instant"
+            });
+        }
+    };
+
+    // scope.tabbedChangeForm.openTabByLocationHash();
+    document.addEventListener('DOMContentLoaded', function() {
+        scope.tabbedChangeForm.openTabByLocationHash();
+    }, false);
+
+}(window.AdminInterface = window.AdminInterface || {}));