[tabbed-changeform] Improve tabbed changeform feature.

admin_interface/static/admin_interface/css/tabbed-changeform.css

@@ -1,43 +1,56 @@
-.admin-interface .tabbed-changeform-tab {
+.admin-interface .tabbed-changeform-tabs {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     overflow-x: auto;
-    padding-bottom: 8px;
+    overflow-y: hidden;
-    scrollbar-width: 4px;
+    scrollbar-width: thin;
+    padding-bottom: 15px;
 }
 
-.admin-interface .tabbed-changeform-tab::-webkit-scrollbar {
+@-moz-document url-prefix() {
-    height: 4px;
+    .admin-interface .tabbed-changeform-tabs {
-    background-color: var(--border-color);
+        padding-bottom: 13px;
-}
-.admin-interface .tabbed-changeform-tab::-webkit-scrollbar-thumb {
-    background:  #aaa;
     }
-
-
-.admin-interface .tabbed-changeform-tab button {
-    -webkit-appearance: none;
-    border: none;
-    border-radius: 0;
-    border-bottom: 1px solid var(--border-color);
-    flex-shrink: 0;
-    flex-grow: 0;
-    cursor: pointer;
-    padding: 8px 12px;
-    margin: 0;
-    background-color: var(--admin-interface-module-header-text-color);
-    color: var(--admin-interface-module-background-color);
 }
 
-.admin-interface .tabbed-changeform-tab button.active {
+.admin-interface .tabbed-changeform-tabs .tabbed-changeform-tablink {
-    outline: none;
+    appearance: none;
-    font-weight: bold;
+    -webkit-appearance: none;
-    border: 1px solid var(--border-color);
+    border: 1px solid transparent;
-    border-bottom: none;
+    border-bottom: 1px solid var(--border-color);
     border-radius: var(--admin-interface-module-border-radius);
     border-bottom-left-radius: 0px;
     border-bottom-right-radius: 0px;
+    flex-shrink: 0;
+    flex-grow: 0;
+    cursor: pointer;
+    padding: 10px 15px;
+    margin: 0;
+    background-color: var(--admin-interface-module-header-text-color);
+    color: var(--admin-interface-generic-link-color);
+    font-size: 13px;
+    font-weight: bold;
+    outline: none !important;
+}
+
+.admin-interface .tabbed-changeform-tabs .tabbed-changeform-tablink + .tabbed-changeform-tablink {
+    margin-left: -1px;
+}
+
+.admin-interface .tabbed-changeform-tabs .tabbed-changeform-tablink:hover {
+    color: var(--admin-interface-generic-link-hover-color);
+}
+
+.admin-interface .tabbed-changeform-tabs .tabbed-changeform-tablink.active {
+    border: 1px solid var(--border-color);
+    border-bottom: 1px solid transparent;
+    color: var(--admin-interface-module-background-color);
+}
+
+.admin-interface .tabbed-changeform-tabs-remaining-space {
+    flex: 1;
+    border-bottom: 1px solid var(--border-color);
 }
 
 .admin-interface .tabbed-changeform-tabcontent {
@@ -48,8 +61,3 @@
 .admin-interface .tabbed-changeform-tabcontent.active {
     display: block;
 }
-
-.admin-interface .tabbed-changeform-tabs-remaining-space {
-    flex: 1;
-    border-bottom: 1px solid var(--border-color);
-}

admin_interface/static/admin_interface/js/tabbed_changeform.js

@@ -1,14 +0,0 @@
-
-function openTab(evt, tabName) {
-  var tabcontents, tablinks;
-  tabcontents = document.getElementsByClassName("tabbed-changeform-tabcontent");
-  for (let tabcontent of tabcontents) {
-    tabcontent.classList.remove("active");
-  }
-  tablinks = document.getElementsByClassName("tabbed-changeform-tablinks");
-  for (let tablink of tablinks) {
-    tablink.classList.remove("active");
-  }
-  document.getElementById(tabName).classList.add("active");
-  evt.currentTarget.classList.add("active");
-}

admin_interface/static/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 || {}));

admin_interface/templates/admin/change_form.html

@@ -1,76 +1,88 @@
 {% extends "admin/change_form.html" %}
 {% load static admin_interface_tags %}
 
-
 {% block field_sets %}
 
-{% get_admin_interface_setting "show_fieldsets_as_tabs" as show_fieldsets_as_tabs %}
+    {% get_admin_interface_setting "show_fieldsets_as_tabs" as show_fieldsets_as_tabs %}
-{% get_admin_interface_setting "show_inlines_as_tabs" as show_inlines_as_tabs %}
+    {% get_admin_interface_setting "show_inlines_as_tabs" as show_inlines_as_tabs %}
-{% admin_interface_use_changeform_tabs adminform inline_admin_formsets as admin_interface_use_changeform_tabs %}
+    {% admin_interface_use_changeform_tabs adminform inline_admin_formsets as admin_interface_use_changeform_tabs %}
 
-{% if not admin_interface_use_changeform_tabs %}
+    {% if not admin_interface_use_changeform_tabs %}
 
-{{block.super}}
+        {{ block.super }}
 
-{% else %}
+    {% else %}
 
-    <div class="tabbed-changeform-tab">
+        <div id="tabbed-changeform-tabs" class="tabbed-changeform-tabs">
 
             {% if show_fieldsets_as_tabs %}
                 {% for fieldset in adminform %}
-        <button type="button" class="tabbed-changeform-tablinks {{ forloop.counter0|default:"active" }}" onclick="openTab(event, 'tab-{{fieldset.name|slugify}}')">
+                {% with fieldset.name|default_if_none:opts.verbose_name as tab_name %}
-            {{ fieldset.name|default_if_none:opts.verbose_name|capfirst}}
+                <button type="button" id="tablink-{{ tab_name|slugify }}" class="tabbed-changeform-tablink {{ forloop.counter0|default:'active' }}" onclick="AdminInterface.tabbedChangeForm.openTab(event, '{{ tab_name|slugify }}')">
+                    {{ tab_name|capfirst }}
                 </button>
+                {% endwith %}
                 {% endfor %}
             {% else %}
-        <button type="button" class="tabbed-changeform-tablinks active" onclick="openTab(event, 'general')">
+                {% with opts.verbose_name as tab_name %}
-          {{ opts.verbose_name|capfirst }}
+                <button type="button" id="tablink-{{ tab_name|slugify }}" class="tabbed-changeform-tablink active" onclick="AdminInterface.tabbedChangeForm.openTab(event, '{{ tab_name|slugify }}')">
+                    {{ tab_name|capfirst }}
                 </button>
+                {% endwith %}
             {% endif %}
 
             {% if show_inlines_as_tabs %}
                 {% for inline_admin_formset in inline_admin_formsets %}
-        <button type="button" class="tabbed-changeform-tablinks" onclick="openTab(event, 'tab-{{inline_admin_formset.opts.verbose_name_plural|slugify}}')">
+                {% with fieldset.name|default_if_none:opts.verbose_name as tab_name %}
-            {{inline_admin_formset.opts.verbose_name_plural|capfirst}}
+                <button type="button" id="tablink-{{ tab_name|slugify }}" class="tabbed-changeform-tablink" onclick="AdminInterface.tabbedChangeForm.openTab(event, '{{ tab_name|slugify }}')">
+                    {{ tab_name|capfirst }}
                 </button>
+                {% endwith %}
                 {% endfor %}
             {% endif %}
-      <div class="tabbed-changeform-tabs-remaining-space"></div>
+
+            <span class="tabbed-changeform-tabs-remaining-space"></span>
 
         </div>
 
         {% if show_fieldsets_as_tabs %}
             {% for fieldset in adminform %}
-      <div id="tab-{{fieldset.name|slugify}}" class="tabbed-changeform-tabcontent {{ forloop.counter0|default:"active" }}">
+            {% with fieldset.name|default_if_none:opts.verbose_name as tab_name %}
+            <div id="tabcontent-{{ tab_name|slugify }}" class="tabbed-changeform-tabcontent {{ forloop.counter0|default:'active' }}">
                 {% include "admin/includes/headerless_fieldset.html" %}
             </div>
+            {% endwith %}
             {% endfor %}
         {% else %}
-      <div id="general" class="tabbed-changeform-tabcontent active">
+            {% with opts.verbose_name as tab_name %}
+            <div id="tabcontent-{{ tab_name|slugify }}" class="tabbed-changeform-tabcontent active">
             {% for fieldset in adminform %}
                 {% include "admin/includes/fieldset.html" %}
             {% endfor %}
             </div>
+            {% endwith %}
         {% endif %}
 
         {% for inline_admin_formset in inline_admin_formsets  %}
-    <div id="tab-{{inline_admin_formset.opts.verbose_name_plural|slugify}}" class="tabbed-changeform-tabcontent">
+        {% with inline_admin_formset.opts.verbose_name_plural as tab_name %}
+        <div id="tabcontent-{{ tab_name|slugify }}" class="tabbed-changeform-tabcontent">
             {% get_admin_interface_inline_template inline_admin_formset.opts.template as inline_template %}
             {% include inline_template %}
         </div>
+        {% endwith %}
         {% endfor %}
-    <script
+
-      type="text/javascript"
+        <script type="text/javascript" id="admin-interface-tabbed-changeform-script" src="{% static 'admin_interface/tabbed-changeform/tabbed-changeform.js' %}"></script>
-      id="tabbed-changeform-script"
+
-      src="{% static "admin_interface/js/tabbed_changeform.js" %}"
+    {% endif %}
-    >
+
-    </script>
-{% endif %}
 {% endblock %}
 
 {% block inline_field_sets %}
+
     {% get_admin_interface_setting "show_inlines_as_tabs" as show_inlines_as_tabs %}
     {% if not show_inlines_as_tabs %}
-    {{block.super}}
+        {{ block.super }}
     {% endif %}
+
 {% endblock %}