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 cb4665d..7367c6c 100644 (file)
--- a/Roo/bootstrap/panel/Tabs.js
+++ b/Roo/bootstrap/panel/Tabs.js
@@ -61,14 +61,6 @@ Roo.bootstrap.panel.Tabs = function(config){
         }
     }
     
-    if(typeof(config.tpl) == 'object'){
-        this.tabTpl = config.tpl;
-    }
-    
-    if(typeof(config.tpl) == 'string'){
-        this.tabTpl = new Roo.Template(config.tpl);
-    }
-    
     if(this.tabPosition == "bottom"){
         this.bodyEl = Roo.get(this.createBody(this.el.dom));
         this.el.addClass("roo-tabs-bottom");
@@ -179,13 +171,14 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, {
      * @param {Boolean} closable (optional) True to create a close icon on the tab
      * @return {Roo.TabPanelItem} The created TabPanelItem
      */
-    addTab : function(id, text, content, closable)
+    addTab : function(id, text, content, closable, tpl)
     {
         var item = new Roo.bootstrap.panel.TabItem({
             panel: this,
             id : id,
             text : text,
-            closable : closable
+            closable : closable,
+            tpl : tpl
         });
         this.addTabItem(item);
         if(content){
@@ -233,9 +226,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();
@@ -317,7 +312,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;
@@ -383,12 +379,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;
@@ -448,7 +454,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;
     },
@@ -484,10 +492,10 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, {
         return body;
     },
     /** @private */
-    createStripElements :  function(stripEl, text, closable)
+    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]);
         
@@ -509,23 +517,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></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>'
+                            )
                 );
-                
             }
-            var el = this.tabTpl.overwrite(td, {"text": text});
+            
+            switch (typeof(template)) {
+                case 'object' :
+                    break;
+                case 'string' :
+                    template = new Roo.Template(template);
+                    break;
+                default :
+                    break;
+            }
+            
+            var el = template.overwrite(td, {"text": text});
+            
             var inner = el.getElementsByTagName("span")[0];
+            
             return {"el": el, "inner": inner};
-        //}
+            
     }