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