feat: semi-configurable selection of elements to generate tabs in adm…

…in (#607) Co-authored-by: karelhovorka <gpsclock@karel-hovorka.eu>
deschler · Jul 22, 2021 · eb05201 · eb05201
1 parent 3652fa9
commit eb05201
Showing 1 changed file with 37 additions and 8 deletions.
diff --git a/modeltranslation/static/modeltranslation/js/tabbed_translation_fields.js b/modeltranslation/static/modeltranslation/js/tabbed_translation_fields.js
@@ -11,6 +11,34 @@ var google, django, gettext;
   };
 
   jQuery(function ($) {
+    var detectTemplate = function() {
+      if (document.querySelector("#jazzmin-theme, #jazzy-navbar, #jazzy-tabs, #jazzy-actions")) {
+        return "jazzmin";
+      }
+      return "default";
+    }
+
+    var selectorMapping = {
+      "default": {
+        "mainHeader": () => $("#content").find("h1"),
+        "tabContainer": (el) => $(el).closest(".form-row"),
+        "tabUlClass": "",
+        "tabLiClass": "",
+        "tabAClass": "",
+        "tabErrorClass": "ui-tab-has-errors"
+      },
+      "jazzmin": {
+        "mainHeader": () => $("#content-main").find(".card-title:first"),
+        "tabContainer": (el) => $(el).closest(".form-group"),
+        "tabUlClass": "nav nav-tabs",
+        "tabLiClass": "nav-item",
+        "tabAClass": "nav-link",
+        "tabErrorClass": "ui-tab-has-errors"
+      }
+    }
+
+    const selectors = selectorMapping[detectTemplate()];
+
     var TranslationField = function (options) {
       this.el = options.el;
       this.cls = options.cls;
@@ -181,12 +209,12 @@ var google, django, gettext;
       $.each(groupedTranslations, function (groupId, lang) {
         if (groupId.includes("__prefix__")) return;
         var tabsContainer = $("<div></div>"),
-          tabsList = $("<ul></ul>"),
+          tabsList = $(`<ul class='${selectors["tabUlClass"]}'></ul>`),
           insertionPoint,
           activeTab = 0;
         tabsContainer.append(tabsList);
         $.each(lang, function (lang, el) {
-          var container = $(el).closest(".form-row"),
+          var container = selectors["tabContainer"](el),
             label = $("label", container),
             fieldLabel = container.find("label"),
             tabId = "tab_" + $(el).attr("id"),
@@ -212,9 +240,9 @@ var google, django, gettext;
           container.find("script").remove();
           panel = $('<div id="' + tabId + '"></div>').append(container);
           tab = $(
-            "<li" +
-              (label.hasClass("required") ? ' class="required"' : "") +
-              '><a href="#' +
+            `<li class='${selectors["tabLiClass"]} ` +
+              (label.hasClass("required") ? "required" : "") + "'" +
+              `><a class="${selectors["tabAClass"]}" href="#` +
               tabId +
               '">' +
               lang.replace("_", "-") +
@@ -224,7 +252,7 @@ var google, django, gettext;
           tabsContainer.append(panel);
           if (container.hasClass("errors")) {
             activeTab = tabsList.find("li").length - 1;
-            tab.addClass("ui-tab-has-errors");
+            tab.addClass(selectors["tabErrorClass"]);
           }
         });
         insertionPoint.el[insertionPoint.insert](tabsContainer);
@@ -426,7 +454,7 @@ var google, django, gettext;
           tabsContainer.append($panel);
           if ($container.hasClass("errors")) {
             activeTab = tabsList.find("li").length - 1;
-            tab.addClass("ui-tab-has-errors");
+            tab.addClass(selectors["tabErrorClass"]);
           }
         });
         insertionPoint.el[insertionPoint.insert](tabsContainer);
@@ -463,7 +491,8 @@ var google, django, gettext;
           );
         });
         this.update(tabs);
-        $("#content").find("h1").append("&nbsp;").append(self.$select);
+        selectors["mainHeader"]().append("&nbsp;").append(self.$select);
+
       },
 
       update: function (tabs) {