git.roojs.org Git - app.Builder.js/blob - old-javascript/builder.html.js

   1 //<script type="text/javascript">
   2
   3
   4 var MODULE = { isBuilder : true };
   5 // BC
   6 var _this = MODULE;
   7
   8 // the apprenderer.
   9 Builder  = {
  10
  11     scriptTag : false,
  12
  13     id : 1,
  14
  15     render : function(data, clsname)
  16     {
  17
  18        // console.log(data);
  19         console.log(clsname);
  20         // for debugging
  21         // console.log(data);        return;
  22         //Roo.log(data);
  23         //Roo.log(data);
  24         // This would be alot simpler if we just use the XComponent code...
  25         // data should now be dialog or xcomponent..
  26         // only snag here is that we do not know the name currently..
  27         //Roo.log(clsname);
  28         var  ix = '_src_' + this.id++;
  29         // should replace module name with Builder._src_{id}
  30         data =  data.replace(clsname, 'Builder.' + ix);
  31         // next.. we need to ensure that parent is set correctly..
  32         // done by sender... otherwise building becomes difficult..
  33         //data  += "\n" + 'Builder.' + ix + ".parent = '#renderel';\n";
  34         console.log(data);
  35         //Roo.log(data);return;
  36         //Roo.log(data);
  37         if (this.scriptTag) {
  38             document.body.removeChild(this.scriptTag);
  39             this.scriptTag = false;
  40         }
  41
  42         this.scriptTag = document.body.appendChild(document.createElement('script'));
  43         this.scriptTag.setAttribute('type','text/javascript');
  44
  45         this.id++;
  46         this.scriptTag.appendChild(
  47                     document.createTextNode(
  48                             data
  49         ));
  50
  51
  52         //Roo.log(this.tree);
  53         MODULE = { isBuilder : true };
  54         _this = MODULE;
  55         if (!Builder.click) {
  56             Builder.click= Roo.get(document.body).on('click', this.onclick, this);
  57         }
  58         Roo.log('Builder.'+ ix);
  59         Roo.XComponent.build();
  60         return;
  61
  62         return;
  63         var  wait_for_tree = function() {
  64
  65             Builder.tree = Builder[ix];
  66             if (!Builder.tree) {
  67                 Roo.log("Wating for tree : " + ix);
  68                 wait_for_tree.defer(100);
  69                 return;
  70             }
  71              Builder.redraw(false);
  72         }
  73         wait_for_tree.defer(100);
  74     },
  75
  76
  77
  78     tree : {},
  79     renderObj :  { isBuilder : true },
  80     dialogroot : false,
  81
  82     redrawClear : function(isAuto)
  83     {
  84         this.renderObj = { isBuilder : true };
  85
  86         this.scroll = {
  87             top:0,
  88             left:0
  89         };
  90
  91
  92
  93         //if (this.panelroot) {
  94         //    this.scroll = this.panelroot.el.getScroll();
  95         //    this.layout.remove('center', this.panelroot);
  96         //    this.panelroot = false;
  97         //}
  98         if (this.dialogroot) {
  99             this.dialogroot.remove();
 100             this.dialogroot = false;
 101         }
 102         if (this.layoutbase) {
 103             //console.log(Builder.dump(this.layoutbase.el));
 104
 105
 106             try {
 107                 var pan = this.layoutbase.getRegion('center').getPanel(0);
 108                 if (pan) {
 109                     this.layoutbase.remove('center', pan);
 110                 }
 111
 112
 113             } catch( e) {
 114                 console.log(e);
 115                 console.log(JSON.stringify(e));
 116                 // reload!!?
 117             }
 118
 119
 120
 121             //this.layoutbase= false;
 122         }
 123
 124
 125     },
 126
 127
 128     redraw: function(isAuto)
 129     {
 130
 131         // top level is not relivant
 132         this.redrawClear(isAuto);
 133
 134
 135         var cfg =  this.tree;
 136         //console.log(this.dump(cfg));
 137         if (!cfg) {
 138             return;
 139         }
 140
 141
 142         this.munge(cfg);
 143         this.cfg = cfg;
 144         //console.log(this.dump(cfg));
 145         // we draw either a dialog or a tab..
 146
 147         if (cfg.xtype == 'LayoutDialog') {
 148
 149             cfg.modal = false;
 150             //var xy  = Pman.Tab.BuilderPanel.panel.el.getXY();
 151             //cfg.items[0].x = xy[0];
 152             //cfg.items[0].y = xy[1];
 153             //cfg.items[0].constraintoviewport = false;
 154
 155             this.dialogroot = Roo.get( document.body).createChild({
 156                 id : cfg.id
 157             });
 158
 159
 160             MODULE.dialog = new Roo[cfg.xtype](this.dialogroot, cfg);
 161             //this.dialog.el.on('click', this.panelClick, this);
 162             MODULE.dialog.show();
 163             return;
 164
 165         }
 166
 167         // otherwise we are creating a layout area on the document..
 168
 169
 170         // handles
 171         // contentpanel, nestedlayoutpanel, contentpanel.. etc.
 172         // force center region..
 173         cfg.region = 'center';
 174         cfg.background = false;
 175         if (!this.layoutbase) {
 176
 177             this.layoutbase = new Ext.BorderLayout(document.body, {
 178
 179                  center: {
 180                     titlebar: false,
 181                     autoScroll:false,
 182                     closeOnTab: true,
 183                     tabPosition: 'top',
 184                     //resizeTabs: true,
 185                     alwaysShowTabs: true,
 186                     minTabWidth: 140
 187                 }
 188             });
 189         }
 190         try {
 191             console.log("ADDING CFG");
 192             console.log(cfg)
 193             this.layoutbase.addxtype(  cfg );
 194         } catch (e) {
 195             console.log("GOT ERROR? - saved in Builder.lastError");
 196             Builder.lastError = e;
 197             console.log(e);
 198             console.log(typeof(e));
 199
 200             console.log(this.dump(e));
 201             console.trace();
 202         }
 203
 204
 205     },
 206
 207
 208     munge :function (cfg, isListener)
 209     {
 210         var xitems = false;
 211         //cfg.cls = cfg.cls || '';
 212         //cfg.cls += ' ' + cfg.id;
 213         if (!cfg.id) {
 214             this.dump(cfg);
 215         }
 216
 217         //console.log(cfg.xtype + ': ' + cfg.id);
 218
 219         if (cfg.items) {
 220             xitems = cfg.items;
 221             delete cfg.items;
 222         }
 223         if (typeof(cfg.background) != 'undefined') {
 224             cfg.background = false;
 225         }
 226
 227         var xtype = (cfg['|xns'] || '')  + '.' + (cfg.xtype || '');
 228
 229         for(var p in cfg){
 230             // key is not string?!?!?!!?
 231
 232             if (typeof(p) != 'string') {
 233                 continue;
 234             }
 235
 236             if (typeof(cfg[p]) == 'object') { // listeners!!!
 237                 this.munge(cfg[p], p == 'listeners');
 238                 continue;
 239             }
 240             // SPECIAL - PIPE
 241             if (p.charAt(0) == '|' || isListener) {
 242
 243                 if (!cfg[p].length) {
 244                     delete cfg[p];
 245                     continue;
 246                 }
 247                 var pp = p.charAt(0) == '|'  ? p.substring(1) : p;
 248                 try {
 249
 250
 251                     var _tmp = false;
 252
 253                     /** eval:var:MOUDULE **/
 254                     /** eval:var:_this **/
 255                     /** eval:var:_tmp **/
 256                     // stupid IE can not return objects evaluated..
 257                    // console.log('_tmp =(' + cfg[p] + ')');
 258                     eval('_tmp =(' + cfg[p] + ')');
 259                     cfg[pp] = _tmp;
 260
 261                     //if (typeof(_tmp) == 'undefined') {
 262                     //    alert(cfg[p]);
 263                    // }
 264
 265                 } catch(e) {
 266                     console.log('Error evaluating: '  + cfg[p] + "\r\n" + JSON.stringify(e));
 267                 };
 268                 if (pp != p) {
 269                     delete cfg[p];
 270                 }
 271
 272
 273
 274                 continue;
 275             }
 276             // skip '*'
 277             if ((p.charAt(0) == '*') || (p.charAt(0) == '+')) {
 278                 delete cfg[p];
 279                 continue;
 280             }
 281             // normal..
 282
 283         }
 284
 285         if (cfg.xtype && cfg.xtype.match(/^Roo\./) && !cfg.xns) {
 286             // xtype contains full path..
 287             var bits = cfg.xtype.split('.');
 288             bits.shift(); // remove roo..
 289             cfg.xtype = bits.pop(); // get the last bit..
 290             cfg.xns = Roo;
 291             while (bits.length) {
 292                 cfg.xns = cfg.xns[bits.shift()];
 293             }
 294
 295         }
 296         if (cfg.xtype) {
 297             if (!cfg.xns || typeof(cfg.xns[cfg.xtype]) == 'undefined') {
 298                 throw "Invalid Xtype " + cfg.xtype + ' on ' + cfg.xtreepath;
 299             }
 300         }
 301         if (!isListener) {
 302             cfg.listeners = cfg.listeners || {};
 303         }
 304         // we can overlay some event handlers here..
 305
 306
 307         //console.log('xtype'  + xtype)
 308         switch(xtype) {
 309             case 'Roo.LayoutDialog':
 310                 cfg.listeners.resize = function(dlg, w,h)
 311                 {
 312                     console.log('{ "id" : "' + dlg.id + '", "set" : "width", "value": ' + w + '}');
 313                     console.log('{ "id" : "' + dlg.id + '", "set" : "height", "value": ' + h + '}');
 314                 }
 315                 break;
 316         }
 317
 318
 319
 320
 321
 322         // now for all the children.. (items)
 323         if (xitems === false) {
 324
 325             return;
 326         }
 327         cfg.items = [];
 328         for (var i = 0; i < xitems.length; i++) {
 329             // if +builderhide set !!!! drop it!!
 330
 331
 332             var xi = xitems[i];
 333             if (typeof(xi['*prop']) != 'undefined') {
 334                 //console.log('adding prop:' + xi['*prop']);
 335
 336                 var pr = xi['*prop'];
 337                 this.munge(xi);
 338                 // if prop is an array - then it's items are really the value..
 339                 if (pr.match(/\[\]$/)) {
 340                     //console.log('adding array?:' + pr);
 341                     pr = pr.replace(/\[\]$/, '');
 342                     cfg[pr] = cfg[pr]  || [];
 343                     cfg[pr].push(xi);
 344                     continue;
 345                 }
 346
 347
 348                 if (xi.xtype && xi.xtype  == 'Array') {
 349                     cfg[pr] = xi.items;
 350                 } else {
 351                     //console.log('setting property:' + pr);
 352                     cfg[pr] = xi;
 353                 }
 354
 355
 356                 continue;
 357             }
 358             this.munge(xi);
 359             cfg.items.push(xi);
 360         }
 361
 362         if (cfg.items.length == 0) {
 363             delete cfg.items;
 364         }
 365         console.log(cfg);
 366
 367
 368     },
 369
 370
 371
 372     cloneConfig : function(config) {
 373                 if (!config) { return null; }
 374                 var newConfig = {};
 375                 for (var i in config) {
 376                         if (typeof config[i] == 'object') {
 377                                 newConfig[i] = this.cloneConfig(config[i]);
 378                         } else if (typeof config[i] != 'function') {
 379                                 newConfig[i] = config[i];
 380                         }
 381                 }
 382                 return newConfig;
 383         },
 384     dump : function (arr,level) {
 385         var dumped_text = "";
 386         if(!level) level = 0;
 387         if (level >  3) {
 388             return '... TO DEEP ...';
 389         }
 390         //The padding given at the beginning of the line.
 391         var level_padding = "";
 392         for(var j=0;j<level+1;j++) level_padding += "    ";
 393
 394         if(typeof(arr) == 'object') { //Array/Hashes/Objects
 395             for(var item in arr) {
 396
 397                 var value = arr[item];
 398                 if (item == 'xns') {
 399                     continue;
 400                 }
 401                 if(typeof(value) == 'function') { //If it is an array,
 402                     // fake dump...
 403                     dumped_text += level_padding + "'" + item + "' : function() { ... },\n";
 404                     continue;
 405                 }
 406                 if(typeof(value) == 'object') { //If it is an array,
 407                     dumped_text += level_padding + "'" + item + "': {\n";
 408                     dumped_text += this.dump(value,level+1);
 409                     dumped_text += level_padding + "}\n";
 410                     continue;
 411                 }
 412                 dumped_text += level_padding + "'" + item + "' : \"" + value + "\"\n";
 413
 414             }
 415         } else { //Stings/Chars/Numbers etc.
 416             dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
 417         }
 418         return dumped_text;
 419     },
 420     findNode : function(ftg , method) {
 421         if (!ftg) {
 422             return; false
 423         }
 424       // console.log(ftg.id);
 425         if (ftg.id && typeof(ftg.id) == 'string' && ftg.id.match(/builder-/)) {
 426             var nid = ftg.id.replace('builder-', '').replace('x-form-el-', '');
 427             this[method]( nid );
 428             return true;
 429         }
 430         // needs fixing..
 431         if (ftg.dom.className.match(/[0-9]+/)) {
 432             //console.log(ftg.dom.className);
 433             var cmat = ftg.dom.className.match(/x-grid-hd-builder-(form-gen-[0-9:]+)/);
 434             if (cmat) {
 435                 this[method]( cmat[1] );
 436                 return true;
 437             }
 438         }
 439
 440
 441
 442
 443         return false;
 444     },
 445
 446     overPos: function(x,y)
 447     {
 448
 449         var el = document.elementFromPoint(x,y);
 450        // //console.log(el.id);
 451        // console.log(document.body.innerHTML);
 452         this.hover( {
 453             getTarget : function () {
 454                 return el;
 455             },
 456             stopEvent : function() {
 457
 458             }
 459         });
 460
 461
 462     },
 463     onclick: function(e) {
 464         var tg = Roo.get(e.getTarget());
 465         if (!tg) {
 466             //console.log('no target');
 467             return;
 468            }
 469
 470         if (this.findNode(tg,'logClick')) {
 471             return;
 472         }
 473         var dp = Roo.get(tg.up(''));
 474         if (dp && this.findNode(dp,'logClick')) {
 475             return;
 476         }
 477
 478         var ns = Roo.get(tg.getNextSibling());
 479         if (ns && this.findNode(ns,'logClick')) {
 480
 481             return;
 482         }
 483         if (ns && ns.down('') && this.findNode(Roo.get(ns.down('')) ,'logClick') ) {
 484             return;
 485         }
 486
 487         for(var i =0; i < 5; i++) {
 488             tg = Roo.get(tg.up(''));
 489             if (!tg) {
 490                 //console.log('no parent' + i);
 491                 return;
 492             }
 493             if (tg && this.findNode(tg,'logClick')) {
 494                 return;
 495             }
 496         }
 497         //console.log('no target in parents');
 498
 499     },
 500     logClick : function(id)
 501     {
 502          var bid = id.length ? 'builder-' + id : '';
 503          console.log('{ "id" :  "' + bid + '"}');
 504     },
 505
 506
 507     hover : function(e) {
 508
 509
 510         var tg = Roo.get(e.getTarget());
 511         if (!tg) {
 512             //console.log('no target');
 513             this.logMove('');
 514             return;
 515            }
 516
 517         if (this.findNode(tg,'logMove')) {
 518             e.stopEvent();
 519             return;
 520         }
 521         var dp = Roo.get(tg.up(''));
 522         if (dp && this.findNode(dp,'logMove')) {
 523             e.stopEvent();
 524             return;
 525         }
 526
 527         var ns = Roo.get(tg.getNextSibling());
 528         if (ns && this.findNode(ns,'logMove')) {
 529             e.stopEvent();
 530             return;
 531         }
 532         if (ns && ns.down('') && this.findNode(Roo.get(ns.down('')) ,'logMove' )) {
 533             e.stopEvent();
 534             return;
 535         }
 536
 537         for(var i =0; i < 5; i++) {
 538             tg = Roo.get(tg.up(''));
 539             if (!tg) {
 540                 //console.log('no parent' + i);
 541                 this.logMove('');
 542                 return;
 543             }
 544             if (tg && this.findNode(tg,'logMove')) {
 545                 e.stopEvent();
 546                 return;
 547             }
 548         }
 549         //console.log('no target in parents');
 550         this.logMove('');
 551     },
 552     logMove : function (id) {
 553         //console.log("LOGMOVE: " + id);
 554
 555         if (this.lastID === id) {
 556             return;
 557        }
 558        id = ''+ id;
 559        var bid = id.length ? 'builder-' + id : '';
 560        console.log('{ "hover-node" :  "' + bid + '"}');
 561        this.lastID = id;
 562     },
 563     clearBootstrap : function()
 564     {
 565         // if the page is not bootstrap
 566
 567         if ( typeof(BuilderUseBootstrap) != 'undefined' ) {
 568             Roo.log("it's boostrap - BuilderUseBootstrap is defined ");
 569             // it's bootstrap - probably remove roo's css..
 570             return;
 571         }
 572         Roo.log("remove css = BuilderUseBootstrap is not defined");
 573         var rem = [];
 574         var ar = document.getElementsByTagName('link');
 575         for (var i = 0; i < ar.length;i++) {
 576             var l = ar[i];
 577             Roo.log(l.getAttribute('href'));
 578             if (l.getAttribute('href').match(/bootstrap/)) {
 579                 rem.push(l);
 580
 581
 582             }
 583             //code
 584         }
 585         Roo.each(rem, function(l) { l.parentNode.removeChild(l);});
 586     },
 587
 588     applyFlexy: function(tree)
 589     {
 590         if (typeof(tree['flexy:foreach']) != 'undefined') {
 591             //Roo.log("add flexy:foreach");
 592             tree.el.attr('flexy:foreach', tree['flexy:foreach']);
 593         }
 594         if (typeof(tree['flexy:if']) != 'undefined') {
 595             //Roo.log("add flexy:if");
 596             tree.el.attr('flexy:if', tree['flexy:if']);
 597         }
 598         if (typeof(tree['flexy:include']) != 'undefined') {
 599             //Roo.log("add flexy:if");
 600             tree.el.attr('flexy:include', tree['flexy:include']);
 601         }
 602
 603         if (typeof(tree['xtype-bootstrap']) != 'undefined') {
 604             //Roo.log("add flexy:if");
 605             tree.el.attr('xtype', tree['xtype-bootstrap']);
 606         }
 607
 608
 609         if (!tree.items || !tree.items.length) { return; }
 610
 611         for (var i = 0; i < tree.items.length; i++){
 612             this.applyFlexy(tree.items[i]);
 613         }
 614     }
 615
 616
 617
 618 };
 619 Roo.onReady(function() { Builder.clearBootstrap(); });
 620 Roo.XComponent.on('buildcomplete', function() {
 621     Roo.log("xcomponent built!");
 622
 623     Builder.applyFlexy(Roo.XComponent.modules[0].el);
 624 });