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