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