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-old.js Maven / Gradle / Ivy
/*
* Copyright 2013-2017 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 = {};
/**
* @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 method `_init` needs to be implemented:
* it 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:
* {@link butor.dlg.Dialog#setUrl setUrl} and {@link butor.dlg.Dialog#setHtml setHtml}.
* These methods takes arguments in order to set up the content of 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 {object} dlgOpts - Options of the dialog, it is used to configure
* the dialog.
* @param {string} dlgOpts.title - Name of the dialog.
* @param {number} dlgOpts.width - Width of the dialog.
* @param {number} dlgOpts.height - Heigth of the dialog.
* @param {boolean} [dlgOpts.resizable=false] - Flag to make the dialog resizable.
* @param {boolean} [dlgOpts.maximizable=false] - Flag to make the dialog maximizable.
* @param {boolean} [dlgOpts.minimizable=false] - Flag to make the dialog minimizable.
* @param {boolean} [dlgOpts.draggable=false] - Flag to make the dialog draggable.
* @param {boolean} [dlgOpts.modal=false] - Flag to make the dialog modal.
* @param {string} dlgOpts.bundleId - ID of the bundle linked to the dialog.
*
* @example
*
*
*
*
* lorem_ipsum
*
*
* Hi, this is a second tab !
* Send an info
* Send a warning
* Send an error
*
*
*
* Cancel
* Ok
*
*
' + html + '
';
var dlg = this;
this._win = $.window({
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._win.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');
}
});
this._id = this._win.getWindowId();
// TODO App.dlg.registry[_id] = _win;
// the ui-widget-content class cut the bg color! remove it
// temporarly
$('#' + this._id + ' > div:nth-child(2)').removeClass(
"ui-widget-content");
this._jqe = this._win.getContainer();
this._dom = this._jqe; //backward compatibility. Still reference to _dom
App.translateElem(this._jqe, this._dlgOpts.bundleId);
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);
this._init();
},
/**
* @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._win.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.
*
* 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.
*
* @param {Function} args.callBack - Function which returns the configurated callback object.
* @param {jQueryElement} args.target - jQuery element targeted by the object.
* @param {String} args.mode - Current mode of the linked object.
* @param {String} args.id - ID of the linked object.
*/
show: function(args) {
if (this._win) {
this._win.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._win == 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._win == 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
*/
