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