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