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

   1 /*
   2  * - LGPL
   3  *
   4  * base class for bootstrap elements.
   5  *
   6  */
   7
   8 Roo.bootstrap = Roo.bootstrap || {};
   9 /**
  10  * @class Roo.bootstrap.Component
  11  * @extends Roo.Component
  12  * Bootstrap Component base class
  13  * @cfg {String} cls css class
  14  * @cfg {String} style any extra css
  15  * @cfg {Object} xattr extra attributes to add to 'element' (used by builder to store stuff.)
  16  * @cfg {Boolean} can_build_overlaid  True if element can be rebuild from a HTML page
  17  * @cfg {string} dataId cutomer id
  18  * @cfg {string} name Specifies name attribute
  19  * @cfg {string} tooltip  Text for the tooltip
  20  * @cfg {string} container_method method to fetch parents container element (used by NavHeaderbar -  getHeaderChildContainer)
  21  * @cfg {string|object} visibilityEl (el|parent) What element to use for visibility (@see getVisibilityEl())
  22
  23  * @constructor
  24  * Do not use directly - it does not do anything..
  25  * @param {Object} config The config object
  26  */
  27
  28
  29
  30 Roo.bootstrap.Component = function(config){
  31     Roo.bootstrap.Component.superclass.constructor.call(this, config);
  32
  33     this.addEvents({
  34         /**
  35          * @event childrenrendered
  36          * Fires when the children have been rendered..
  37          * @param {Roo.bootstrap.Component} this
  38          */
  39         "childrenrendered" : true
  40
  41
  42
  43     });
  44
  45
  46 };
  47
  48 Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
  49
  50
  51     allowDomMove : false, // to stop relocations in parent onRender...
  52
  53     cls : false,
  54
  55     style : false,
  56
  57     autoCreate : false,
  58
  59     tooltip : null,
  60     /**
  61      * Initialize Events for the element
  62      */
  63     initEvents : function() { },
  64
  65     xattr : false,
  66
  67     parentId : false,
  68
  69     can_build_overlaid : true,
  70
  71     container_method : false,
  72
  73     dataId : false,
  74
  75     name : false,
  76
  77     parent: function() {
  78         // returns the parent component..
  79         return Roo.ComponentMgr.get(this.parentId)
  80
  81
  82     },
  83
  84     // private
  85     onRender : function(ct, position)
  86     {
  87        // Roo.log("Call onRender: " + this.xtype);
  88
  89         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
  90
  91         if(this.el){
  92             if (this.el.attr('xtype')) {
  93                 this.el.attr('xtypex', this.el.attr('xtype'));
  94                 this.el.dom.removeAttribute('xtype');
  95
  96                 this.initEvents();
  97             }
  98
  99             return;
 100         }
 101
 102
 103
 104         var cfg = Roo.apply({},  this.getAutoCreate());
 105
 106         cfg.id = this.id || Roo.id();
 107
 108         // fill in the extra attributes
 109         if (this.xattr && typeof(this.xattr) =='object') {
 110             for (var i in this.xattr) {
 111                 cfg[i] = this.xattr[i];
 112             }
 113         }
 114
 115         if(this.dataId){
 116             cfg.dataId = this.dataId;
 117         }
 118
 119         if (this.cls) {
 120             cfg.cls = (typeof(cfg.cls) == 'undefined') ? this.cls : cfg.cls + ' ' + this.cls;
 121         }
 122
 123         if (this.style) { // fixme needs to support more complex style data.
 124             cfg.style = this.style;
 125         }
 126
 127         if(this.name){
 128             cfg.name = this.name;
 129         }
 130
 131         this.el = ct.createChild(cfg, position);
 132
 133         if (this.tooltip) {
 134             this.tooltipEl().attr('tooltip', this.tooltip);
 135             this.tooltipEl().attr("data-placement='top'", this.tooltip);
 136         }
 137
 138         if(this.tabIndex !== undefined){
 139             this.el.dom.setAttribute('tabIndex', this.tabIndex);
 140         }
 141
 142         this.initEvents();
 143
 144     },
 145     /**
 146      * Fetch the element to add children to
 147      * @return {Roo.Element} defaults to this.el
 148      */
 149     getChildContainer : function()
 150     {
 151         return this.el;
 152     },
 153     /**
 154      * Fetch the element to display the tooltip on.
 155      * @return {Roo.Element} defaults to this.el
 156      */
 157     tooltipEl : function()
 158     {
 159         return this.el;
 160     },
 161
 162     addxtype  : function(tree,cntr)
 163     {
 164         var cn = this;
 165
 166         cn = Roo.factory(tree);
 167         //Roo.log(['addxtype', cn]);
 168
 169         cn.parentType = this.xtype; //??
 170         cn.parentId = this.id;
 171
 172         cntr = (typeof(cntr) == 'undefined' ) ? 'getChildContainer' : cntr;
 173         if (typeof(cn.container_method) == 'string') {
 174             cntr = cn.container_method;
 175         }
 176
 177
 178         var has_flexy_each =  (typeof(tree['flexy:foreach']) != 'undefined');
 179
 180         var has_flexy_if =  (typeof(tree['flexy:if']) != 'undefined');
 181
 182         var build_from_html =  Roo.XComponent.build_from_html;
 183
 184         var is_body  = (tree.xtype == 'Body') ;
 185
 186         var page_has_body = (Roo.get(document.body).attr('xtype') == 'Roo.bootstrap.Body');
 187
 188         var self_cntr_el = Roo.get(this[cntr](false));
 189
 190         // do not try and build conditional elements
 191         if ((has_flexy_each || has_flexy_if || this.can_build_overlaid == false ) && build_from_html) {
 192             return false;
 193         }
 194
 195         if (!has_flexy_each || !build_from_html || is_body || !page_has_body) {
 196             if(!has_flexy_if || typeof(tree.name) == 'undefined' || !build_from_html || is_body || !page_has_body){
 197                 return this.addxtypeChild(tree,cntr, is_body);
 198             }
 199
 200             var echild =self_cntr_el ? self_cntr_el.child('>*[name=' + tree.name + ']') : false;
 201
 202             if(echild){
 203                 return this.addxtypeChild(Roo.apply({}, tree),cntr);
 204             }
 205
 206             Roo.log('skipping render');
 207             return cn;
 208
 209         }
 210
 211         var ret = false;
 212         if (!build_from_html) {
 213             return false;
 214         }
 215
 216         // this i think handles overlaying multiple children of the same type
 217         // with the sam eelement.. - which might be buggy..
 218         while (true) {
 219             var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
 220
 221             if (!echild) {
 222                 break;
 223             }
 224
 225             if (echild && echild.attr('xtype').split('.').pop() != cn.xtype) {
 226                 break;
 227             }
 228
 229             ret = this.addxtypeChild(Roo.apply({}, tree),cntr);
 230         }
 231
 232         return ret;
 233     },
 234
 235
 236     addxtypeChild : function (tree, cntr, is_body)
 237     {
 238         Roo.debug && Roo.log('addxtypeChild:' + cntr);
 239         var cn = this;
 240         cntr = (typeof(cntr) == 'undefined' ) ? 'getChildContainer' : cntr;
 241
 242
 243         var has_flexy = (typeof(tree['flexy:if']) != 'undefined') ||
 244                     (typeof(tree['flexy:foreach']) != 'undefined');
 245
 246
 247
 248         skip_children = false;
 249         // render the element if it's not BODY.
 250         if (!is_body) {
 251
 252             // if parent was disabled, then do not try and create the children..
 253             if(!this[cntr](true)){
 254                 tree.items = [];
 255                 return tree;
 256             }
 257
 258             cn = Roo.factory(tree);
 259
 260             cn.parentType = this.xtype; //??
 261             cn.parentId = this.id;
 262
 263             var build_from_html =  Roo.XComponent.build_from_html;
 264
 265
 266             // does the container contain child eleemnts with 'xtype' attributes.
 267             // that match this xtype..
 268             // note - when we render we create these as well..
 269             // so we should check to see if body has xtype set.
 270             if (build_from_html && Roo.get(document.body).attr('xtype') == 'Roo.bootstrap.Body') {
 271
 272                 var self_cntr_el = Roo.get(this[cntr](false));
 273                 var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
 274                 if (echild) {
 275                     //Roo.log(Roo.XComponent.build_from_html);
 276                     //Roo.log("got echild:");
 277                     //Roo.log(echild);
 278                 }
 279                 // there is a scenario where some of the child elements are flexy:if (and all of the same type)
 280                 // and are not displayed -this causes this to use up the wrong element when matching.
 281                 // at present the only work around for this is to nest flexy:if elements in another element that is always rendered.
 282
 283
 284                 if (echild && echild.attr('xtype').split('.').pop() == cn.xtype) {
 285                   //  Roo.log("found child for " + this.xtype +": " + echild.attr('xtype') );
 286
 287
 288
 289                     cn.el = echild;
 290                   //  Roo.log("GOT");
 291                     //echild.dom.removeAttribute('xtype');
 292                 } else {
 293                     Roo.debug && Roo.log("MISSING " + cn.xtype + " on child of " + (this.el ? this.el.attr('xbuilderid') : 'no parent'));
 294                     Roo.debug && Roo.log(self_cntr_el);
 295                     Roo.debug && Roo.log(echild);
 296                     Roo.debug && Roo.log(cn);
 297                 }
 298             }
 299
 300
 301
 302             // if object has flexy:if - then it may or may not be rendered.
 303             if (build_from_html && has_flexy && !cn.el &&  cn.can_build_overlaid) {
 304                 // skip a flexy if element.
 305                 Roo.debug && Roo.log('skipping render');
 306                 Roo.debug && Roo.log(tree);
 307                 if (!cn.el) {
 308                     Roo.debug && Roo.log('skipping all children');
 309                     skip_children = true;
 310                 }
 311
 312              } else {
 313
 314                 // actually if flexy:foreach is found, we really want to create
 315                 // multiple copies here...
 316                 //Roo.log('render');
 317                 //Roo.log(this[cntr]());
 318                 // some elements do not have render methods.. like the layouts...
 319                 /*
 320                 if(this[cntr](true) === false){
 321                     cn.items = [];
 322                     return cn;
 323                 }
 324                 */
 325                 cn.render && cn.render(this[cntr](true));
 326
 327              }
 328             // then add the element..
 329         }
 330
 331         // handle the kids..
 332
 333         var nitems = [];
 334         /*
 335         if (typeof (tree.menu) != 'undefined') {
 336             tree.menu.parentType = cn.xtype;
 337             tree.menu.triggerEl = cn.el;
 338             nitems.push(cn.addxtype(Roo.apply({}, tree.menu)));
 339
 340         }
 341         */
 342         if (!tree.items || !tree.items.length) {
 343             cn.items = nitems;
 344             //Roo.log(["no children", this]);
 345
 346             return cn;
 347         }
 348
 349         var items = tree.items;
 350         delete tree.items;
 351
 352         //Roo.log(items.length);
 353             // add the items..
 354         if (!skip_children) {
 355             for(var i =0;i < items.length;i++) {
 356               //  Roo.log(['add child', items[i]]);
 357                 nitems.push(cn.addxtype(Roo.apply({}, items[i])));
 358             }
 359         }
 360
 361         cn.items = nitems;
 362
 363         //Roo.log("fire childrenrendered");
 364
 365         cn.fireEvent('childrenrendered', this);
 366
 367         return cn;
 368     },
 369
 370     /**
 371      * Set the element that will be used to show or hide
 372      */
 373     setVisibilityEl : function(el)
 374     {
 375         this.visibilityEl = el;
 376     },
 377
 378      /**
 379      * Get the element that will be used to show or hide
 380      */
 381     getVisibilityEl : function()
 382     {
 383         if (typeof(this.visibilityEl) == 'object') {
 384             return this.visibilityEl;
 385         }
 386
 387         if (typeof(this.visibilityEl) == 'string') {
 388             return this.visibilityEl == 'parent' ? this.parent().getEl() : this.getEl();
 389         }
 390
 391         return this.getEl();
 392     },
 393
 394     /**
 395      * Show a component - removes 'hidden' class
 396      */
 397     show : function()
 398     {
 399         if(!this.getVisibilityEl()){
 400             return;
 401         }
 402
 403         this.getVisibilityEl().removeClass('hidden');
 404
 405         this.fireEvent('show', this);
 406
 407
 408     },
 409     /**
 410      * Hide a component - adds 'hidden' class
 411      */
 412     hide: function()
 413     {
 414         if(!this.getVisibilityEl()){
 415             return;
 416         }
 417
 418         this.getVisibilityEl().addClass('hidden');
 419
 420         this.fireEvent('hide', this);
 421
 422     }
 423 });
 424
 425