git.roojs.org Git - app.Builder.js/blob - resources/roo.builder.js

   1 //<script type="text/javascript">
   2
   3
   4 // IPC: - via alert("IPC:{method}:{data}
   5
   6
   7 Roo.XComponent.on("buildcomplete", function() { Builder.saveHTML(); } );
   8
   9 var MODULE = { isBuilder : true };
  10 // BC
  11 var _this = MODULE;
  12
  13 // the apprenderer.
  14 Builder  = {
  15
  16     scriptTag : false,
  17
  18     id : 1,
  19
  20
  21
  22     saveHTML :  function( )
  23         {
  24             //print("TRAVERSE DOM?");
  25
  26             var dom = document.body;
  27             //print(dom);
  28             var ret = '';
  29             //Roo.select('body > div',true).each(function(el) {
  30             // if the tree is not ready yet?
  31
  32
  33             this.traverseDOMTree(function(s) { ret+=s; }, dom, 1);
  34                 alert("IPC:SAVEHTML:" + ret);
  35             return ret;
  36         },
  37
  38
  39         traverseDOMTree : function(cb, currentElement, depth) {
  40             if (!currentElement) {
  41
  42                 return;
  43             }
  44             console.log(currentElement);
  45             if (currentElement.className.match(/roo-dynamic/)) {
  46                 return;
  47             }
  48
  49             //Roo.log(currentElement);
  50             var j;
  51             var nodeName = currentElement.nodeName;
  52             var tagName = currentElement.tagName;
  53
  54             if  (nodeName == '#text') {
  55                 cb(currentElement.nodeValue);
  56                 return;
  57
  58             }
  59
  60
  61
  62             if(nodeName == 'BR'){
  63                 cb("<BR/>");
  64                 return;
  65             }
  66             if (nodeName != 'BODY') {
  67
  68
  69
  70                 var i = 0;
  71               // Prints the node tagName, such as <A>, <IMG>, etc
  72                 if (tagName) {
  73                     var attr = [];
  74                     for(i = 0; i < currentElement.attributes.length;i++) {
  75                         var aname = currentElement.attributes.item(i).name;
  76                         if (aname=='id') {
  77                             aname= 'xbuilderid';
  78                         }
  79                         // skip
  80                         if (currentElement.attributes.item(i).value == 'builderel') {
  81                             return;
  82                         }
  83                         attr.push(aname + '="' + currentElement.attributes.item(i).value + '"' );
  84                     }
  85
  86
  87                     cb("<"+currentElement.tagName+ ( attr.length ? (' ' + attr.join(' ') ) : '') + ">");
  88                 }
  89                 else {
  90                   cb("[unknown tag]");
  91                 }
  92             } else {
  93                 tagName = false;
  94             }
  95             if (currentElement.hasAttribute('flexy:include')) {
  96                 cb( tagName ? "</"+tagName+">" : '');
  97             }
  98
  99             // Traverse the tree
 100             i = 0;
 101             var currentElementChild = currentElement.childNodes.item(i);
 102             var allText = true;
 103             while (currentElementChild) {
 104                 // Formatting code (indent the tree so it looks nice on the screen)
 105
 106                 if  (currentElementChild.nodeName == '#text') {
 107                     cb(currentElementChild.nodeValue);
 108                     i++;
 109                     currentElementChild=currentElement.childNodes.item(i);
 110                     continue;
 111                 }
 112                 allText = false;
 113                 cb("\n");
 114                 for (j = 0; j < depth; j++) {
 115                   // &#166 is just a vertical line
 116                   cb("  ");
 117                 }
 118
 119
 120                 // Recursively traverse the tree structure of the child node
 121                 this.traverseDOMTree(cb, currentElementChild, depth+1);
 122                 i++;
 123                 currentElementChild=currentElement.childNodes.item(i);
 124             }
 125             if (!allText) {
 126                     // The remaining code is mostly for formatting the tree
 127                 cb("\n");
 128                 for (j = 0; j < depth - 1; j++) {
 129                   cb("  ");
 130                 }
 131             }
 132             if (tagName) {
 133                 cb("</"+tagName+">");
 134             }
 135
 136         },
 137
 138
 139         // this lot is to deal with draging // selecting? - not used at present
 140         //
 141
 142
 143     findNode : function(ftg , method) {
 144         if (!ftg) {
 145             return; false
 146         }
 147       // console.log(ftg.id);
 148         if (ftg.id && typeof(ftg.id) == 'string' && ftg.id.match(/builder-/)) {
 149             var nid = ftg.id.replace('builder-', '').replace('x-form-el-', '');
 150             this[method]( nid );
 151             return true;
 152         }
 153         // needs fixing..
 154         if (ftg.dom.className.match(/[0-9]+/)) {
 155             //console.log(ftg.dom.className);
 156             var cmat = ftg.dom.className.match(/x-grid-hd-builder-(form-gen-[0-9:]+)/);
 157             if (cmat) {
 158                 this[method]( cmat[1] );
 159                 return true;
 160             }
 161         }
 162
 163
 164
 165
 166         return false;
 167     },
 168
 169     overPos: function(x,y)
 170     {
 171
 172         var el = document.elementFromPoint(x,y);
 173        // //console.log(el.id);
 174        // console.log(document.body.innerHTML);
 175         this.hover( {
 176             getTarget : function () {
 177                 return el;
 178             },
 179             stopEvent : function() {
 180
 181             }
 182         });
 183
 184
 185     },
 186     onclick: function(e) {
 187         var tg = Roo.get(e.getTarget());
 188         if (!tg) {
 189             //console.log('no target');
 190             return;
 191            }
 192
 193         if (this.findNode(tg,'logClick')) {
 194             return;
 195         }
 196         var dp = Roo.get(tg.up(''));
 197         if (dp && this.findNode(dp,'logClick')) {
 198             return;
 199         }
 200
 201         var ns = Roo.get(tg.getNextSibling());
 202         if (ns && this.findNode(ns,'logClick')) {
 203
 204             return;
 205         }
 206         if (ns && ns.down('') && this.findNode(Roo.get(ns.down('')) ,'logClick') ) {
 207             return;
 208         }
 209
 210         for(var i =0; i < 5; i++) {
 211             tg = Roo.get(tg.up(''));
 212             if (!tg) {
 213                 //console.log('no parent' + i);
 214                 return;
 215             }
 216             if (tg && this.findNode(tg,'logClick')) {
 217                 return;
 218             }
 219         }
 220         //console.log('no target in parents');
 221
 222     },
 223     logClick : function(id)
 224     {
 225          var bid = id.length ? 'builder-' + id : '';
 226          console.log('{ "id" :  "' + bid + '"}');
 227     },
 228
 229
 230     hover : function(e) {
 231
 232
 233         var tg = Roo.get(e.getTarget());
 234         if (!tg) {
 235             //console.log('no target');
 236             this.logMove('');
 237             return;
 238            }
 239
 240         if (this.findNode(tg,'logMove')) {
 241             e.stopEvent();
 242             return;
 243         }
 244         var dp = Roo.get(tg.up(''));
 245         if (dp && this.findNode(dp,'logMove')) {
 246             e.stopEvent();
 247             return;
 248         }
 249
 250         var ns = Roo.get(tg.getNextSibling());
 251         if (ns && this.findNode(ns,'logMove')) {
 252             e.stopEvent();
 253             return;
 254         }
 255         if (ns && ns.down('') && this.findNode(Roo.get(ns.down('')) ,'logMove' )) {
 256             e.stopEvent();
 257             return;
 258         }
 259
 260         for(var i =0; i < 5; i++) {
 261             tg = Roo.get(tg.up(''));
 262             if (!tg) {
 263                 //console.log('no parent' + i);
 264                 this.logMove('');
 265                 return;
 266             }
 267             if (tg && this.findNode(tg,'logMove')) {
 268                 e.stopEvent();
 269                 return;
 270             }
 271         }
 272         //console.log('no target in parents');
 273         this.logMove('');
 274     },
 275     logMove : function (id) {
 276         //console.log("LOGMOVE: " + id);
 277
 278         if (this.lastID === id) {
 279             return;
 280        }
 281        id = ''+ id;
 282        var bid = id.length ? 'builder-' + id : '';
 283        console.log('{ "hover-node" :  "' + bid + '"}');
 284        this.lastID = id;
 285     },
 286     clearBootstrap : function()
 287     {
 288         // if the page is not bootstrap
 289
 290         if ( typeof(BuilderUseBootstrap) != 'undefined' ) {
 291             Roo.log("it's boostrap - BuilderUseBootstrap is defined ");
 292             // it's bootstrap - probably remove roo's css..
 293             return;
 294         }
 295         Roo.log("remove css = BuilderUseBootstrap is not defined");
 296         var rem = [];
 297         var ar = document.getElementsByTagName('link');
 298         for (var i = 0; i < ar.length;i++) {
 299             var l = ar[i];
 300             Roo.log(l.getAttribute('href'));
 301             if (l.getAttribute('href').match(/bootstrap/)) {
 302                 rem.push(l);
 303
 304
 305             }
 306             //code
 307         }
 308         Roo.each(rem, function(l) { l.parentNode.removeChild(l);});
 309     },
 310
 311     applyFlexy: function(tree)
 312     {
 313         if (typeof(tree['flexy:foreach']) != 'undefined') {
 314             //Roo.log("add flexy:foreach");
 315             tree.el.attr('flexy:foreach', tree['flexy:foreach']);
 316         }
 317         if (typeof(tree['flexy:if']) != 'undefined') {
 318             //Roo.log("add flexy:if");
 319             tree.el.attr('flexy:if', tree['flexy:if']);
 320         }
 321         if (typeof(tree['xtype-bootstrap']) != 'undefined') {
 322             //Roo.log("add flexy:if");
 323             tree.el.attr('xtype', tree['xtype-bootstrap']);
 324         }
 325
 326         if (typeof(tree['flexy:include']) != 'undefined') {
 327             //Roo.log("add flexy:if");
 328             tree.el.attr('flexy:include', tree['flexy:include']);
 329         }
 330
 331         if (!tree.items || !tree.items.length) { return; }
 332
 333         for (var i = 0; i < tree.items.length; i++){
 334             this.applyFlexy(tree.items[i]);
 335         }
 336     }
 337
 338
 339
 340 };
 341 Roo.onReady(function() { Builder.clearBootstrap(); });
 342 Roo.XComponent.on('buildcomplete', function() {
 343     Roo.log("xcomponent built!");
 344     var m = Roo.XComponent.modules;
 345     Builder.applyFlexy(m[m.length-1].el);
 346 });