/*
-<div class="modal fade">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
- <h4 class="modal-title">Modal title</h4>
- </div>
- <div class="modal-body">
- <p>One fine body…</p>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
- <button type="button" class="btn btn-primary">Save changes</button>
- </div>
- </div><!-- /.modal-content -->
- </div><!-- /.modal-dialog -->
-</div><!-- /.modal -->
+* Licence: LGPL
*/
-/*
- * - LGPL
- *
- * page contgainer.
- *
- */
/**
* @class Roo.bootstrap.Modal
* @extends Roo.bootstrap.Component
* Bootstrap Modal class
* @cfg {String} title Title of dialog
+ * @cfg {String} html - the body of the dialog (for simple ones) - you can also use template..
+ * @cfg {Roo.Template} tmpl - a template with variables. to use it, add a handler in show:method adn
+ * @cfg {Boolean} specificTitle default false
* @cfg {Array} buttons Array of buttons or standard button set..
+ * @cfg {String} buttonPosition (left|right|center) default right
+ * @cfg {Boolean} animate default true
+ * @cfg {Boolean} allow_close default true
*
* @constructor
* Create a new Modal Dialog
"btnclick" : true
});
this.buttons = this.buttons || [];
+
+ if (this.tmpl) {
+ this.tmpl = Roo.factory(this.tmpl);
+ }
+
};
Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, {
buttons : false,
// set on load...
- body: false,
+
+ html: false,
+
+ tmp: false,
+
+ specificTitle: false,
+
+ buttonPosition: 'right',
+
+ allow_close : true,
+
+ animate : true,
+
+
+ // private
+ bodyEl: false,
+ footerEl: false,
+ titleEl: false,
+ closeEl: false,
+
onRender : function(ct, position)
{
}
//var type = this.el.dom.type;
+
+
+
if(this.tabIndex !== undefined){
this.el.dom.setAttribute('tabIndex', this.tabIndex);
}
+ this.bodyEl = this.el.select('.modal-body',true).first();
+ this.closeEl = this.el.select('.modal-header .close', true).first();
+ this.footerEl = this.el.select('.modal-footer',true).first();
+ this.titleEl = this.el.select('.modal-title',true).first();
+
+
this.maskEl = Roo.DomHelper.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
this.maskEl.enableDisplayMode("block");
this.maskEl.hide();
//this.el.addClass("x-dlg-modal");
- if (this.buttons.legnth) {
+ if (this.buttons.length) {
Roo.each(this.buttons, function(bb) {
- b = Roo.apply({}, bb);
+ var b = Roo.apply({}, bb);
b.xns = b.xns || Roo.bootstrap;
b.xtype = b.xtype || 'Button';
if (typeof(b.listeners) == 'undefined') {
var btn = Roo.factory(b);
- btn.onRender(this.el.select('.modal-footer').first());
+ btn.onRender(this.el.select('.modal-footer div').first());
},this);
}
this.items = nitems;
- this.body = this.el.select('.modal-body',true).first();
- this.close = this.el.select('.modal-header .close', true).first();
- this.footer = this.el.select('.modal-footer',true).first();
+ // where are these used - they used to be body/close/footer
+
+
this.initEvents();
//this.el.addClass([this.fieldClass, this.cls]);
},
+
getAutoCreate : function(){
html : this.html || ''
};
-
- return modal = {
- cls: "modal fade",
+ var title = {
+ tag: 'h4',
+ cls : 'modal-title',
+ html : this.title
+ };
+
+ if(this.specificTitle){
+ title = this.title;
+
+ };
+
+ var header = [];
+ if (this.allow_close) {
+ header.push({
+ tag: 'button',
+ cls : 'close',
+ html : '×'
+ });
+ }
+ header.push(title);
+
+ var modal = {
+ cls: "modal",
+ style : 'display: none',
cn : [
{
cls: "modal-dialog",
cn : [
{
cls : 'modal-header',
+ cn : header
+ },
+ bdy,
+ {
+ cls : 'modal-footer',
cn : [
{
- tag: 'button',
- cls : 'close',
- html : '×'
- },
- {
- tag: 'h4',
- cls : 'modal-title',
- html : this.title
+ tag: 'div',
+ cls: 'btn-' + this.buttonPosition
}
-
]
- },
- bdy,
- {
- cls : 'modal-footer'
+
}
}
]
-
-
};
+
+ if(this.animate){
+ modal.cls += ' fade';
+ }
+
+ return modal;
},
getChildContainer : function() {
- return this.el.select('.modal-body',true).first();
+ return this.bodyEl;
},
getButtonContainer : function() {
- return this.el.select('.modal-footer',true).first();
+ return this.el.select('.modal-footer div',true).first();
},
initEvents : function()
{
- this.el.select('.modal-header .close').on('click', this.hide, this);
-//
-// this.addxtype(this);
+ if (this.allow_close) {
+ this.closeEl.on('click', this.hide, this);
+ }
+
+ var _this = this;
+
+ window.addEventListener("resize", function() { _this.resize(); } );
+
},
+
+ resize : function()
+ {
+ this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
+ },
+
show : function() {
if (!this.rendered) {
this.render();
}
-
- this.el.addClass('on');
- this.el.removeClass('fade');
+
this.el.setStyle('display', 'block');
+
+ if(this.animate){
+ var _this = this;
+ (function(){ _this.el.addClass('in'); }).defer(50);
+ }else{
+ this.el.addClass('in');
+ }
+
+ // not sure how we can show data in here..
+ //if (this.tmpl) {
+ // this.getChildContainer().dom.innerHTML = this.tmpl.applyTemplate(this);
+ //}
+
Roo.get(document.body).addClass("x-body-masked");
this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
this.maskEl.show();
this.el.setStyle('zIndex', '10001');
+
this.fireEvent('show', this);
},
hide : function()
{
- Roo.log('Modal hide?!');
this.maskEl.hide();
Roo.get(document.body).removeClass("x-body-masked");
- this.el.removeClass('on');
- this.el.addClass('fade');
- this.el.setStyle('display', 'none');
+ this.el.removeClass('in');
+
+ if(this.animate){
+ var _this = this;
+ (function(){ _this.el.setStyle('display', 'none'); }).defer(150);
+ }else{
+ this.el.setStyle('display', 'none');
+ }
+
this.fireEvent('hide', this);
},
var btn = Roo.factory(b);
- btn.onRender(this.el.select('.modal-footer').first());
+ btn.onRender(this.el.select('.modal-footer div').first());
return btn;
//Roo.log([a,b,c]);
this.fireEvent('btnclick', btn.name, e);
},
+ /**
+ * Set the title of the Dialog
+ * @param {String} str new Title
+ */
setTitle: function(str) {
- this.el.select('.modal-title',true).first().dom.innerHTML = str;
-
+ this.titleEl.dom.innerHTML = str;
+ },
+ /**
+ * Set the body of the Dialog
+ * @param {String} str new Title
+ */
+ setBody: function(str) {
+ this.bodyEl.dom.innerHTML = str;
+ },
+ /**
+ * Set the body of the Dialog using the template
+ * @param {Obj} data - apply this data to the template and replace the body contents.
+ */
+ applyBody: function(obj)
+ {
+ if (!this.tmpl) {
+ Roo.log("Error - using apply Body without a template");
+ //code
+ }
+ this.tmpl.overwrite(this.bodyEl, obj);
}
+
});
}
]
});
+
\ No newline at end of file
projects / roojs1 / blobdiff