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