X-Git-Url: http://git.roojs.org/?p=app.Builder.js;a=blobdiff_plain;f=resources%2Froo.builder.js;h=a53f114afc92243b84185d2071d73cab282743a8;hp=e91201f34539334a1e3a5ad3dc6055a90e4d6ddc;hb=HEAD;hpb=58a78b5317bd6e4bdd86b78e6ff646e45ccae912

diff --git a/resources/roo.builder.js b/resources/roo.builder.js
index e91201f34..a53f114af 100644
--- a/resources/roo.builder.js
+++ b/resources/roo.builder.js
@@ -1,5 +1,8 @@
 //<script type="text/javascript">
- 
+
+
+// IPC: - via alert("IPC:{method}:{data}
+
 
 var MODULE = { isBuilder : true };
 // BC
@@ -11,412 +14,138 @@ Builder  = {
     scriptTag : false,
     
     id : 1,
-    
-    render : function(data, clsname)
-    {
-        
-       // console.log(data);
-        console.log(clsname);
-        // for debugging 
-        // console.log(data);        return; 
-        //Roo.log(data);
-        //Roo.log(data);
-        // This would be alot simpler if we just use the XComponent code...
-        // data should now be dialog or xcomponent..
-        // only snag here is that we do not know the name currently..
-        //Roo.log(clsname);
-        var  ix = '_src_' + this.id++;
-        // should replace module name with Builder._src_{id}
-        data =  data.replace(clsname, 'Builder.' + ix);
-        // next.. we need to ensure that parent is set correctly..
-        // done by sender... otherwise building becomes difficult..
-        //data  += "\n" + 'Builder.' + ix + ".parent = '#renderel';\n";
-        console.log(data);
-        //Roo.log(data);return;
-        //Roo.log(data);
-        if (this.scriptTag) { 
-            document.body.removeChild(this.scriptTag);
-            this.scriptTag = false;
-        }
-        
-        this.scriptTag = document.body.appendChild(document.createElement('script'));
-        this.scriptTag.setAttribute('type','text/javascript');
-         
-        this.id++;
-        this.scriptTag.appendChild(
-                    document.createTextNode(
-                            data 
-        ));
-         
-        
-        //Roo.log(this.tree);
-        MODULE = { isBuilder : true }; 
-        _this = MODULE;
-        if (!Builder.click) {
-            Builder.click= Roo.get(document.body).on('click', this.onclick, this);
-        }
-        Roo.log('Builder.'+ ix);
-        Roo.XComponent.build();
-        return;
-        
-        return;
-        var  wait_for_tree = function() {
-            
-            Builder.tree = Builder[ix];
-            if (!Builder.tree) {
-                Roo.log("Wating for tree : " + ix);
-                wait_for_tree.defer(100);
-                return;
-            }
-             Builder.redraw(false);
-        }
-        wait_for_tree.defer(100);
-    },
-    
-    
-    
-    tree : {}, 
-    renderObj :  { isBuilder : true },
-    dialogroot : false,
-    
-    redrawClear : function(isAuto)
-    {
-        this.renderObj = { isBuilder : true };
-        
-        this.scroll = {
-            top:0,
-            left:0
-        };
-        
-         
-        
-        //if (this.panelroot) {
-        //    this.scroll = this.panelroot.el.getScroll();
-        //    this.layout.remove('center', this.panelroot);
-        //    this.panelroot = false;
-        //}
-        if (this.dialogroot) {
-            this.dialogroot.remove();
-            this.dialogroot = false;
-        }
-        if (this.layoutbase) {
-            //console.log(Builder.dump(this.layoutbase.el));
-            
-            
-            try {
-                var pan = this.layoutbase.getRegion('center').getPanel(0);
-                if (pan) {
-                    this.layoutbase.remove('center', pan);
-                }
-                
-                
-            } catch( e) {
-                console.log(e);
-                console.log(JSON.stringify(e));
-                // reload!!?
-            }
+
+
+  
+    saveHTML :  function( ) 
+	{
+            //print("TRAVERSE DOM?");
             
+            var dom = document.body;
+            //print(dom);
+            var ret = '';
+            //Roo.select('body > div',true).each(function(el) {
+            // if the tree is not ready yet?
             
             
-            //this.layoutbase= false;
-        }
-         
+            this.traverseDOMTree(function(s) { ret+=s; }, dom, 1);
+	        alert("IPC:SAVEHTML:" + ret);
+            return ret;
+        },
         
-    },
-    
-    
-    redraw: function(isAuto)
-    {
-        
-        // top level is not relivant
-        this.redrawClear(isAuto);
-        
-        
-        var cfg =  this.tree;
-        //console.log(this.dump(cfg));
-        if (!cfg) {
-            return;
-        }
-        
-        
-        this.munge(cfg);
-        this.cfg = cfg;
-        //console.log(this.dump(cfg)); 
-        // we draw either a dialog or a tab..
-        
-        if (cfg.xtype == 'LayoutDialog') {
-            
-            cfg.modal = false;
-            //var xy  = Pman.Tab.BuilderPanel.panel.el.getXY();
-            //cfg.items[0].x = xy[0];
-            //cfg.items[0].y = xy[1];
-            //cfg.items[0].constraintoviewport = false;
         
-            this.dialogroot = Roo.get( document.body).createChild({
-                id : cfg.id
-            });
-            
+        traverseDOMTree : function(cb, currentElement, depth) {
+            if (!currentElement ) {
+                
+                return;
+            }
+            //console.log(currentElement);
+            if (currentElement.className && currentElement.className.match(/roo-dynamic/)) {
+                return;
+            }
             
-            MODULE.dialog = new Roo[cfg.xtype](this.dialogroot, cfg);
-            //this.dialog.el.on('click', this.panelClick, this);
-            MODULE.dialog.show();
-            return;
+            //Roo.log(currentElement);
+            var j;
+            var nodeName = currentElement.nodeName;
+            var tagName = currentElement.tagName;
             
-        }
-        
-        // otherwise we are creating a layout area on the document..
-        
-         
-        // handles 
-        // contentpanel, nestedlayoutpanel, contentpanel.. etc. 
-        // force center region..
-        cfg.region = 'center';
-        cfg.background = false;
-        if (!this.layoutbase) {
-                
-            this.layoutbase = new Ext.BorderLayout(document.body, {
-              
-                 center: {
-                    titlebar: false,
-                    autoScroll:false,
-                    closeOnTab: true,
-                    tabPosition: 'top',
-                    //resizeTabs: true,
-                    alwaysShowTabs: true,
-                    minTabWidth: 140
-                }
-            });
-        }
-        try {
-            console.log("ADDING CFG");    
-            console.log(cfg)
-            this.layoutbase.addxtype(  cfg ); 
-        } catch (e) {
-            console.log("GOT ERROR? - saved in Builder.lastError");
-            Builder.lastError = e;
-            console.log(e);
-            console.log(typeof(e));
+            if  (nodeName == '#text') {
+                cb(currentElement.nodeValue);
+                return;
             
-            console.log(this.dump(e));
-            console.trace();
-        }
-        
-        
-    },
-  
-    
-    munge :function (cfg, isListener)
-    {
-        var xitems = false;
-        //cfg.cls = cfg.cls || '';
-        //cfg.cls += ' ' + cfg.id;
-        if (!cfg.id) {
-            this.dump(cfg);
-        }
-        
-        //console.log(cfg.xtype + ': ' + cfg.id);
-        
-        if (cfg.items) {
-            xitems = cfg.items;
-            delete cfg.items;
-        }
-        if (typeof(cfg.background) != 'undefined') {
-            cfg.background = false;
-        }
-        
-        var xtype = (cfg['|xns'] || '')  + '.' + (cfg.xtype || '');
-        
-        for(var p in cfg){
-            // key is not string?!?!?!!?
-          
-            if (typeof(p) != 'string') {
-                continue;
             }
+            if (nodeName.match(/^#/)) { // comments?
+                return;
+            }
+             
+            
             
-            if (typeof(cfg[p]) == 'object') { // listeners!!!
-                this.munge(cfg[p], p == 'listeners');
-                continue;
+            if(nodeName == 'BR'){
+                cb("<BR/>");
+                return;
             }
-            // SPECIAL - PIPE
-            if (p.charAt(0) == '|' || isListener) {
-                
-                if (!cfg[p].length) {
-                    delete cfg[p];
-                    continue;
+            if (nodeName != 'BODY') {
+                //Roo.log(currentElement);
+                if (currentElement.hasAttribute('flexy:include')) {
+
+
+                    cb( '<flexy:include src="'+currentElement.getAttribute('flexy:include')+'"></flexy:include>');
+                    return;
                 }
-                var pp = p.charAt(0) == '|'  ? p.substring(1) : p;
-                try {
-                    
-                    
-                    var _tmp = false;
+            
+                var i = 0;
+              // Prints the node tagName, such as <A>, <IMG>, etc
+                if (tagName) {
+                    var attr = [];
+                    for(i = 0; i < currentElement.attributes.length;i++) {
+                        var attre = currentElement.attributes.item(i);
+                        var aname = attre.name;
+                        var aval = attre.value || '';
+                        if (aname=='id' && aval.match(/^roo\-/)) { // only roo -elements hide..
+                            aname= 'xbuilderid';
+                        }
+                        // skip -- component created by the builder?
+                        if (aval == 'builderel') { 
+                            return;
+                        }
+                        attr.push(aname + '="' + aval + '"' );  //?? escaping attributes?
+                    }
                     
-                    /** eval:var:MOUDULE **/
-                    /** eval:var:_this **/
-                    /** eval:var:_tmp **/
-                    // stupid IE can not return objects evaluated..
-                   // console.log('_tmp =(' + cfg[p] + ')');
-                    eval('_tmp =(' + cfg[p] + ')');
-                    cfg[pp] = _tmp;
                     
-                    //if (typeof(_tmp) == 'undefined') {
-                    //    alert(cfg[p]);
-                   // }
-                   
-                } catch(e) {  
-                    console.log('Error evaluating: '  + cfg[p] + "\r\n" + JSON.stringify(e)); 
-                };
-                if (pp != p) {
-                    delete cfg[p];
+                    cb("<"+currentElement.tagName+ ( attr.length ? (' ' + attr.join(' ') ) : '') + ">");
+                } 
+                else {
+                  cb("[unknown tag]");
                 }
-                
-                    
-                
-                continue;
+            } else {
+                tagName = false;
             }
-            // skip '*'
-            if ((p.charAt(0) == '*') || (p.charAt(0) == '+')) {
-                delete cfg[p];
-                continue;
-            }
-            // normal..
-              
-        }
-        
-        if (cfg.xtype && cfg.xtype.match(/^Roo\./) && !cfg.xns) {
-            // xtype contains full path..
-            var bits = cfg.xtype.split('.');
-            bits.shift(); // remove roo..
-            cfg.xtype = bits.pop(); // get the last bit..
-            cfg.xns = Roo;
-            while (bits.length) {
-                cfg.xns = cfg.xns[bits.shift()]; 
-            }
-             
-        }
-        if (cfg.xtype) {
-            if (!cfg.xns || typeof(cfg.xns[cfg.xtype]) == 'undefined') {
-                throw "Invalid Xtype " + cfg.xtype + ' on ' + cfg.xtreepath;
-            }
-        }
-        if (!isListener) {
-            cfg.listeners = cfg.listeners || {};
-        }
-        // we can overlay some event handlers here..
-        
-       
-        //console.log('xtype'  + xtype)
-        switch(xtype) {
-            case 'Roo.LayoutDialog':
-                cfg.listeners.resize = function(dlg, w,h)
-                {
-                    console.log('{ "id" : "' + dlg.id + '", "set" : "width", "value": ' + w + '}');
-                    console.log('{ "id" : "' + dlg.id + '", "set" : "height", "value": ' + h + '}');
-                }
-                break;
-        }
-        
-        
-        
-        
-        
-        // now for all the children.. (items)
-        if (xitems === false) {
-            
-            return;
-        }
-        cfg.items = [];
-        for (var i = 0; i < xitems.length; i++) {
-            // if +builderhide set !!!! drop it!!
             
             
-            var xi = xitems[i];
-            if (typeof(xi['*prop']) != 'undefined') {
-                //console.log('adding prop:' + xi['*prop']);
+            // Traverse the tree
+            i = 0;
+            var currentElementChild = currentElement.childNodes.item(i);
+            var allText = true;
+            while (currentElementChild) {
+                // Formatting code (indent the tree so it looks nice on the screen)
                 
-                var pr = xi['*prop'];
-                this.munge(xi);
-                // if prop is an array - then it's items are really the value..
-                if (pr.match(/\[\]$/)) {
-                    //console.log('adding array?:' + pr);
-                    pr = pr.replace(/\[\]$/, '');
-                    cfg[pr] = cfg[pr]  || [];
-                    cfg[pr].push(xi);
+                if  (currentElementChild.nodeName == '#text') {
+                    cb(currentElementChild.nodeValue);
+                    i++;
+                    currentElementChild=currentElement.childNodes.item(i);
                     continue;
-                }
-                
-                
-                if (xi.xtype && xi.xtype  == 'Array') {
-                    cfg[pr] = xi.items;
-                } else {
-                    //console.log('setting property:' + pr);
-                    cfg[pr] = xi;
-                }
+                }   
+                allText = false;
+                cb("\n");
+                for (j = 0; j < depth; j++) {
+                  // &#166 is just a vertical line
+                  cb("  ");
+                }               
                 
-                
-                continue;
+                    
+                // Recursively traverse the tree structure of the child node
+                this.traverseDOMTree(cb, currentElementChild, depth+1);
+                i++;
+                currentElementChild=currentElement.childNodes.item(i);
             }
-            this.munge(xi);
-            cfg.items.push(xi);
-        }
-        
-        if (cfg.items.length == 0) {
-            delete cfg.items;
-        }
-        console.log(cfg);
-        
-        
-    },
-    
-    
-    
-    cloneConfig : function(config) {
-		if (!config) { return null; }
-		var newConfig = {};
-		for (var i in config) {
-			if (typeof config[i] == 'object') {
-				newConfig[i] = this.cloneConfig(config[i]);
-			} else if (typeof config[i] != 'function') {
-				newConfig[i] = config[i];
-			}
-		}
-		return newConfig;
-	},
-    dump : function (arr,level) {
-        var dumped_text = "";
-        if(!level) level = 0;
-        if (level >  3) {
-            return '... TO DEEP ...';
-        }
-        //The padding given at the beginning of the line.
-        var level_padding = "";
-        for(var j=0;j<level+1;j++) level_padding += "    ";
-        
-        if(typeof(arr) == 'object') { //Array/Hashes/Objects 
-            for(var item in arr) {
-                
-                var value = arr[item];
-                if (item == 'xns') {
-                    continue;
-                }
-                if(typeof(value) == 'function') { //If it is an array,
-                    // fake dump...
-                    dumped_text += level_padding + "'" + item + "' : function() { ... },\n";
-                    continue;
-                }
-                if(typeof(value) == 'object') { //If it is an array,
-                    dumped_text += level_padding + "'" + item + "': {\n";
-                    dumped_text += this.dump(value,level+1);
-                    dumped_text += level_padding + "}\n";
-                    continue;
-                }
-                dumped_text += level_padding + "'" + item + "' : \"" + value + "\"\n";
-                
+            if (!allText) {
+                    // The remaining code is mostly for formatting the tree
+                cb("\n");
+                for (j = 0; j < depth - 1; j++) {
+                  cb("  ");
+                }     
             }
-        } else { //Stings/Chars/Numbers etc.
-            dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
-        }
-        return dumped_text;
-    },
+            if (tagName) {
+                cb("</"+tagName+">");
+            }
+            
+        },
+
+
+	// this lot is to deal with draging // selecting? - not used at present
+	// 
+	
+     
     findNode : function(ftg , method) {
         if (!ftg) {
             return; false
@@ -557,7 +286,7 @@ Builder  = {
        }
        id = ''+ id;
        var bid = id.length ? 'builder-' + id : '';
-       console.log('{ "hover-node" :  "' + bid + '"}');
+       //console.log('{ "hover-node" :  "' + bid + '"}');
        this.lastID = id;
     },
     clearBootstrap : function()
@@ -587,6 +316,9 @@ Builder  = {
     
     applyFlexy: function(tree)
     {
+        if (!tree.el) {
+            return;
+        }
         if (typeof(tree['flexy:foreach']) != 'undefined') {
             //Roo.log("add flexy:foreach");
             tree.el.attr('flexy:foreach', tree['flexy:foreach']);
@@ -600,12 +332,32 @@ Builder  = {
             tree.el.attr('xtype', tree['xtype-bootstrap']);
         }
         
+        if (typeof(tree['flexy:include']) != 'undefined') {
+            //Roo.log("add flexy:if");
+            tree.el.attr('flexy:include', tree['flexy:include']);
+        }
+        
+        if (typeof(tree['flexy:ignore']) != 'undefined') {
+            //Roo.log("add flexy:if");
+            tree.el.attr('flexy:ignore', tree['flexy:ignore']);
+        }
         
-        if (!tree.items || !tree.items.length) { return; }
+        tree.el.attr('xtype', tree['|xns'] + '.' +  tree['xtype']);
+        //Roo.log(tree);
+        //Roo.log("Add xtype")
         
-        for (var i = 0; i < tree.items.length; i++){
-            this.applyFlexy(tree.items[i]);
+        
+        
+        if (tree.items && tree.items.length > 0) { 
+        //Roo.log(tree);
+            for (var i = 0; i < tree.items.length; i++){
+                this.applyFlexy(tree.items[i]);
+            }
         }
+        if (typeof(tree.menu) == 'object') {
+            this.applyFlexy(tree.menu);
+        }
+        
     }
     
      
@@ -614,6 +366,8 @@ Builder  = {
 Roo.onReady(function() { Builder.clearBootstrap(); });
 Roo.XComponent.on('buildcomplete', function() {
     Roo.log("xcomponent built!");
+    var m = Roo.XComponent.modules;
+    Builder.applyFlexy(m[m.length-1].el);
     
-    Builder.applyFlexy(Roo.XComponent.modules[0].el);
+	Builder.saveHTML.defer(100, Builder);
 });
\ No newline at end of file