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         }
 136
 137         if(this.tabIndex !== undefined){
 138             this.el.dom.setAttribute('tabIndex', this.tabIndex);
 139         }
 140
 141         this.initEvents();
 142
 143     },
 144     /**
 145      * Fetch the element to add children to
 146      * @return {Roo.Element} defaults to this.el
 147      */
 148     getChildContainer : function()
 149     {
 150         return this.el;
 151     },
 152     /**
 153      * Fetch the element to display the tooltip on.
 154      * @return {Roo.Element} defaults to this.el
 155      */
 156     tooltipEl : function()
 157     {
 158         return this.el;
 159     },
 160
 161     addxtype  : function(tree,cntr)
 162     {
 163         var cn = this;
 164
 165         cn = Roo.factory(tree);
 166         //Roo.log(['addxtype', cn]);
 167
 168         cn.parentType = this.xtype; //??
 169         cn.parentId = this.id;
 170
 171         cntr = (typeof(cntr) == 'undefined' ) ? 'getChildContainer' : cntr;
 172         if (typeof(cn.container_method) == 'string') {
 173             cntr = cn.container_method;
 174         }
 175
 176
 177         var has_flexy_each =  (typeof(tree['flexy:foreach']) != 'undefined');
 178
 179         var has_flexy_if =  (typeof(tree['flexy:if']) != 'undefined');
 180
 181         var build_from_html =  Roo.XComponent.build_from_html;
 182
 183         var is_body  = (tree.xtype == 'Body') ;
 184
 185         var page_has_body = (Roo.get(document.body).attr('xtype') == 'Roo.bootstrap.Body');
 186
 187         var self_cntr_el = Roo.get(this[cntr](false));
 188
 189         // do not try and build conditional elements
 190         if ((has_flexy_each || has_flexy_if || this.can_build_overlaid == false ) && build_from_html) {
 191             return false;
 192         }
 193
 194         if (!has_flexy_each || !build_from_html || is_body || !page_has_body) {
 195             if(!has_flexy_if || typeof(tree.name) == 'undefined' || !build_from_html || is_body || !page_has_body){
 196                 return this.addxtypeChild(tree,cntr, is_body);
 197             }
 198
 199             var echild =self_cntr_el ? self_cntr_el.child('>*[name=' + tree.name + ']') : false;
 200
 201             if(echild){
 202                 return this.addxtypeChild(Roo.apply({}, tree),cntr);
 203             }
 204
 205             Roo.log('skipping render');
 206             return cn;
 207
 208         }
 209
 210         var ret = false;
 211         if (!build_from_html) {
 212             return false;
 213         }
 214
 215         // this i think handles overlaying multiple children of the same type
 216         // with the sam eelement.. - which might be buggy..
 217         while (true) {
 218             var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
 219
 220             if (!echild) {
 221                 break;
 222             }
 223
 224             if (echild && echild.attr('xtype').split('.').pop() != cn.xtype) {
 225                 break;
 226             }
 227
 228             ret = this.addxtypeChild(Roo.apply({}, tree),cntr);
 229         }
 230
 231         return ret;
 232     },
 233
 234
 235     addxtypeChild : function (tree, cntr, is_body)
 236     {
 237         Roo.debug && Roo.log('addxtypeChild:' + cntr);
 238         var cn = this;
 239         cntr = (typeof(cntr) == 'undefined' ) ? 'getChildContainer' : cntr;
 240
 241
 242         var has_flexy = (typeof(tree['flexy:if']) != 'undefined') ||
 243                     (typeof(tree['flexy:foreach']) != 'undefined');
 244
 245
 246
 247         skip_children = false;
 248         // render the element if it's not BODY.
 249         if (!is_body) {
 250
 251             // if parent was disabled, then do not try and create the children..
 252             if(!this[cntr](true)){
 253                 tree.items = [];
 254                 return tree;
 255             }
 256
 257             cn = Roo.factory(tree);
 258
 259             cn.parentType = this.xtype; //??
 260             cn.parentId = this.id;
 261
 262             var build_from_html =  Roo.XComponent.build_from_html;
 263
 264
 265             // does the container contain child eleemnts with 'xtype' attributes.
 266             // that match this xtype..
 267             // note - when we render we create these as well..
 268             // so we should check to see if body has xtype set.
 269             if (build_from_html && Roo.get(document.body).attr('xtype') == 'Roo.bootstrap.Body') {
 270
 271                 var self_cntr_el = Roo.get(this[cntr](false));
 272                 var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
 273                 if (echild) {
 274                     //Roo.log(Roo.XComponent.build_from_html);
 275                     //Roo.log("got echild:");
 276                     //Roo.log(echild);
 277                 }
 278                 // there is a scenario where some of the child elements are flexy:if (and all of the same type)
 279                 // and are not displayed -this causes this to use up the wrong element when matching.
 280                 // at present the only work around for this is to nest flexy:if elements in another element that is always rendered.
 281
 282
 283                 if (echild && echild.attr('xtype').split('.').pop() == cn.xtype) {
 284                   //  Roo.log("found child for " + this.xtype +": " + echild.attr('xtype') );
 285
 286
 287
 288                     cn.el = echild;
 289                   //  Roo.log("GOT");
 290                     //echild.dom.removeAttribute('xtype');
 291                 } else {
 292                     Roo.debug && Roo.log("MISSING " + cn.xtype + " on child of " + (this.el ? this.el.attr('xbuilderid') : 'no parent'));
 293                     Roo.debug && Roo.log(self_cntr_el);
 294                     Roo.debug && Roo.log(echild);
 295                     Roo.debug && Roo.log(cn);
 296                 }
 297             }
 298
 299
 300
 301             // if object has flexy:if - then it may or may not be rendered.
 302             if (build_from_html && has_flexy && !cn.el &&  cn.can_build_overlaid) {
 303                 // skip a flexy if element.
 304                 Roo.debug && Roo.log('skipping render');
 305                 Roo.debug && Roo.log(tree);
 306                 if (!cn.el) {
 307                     Roo.debug && Roo.log('skipping all children');
 308                     skip_children = true;
 309                 }
 310
 311              } else {
 312
 313                 // actually if flexy:foreach is found, we really want to create
 314                 // multiple copies here...
 315                 //Roo.log('render');
 316                 //Roo.log(this[cntr]());
 317                 // some elements do not have render methods.. like the layouts...
 318                 /*
 319                 if(this[cntr](true) === false){
 320                     cn.items = [];
 321                     return cn;
 322                 }
 323                 */
 324                 cn.render && cn.render(this[cntr](true));
 325
 326              }
 327             // then add the element..
 328         }
 329
 330         // handle the kids..
 331
 332         var nitems = [];
 333         /*
 334         if (typeof (tree.menu) != 'undefined') {
 335             tree.menu.parentType = cn.xtype;
 336             tree.menu.triggerEl = cn.el;
 337             nitems.push(cn.addxtype(Roo.apply({}, tree.menu)));
 338
 339         }
 340         */
 341         if (!tree.items || !tree.items.length) {
 342             cn.items = nitems;
 343             //Roo.log(["no children", this]);
 344
 345             return cn;
 346         }
 347
 348         var items = tree.items;
 349         delete tree.items;
 350
 351         //Roo.log(items.length);
 352             // add the items..
 353         if (!skip_children) {
 354             for(var i =0;i < items.length;i++) {
 355               //  Roo.log(['add child', items[i]]);
 356                 nitems.push(cn.addxtype(Roo.apply({}, items[i])));
 357             }
 358         }
 359
 360         cn.items = nitems;
 361
 362         //Roo.log("fire childrenrendered");
 363
 364         cn.fireEvent('childrenrendered', this);
 365
 366         return cn;
 367     },
 368
 369     /**
 370      * Set the element that will be used to show or hide
 371      */
 372     setVisibilityEl : function(el)
 373     {
 374         this.visibilityEl = el;
 375     },
 376
 377      /**
 378      * Get the element that will be used to show or hide
 379      */
 380     getVisibilityEl : function()
 381     {
 382         if (typeof(this.visibilityEl) == 'object') {
 383             return this.visibilityEl;
 384         }
 385
 386         if (typeof(this.visibilityEl) == 'string') {
 387             return this.visibilityEl == 'parent' ? this.parent().getEl() : this.getEl();
 388         }
 389
 390         return this.getEl();
 391     },
 392
 393     /**
 394      * Show a component - removes 'hidden' class
 395      */
 396     show : function()
 397     {
 398         if(!this.getVisibilityEl()){
 399             return;
 400         }
 401
 402         this.getVisibilityEl().removeClass(['hidden','d-none']);
 403
 404         this.fireEvent('show', this);
 405
 406
 407     },
 408     /**
 409      * Hide a component - adds 'hidden' class
 410      */
 411     hide: function()
 412     {
 413         if(!this.getVisibilityEl()){
 414             return;
 415         }
 416
 417         this.getVisibilityEl().addClass(['hidden','d-none']);
 418
 419         this.fireEvent('hide', this);
 420
 421     }
 422 });
 423
 424