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

   1 //<script type="text/javascript">
   2
   3
   4 Builder  = {
   5
   6     render : function(data)
   7     {
   8
   9         this.tree = data;
  10
  11         if (!Builder.click) {
  12             Builder.click= Roo.get(document.body).on('click', this.onclick, this);
  13
  14         }
  15
  16         this.redraw(false);
  17     },
  18
  19
  20     tree : {},
  21     renderObj :  { isBuilder : true },
  22     dialogroot : false,
  23
  24     redrawClear : function(isAuto)
  25     {
  26         this.renderObj = { isBuilder : true };
  27
  28         this.scroll = {
  29             top:0,
  30             left:0
  31         };
  32
  33
  34
  35         //if (this.panelroot) {
  36         //    this.scroll = this.panelroot.el.getScroll();
  37         //    this.layout.remove('center', this.panelroot);
  38         //    this.panelroot = false;
  39         //}
  40         if (this.dialogroot) {
  41             this.dialogroot.remove();
  42             this.dialogroot = false;
  43         }
  44         if (this.layoutbase) {
  45             //console.log(Builder.dump(this.layoutbase.el));
  46
  47
  48             try {
  49                 this.layoutbase.remove('center', this.layoutbase.getRegion('center'));
  50             } catch( e) {
  51                 //console.log(e);
  52                 // reload!!?
  53             }
  54
  55
  56
  57             //this.layoutbase= false;
  58         }
  59
  60
  61     },
  62
  63
  64     redraw: function(isAuto)
  65     {
  66
  67         // top level is not relivant
  68         this.redrawClear(isAuto);
  69
  70
  71         var cfg =  this.tree;
  72         //console.log(this.dump(cfg));
  73         if (!cfg) {
  74             return;
  75         }
  76
  77
  78         this.munge(cfg);
  79         //console.log(cfg);return;
  80         // we draw either a dialog or a tab..
  81
  82         if (cfg.xtype == 'LayoutDialog') {
  83
  84             cfg.modal = false;
  85             //var xy  = Pman.Tab.BuilderPanel.panel.el.getXY();
  86             //cfg.items[0].x = xy[0];
  87             //cfg.items[0].y = xy[1];
  88             //cfg.items[0].constraintoviewport = false;
  89
  90             this.dialogroot = Roo.get( document.body).createChild({
  91                 id : cfg.id
  92             });
  93
  94             this.dialog = new Roo[cfg.xtype](this.dialogroot, cfg);
  95             //this.dialog.el.on('click', this.panelClick, this);
  96             this.dialog.show();
  97             return;
  98
  99         }
 100
 101         // otherwise we are creating a layout area on the document..
 102
 103
 104         // handles
 105         // contentpanel, nestedlayoutpanel, contentpanel.. etc.
 106         // force center region..
 107         cfg.region = 'center';
 108         cfg.background = false;
 109         if (!this.layoutbase) {
 110
 111             this.layoutbase = new Ext.BorderLayout(document.body, {
 112
 113                  center: {
 114                     titlebar: false,
 115                     autoScroll:false,
 116                     closeOnTab: true,
 117                     tabPosition: 'top',
 118                     //resizeTabs: true,
 119                     alwaysShowTabs: true,
 120                     minTabWidth: 140
 121                 }
 122             });
 123         }
 124         this.layoutbase.addxtype(  cfg );
 125
 126
 127
 128     },
 129
 130
 131     munge :function (cfg)
 132     {
 133         var xitems = false;
 134         //cfg.cls = cfg.cls || '';
 135         //cfg.cls += ' ' + cfg.id;
 136         if (!cfg.id) {
 137             this.dump(cfg);
 138         }
 139         //console.log(cfg.xtype + ': ' + cfg.id);
 140
 141         if (cfg.items) {
 142             xitems = cfg.items;
 143             delete cfg.items;
 144         }
 145         if (typeof(cfg.background) != 'undefined') {
 146             cfg.background = false;
 147         }
 148
 149         var xtype = (cfg['|xns'] || '')  + '.' + (cfg.xtype || '');
 150
 151         for(var p in cfg){
 152             // key is not string?!?!?!!?
 153             if (typeof(p) != 'string') {
 154                 continue;
 155             }
 156
 157             if (typeof(cfg[p]) == 'object') { // listeners!!!
 158                 this.munge(cfg[p]);
 159                 continue;
 160             }
 161             // SPECIAL - PIPE
 162             if (p.charAt(0) == '|') {
 163
 164                 if (!cfg[p].length) {
 165                     delete cfg[p];
 166                     continue;
 167                 }
 168                 try {
 169                     var _tmp = false;
 170
 171                     var _this = this.renderObj; /// fake '_this' object..
 172                     /** eval:var:_this **/
 173                     /** eval:var:_tmp **/
 174                     // stupid IE can not return objects evaluated..
 175                     eval('_tmp =(' + cfg[p] + ')');
 176                     cfg[p.substr(1)] = _tmp;
 177                     //if (typeof(_tmp) == 'undefined') {
 178                     //    alert(cfg[p]);
 179                    // }
 180
 181                 } catch(e) {  console.log('Error evaluating: '  + cfg[p]); };
 182                 delete cfg[p];
 183
 184
 185                 continue;
 186             }
 187             // skip '*'
 188             if ((p.charAt(0) == '*') || (p.charAt(0) == '+')) {
 189                 delete cfg[p];
 190                 continue;
 191             }
 192             // normal..
 193
 194         }
 195
 196         // we can overlay some event handlers here..
 197         cfg.listeners = cfg.listeners || {};
 198
 199         //console.log('xtype'  + xtype)
 200         switch(xtype) {
 201             case 'Roo.LayoutDialog':
 202                 cfg.listeners.resize = function(dlg, w,h)
 203                 {
 204                     console.log('{ "id" : "' + dlg.id + '", "set" : "width", "value": ' + w + '}');
 205                     console.log('{ "id" : "' + dlg.id + '", "set" : "height", "value": ' + h + '}');
 206                 }
 207                 break;
 208         }
 209
 210
 211
 212
 213
 214         // now for all the children.. (items)
 215         if (xitems === false) {
 216             return;
 217         }
 218         cfg.items = [];
 219         for (var i = 0; i < xitems.length; i++) {
 220             // if +builderhide set !!!! drop it!!
 221
 222
 223             var xi = xitems[i];
 224             if (typeof(xi['*prop']) != 'undefined') {
 225                 console.log('adding prop:' + xi['*prop']);
 226
 227                 var pr = xi['*prop'];
 228                 this.munge(xi);
 229                 // if prop is an array - then it's items are really the value..
 230                 if (pr.match(/\[\]$/)) {
 231                     console.log('adding array?:' + pr);
 232                     pr = pr.replace(/\[\]$/, '');
 233                     cfg[pr] = cfg[pr]  || [];
 234                     cfg[pr].push(xi);
 235                     continue;
 236                 }
 237
 238
 239                 if (xi.xtype && xi.xtype  == 'Array') {
 240                     cfg[pr] = xi.items;
 241                 } else {
 242                     console.log('setting property:' + pr);
 243                     cfg[pr] = xi;
 244                 }
 245
 246
 247                 continue;
 248             }
 249             this.munge(xi);
 250             cfg.items.push(xi);
 251         }
 252
 253         if (cfg.items.length == 0) {
 254             delete cfg.items;
 255         }
 256
 257
 258
 259     },
 260
 261
 262
 263     cloneConfig : function(config) {
 264                 if (!config) { return null; }
 265                 var newConfig = {};
 266                 for (var i in config) {
 267                         if (typeof config[i] == 'object') {
 268                                 newConfig[i] = this.cloneConfig(config[i]);
 269                         } else if (typeof config[i] != 'function') {
 270                                 newConfig[i] = config[i];
 271                         }
 272                 }
 273                 return newConfig;
 274         },
 275     dump : function (arr,level) {
 276         var dumped_text = "";
 277         if(!level) level = 0;
 278         if (level >  3) {
 279             return '... TO DEEP ...';
 280         }
 281         //The padding given at the beginning of the line.
 282         var level_padding = "";
 283         for(var j=0;j<level+1;j++) level_padding += "    ";
 284
 285         if(typeof(arr) == 'object') { //Array/Hashes/Objects
 286             for(var item in arr) {
 287
 288                 var value = arr[item];
 289                 if (item == 'xns') {
 290                     continue;
 291                 }
 292                 if(typeof(value) == 'function') { //If it is an array,
 293                     // fake dump...
 294                     dumped_text += level_padding + "'" + item + "' : function() { ... },\n";
 295                     continue;
 296                 }
 297                 if(typeof(value) == 'object') { //If it is an array,
 298                     dumped_text += level_padding + "'" + item + "': {\n";
 299                     dumped_text += this.dump(value,level+1);
 300                     dumped_text += level_padding + "}\n";
 301                     continue;
 302                 }
 303                 dumped_text += level_padding + "'" + item + "' : \"" + value + "\"\n";
 304
 305             }
 306         } else { //Stings/Chars/Numbers etc.
 307             dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
 308         }
 309         return dumped_text;
 310     },
 311     findNode : function(ftg , method) {
 312         if (!ftg) {
 313             return; false
 314         }
 315       // console.log(ftg.id);
 316         if (ftg.id && typeof(ftg.id) == 'string' && ftg.id.match(/builder-/)) {
 317             var nid = ftg.id.replace('builder-', '').replace('x-form-el-', '');
 318             this[method]( nid );
 319             return true;
 320         }
 321         // needs fixing..
 322         if (ftg.dom.className.match(/[0-9]+/)) {
 323             console.log(ftg.dom.className);
 324             var cmat = ftg.dom.className.match(/x-grid-hd-builder-(form-gen-[0-9:]+)/);
 325             if (cmat) {
 326                 this[method]( cmat[1] );
 327                 return true;
 328             }
 329         }
 330
 331
 332
 333
 334         return false;
 335     },
 336
 337     overPos: function(x,y)
 338     {
 339
 340         var el = document.elementFromPoint(x,y);
 341        // //console.log(el.id);
 342        // console.log(document.body.innerHTML);
 343         this.hover( {
 344             getTarget : function () {
 345                 return el;
 346             },
 347             stopEvent : function() {
 348
 349             }
 350         });
 351
 352
 353     },
 354     onclick: function(e) {
 355         var tg = Roo.get(e.getTarget());
 356         if (!tg) {
 357             //console.log('no target');
 358             return;
 359            }
 360
 361         if (this.findNode(tg,'logClick')) {
 362             return;
 363         }
 364         var dp = Roo.get(tg.up(''));
 365         if (dp && this.findNode(dp,'logClick')) {
 366             return;
 367         }
 368
 369         var ns = Roo.get(tg.getNextSibling());
 370         if (ns && this.findNode(ns,'logClick')) {
 371
 372             return;
 373         }
 374         if (ns && ns.down('') && this.findNode(Roo.get(ns.down('')) ,'logClick') ) {
 375             return;
 376         }
 377
 378         for(var i =0; i < 5; i++) {
 379             tg = Roo.get(tg.up(''));
 380             if (!tg) {
 381                 //console.log('no parent' + i);
 382                 return;
 383             }
 384             if (tg && this.findNode(tg,'logClick')) {
 385                 return;
 386             }
 387         }
 388         //console.log('no target in parents');
 389
 390     },
 391     logClick : function(id)
 392     {
 393          var bid = id.length ? 'builder-' + id : '';
 394          console.log('{ "id" :  "' + bid + '"}');
 395     },
 396
 397
 398     hover : function(e) {
 399
 400
 401         var tg = Roo.get(e.getTarget());
 402         if (!tg) {
 403             //console.log('no target');
 404             this.logMove('');
 405             return;
 406            }
 407
 408         if (this.findNode(tg,'logMove')) {
 409             e.stopEvent();
 410             return;
 411         }
 412         var dp = Roo.get(tg.up(''));
 413         if (dp && this.findNode(dp,'logMove')) {
 414             e.stopEvent();
 415             return;
 416         }
 417
 418         var ns = Roo.get(tg.getNextSibling());
 419         if (ns && this.findNode(ns,'logMove')) {
 420             e.stopEvent();
 421             return;
 422         }
 423         if (ns && ns.down('') && this.findNode(Roo.get(ns.down('')) ,'logMove' )) {
 424             e.stopEvent();
 425             return;
 426         }
 427
 428         for(var i =0; i < 5; i++) {
 429             tg = Roo.get(tg.up(''));
 430             if (!tg) {
 431                 //console.log('no parent' + i);
 432                 this.logMove('');
 433                 return;
 434             }
 435             if (tg && this.findNode(tg,'logMove')) {
 436                 e.stopEvent();
 437                 return;
 438             }
 439         }
 440         //console.log('no target in parents');
 441         this.logMove('');
 442     },
 443     logMove : function (id) {
 444         //console.log("LOGMOVE: " + id);
 445
 446         if (this.lastID === id) {
 447             return;
 448        }
 449        id = ''+ id;
 450        var bid = id.length ? 'builder-' + id : '';
 451        console.log('{ "hover-node" :  "' + bid + '"}');
 452        this.lastID = id;
 453     }
 454
 455
 456 };
 457