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