1
0
mirror of https://github.com/e107inc/e107.git synced 2025-08-02 12:48:26 +02:00

Modal window (dialog) widget improvements - inline documentation with examples added, 'ajax_update_after' trigger added when window content set via ajax, improved DOM events cleanup when destroyin dialog instance.

This commit is contained in:
secretr
2012-02-16 08:57:35 +00:00
parent 49a26e420c
commit 7385974df2
2 changed files with 98 additions and 39 deletions

View File

@@ -8,10 +8,8 @@
* *
* Javascript files consolidation script (gzip compression) * Javascript files consolidation script (gzip compression)
* *
* $Source: /cvs_backup/e107_0.8/e107_files/e_jslib.php,v $ * $URL$
* $Revision$ * $Id$
* $Date$
* $Author$
* *
*/ */

View File

@@ -1,50 +1,104 @@
/**
* Copyright (C) 2008-2009 e107 Inc (e107.org)
* Released under the terms and conditions of the
* GNU General Public License (http://gnu.org).
*
* e107 Core modal window widget
* Based on Prorotype UI Window http://prototype-ui.com/
*
* $URL$
* $Id$
*/
/** /**
* Global prefs * Global prefs
*/ */
e107Base.setPrefs('core-dialog', { e107Base.setPrefs('core-dialog', {
id: null, id: null,
theme : '', theme : '', /* omit to use default */
shadow: false, shadow: false, /* use shadow widget, need to be extra included (shadow.js) */
shadowTheme: '', shadowTheme: '', /* if the above is true, which theme to use for shadow widget, omit for default */
top: null, top: null, /* initial window position */
left: null, left: null, /* initial window left position */
width: 300, width: 300, /* initial window width */
height: 200, height: 200, /* initial window height */
minWidth: 200, minWidth: 200, /* window min width */
minHeight: 100, minHeight: 100, /* window min height */
maxHeight: null, maxHeight: null, /* window max height */
maxWidth: null, maxWidth: null, /* window max width */
maxAdaptWidth: null, maxAdaptWidth: null, /* window max width when adapt() is called (fit the content when e.g. dynamically added via AJAX) */
maxAdaptHeight: null, maxAdaptHeight: null, /* window max height when adapt() is called (fit the content when e.g. dynamically added via AJAX) */
gridX: 1, gridX: 1,
gridY: 1, gridY: 1,
wired: false, wired: false, /* wired element shown when resizing/moving the window (browser performance) */
draggable : true, draggable : true, /* allow drag, requires draggable.js */
resizable : true, resizable : true, /* allow resize, requires draggable.js */
activeOnClick : true, activeOnClick : true, /* activate (set on top) when clicking on an window body, if false, activate works only on window header bar click */
show: Element.show, show: Element.show, /* show callback, used when window.show() is called, defaults to Element.show() */
hide: Element.hide, hide: Element.hide, /* hide callback, used when window.show() is called, defaults to Element.hide() */
maximizeEffects: true, maximizeEffects: true, /* use effect when maximizing (uses scripty Effect library) */
dialogManager: null, superflousEffects: false, /* enable various 'superflous' effects (uses scripty Effect library, currently used on adapt() only) */
positionningStrategyOffset: null, adaptOnAjaxContent: true, /* auto-fire adapt (only when no callback is registered) when setAjaxContent() finish AJAX update */
close: 'destroy', // e107Widgets.Dialog method for closing dialog or false to disable dialogManager: null, /* dialog manager for the current instance, defaults to e107Widgets.DialogManagerDefault */
maximize: 'toggleMaximize', // e107Widgets.Dialog method for closing dialog or false to disable positionningStrategyOffset: null, /* offset used to auto-position a window when multiple windows are opened, defaults to 20 */
close: 'destroy', /* e107Widgets.Dialog callback method for closing dialog or false to disable */
maximize: 'toggleMaximize' /* e107Widgets.Dialog method for closing dialog or false to disable */
}); });
/**
* Example usage:
* <code>
* // basic example - create, activate and show empty dialog window in the middle of the screen
* new e107Widgets.Dialog({
* id: 'unique-window-id'
* }).center().activate().show();
*
* // more advanced example - create, activate and show centered 400px300px dialog window, on top 30 position
* // set body, header and footer data;
* new e107Widgets.Dialog({
* id: 'unique-window-id',
* width: 400,
* height: 300
* }).center({top: 30}).setHeader('My Header').setFooter('My Footer').setContent('My Body').activate().show();
*
* // create from DOM example
* // DOM elements required to make it work:
* // <a href="#" id="dialog" title="Window Title">Open a window</a>
* // <div id="dialog-source" style="display: none">Window (HTML) content</a>
* $('dialog').observe('click', function(event){
* var target = event.findElement('a'), source = $('dialog-source');
* event.stop(); // prevent default
* new e107Widgets.Dialog({
* id: target.id + '-window',
* }).center({top: 30}).setHeader(target.readAttribute('title')).setContent(source.innerHTML).activate().show();
* });
*
* // AJAX example
* new e107Widgets.Dialog({
* id: 'unique-window-id',
* width: 400,
* height: 300
* }).setAjaxContent(url, roptions)..center({top: 30}).activate().show();
* </code>
*
* e107Widgets.Dialog#setAjaxContent() Options:
* Any valid e107Ajax.Request() options + additional 'onAfterComplete' callback
*
*/
e107Widgets.Dialog = Class.create(e107WidgetAbstract, { e107Widgets.Dialog = Class.create(e107WidgetAbstract, {
Version : '1.0', Version : '1.0',
style : "position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;", style : "position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;",
wiredElement: null, wiredElement: null,
events : null, events : null,
element : null, // window element element : null, /* window element */
header : null, // window header element header : null, /* window header element */
content : null, // window content element content : null, /* window content element */
footer : null, // window footer element footer : null, /* window footer element */
visible: false, // window visibility visible: false, /* window visibility */
focused: false, // windows on focus focused: false, /* windows on focus */
modal: false, // modal window modal: false, /* modal window */
zIndex: 0, zIndex: 0,
shadow: null, shadow: null,
@@ -379,6 +433,9 @@ e107Widgets.Dialog = Class.create(e107WidgetAbstract, {
if (this.centerOptions) if (this.centerOptions)
Event.stopObserving(this.dialogManager.scrollContainer, "scroll", this.centerOptions.handler); Event.stopObserving(this.dialogManager.scrollContainer, "scroll", this.centerOptions.handler);
// clean-up all content container events
this.content.stopObserving();
this.dialogManager.unregister(this); this.dialogManager.unregister(this);
this.events.notify('destroy'); this.events.notify('destroy');
this.fire('destroyed'); this.fire('destroyed');
@@ -416,6 +473,9 @@ e107Widgets.Dialog = Class.create(e107WidgetAbstract, {
this.setFooter(response.responseJSON['footer']); this.setFooter(response.responseJSON['footer']);
} }
else this.setContent(response.responseText); else this.setContent(response.responseText);
Object.extend(response.request.options, { element: this.content } );
e107Event.trigger('ajax_update_after', response.request.options, response.request.options.element);
if(this.options.adaptOnAjaxContent) this.adapt();
} }
if (Object.isFunction(afterComplete)) if (Object.isFunction(afterComplete))
@@ -1334,7 +1394,7 @@ e107Widgets.DialogManager = Class.create(e107WidgetAbstract, {
* window manager. First one is the back window, last one is the front * window manager. First one is the back window, last one is the front
* window. * window.
* *
* Example: UI.defaultWM.windows().invoke('destroy'); * Example: e107Widgets.DialogManagerDefault.windows().invoke('destroy');
*/ */
windows: function() { windows: function() {
return this.stack.windows.clone(); return this.stack.windows.clone();
@@ -1566,7 +1626,7 @@ e107Widgets.DialogManager = Class.create(e107WidgetAbstract, {
area = this.viewport.getDimensions(), area = this.viewport.getDimensions(),
winoffset = win.options.positionningStrategyOffset || win.options.positionningStrategyOffset === false ? win.options.positionningStrategyOffset : this.options.positionningStrategyOffset; winoffset = win.options.positionningStrategyOffset || win.options.positionningStrategyOffset === false ? win.options.positionningStrategyOffset : this.options.positionningStrategyOffset;
Object.isFunction(strategy) ? strategy(win, area) : strategy.position(win, area, winoffset); Object.isFunction(strategy) ? strategy(win, area, winoffset) : strategy.position(win, area, winoffset);
} }
}); });
@@ -1653,7 +1713,8 @@ Object.extend(Number.prototype, {
}); });
document.observe('dom:loaded', function() { document.observe('dom:loaded', function() {
e107Widgets.DialogManagerDefault = new e107Widgets.DialogManager(); if(typeof e107Widgets['DialogManagerDefault'] == 'undefined')
e107Widgets.DialogManagerDefault = new e107Widgets.DialogManager();
}); });