Implement tabs

jet/static/jet/css/_changeform.scss

@@ -388,8 +388,15 @@ body.popup .submit-row {
 /* INLINES */
 
 .inline-group {
+  padding: 0;
+  background-color: $content-background-color;
+  border-radius: 4px;
+  border: 0;
+
+  fieldset.module {
+    background-color: inherit;
     padding: 0;
-    margin: 0 0 30px;
+  }
 }
 
 .inline-group thead th {
@@ -556,3 +563,59 @@ form .related-widget-wrapper ul {
     vertical-align: middle;
   }
 }
+
+/* TABS */
+
+.changeform-tabs {
+  margin: 0;
+  padding: 0;
+  border-bottom: 2px solid $background-color;
+  padding-left: 16px !important;
+  background-color: $content-background-color;
+  border-radius: 4px 4px 0 0;
+
+  &-item {
+    display: inline-block;
+    padding: 0;
+    line-height: normal;
+
+    a, a:hover, a:visited {
+      display: inline-block;
+      padding: 12px 4px;
+      margin: 0 4px;
+      border-bottom: 2px solid transparent;
+      position: relative;
+      top: 2px;
+      color: $dim-text-color;
+      font-weight: bold;
+      font-size: 11px;
+      text-transform: uppercase;
+    }
+
+    a:hover {
+      color: $text-color;
+    }
+
+    &.selected {
+      & a, & a:hover, & a:visited {
+        color: $text-color;
+        border-color: $tab-selected-border-color;
+      }
+    }
+
+    &.errors {
+      & a, & a:hover, & a:visited {
+        border-color: $tab-error-border-color;
+      }
+    }
+  }
+
+  ~ .module, ~ .inline-group {
+    display: none;
+    border-radius: 0 0 4px 4px;
+
+    &.selected {
+      display: block;
+    }
+  }
+}

jet/static/jet/js/src/features/changeform-tabs.js

@@ -1,43 +1,72 @@
 var $ = require('jquery');
 
-var initChangeformTabs = function() {
-    $('.changeform').each(function() {
-        var $changeform = $(this);
-        var $tabItems = $changeform.find('.changeform-tabs-item');
-        var $modules = $changeform.find('.module');
+var ChangeFormTabs = function($changeform) {
+    this.$changeform = $changeform;
+};
 
-        if ($tabItems.length == 0) {
-            return;
-        }
+ChangeFormTabs.prototype = {
+    getContentWrappers: function() {
+        var $container = this.$changeform.find('#content-main > form > div');
+        var $modules = $container.find('> .module');
+        var $inlines = $container.find('> .inline-group');
 
-        var showTab = function(selector) {
-            selector = selector.replace(/^#\/?/, '');
+        return $().add($modules).add($inlines);
+    },
+    getHashSelector: function(hash) {
+        var result = hash.match(/^(#(\/tab\/(.+)\/)?)?$/i);
 
-            var $module = selector.length > 0 ? $modules.filter('#' + selector) : $();
+        if (result == null) {
+            return null;
+        }
 
-            if ($module && $module.length == 0) {
-                selector = $tabItems.first().find('a').attr('href').replace(/^#\/?/, '');
-            }
+        return result[3] != undefined ? result[3] : '';
+    },
+    showTab: function(hash, firstOnError) {
+        var $tabItems = this.$changeform.find('.changeform-tabs-item');
+        var $contentWrappers = this.getContentWrappers();
+        var selector = this.getHashSelector(hash);
 
-            var $tabItem = $tabItems.find('a[href="#/' + selector + '"]').closest('.changeform-tabs-item');
+        if (!firstOnError && selector == null) {
+            return;
+        }
 
+        if (selector == null || selector.length == 0) {
+            selector = this.getHashSelector(
+                $tabItems.first().find('.changeform-tabs-item-link').attr('href')
+            )
+        }
+
+        var $contentWrapper = $contentWrappers.filter('.' + selector);
+        var $tabItem = $tabItems
+            .find('.changeform-tabs-item-link[href="#/tab/' + selector + '/"]')
+            .closest('.changeform-tabs-item');
 
-            $tabItems.removeClass('selected');
-            $tabItem.addClass('selected');
-            $module = $modules.removeClass('selected').filter('#' + selector).addClass('selected');
-            $module.find('select').trigger('select:init');
-        };
+        $tabItems.removeClass('selected');
+        $tabItem.addClass('selected');
 
-        $('.changeform-tabs-item-link').click(function (e) {
-            var moduleSelector = $(this).attr('href');
+        $contentWrappers.removeClass('selected');
+        $contentWrapper.addClass('selected');
+    },
+    initTabs: function() {
+        var self = this;
 
-            showTab(moduleSelector);
+        $(window).on('hashchange',function() {
+            self.showTab(location.hash, false);
         });
 
-        showTab(location.hash);
-    });
+        this.showTab(location.hash, true);
+    },
+    run: function() {
+        try {
+            this.initTabs();
+        } catch (e) {
+            console.error(e);
+        }
+    }
 };
 
 $(document).ready(function() {
-    initChangeformTabs();
+    $('.change-form').each(function() {
+        new ChangeFormTabs($(this)).run();
+    });
 });

jet/static/jet/js/src/layout-updaters/changeform-tabs.js

@@ -0,0 +1,78 @@
+var $ = require('jquery');
+
+var ChangeFormTabsUpdater = function($changeform) {
+    this.$changeform = $changeform;
+};
+
+ChangeFormTabsUpdater.prototype = {
+    findTabs: function($modules, $inlines) {
+        var tabs = [];
+
+        $modules.each(function(i) {
+            var $module = $(this);
+            var title = 'General';
+            var className = 'module_' + i;
+
+            $module.addClass(className);
+
+            tabs.push({
+                className: className,
+                title: title
+            });
+        });
+
+        $inlines.each(function(i) {
+            var $inline = $(this);
+            var $header = $inline.find('> h2, .tabular.inline-related > .module > h2').first();
+            var title = $header.length != 0 ? $header.html() : 'Tab';
+            var className = 'inline_' + i;
+
+            $inline.addClass(className);
+            $header.remove();
+
+            tabs.push({
+                className: className,
+                title: title
+            });
+        });
+
+        return tabs;
+    },
+    createTabs: function($contentWrappers, tabs) {
+        var $tabs = $('<ul>').addClass('changeform-tabs');
+
+        $.each(tabs, function() {
+            var tab = this;
+            var $item = $('<li>')
+                .addClass('changeform-tabs-item');
+            var $link = $('<a>')
+                .addClass('changeform-tabs-item-link')
+                .html(tab['title'])
+                .attr('href', '#/tab/' + tab['className'] + '/');
+
+            $link.appendTo($item);
+            $item.appendTo($tabs);
+        });
+
+        $tabs.insertBefore($contentWrappers.first());
+    },
+    run: function() {
+        var $container = this.$changeform.find('#content-main > form > div');
+        var $modules = $container.find('> .module');
+        var $inlines = $container.find('> .inline-group');
+        var $contentWrappers = $().add($modules).add($inlines);
+
+        try {
+            var tabs = this.findTabs($modules, $inlines);
+            this.createTabs($contentWrappers, tabs);
+        } catch (e) {
+            console.error(e);
+        }
+    }
+};
+
+$(document).ready(function() {
+    $('.change-form').each(function() {
+        new ChangeFormTabsUpdater($(this)).run();
+    });
+});

jet/static/jet/js/src/main.js

@@ -3,6 +3,7 @@ require('./layout-updaters/breadcrumbs');
 require('./layout-updaters/paginator');
 require('./layout-updaters/toolbar');
 require('./layout-updaters/user-tools');
+require('./layout-updaters/changeform-tabs');
 require('./features/side-menu');
 require('./features/filters');
 require('./features/changeform-tabs');