From 7385974df22f8eb3f879c6856bf93ee50f542acf Mon Sep 17 00:00:00 2001 From: secretr Date: Thu, 16 Feb 2012 08:57:35 +0000 Subject: [PATCH] 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. --- e107_files/e_jslib.php | 6 +- e107_files/jslib/core/dialog.js | 131 +++++++++++++++++++++++--------- 2 files changed, 98 insertions(+), 39 deletions(-) diff --git a/e107_files/e_jslib.php b/e107_files/e_jslib.php index 951256847..f4d82afb9 100644 --- a/e107_files/e_jslib.php +++ b/e107_files/e_jslib.php @@ -8,10 +8,8 @@ * * Javascript files consolidation script (gzip compression) * - * $Source: /cvs_backup/e107_0.8/e107_files/e_jslib.php,v $ - * $Revision$ - * $Date$ - * $Author$ + * $URL$ + * $Id$ * */ diff --git a/e107_files/jslib/core/dialog.js b/e107_files/jslib/core/dialog.js index 98ebc2610..f42948b6f 100644 --- a/e107_files/jslib/core/dialog.js +++ b/e107_files/jslib/core/dialog.js @@ -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 */ e107Base.setPrefs('core-dialog', { id: null, - theme : '', - shadow: false, - shadowTheme: '', - top: null, - left: null, - width: 300, - height: 200, - minWidth: 200, - minHeight: 100, - maxHeight: null, - maxWidth: null, - maxAdaptWidth: null, - maxAdaptHeight: null, + theme : '', /* omit to use default */ + shadow: false, /* use shadow widget, need to be extra included (shadow.js) */ + shadowTheme: '', /* if the above is true, which theme to use for shadow widget, omit for default */ + top: null, /* initial window position */ + left: null, /* initial window left position */ + width: 300, /* initial window width */ + height: 200, /* initial window height */ + minWidth: 200, /* window min width */ + minHeight: 100, /* window min height */ + maxHeight: null, /* window max height */ + maxWidth: null, /* window max width */ + maxAdaptWidth: null, /* window max width when adapt() is called (fit the content when e.g. dynamically added via AJAX) */ + maxAdaptHeight: null, /* window max height when adapt() is called (fit the content when e.g. dynamically added via AJAX) */ gridX: 1, gridY: 1, - wired: false, - draggable : true, - resizable : true, - activeOnClick : true, - show: Element.show, - hide: Element.hide, - maximizeEffects: true, - dialogManager: null, - positionningStrategyOffset: null, - close: 'destroy', // e107Widgets.Dialog method for closing dialog or false to disable - maximize: 'toggleMaximize', // e107Widgets.Dialog method for closing dialog or false to disable + wired: false, /* wired element shown when resizing/moving the window (browser performance) */ + draggable : true, /* allow drag, requires draggable.js */ + resizable : true, /* allow resize, requires draggable.js */ + 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 callback, used when window.show() is called, defaults to Element.show() */ + hide: Element.hide, /* hide callback, used when window.show() is called, defaults to Element.hide() */ + maximizeEffects: true, /* use effect when maximizing (uses scripty Effect library) */ + superflousEffects: false, /* enable various 'superflous' effects (uses scripty Effect library, currently used on adapt() only) */ + adaptOnAjaxContent: true, /* auto-fire adapt (only when no callback is registered) when setAjaxContent() finish AJAX update */ + dialogManager: null, /* dialog manager for the current instance, defaults to e107Widgets.DialogManagerDefault */ + 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: + * + * // 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: + * // Open a window + * //