Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $
You can buy this project and download/modify it how often you want.
butor.js.butor-dlg.js Maven / Gradle / Ivy
/*
* Copyright 2013-2018 butor.com
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* @namespace butor.dlg
*/
butor.dlg = butor.dlg || {};
/**
* @typedef {Map} DialogConfigurationArgs
* @description
* JavaScript map used to configure the configure the dialog when it will be shown.
* this structure is used in a lot of place of the framework and
* it can be extended on your own way.
*
* @memberof butor.dlg.Dialog#
* @property {Function} callBack - Function which returns the configurated callback object.
* @property {jQueryElement} target - jQuery element targeted by the object.
* @property {String} mode - Current mode of the linked object.
* @property {String} id - ID of the linked object.
* @see butor.dlg.Dialog#show
*/
/**
* @typedef {Map} DlgOpts
* @description
* JavaScript map used to configure the dialog box. All the flags of the structure
* are optional and they can be changed by using the following setters:
*
* - {@link butor.dlg.Dialog#setResizable `setResizable(resizable)`}
* - {@link butor.dlg.Dialog#setMaximizable `setMaximizable(maximizable)`}
* - {@link butor.dlg.Dialog#setMinimizable `setMinimizable(minimizable)`}
* - {@link butor.dlg.Dialog#setDraggable `setDraggable(draggable)`}
* - {@link butor.dlg.Dialog#setModal `setModal(modal)`}
*
* @memberof butor.dlg.Dialog#
* @property {string} title - Name of the dialog.
* @property {number} width - Width of the dialog.
* @property {number} height - Heigth of the dialog.
* @property {boolean} [resizable=false] - Flag to make the dialog resizable.
* @property {boolean} [maximizable=false] - Flag to make the dialog maximizable.
* @property {boolean} [minimizable=false] - Flag to make the dialog minimizable.
* @property {boolean} [draggable=false] - Flag to make the dialog draggable.
* @property {boolean} [modal=false] - Flag to make the dialog modal.
* @property {string} bundleId - ID of the bundle linked to the dialog.
*/
/**
* @class Dialog
* @abstract
* @memberof butor.dlg
* @required {http://fstoke.me/jquery/window/ jQuery Window Plugin}
* @description Creates a dialog window.
*
* This abstract class provides a set of methods to make a dialog box
* for the platform. The following methods needs to be implemented:
*
* - _init()
*
* The method `init()` initialilizes the dialog box and **must call the base Class
* by calling the method `this.base()` in order to call the MsgPanel interface**.
*
* The dialog box can be used and configurated by both methods:
*
* - setUrl(url)
* - setHtml(html)
*
* These methods takes arguments in order to set up the dialog and you **must**
* use one of them in order to build the dialog. These methods are automaticaly
* created as properties of the Dialog class.
*
* @param {butor.dlg#dlgOpts} dlgOpts - Options of the dialog, it is used to configure
* the dialog, see {@link butor.dlg.Dialog#DlgOpts} for more information.
*
* @example
*
*
*
*
* lorem_ipsum
*
*
* Hi, this is a second tab !
* Send an info
* Send a warning
* Send an error
*
*
*
* Cancel
* Ok
*
*
');
var _setup = $.proxy(function() {
this._jqe = jqe;
this._dom = jqe; //backward compatibility. Still reference to _dom
App.translateElem(jqe, this._dlgOpts.bundleId);
this._configDlg();
jqe.modal({
'backdrop' : 'static',
'show' : true,
'keyboard' : true
});
// if (this._dlgOpts.maximized || this.width() > $(window).width() || this.height() >
// $(window).height()) {
// this.maximize();
// }
// this._wrp = $.proxy(this._windowResized, this);
// $(window).bind('resize', this._wrp);
jqe.on('shown.bs.modal', $.proxy(function(e) {
this._init();
this.fire('shown');
this.fire('resized');
}, this));
jqe.on('hidden.bs.modal', $.proxy(function(e) {
//if (this._jqe.attr('_isClosing_') === '1') {
delete butor.dlg.Dialog._registry[this._id];
this._jqe.remove();
$(window).unbind('resize', this._wrp);
//}
//this._jqe.attr('_isClosing_', '1');
//this.close();
this.fire('closed');
}, this));
}, this);
if ($(html).find('.modal-dialog')[0]) {
jqe = html.attr('id', this._id).appendTo($('body'));
_setup();
} else {
html = $('
' +(html.find ? html.html() : html) +'
');
jqe.load('/res/butor/butor-dlg.html', $.proxy(function() {
jqe = jqe.find('#dlg-tmpl').attr('id', this._id).appendTo($('body'));
if (this._dlgOpts['modal-size']) {
jqe.find('.modal-dialog').addClass(this._dlgOpts['modal-size']);
} else {
jqe.find('.modal-dialog').addClass('modal-lg');
}
var dtb = html.find('.dlg-tool-bar');
var dc = html.find('.dlg-content');
var dbb = html.find('.dlg-button-bar');
var db = jqe.find('.modal-body').empty();
if (dc[0]) {
if (dtb[0]) {
db.append(dtb.html());
}
if (!dbb[0]) {
jqe.find('.modal-footer').hide();
} else {
jqe.find('.modal-footer').html(dbb.html());
}
db.append(dc.html());
} else {
db.append(html.html());
}
_setup();
}, this));
}
},
setWidth : function(w) {
//TODO
// if (w != null) {
// this._jqe.find('.modal-dialog').css('width', this._dlgOpts.width);
// }
},
setHeight : function(h) {
//TODO
// if (h != null) {
// h -= this._jqe.find('.modal-header').height() -this._jqe.find('.modal-footer').height();
// this._jqe.find('.modal-body').css('height', h);
// }
},
_configDlg : function() {
this.setWidth(this._dlgOpts.width);
this.setHeight(this._dlgOpts.height);
this.setTitle(this._dlgOpts.title);
/*
showRoundCorner: true,
title: this._dlgOpts.title,
content: html,
// footerContent : "HELLO",
// showFooter: false,
maxWidth: -1,
maxHeight: -1,
width: this._dlgOpts.width,
height: this._dlgOpts.height,
// headerClass: '',
// frameClass: '',
scrollable: this._dlgOpts.scrollable || false,
draggable: this._dlgOpts.draggable == null ? true : this._dlgOpts.draggable,
resizable: this._dlgOpts.resizable == null ? false : this._dlgOpts.resizable,
maximizable: this._dlgOpts.maximizable == null ? false : this._dlgOpts.maximizable,
minimizable: this._dlgOpts.minimizable == null ? false : this._dlgOpts.minimizable,
showModal: typeof this._dlgOpts.modal !== 'undefined' ? this._dlgOpts.modal : true,
closable: this._dlgOpts.closable == null ? true : this._dlgOpts.closable,
afterResize: function() {
dlg.fire('resized');
},
afterMaximize: function() {
dlg.fire('resized');
dlg.fire('maximized');
dlg._jqe.resize();
},
afterMinimize: function() {
dlg.fire('resized');
dlg.fire('minimized');
},
afterCascade: function() {
dlg.fire('resized');
dlg.fire('cascaded');
},
onClose: function(wnd) {
// TODO delete App.dlg.registry[_id];
if (dlg._anchor) {
dlg._anchor.remove();
}
this.html = null;
dlg._anchor = null;
if (dlg._jqe.attr('_isClosing_') === '1') {
return;
}
dlg._jqe.attr('_isClosing_', '1');
dlg.fire('closed');
}
*/
},
/**
* @method _windowResized
* @access private
* @memberof butor.dlg.Dialog#
* @description Fires a "resized" event for the dialog.
*/
//TODO window plugin do not fire resize event if is it maximized
_windowResized: function() {
//TODO window plugin do not fire resize event if is it maximized
// if browser window is resized
if (this._isMaximized) {
this.fire('resized');
}
},
/**
* @method _normalizeArgs
* @access private
* @memberof butor.dlg.Dialog#
* @description Normilizes the dialog arguments.
*/
_normalizeArgs: function() {
if (this._args) {
if (this._args.callBack) {
this._args.callback = this._args.callBack;
}
}
},
/**
* @method show
* @memberof butor.dlg.Dialog#
* @description Shows the dialog.
* @param {Map} args - Arguments which configure the dialog box when it is displayed. See description about {@link butor.dlg.Dialog#DialogConfigurationArgs DialogConfigurationArgs} for more information.
*/
show: function(args) {
if (this._jqe) {
this._jqe.show();
return;
}
if (this.getUrl()) {
this._loadUrl(this.getUrl(), args);
} else if (this.getHtml()) {
this._loadHtml(this.getHtml(), args);
} else {
this._loadHtml(
'
No URL or Html was set for this dialog! ',
args);
}
},
/**
* @method _loadHtml
* @access private
* @memberof butor.dlg.Dialog#
* @description Loads the HTML contained in the dialog.
*/
_loadHtml: function(html, args) {
this._args = args;
this._normalizeArgs();
if (this._jqe == null) {
this._showDlg(html);
}
},
/**
* @method _loadUrl
* @access private
* @memberof butor.dlg.Dialog#
* @description Loads the URL of the dialog.
*/
_loadUrl: function(url, args) {
this._args = args;
this._normalizeArgs();
if (url.indexOf('?') === -1) {
url += '?';
} else {
url += '&';
}
url += '?t=' + new Date().getTime();
var anchor = $('
');
var dlg = this;
anchor.load(url, function() {
if (dlg._jqe == null) {
dlg._showDlg(anchor.html());
}
});
},
/**
* @method tr
* @memberof butor.dlg.Dialog#
* @description Translates a text.
* @param {String} key - The key of the text to translate.
* @see butor.App#tr
*/
tr: function(key) {
return App.tr(key, this._dlgOpts.bundleId);
}
});
/**
* Notifies dialog resizing.
* @event butor.dlg.Dialog#resized
*/
/**
* Notifies dialog maximizing.
* @event butor.dlg.Dialog#maximized
*/
/**
* Notifies dialog minifying.
* @event butor.dlg.Dialog#minimized
*/
/**
* Notifies the dialog is cascaded.
* @event butor.dlg.Dialog#cascaded
*/
//# sourceURL=butor.bdocs.dlg-bootstrap.js
