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