git.roojs.org Git - roojs1/blob - Roo/bootstrap/Modal.js

   1
   2 /*
   3 <div class="modal fade">
   4   <div class="modal-dialog">
   5     <div class="modal-content">
   6       <div class="modal-header">
   7         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
   8         <h4 class="modal-title">Modal title</h4>
   9       </div>
  10       <div class="modal-body">
  11         <p>One fine body&hellip;</p>
  12       </div>
  13       <div class="modal-footer">
  14         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  15         <button type="button" class="btn btn-primary">Save changes</button>
  16       </div>
  17     </div><!-- /.modal-content -->
  18   </div><!-- /.modal-dialog -->
  19 </div><!-- /.modal -->
  20 */
  21 /*
  22  * - LGPL
  23  *
  24  * page contgainer.
  25  *
  26  */
  27
  28 /**
  29  * @class Roo.bootstrap.Modal
  30  * @extends Roo.bootstrap.Component
  31  * Bootstrap Modal class
  32  * @cfg {String} title Title of dialog
  33  * @cfg {String} html - the body of the dialog (for simple ones) - you can also use template..
  34  * @cfg {Roo.Template} tmpl - a template with variables.
  35  * @cfg {Boolean} specificTitle default false
  36  * @cfg {Array} buttons Array of buttons or standard button set..
  37  * @cfg {String} buttonPosition (left|right|center) default right
  38  * @cfg {Boolean} animate default true
  39  * @cfg {Boolean} allow_close default true
  40  *
  41  * @constructor
  42  * Create a new Modal Dialog
  43  * @param {Object} config The config object
  44  */
  45
  46 Roo.bootstrap.Modal = function(config){
  47     Roo.bootstrap.Modal.superclass.constructor.call(this, config);
  48     this.addEvents({
  49         // raw events
  50         /**
  51          * @event btnclick
  52          * The raw btnclick event for the button
  53          * @param {Roo.EventObject} e
  54          */
  55         "btnclick" : true
  56     });
  57     this.buttons = this.buttons || [];
  58 };
  59
  60 Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
  61
  62     title : 'test dialog',
  63
  64     buttons : false,
  65
  66     // set on load...
  67     body:  false,
  68
  69     html: false,
  70
  71     specificTitle: false,
  72
  73     buttonPosition: 'right',
  74
  75     allow_close : true,
  76
  77     animate : true,
  78
  79     onRender : function(ct, position)
  80     {
  81         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
  82
  83         if(!this.el){
  84             var cfg = Roo.apply({},  this.getAutoCreate());
  85             cfg.id = Roo.id();
  86             //if(!cfg.name){
  87             //    cfg.name = typeof(this.name) == 'undefined' ? this.id : this.name;
  88             //}
  89             //if (!cfg.name.length) {
  90             //    delete cfg.name;
  91            // }
  92             if (this.cls) {
  93                 cfg.cls += ' ' + this.cls;
  94             }
  95             if (this.style) {
  96                 cfg.style = this.style;
  97             }
  98             this.el = Roo.get(document.body).createChild(cfg, position);
  99         }
 100         //var type = this.el.dom.type;
 101
 102         if(this.tabIndex !== undefined){
 103             this.el.dom.setAttribute('tabIndex', this.tabIndex);
 104         }
 105
 106
 107
 108         this.maskEl = Roo.DomHelper.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
 109         this.maskEl.enableDisplayMode("block");
 110         this.maskEl.hide();
 111         //this.el.addClass("x-dlg-modal");
 112
 113         if (this.buttons.length) {
 114             Roo.each(this.buttons, function(bb) {
 115                 b = Roo.apply({}, bb);
 116                 b.xns = b.xns || Roo.bootstrap;
 117                 b.xtype = b.xtype || 'Button';
 118                 if (typeof(b.listeners) == 'undefined') {
 119                     b.listeners = { click : this.onButtonClick.createDelegate(this)  };
 120                 }
 121
 122                 var btn = Roo.factory(b);
 123
 124                 btn.onRender(this.el.select('.modal-footer div').first());
 125
 126             },this);
 127         }
 128         // render the children.
 129         var nitems = [];
 130
 131         if(typeof(this.items) != 'undefined'){
 132             var items = this.items;
 133             delete this.items;
 134
 135             for(var i =0;i < items.length;i++) {
 136                 nitems.push(this.addxtype(Roo.apply({}, items[i])));
 137             }
 138         }
 139
 140         this.items = nitems;
 141
 142         this.body = this.el.select('.modal-body',true).first();
 143         this.close = this.el.select('.modal-header .close', true).first();
 144         this.footer = this.el.select('.modal-footer',true).first();
 145         this.initEvents();
 146         //this.el.addClass([this.fieldClass, this.cls]);
 147
 148     },
 149     getAutoCreate : function(){
 150
 151
 152         var bdy = {
 153                 cls : 'modal-body',
 154                 html : this.html || ''
 155         };
 156
 157         var title = {
 158             tag: 'h4',
 159             cls : 'modal-title',
 160             html : this.title
 161         };
 162
 163         if(this.specificTitle){
 164             title = this.title;
 165
 166         };
 167
 168         var header = [];
 169         if (this.allow_close) {
 170             header.push({
 171                 tag: 'button',
 172                 cls : 'close',
 173                 html : '&times'
 174             });
 175         }
 176         header.push(title);
 177
 178         var modal = {
 179             cls: "modal",
 180             style : 'display: none',
 181             cn : [
 182                 {
 183                     cls: "modal-dialog",
 184                     cn : [
 185                         {
 186                             cls : "modal-content",
 187                             cn : [
 188                                 {
 189                                     cls : 'modal-header',
 190                                     cn : header
 191                                 },
 192                                 bdy,
 193                                 {
 194                                     cls : 'modal-footer',
 195                                     cn : [
 196                                         {
 197                                             tag: 'div',
 198                                             cls: 'btn-' + this.buttonPosition
 199                                         }
 200                                     ]
 201
 202                                 }
 203
 204
 205                             ]
 206
 207                         }
 208                     ]
 209
 210                 }
 211             ]
 212         };
 213
 214         if(this.animate){
 215             modal.cls += ' fade';
 216         }
 217
 218         return modal;
 219
 220     },
 221     getChildContainer : function() {
 222
 223          return this.el.select('.modal-body',true).first();
 224
 225     },
 226     getButtonContainer : function() {
 227          return this.el.select('.modal-footer div',true).first();
 228
 229     },
 230     initEvents : function()
 231     {
 232         this.el.select('.modal-header .close').on('click', this.hide, this);
 233 //
 234 //        this.addxtype(this);
 235     },
 236     show : function() {
 237
 238         if (!this.rendered) {
 239             this.render();
 240         }
 241
 242         this.el.setStyle('display', 'block');
 243
 244         if(this.animate){
 245             var _this = this;
 246             (function(){ _this.el.addClass('in'); }).defer(50);
 247         }else{
 248             this.el.addClass('in');
 249         }
 250
 251         if (this.tmpl) {
 252             //code
 253         }
 254
 255         Roo.get(document.body).addClass("x-body-masked");
 256         this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
 257         this.maskEl.show();
 258         this.el.setStyle('zIndex', '10001');
 259
 260         this.fireEvent('show', this);
 261
 262
 263     },
 264     hide : function()
 265     {
 266         this.maskEl.hide();
 267         Roo.get(document.body).removeClass("x-body-masked");
 268         this.el.removeClass('in');
 269
 270         if(this.animate){
 271             var _this = this;
 272             (function(){ _this.el.setStyle('display', 'none'); }).defer(150);
 273         }else{
 274             this.el.setStyle('display', 'none');
 275         }
 276
 277         this.fireEvent('hide', this);
 278     },
 279
 280     addButton : function(str, cb)
 281     {
 282
 283
 284         var b = Roo.apply({}, { html : str } );
 285         b.xns = b.xns || Roo.bootstrap;
 286         b.xtype = b.xtype || 'Button';
 287         if (typeof(b.listeners) == 'undefined') {
 288             b.listeners = { click : cb.createDelegate(this)  };
 289         }
 290
 291         var btn = Roo.factory(b);
 292
 293         btn.onRender(this.el.select('.modal-footer div').first());
 294
 295         return btn;
 296
 297     },
 298
 299     setDefaultButton : function(btn)
 300     {
 301         //this.el.select('.modal-footer').()
 302     },
 303     resizeTo: function(w,h)
 304     {
 305         // skip..
 306     },
 307     setContentSize  : function(w, h)
 308     {
 309
 310     },
 311     onButtonClick: function(btn,e)
 312     {
 313         //Roo.log([a,b,c]);
 314         this.fireEvent('btnclick', btn.name, e);
 315     },
 316     setTitle: function(str) {
 317         this.el.select('.modal-title',true).first().dom.innerHTML = str;
 318
 319     }
 320 });
 321
 322
 323 Roo.apply(Roo.bootstrap.Modal,  {
 324     /**
 325          * Button config that displays a single OK button
 326          * @type Object
 327          */
 328         OK :  [{
 329             name : 'ok',
 330             weight : 'primary',
 331             html : 'OK'
 332         }],
 333         /**
 334          * Button config that displays Yes and No buttons
 335          * @type Object
 336          */
 337         YESNO : [
 338             {
 339                 name  : 'no',
 340                 html : 'No'
 341             },
 342             {
 343                 name  :'yes',
 344                 weight : 'primary',
 345                 html : 'Yes'
 346             }
 347         ],
 348
 349         /**
 350          * Button config that displays OK and Cancel buttons
 351          * @type Object
 352          */
 353         OKCANCEL : [
 354             {
 355                name : 'cancel',
 356                 html : 'Cancel'
 357             },
 358             {
 359                 name : 'ok',
 360                 weight : 'primary',
 361                 html : 'OK'
 362             }
 363         ],
 364         /**
 365          * Button config that displays Yes, No and Cancel buttons
 366          * @type Object
 367          */
 368         YESNOCANCEL : [
 369             {
 370                 name : 'yes',
 371                 weight : 'primary',
 372                 html : 'Yes'
 373             },
 374             {
 375                 name : 'no',
 376                 html : 'No'
 377             },
 378             {
 379                 name : 'cancel',
 380                 html : 'Cancel'
 381             }
 382         ]
 383 });
 384
 385