git.roojs.org Git - roojs1/blob - Roo/bootstrap/panel/Tabs.js

   1         /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11 /**
  12  * @class Roo.TabPanel
  13  * @extends Roo.util.Observable
  14  * A lightweight tab container.
  15  * <br><br>
  16  * Usage:
  17  * <pre><code>
  18 // basic tabs 1, built from existing content
  19 var tabs = new Roo.TabPanel("tabs1");
  20 tabs.addTab("script", "View Script");
  21 tabs.addTab("markup", "View Markup");
  22 tabs.activate("script");
  23
  24 // more advanced tabs, built from javascript
  25 var jtabs = new Roo.TabPanel("jtabs");
  26 jtabs.addTab("jtabs-1", "Normal Tab", "My content was added during construction.");
  27
  28 // set up the UpdateManager
  29 var tab2 = jtabs.addTab("jtabs-2", "Ajax Tab 1");
  30 var updater = tab2.getUpdateManager();
  31 updater.setDefaultUrl("ajax1.htm");
  32 tab2.on('activate', updater.refresh, updater, true);
  33
  34 // Use setUrl for Ajax loading
  35 var tab3 = jtabs.addTab("jtabs-3", "Ajax Tab 2");
  36 tab3.setUrl("ajax2.htm", null, true);
  37
  38 // Disabled tab
  39 var tab4 = jtabs.addTab("tabs1-5", "Disabled Tab", "Can't see me cause I'm disabled");
  40 tab4.disable();
  41
  42 jtabs.activate("jtabs-1");
  43  * </code></pre>
  44  * @constructor
  45  * Create a new TabPanel.
  46  * @param {String/HTMLElement/Roo.Element} container The id, DOM element or Roo.Element container where this TabPanel is to be rendered.
  47  * @param {Object/Boolean} config Config object to set any properties for this TabPanel, or true to render the tabs on the bottom.
  48  */
  49 Roo.bootstrap.panel.Tabs = function(config){
  50     /**
  51     * The container element for this TabPanel.
  52     * @type Roo.Element
  53     */
  54     this.el = Roo.get(config.el);
  55     delete config.el;
  56     if(config){
  57         if(typeof config == "boolean"){
  58             this.tabPosition = config ? "bottom" : "top";
  59         }else{
  60             Roo.apply(this, config);
  61         }
  62     }
  63
  64     if(this.tabPosition == "bottom"){
  65         this.bodyEl = Roo.get(this.createBody(this.el.dom));
  66         this.el.addClass("roo-tabs-bottom");
  67     }
  68     this.stripWrap = Roo.get(this.createStrip(this.el.dom), true);
  69     this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
  70     this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
  71     if(Roo.isIE){
  72         Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x", "hidden");
  73     }
  74     if(this.tabPosition != "bottom"){
  75         /** The body element that contains {@link Roo.TabPanelItem} bodies. +
  76          * @type Roo.Element
  77          */
  78         this.bodyEl = Roo.get(this.createBody(this.el.dom));
  79         this.el.addClass("roo-tabs-top");
  80     }
  81     this.items = [];
  82
  83     this.bodyEl.setStyle("position", "relative");
  84
  85     this.active = null;
  86     this.activateDelegate = this.activate.createDelegate(this);
  87
  88     this.addEvents({
  89         /**
  90          * @event tabchange
  91          * Fires when the active tab changes
  92          * @param {Roo.TabPanel} this
  93          * @param {Roo.TabPanelItem} activePanel The new active tab
  94          */
  95         "tabchange": true,
  96         /**
  97          * @event beforetabchange
  98          * Fires before the active tab changes, set cancel to true on the "e" parameter to cancel the change
  99          * @param {Roo.TabPanel} this
 100          * @param {Object} e Set cancel to true on this object to cancel the tab change
 101          * @param {Roo.TabPanelItem} tab The tab being changed to
 102          */
 103         "beforetabchange" : true
 104     });
 105
 106     Roo.EventManager.onWindowResize(this.onResize, this);
 107     this.cpad = this.el.getPadding("lr");
 108     this.hiddenCount = 0;
 109
 110
 111     // toolbar on the tabbar support...
 112     if (this.toolbar) {
 113         alert("no toolbar support yet");
 114         this.toolbar  = false;
 115         /*
 116         var tcfg = this.toolbar;
 117         tcfg.container = this.stripEl.child('td.x-tab-strip-toolbar');
 118         this.toolbar = new Roo.Toolbar(tcfg);
 119         if (Roo.isSafari) {
 120             var tbl = tcfg.container.child('table', true);
 121             tbl.setAttribute('width', '100%');
 122         }
 123         */
 124
 125     }
 126
 127
 128
 129     Roo.bootstrap.panel.Tabs.superclass.constructor.call(this);
 130 };
 131
 132 Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, {
 133     /*
 134      *@cfg {String} tabPosition "top" or "bottom" (defaults to "top")
 135      */
 136     tabPosition : "top",
 137     /*
 138      *@cfg {Number} currentTabWidth The width of the current tab (defaults to 0)
 139      */
 140     currentTabWidth : 0,
 141     /*
 142      *@cfg {Number} minTabWidth The minimum width of a tab (defaults to 40) (ignored if {@link #resizeTabs} is not true)
 143      */
 144     minTabWidth : 40,
 145     /*
 146      *@cfg {Number} maxTabWidth The maximum width of a tab (defaults to 250) (ignored if {@link #resizeTabs} is not true)
 147      */
 148     maxTabWidth : 250,
 149     /*
 150      *@cfg {Number} preferredTabWidth The preferred (default) width of a tab (defaults to 175) (ignored if {@link #resizeTabs} is not true)
 151      */
 152     preferredTabWidth : 175,
 153     /*
 154      *@cfg {Boolean} resizeTabs True to enable dynamic tab resizing (defaults to false)
 155      */
 156     resizeTabs : false,
 157     /*
 158      *@cfg {Boolean} monitorResize Set this to true to turn on window resize monitoring (ignored if {@link #resizeTabs} is not true) (defaults to true)
 159      */
 160     monitorResize : true,
 161     /*
 162      *@cfg {Object} toolbar xtype description of toolbar to show at the right of the tab bar.
 163      */
 164     toolbar : false,
 165
 166     /**
 167      * Creates a new {@link Roo.TabPanelItem} by looking for an existing element with the provided id -- if it's not found it creates one.
 168      * @param {String} id The id of the div to use <b>or create</b>
 169      * @param {String} text The text for the tab
 170      * @param {String} content (optional) Content to put in the TabPanelItem body
 171      * @param {Boolean} closable (optional) True to create a close icon on the tab
 172      * @return {Roo.TabPanelItem} The created TabPanelItem
 173      */
 174     addTab : function(id, text, content, closable, tpl)
 175     {
 176         var item = new Roo.bootstrap.panel.TabItem({
 177             panel: this,
 178             id : id,
 179             text : text,
 180             closable : closable,
 181             tpl : tpl
 182         });
 183         this.addTabItem(item);
 184         if(content){
 185             item.setContent(content);
 186         }
 187         return item;
 188     },
 189
 190     /**
 191      * Returns the {@link Roo.TabPanelItem} with the specified id/index
 192      * @param {String/Number} id The id or index of the TabPanelItem to fetch.
 193      * @return {Roo.TabPanelItem}
 194      */
 195     getTab : function(id){
 196         return this.items[id];
 197     },
 198
 199     /**
 200      * Hides the {@link Roo.TabPanelItem} with the specified id/index
 201      * @param {String/Number} id The id or index of the TabPanelItem to hide.
 202      */
 203     hideTab : function(id){
 204         var t = this.items[id];
 205         if(!t.isHidden()){
 206            t.setHidden(true);
 207            this.hiddenCount++;
 208            this.autoSizeTabs();
 209         }
 210     },
 211
 212     /**
 213      * "Unhides" the {@link Roo.TabPanelItem} with the specified id/index.
 214      * @param {String/Number} id The id or index of the TabPanelItem to unhide.
 215      */
 216     unhideTab : function(id){
 217         var t = this.items[id];
 218         if(t.isHidden()){
 219            t.setHidden(false);
 220            this.hiddenCount--;
 221            this.autoSizeTabs();
 222         }
 223     },
 224
 225     /**
 226      * Adds an existing {@link Roo.TabPanelItem}.
 227      * @param {Roo.TabPanelItem} item The TabPanelItem to add
 228      */
 229     addTabItem : function(item)
 230     {
 231         this.items[item.id] = item;
 232         this.items.push(item);
 233
 234       //  if(this.resizeTabs){
 235     //       item.setWidth(this.currentTabWidth || this.preferredTabWidth);
 236   //         this.autoSizeTabs();
 237 //        }else{
 238 //            item.autoSize();
 239        // }
 240     },
 241
 242     /**
 243      * Removes a {@link Roo.TabPanelItem}.
 244      * @param {String/Number} id The id or index of the TabPanelItem to remove.
 245      */
 246     removeTab : function(id){
 247         var items = this.items;
 248         var tab = items[id];
 249         if(!tab) { return; }
 250         var index = items.indexOf(tab);
 251         if(this.active == tab && items.length > 1){
 252             var newTab = this.getNextAvailable(index);
 253             if(newTab) {
 254                 newTab.activate();
 255             }
 256         }
 257         this.stripEl.dom.removeChild(tab.pnode.dom);
 258         if(tab.bodyEl.dom.parentNode == this.bodyEl.dom){ // if it was moved already prevent error
 259             this.bodyEl.dom.removeChild(tab.bodyEl.dom);
 260         }
 261         items.splice(index, 1);
 262         delete this.items[tab.id];
 263         tab.fireEvent("close", tab);
 264         tab.purgeListeners();
 265         this.autoSizeTabs();
 266     },
 267
 268     getNextAvailable : function(start){
 269         var items = this.items;
 270         var index = start;
 271         // look for a next tab that will slide over to
 272         // replace the one being removed
 273         while(index < items.length){
 274             var item = items[++index];
 275             if(item && !item.isHidden()){
 276                 return item;
 277             }
 278         }
 279         // if one isn't found select the previous tab (on the left)
 280         index = start;
 281         while(index >= 0){
 282             var item = items[--index];
 283             if(item && !item.isHidden()){
 284                 return item;
 285             }
 286         }
 287         return null;
 288     },
 289
 290     /**
 291      * Disables a {@link Roo.TabPanelItem}. It cannot be the active tab, if it is this call is ignored.
 292      * @param {String/Number} id The id or index of the TabPanelItem to disable.
 293      */
 294     disableTab : function(id){
 295         var tab = this.items[id];
 296         if(tab && this.active != tab){
 297             tab.disable();
 298         }
 299     },
 300
 301     /**
 302      * Enables a {@link Roo.TabPanelItem} that is disabled.
 303      * @param {String/Number} id The id or index of the TabPanelItem to enable.
 304      */
 305     enableTab : function(id){
 306         var tab = this.items[id];
 307         tab.enable();
 308     },
 309
 310     /**
 311      * Activates a {@link Roo.TabPanelItem}. The currently active one will be deactivated.
 312      * @param {String/Number} id The id or index of the TabPanelItem to activate.
 313      * @return {Roo.TabPanelItem} The TabPanelItem.
 314      */
 315     activate : function(id)
 316     {
 317         var tab = this.items[id];
 318         if(!tab){
 319             return null;
 320         }
 321         if(tab == this.active || tab.disabled){
 322             return tab;
 323         }
 324         var e = {};
 325         this.fireEvent("beforetabchange", this, e, tab);
 326         if(e.cancel !== true && !tab.disabled){
 327             if(this.active){
 328                 this.active.hide();
 329             }
 330             this.active = this.items[id];
 331             this.active.show();
 332             this.fireEvent("tabchange", this, this.active);
 333         }
 334         return tab;
 335     },
 336
 337     /**
 338      * Gets the active {@link Roo.TabPanelItem}.
 339      * @return {Roo.TabPanelItem} The active TabPanelItem or null if none are active.
 340      */
 341     getActiveTab : function(){
 342         return this.active;
 343     },
 344
 345     /**
 346      * Updates the tab body element to fit the height of the container element
 347      * for overflow scrolling
 348      * @param {Number} targetHeight (optional) Override the starting height from the elements height
 349      */
 350     syncHeight : function(targetHeight){
 351         var height = (targetHeight || this.el.getHeight())-this.el.getBorderWidth("tb")-this.el.getPadding("tb");
 352         var bm = this.bodyEl.getMargins();
 353         var newHeight = height-(this.stripWrap.getHeight()||0)-(bm.top+bm.bottom);
 354         this.bodyEl.setHeight(newHeight);
 355         return newHeight;
 356     },
 357
 358     onResize : function(){
 359         if(this.monitorResize){
 360             this.autoSizeTabs();
 361         }
 362     },
 363
 364     /**
 365      * Disables tab resizing while tabs are being added (if {@link #resizeTabs} is false this does nothing)
 366      */
 367     beginUpdate : function(){
 368         this.updating = true;
 369     },
 370
 371     /**
 372      * Stops an update and resizes the tabs (if {@link #resizeTabs} is false this does nothing)
 373      */
 374     endUpdate : function(){
 375         this.updating = false;
 376         this.autoSizeTabs();
 377     },
 378
 379     /**
 380      * Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing)
 381      */
 382     autoSizeTabs : function()
 383     {
 384         var count = this.items.length;
 385         var vcount = count - this.hiddenCount;
 386         if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) {
 387             return;
 388         }
 389         if (vcount < 2) {
 390             this.stripEl.hide();
 391         } else {
 392             this.stripEl.show();
 393         }
 394
 395         var w = Math.max(this.el.getWidth() - this.cpad, 10);
 396         var availWidth = Math.floor(w / vcount);
 397         var b = this.stripBody;
 398         if(b.getWidth() > w){
 399             var tabs = this.items;
 400             this.setTabWidth(Math.max(availWidth, this.minTabWidth)-2);
 401             if(availWidth < this.minTabWidth){
 402                 /*if(!this.sleft){    // incomplete scrolling code
 403                     this.createScrollButtons();
 404                 }
 405                 this.showScroll();
 406                 this.stripClip.setWidth(w - (this.sleft.getWidth()+this.sright.getWidth()));*/
 407             }
 408         }else{
 409             if(this.currentTabWidth < this.preferredTabWidth){
 410                 this.setTabWidth(Math.min(availWidth, this.preferredTabWidth)-2);
 411             }
 412         }
 413     },
 414
 415     /**
 416      * Returns the number of tabs in this TabPanel.
 417      * @return {Number}
 418      */
 419      getCount : function(){
 420          return this.items.length;
 421      },
 422
 423     /**
 424      * Resizes all the tabs to the passed width
 425      * @param {Number} The new width
 426      */
 427     setTabWidth : function(width){
 428         this.currentTabWidth = width;
 429         for(var i = 0, len = this.items.length; i < len; i++) {
 430                 if(!this.items[i].isHidden()) {
 431                 this.items[i].setWidth(width);
 432             }
 433         }
 434     },
 435
 436     /**
 437      * Destroys this TabPanel
 438      * @param {Boolean} removeEl (optional) True to remove the element from the DOM as well (defaults to undefined)
 439      */
 440     destroy : function(removeEl){
 441         Roo.EventManager.removeResizeListener(this.onResize, this);
 442         for(var i = 0, len = this.items.length; i < len; i++){
 443             this.items[i].purgeListeners();
 444         }
 445         if(removeEl === true){
 446             this.el.update("");
 447             this.el.remove();
 448         }
 449     },
 450
 451     createStrip : function(container)
 452     {
 453         var strip = document.createElement("nav");
 454         strip.className = Roo.bootstrap.version == 4 ?
 455             "navbar-light bg-light" :
 456             "navbar navbar-default"; //"x-tabs-wrap";
 457         container.appendChild(strip);
 458         return strip;
 459     },
 460
 461     createStripList : function(strip)
 462     {
 463         // div wrapper for retard IE
 464         // returns the "tr" element.
 465         strip.innerHTML = '<ul class="nav nav-tabs" role="tablist"></ul>';
 466         //'<div class="x-tabs-strip-wrap">'+
 467           //  '<table class="x-tabs-strip" cellspacing="0" cellpadding="0" border="0"><tbody><tr>'+
 468           //  '<td class="x-tab-strip-toolbar"></td></tr></tbody></table></div>';
 469         return strip.firstChild; //.firstChild.firstChild.firstChild;
 470     },
 471     createBody : function(container)
 472     {
 473         var body = document.createElement("div");
 474         Roo.id(body, "tab-body");
 475         //Roo.fly(body).addClass("x-tabs-body");
 476         Roo.fly(body).addClass("tab-content");
 477         container.appendChild(body);
 478         return body;
 479     },
 480     createItemBody :function(bodyEl, id){
 481         var body = Roo.getDom(id);
 482         if(!body){
 483             body = document.createElement("div");
 484             body.id = id;
 485         }
 486         //Roo.fly(body).addClass("x-tabs-item-body");
 487         Roo.fly(body).addClass("tab-pane");
 488          bodyEl.insertBefore(body, bodyEl.firstChild);
 489         return body;
 490     },
 491     /** @private */
 492     createStripElements :  function(stripEl, text, closable, tpl)
 493     {
 494         var td = document.createElement("li"); // was td..
 495         td.className = 'nav-item';
 496
 497         //stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
 498
 499
 500         stripEl.appendChild(td);
 501         /*if(closable){
 502             td.className = "x-tabs-closable";
 503             if(!this.closeTpl){
 504                 this.closeTpl = new Roo.Template(
 505                    '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
 506                    '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span>' +
 507                    '<div unselectable="on" class="close-icon">&#160;</div></em></span></a>'
 508                 );
 509             }
 510             var el = this.closeTpl.overwrite(td, {"text": text});
 511             var close = el.getElementsByTagName("div")[0];
 512             var inner = el.getElementsByTagName("em")[0];
 513             return {"el": el, "close": close, "inner": inner};
 514         } else {
 515         */
 516         // not sure what this is..
 517 //            if(!this.tabTpl){
 518                 //this.tabTpl = new Roo.Template(
 519                 //   '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
 520                 //   '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span></em></span></a>'
 521                 //);
 522 //                this.tabTpl = new Roo.Template(
 523 //                   '<a href="#">' +
 524 //                   '<span unselectable="on"' +
 525 //                            (this.disableTooltips ? '' : ' title="{text}"') +
 526 //                            ' >{text}</span></a>'
 527 //                );
 528 //
 529 //            }
 530
 531
 532             var template = tpl || this.tabTpl || false;
 533
 534             if(!template){
 535                 template =  new Roo.Template(
 536                         Roo.bootstrap.version == 4 ?
 537                             (
 538                                 '<a class="nav-link" href="#" unselectable="on"' +
 539                                      (this.disableTooltips ? '' : ' title="{text}"') +
 540                                      ' >{text}</a>'
 541                             ) : (
 542                                 '<a class="nav-link" href="#">' +
 543                                 '<span unselectable="on"' +
 544                                          (this.disableTooltips ? '' : ' title="{text}"') +
 545                                     ' >{text}</span></a>'
 546                             )
 547                 );
 548             }
 549
 550             switch (typeof(template)) {
 551                 case 'object' :
 552                     break;
 553                 case 'string' :
 554                     template = new Roo.Template(template);
 555                     break;
 556                 default :
 557                     break;
 558             }
 559
 560             var el = template.overwrite(td, {"text": text});
 561
 562             var inner = el.getElementsByTagName("span")[0];
 563
 564             return {"el": el, "inner": inner};
 565
 566     }
 567
 568
 569 });