Fix #6883 - image loading tidy up

[roojs1] / Roo / bootstrap / Component.js

diff --git a/Roo/bootstrap/Component.js b/Roo/bootstrap/Component.js
index 5ba0b38..d2632d5 100644 (file)
--- a/Roo/bootstrap/Component.js
+++ b/Roo/bootstrap/Component.js
@@ -18,7 +18,8 @@ Roo.bootstrap = Roo.bootstrap || {};
  * @cfg {string} name Specifies name attribute
  * @cfg {string} tooltip  Text for the tooltip
  * @cfg {string} container_method method to fetch parents container element (used by NavHeaderbar -  getHeaderChildContainer)
- * 
+ * @cfg {string|object} visibilityEl (el|parent) What element to use for visibility (@see getVisibilityEl())
+ 
  * @constructor
  * Do not use directly - it does not do anything..
  * @param {Object} config The config object
@@ -88,7 +89,6 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
         
         if(this.el){
-            Roo.log('run??');
             if (this.el.attr('xtype')) {
                 this.el.attr('xtypex', this.el.attr('xtype'));
                 this.el.dom.removeAttribute('xtype');
@@ -102,6 +102,7 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
          
         
         var cfg = Roo.apply({},  this.getAutoCreate());
+        
         cfg.id = this.id || Roo.id();
         
         // fill in the extra attributes 
@@ -116,11 +117,11 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
         }
         
         if (this.cls) {
-            cfg.cls = (typeof(cfg.cls) == 'undefined') ? this.cls : cfg.cls + ' ' + this.cls;
+            cfg.cls = (typeof(cfg.cls) == 'undefined' ? this.cls : cfg.cls) + ' ' + this.cls;
         }
         
         if (this.style) { // fixme needs to support more complex style data.
-            cfg.style = this.style;
+            cfg.style = (typeof(cfg.style) == 'undefined' ? this.style : cfg.style) + '; ' + this.style;
         }
         
         if(this.name){
@@ -129,19 +130,16 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
         
         this.el = ct.createChild(cfg, position);
         
-        Roo.log(this);
-        
         if (this.tooltip) {
-            Roo.log(this.tooltip);
             this.tooltipEl().attr('tooltip', this.tooltip);
         }
         
         if(this.tabIndex !== undefined){
             this.el.dom.setAttribute('tabIndex', this.tabIndex);
         }
+        
         this.initEvents();
        
-        
     },
     /**
      * Fetch the element to add children to
@@ -151,14 +149,17 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
     {
         return this.el;
     },
+    getDocumentBody : function() // used by menus - as they are attached to the body so zIndexes work
+    {
+        return Roo.get(document.body);
+    },
+    
     /**
      * Fetch the element to display the tooltip on.
      * @return {Roo.Element} defaults to this.el
      */
     tooltipEl : function()
     {
-        Roo.log('tooltipEl!!!!!!!!!!!!!!');
-        Roo.log(this.el);
         return this.el;
     },
         
@@ -167,6 +168,7 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
         var cn = this;
         
         cn = Roo.factory(tree);
+        //Roo.log(['addxtype', cn]);
            
         cn.parentType = this.xtype; //??
         cn.parentId = this.id;
@@ -196,7 +198,7 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
         
         if (!has_flexy_each || !build_from_html || is_body || !page_has_body) {
             if(!has_flexy_if || typeof(tree.name) == 'undefined' || !build_from_html || is_body || !page_has_body){
-                return this.addxtypeChild(tree,cntr);
+                return this.addxtypeChild(tree,cntr, is_body);
             }
             
             var echild =self_cntr_el ? self_cntr_el.child('>*[name=' + tree.name + ']') : false;
@@ -230,10 +232,12 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
             
             ret = this.addxtypeChild(Roo.apply({}, tree),cntr);
         }
+       
         return ret;
     },
     
-    addxtypeChild : function (tree, cntr)
+    
+    addxtypeChild : function (tree, cntr, is_body)
     {
         Roo.debug && Roo.log('addxtypeChild:' + cntr);
         var cn = this;
@@ -243,11 +247,17 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
         var has_flexy = (typeof(tree['flexy:if']) != 'undefined') ||
                     (typeof(tree['flexy:foreach']) != 'undefined');
           
+    
         
-        
-         skip_children = false;
+        skip_children = false;
         // render the element if it's not BODY.
-        if (tree.xtype != 'Body') {
+        if (!is_body) {
+            
+            // if parent was disabled, then do not try and create the children..
+            if(!this[cntr](true)){
+                tree.items = [];
+                return tree;
+            }
            
             cn = Roo.factory(tree);
            
@@ -309,12 +319,19 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
                 // multiple copies here...
                 //Roo.log('render');
                 //Roo.log(this[cntr]());
-                cn.render(this[cntr](true));
+                // some elements do not have render methods.. like the layouts...
+                /*
+                if(this[cntr](true) === false){
+                    cn.items = [];
+                    return cn;
+                }
+                */
+                cn.render && cn.render(this[cntr](true));
+                
              }
             // then add the element..
         }
-        
-        
+         
         // handle the kids..
         
         var nitems = [];
@@ -328,8 +345,11 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
         */
         if (!tree.items || !tree.items.length) {
             cn.items = nitems;
+            //Roo.log(["no children", this]);
+            
             return cn;
         }
+         
         var items = tree.items;
         delete tree.items;
         
@@ -337,34 +357,72 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
             // add the items..
         if (!skip_children) {    
             for(var i =0;i < items.length;i++) {
+              //  Roo.log(['add child', items[i]]);
                 nitems.push(cn.addxtype(Roo.apply({}, items[i])));
             }
         }
         
         cn.items = nitems;
         
-        this.fireEvent('childrenrendered', this);
+        //Roo.log("fire childrenrendered");
+        
+        cn.fireEvent('childrenrendered', this);
         
         return cn;
     },
+    
+    /**
+     * Set the element that will be used to show or hide
+     */
+    setVisibilityEl : function(el)
+    {
+       this.visibilityEl = el;
+    },
+    
+     /**
+     * Get the element that will be used to show or hide
+     */
+    getVisibilityEl : function()
+    {
+       if (typeof(this.visibilityEl) == 'object') {
+           return this.visibilityEl;
+       }
+       
+       if (typeof(this.visibilityEl) == 'string') {
+           return this.visibilityEl == 'parent' ? this.parent().getEl() : this.getEl();
+       }
+       
+       return this.getEl();
+    },
+    
     /**
      * Show a component - removes 'hidden' class
      */
     show : function()
     {
-        if (this.el) {
-            this.el.removeClass('hidden');
+        if(!this.getVisibilityEl()){
+            return;
         }
+         
+        this.getVisibilityEl().removeClass(['hidden','d-none']);
+        
+        this.fireEvent('show', this);
+        
+        
     },
     /**
      * Hide a component - adds 'hidden' class
      */
     hide: function()
     {
-        if (this.el && !this.el.hasClass('hidden')) {
-            this.el.addClass('hidden');
+        if(!this.getVisibilityEl()){
+            return;
         }
         
+        this.getVisibilityEl().addClass(['hidden','d-none']);
+        
+        this.fireEvent('hide', this);
+        
     }
 });