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

   1
   2 /**
   3  * @class Roo.TabPanelItem
   4  * @extends Roo.util.Observable
   5  * Represents an individual item (tab plus body) in a TabPanel.
   6  * @param {Roo.TabPanel} tabPanel The {@link Roo.TabPanel} this TabPanelItem belongs to
   7  * @param {String} id The id of this TabPanelItem
   8  * @param {String} text The text for the tab of this TabPanelItem
   9  * @param {Boolean} closable True to allow this TabPanelItem to be closable (defaults to false)
  10  */
  11 Roo.bootstrap.panel.TabItem = function(config){
  12     /**
  13      * The {@link Roo.TabPanel} this TabPanelItem belongs to
  14      * @type Roo.TabPanel
  15      */
  16     this.tabPanel = config.panel;
  17     /**
  18      * The id for this TabPanelItem
  19      * @type String
  20      */
  21     this.id = config.id;
  22     /** @private */
  23     this.disabled = false;
  24     /** @private */
  25     this.text = config.text;
  26     /** @private */
  27     this.loaded = false;
  28     this.closable = config.closable;
  29
  30     /**
  31      * The body element for this TabPanelItem.
  32      * @type Roo.Element
  33      */
  34     this.bodyEl = Roo.get(this.tabPanel.createItemBody(this.tabPanel.bodyEl.dom, config.id));
  35     this.bodyEl.setVisibilityMode(Roo.Element.VISIBILITY);
  36     this.bodyEl.setStyle("display", "block");
  37     this.bodyEl.setStyle("zoom", "1");
  38     //this.hideAction();
  39
  40     var els = this.tabPanel.createStripElements(this.tabPanel.stripEl.dom, config.text, config.closable, config.tpl);
  41     /** @private */
  42     this.el = Roo.get(els.el);
  43     this.inner = Roo.get(els.inner, true);
  44      this.textEl = Roo.bootstrap.version == 4 ?
  45         this.el : Roo.get(this.el.dom.firstChild, true);
  46
  47     this.pnode = this.linode = Roo.get(els.el.parentNode, true);
  48     this.status_node = Roo.bootstrap.version == 4 ? this.el : this.linode;
  49
  50
  51 //    this.el.on("mousedown", this.onTabMouseDown, this);
  52     this.el.on("click", this.onTabClick, this);
  53     /** @private */
  54     if(config.closable){
  55         var c = Roo.get(els.close, true);
  56         c.dom.title = this.closeText;
  57         c.addClassOnOver("close-over");
  58         c.on("click", this.closeClick, this);
  59      }
  60
  61     this.addEvents({
  62          /**
  63          * @event activate
  64          * Fires when this tab becomes the active tab.
  65          * @param {Roo.TabPanel} tabPanel The parent TabPanel
  66          * @param {Roo.TabPanelItem} this
  67          */
  68         "activate": true,
  69         /**
  70          * @event beforeclose
  71          * Fires before this tab is closed. To cancel the close, set cancel to true on e (e.cancel = true).
  72          * @param {Roo.TabPanelItem} this
  73          * @param {Object} e Set cancel to true on this object to cancel the close.
  74          */
  75         "beforeclose": true,
  76         /**
  77          * @event close
  78          * Fires when this tab is closed.
  79          * @param {Roo.TabPanelItem} this
  80          */
  81          "close": true,
  82         /**
  83          * @event deactivate
  84          * Fires when this tab is no longer the active tab.
  85          * @param {Roo.TabPanel} tabPanel The parent TabPanel
  86          * @param {Roo.TabPanelItem} this
  87          */
  88          "deactivate" : true
  89     });
  90     this.hidden = false;
  91
  92     Roo.bootstrap.panel.TabItem.superclass.constructor.call(this);
  93 };
  94
  95 Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable,
  96            {
  97     purgeListeners : function(){
  98        Roo.util.Observable.prototype.purgeListeners.call(this);
  99        this.el.removeAllListeners();
 100     },
 101     /**
 102      * Shows this TabPanelItem -- this <b>does not</b> deactivate the currently active TabPanelItem.
 103      */
 104     show : function(){
 105         this.status_node.addClass("active");
 106         this.showAction();
 107         if(Roo.isOpera){
 108             this.tabPanel.stripWrap.repaint();
 109         }
 110         this.fireEvent("activate", this.tabPanel, this);
 111     },
 112
 113     /**
 114      * Returns true if this tab is the active tab.
 115      * @return {Boolean}
 116      */
 117     isActive : function(){
 118         return this.tabPanel.getActiveTab() == this;
 119     },
 120
 121     /**
 122      * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
 123      */
 124     hide : function(){
 125         this.status_node.removeClass("active");
 126         this.hideAction();
 127         this.fireEvent("deactivate", this.tabPanel, this);
 128     },
 129
 130     hideAction : function(){
 131         this.bodyEl.hide();
 132         this.bodyEl.setStyle("position", "absolute");
 133         this.bodyEl.setLeft("-20000px");
 134         this.bodyEl.setTop("-20000px");
 135     },
 136
 137     showAction : function(){
 138         this.bodyEl.setStyle("position", "relative");
 139         this.bodyEl.setTop("");
 140         this.bodyEl.setLeft("");
 141         this.bodyEl.show();
 142     },
 143
 144     /**
 145      * Set the tooltip for the tab.
 146      * @param {String} tooltip The tab's tooltip
 147      */
 148     setTooltip : function(text){
 149         if(Roo.QuickTips && Roo.QuickTips.isEnabled()){
 150             this.textEl.dom.qtip = text;
 151             this.textEl.dom.removeAttribute('title');
 152         }else{
 153             this.textEl.dom.title = text;
 154         }
 155     },
 156
 157     onTabClick : function(e){
 158         e.preventDefault();
 159         this.tabPanel.activate(this.id);
 160     },
 161
 162     onTabMouseDown : function(e){
 163         e.preventDefault();
 164         this.tabPanel.activate(this.id);
 165     },
 166 /*
 167     getWidth : function(){
 168         return this.inner.getWidth();
 169     },
 170
 171     setWidth : function(width){
 172         var iwidth = width - this.linode.getPadding("lr");
 173         this.inner.setWidth(iwidth);
 174         this.textEl.setWidth(iwidth-this.inner.getPadding("lr"));
 175         this.linode.setWidth(width);
 176     },
 177 */
 178     /**
 179      * Show or hide the tab
 180      * @param {Boolean} hidden True to hide or false to show.
 181      */
 182     setHidden : function(hidden){
 183         this.hidden = hidden;
 184         this.linode.setStyle("display", hidden ? "none" : "");
 185     },
 186
 187     /**
 188      * Returns true if this tab is "hidden"
 189      * @return {Boolean}
 190      */
 191     isHidden : function(){
 192         return this.hidden;
 193     },
 194
 195     /**
 196      * Returns the text for this tab
 197      * @return {String}
 198      */
 199     getText : function(){
 200         return this.text;
 201     },
 202     /*
 203     autoSize : function(){
 204         //this.el.beginMeasure();
 205         this.textEl.setWidth(1);
 206         /*
 207          *  #2804 [new] Tabs in Roojs
 208          *  increase the width by 2-4 pixels to prevent the ellipssis showing in chrome
 209          */
 210         //this.setWidth(this.textEl.dom.scrollWidth+this.linode.getPadding("lr")+this.inner.getPadding("lr") + 2);
 211         //this.el.endMeasure();
 212     //},
 213
 214     /**
 215      * Sets the text for the tab (Note: this also sets the tooltip text)
 216      * @param {String} text The tab's text and tooltip
 217      */
 218     setText : function(text){
 219         this.text = text;
 220         this.textEl.update(text);
 221         this.setTooltip(text);
 222         //if(!this.tabPanel.resizeTabs){
 223         //    this.autoSize();
 224         //}
 225     },
 226     /**
 227      * Activates this TabPanelItem -- this <b>does</b> deactivate the currently active TabPanelItem.
 228      */
 229     activate : function(){
 230         this.tabPanel.activate(this.id);
 231     },
 232
 233     /**
 234      * Disables this TabPanelItem -- this does nothing if this is the active TabPanelItem.
 235      */
 236     disable : function(){
 237         if(this.tabPanel.active != this){
 238             this.disabled = true;
 239             this.status_node.addClass("disabled");
 240         }
 241     },
 242
 243     /**
 244      * Enables this TabPanelItem if it was previously disabled.
 245      */
 246     enable : function(){
 247         this.disabled = false;
 248         this.status_node.removeClass("disabled");
 249     },
 250
 251     /**
 252      * Sets the content for this TabPanelItem.
 253      * @param {String} content The content
 254      * @param {Boolean} loadScripts true to look for and load scripts
 255      */
 256     setContent : function(content, loadScripts){
 257         this.bodyEl.update(content, loadScripts);
 258     },
 259
 260     /**
 261      * Gets the {@link Roo.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
 262      * @return {Roo.UpdateManager} The UpdateManager
 263      */
 264     getUpdateManager : function(){
 265         return this.bodyEl.getUpdateManager();
 266     },
 267
 268     /**
 269      * Set a URL to be used to load the content for this TabPanelItem.
 270      * @param {String/Function} url The URL to load the content from, or a function to call to get the URL
 271      * @param {String/Object} params (optional) The string params for the update call or an object of the params. See {@link Roo.UpdateManager#update} for more details. (Defaults to null)
 272      * @param {Boolean} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this TabPanelItem is activated. (Defaults to false)
 273      * @return {Roo.UpdateManager} The UpdateManager
 274      */
 275     setUrl : function(url, params, loadOnce){
 276         if(this.refreshDelegate){
 277             this.un('activate', this.refreshDelegate);
 278         }
 279         this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
 280         this.on("activate", this.refreshDelegate);
 281         return this.bodyEl.getUpdateManager();
 282     },
 283
 284     /** @private */
 285     _handleRefresh : function(url, params, loadOnce){
 286         if(!loadOnce || !this.loaded){
 287             var updater = this.bodyEl.getUpdateManager();
 288             updater.update(url, params, this._setLoaded.createDelegate(this));
 289         }
 290     },
 291
 292     /**
 293      *   Forces a content refresh from the URL specified in the {@link #setUrl} method.
 294      *   Will fail silently if the setUrl method has not been called.
 295      *   This does not activate the panel, just updates its content.
 296      */
 297     refresh : function(){
 298         if(this.refreshDelegate){
 299            this.loaded = false;
 300            this.refreshDelegate();
 301         }
 302     },
 303
 304     /** @private */
 305     _setLoaded : function(){
 306         this.loaded = true;
 307     },
 308
 309     /** @private */
 310     closeClick : function(e){
 311         var o = {};
 312         e.stopEvent();
 313         this.fireEvent("beforeclose", this, o);
 314         if(o.cancel !== true){
 315             this.tabPanel.removeTab(this.id);
 316         }
 317     },
 318     /**
 319      * The text displayed in the tooltip for the close icon.
 320      * @type String
 321      */
 322     closeText : "Close this tab"
 323 });