Roo/bootstrap/panel/Tabs.js

[roojs1] / Roo / bootstrap / panel / Tabs.js

diff --git a/Roo/bootstrap/panel/Tabs.js b/Roo/bootstrap/panel/Tabs.js
index bb4a30a..4a4fb61 100644 (file)
--- a/Roo/bootstrap/panel/Tabs.js
+++ b/Roo/bootstrap/panel/Tabs.js
@@ -67,6 +67,7 @@ Roo.bootstrap.panel.Tabs = function(config){
     }
     this.stripWrap = Roo.get(this.createStrip(this.el.dom), true);
     this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
+    this.stripEl.setVisibilityMode(Roo.Element.DISPLAY);
     this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
     if(Roo.isIE){
         Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x", "hidden");
@@ -226,9 +227,11 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, {
      * Adds an existing {@link Roo.TabPanelItem}.
      * @param {Roo.TabPanelItem} item The TabPanelItem to add
      */
-    addTabItem : function(item){
+    addTabItem : function(item)
+    {
         this.items[item.id] = item;
         this.items.push(item);
+        this.autoSizeTabs();
       //  if(this.resizeTabs){
     //       item.setWidth(this.currentTabWidth || this.preferredTabWidth);
   //         this.autoSizeTabs();
@@ -310,7 +313,8 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, {
      * @param {String/Number} id The id or index of the TabPanelItem to activate.
      * @return {Roo.TabPanelItem} The TabPanelItem.
      */
-    activate : function(id){
+    activate : function(id)
+    {
         var tab = this.items[id];
         if(!tab){
             return null;
@@ -376,12 +380,22 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, {
     /**
      * Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing)
      */
-    autoSizeTabs : function(){
+    autoSizeTabs : function()
+    {
         var count = this.items.length;
         var vcount = count - this.hiddenCount;
+        
+        if (vcount < 2) {
+            this.stripEl.hide();
+        } else {
+            this.stripEl.show();
+        }
+        
         if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) {
             return;
         }
+        
+        
         var w = Math.max(this.el.getWidth() - this.cpad, 10);
         var availWidth = Math.floor(w / vcount);
         var b = this.stripBody;
@@ -441,7 +455,9 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, {
     createStrip : function(container)
     {
         var strip = document.createElement("nav");
-        strip.className = "navbar navbar-default"; //"x-tabs-wrap";
+        strip.className = Roo.bootstrap.version == 4 ?
+            "navbar-light bg-light" : 
+            "navbar navbar-default"; //"x-tabs-wrap";
         container.appendChild(strip);
         return strip;
     },
@@ -480,7 +496,7 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, {
     createStripElements :  function(stripEl, text, closable, tpl)
     {
         var td = document.createElement("li"); // was td..
-        
+        td.className = 'nav-item';
         
         //stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
         
@@ -502,35 +518,55 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, {
         } else {
         */
         // not sure what this is..
-            if(!this.tabTpl){
+//            if(!this.tabTpl){
                 //this.tabTpl = new Roo.Template(
                 //   '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
                 //   '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span></em></span></a>'
                 //);
-                this.tabTpl = new Roo.Template(
-                   '<a href="#">' +
-                   '<span unselectable="on"' +
-                            (this.disableTooltips ? '' : ' title="{text}"') +
-                            ' >{text}</span></a>'
+//                this.tabTpl = new Roo.Template(
+//                   '<a href="#">' +
+//                   '<span unselectable="on"' +
+//                            (this.disableTooltips ? '' : ' title="{text}"') +
+//                            ' >{text}</span></a>'
+//                );
+//                
+//            }
+
+
+            var template = tpl || this.tabTpl || false;
+            
+            if(!template){
+                template =  new Roo.Template(
+                        Roo.bootstrap.version == 4 ? 
+                            (
+                                '<a class="nav-link" href="#" unselectable="on"' +
+                                     (this.disableTooltips ? '' : ' title="{text}"') +
+                                     ' >{text}</a>'
+                            ) : (
+                                '<a class="nav-link" href="#">' +
+                                '<span unselectable="on"' +
+                                         (this.disableTooltips ? '' : ' title="{text}"') +
+                                    ' >{text}</span></a>'
+                            )
                 );
-                
             }
             
-            switch (typeof(tpl)) {
+            switch (typeof(template)) {
                 case 'object' :
-                    this.tabTpl = tpl;
                     break;
                 case 'string' :
-                    this.tabTpl = new Roo.Template(tpl);
+                    template = new Roo.Template(template);
                     break;
                 default :
                     break;
             }
             
-            var el = this.tabTpl.overwrite(td, {"text": text});
+            var el = template.overwrite(td, {"text": text});
+            
             var inner = el.getElementsByTagName("span")[0];
+            
             return {"el": el, "inner": inner};
-        //}
+            
     }