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