TYPO3 Core

/**

* HTMLArea.Dialog class

*********************************************

* THIS OBJECT IS DEPRECATED AS OF TYPO3 4.4 *

*********************************************

*/

HTMLArea.Dialog = HTMLArea.Base.extend({

/**

* HTMLArea.Dialog constructor

*

* @param object plugin: reference to the invoking plugin

* @param string buttonId: buttonId triggering the opening of the dialog

* @param string url: url of the html document to load into the dialog window

* @param function action: function to be executed when the the dialog ends

* @param object arguments: object of variable type to be passed to the dialog

* @param object dimensions: object giving the width and height of the dialog window

* @param string showScrollbars: specifies by "yes" or "no" whether or not the dialog window should have scrollbars

* @param object dialogOpener: reference to the opener window

*

* @return boolean true if the dialog window was opened

*/

constructor : function (plugin, buttonId, url, action, arguments, dimensions, showScrollbars, dialogOpener) {

this.window = window.window ? window.window : window.self;

this.plugin = plugin;

this.buttonId = buttonId;

this.action = action;

if (typeof(arguments) !== "undefined") {

this.arguments = arguments;

}

this.plugin.dialog = this;

if (HTMLArea.Dialog[this.plugin.name] && HTMLArea.Dialog[this.plugin.name].hasOpenedWindow() && HTMLArea.Dialog[this.plugin.name].plugin != this.plugin) {

HTMLArea.Dialog[this.plugin.name].close();

}

HTMLArea.Dialog[this.plugin.name] = this;

this.dialogWindow = window.open(url, this.plugin.name + "Dialog", "toolbar=no,location=no,directories=no,menubar=no,resizable=yes,top=" + dimensions.top + ",left=" + dimensions.left + ",dependent=yes,dialog=yes,chrome=no,width=" + dimensions.width + ",height=" + dimensions.height + ",scrollbars=" + showScrollbars);

if (!this.dialogWindow) {

this.plugin.appendToLog("openDialog", "Dialog window could not be opened with url " + url);

return false;

}

if (typeof(dialogOpener) !== "undefined") {

this.dialogWindow.opener = dialogOpener;

this.dialogWindow.opener.openedDialog = this;

}

if (!this.dialogWindow.opener) {

this.dialogWindow.opener = this.window;

}

return true;

},

/**

* Adds OK and Cancel buttons to the dialogue window

*

* @return void

*/

addButtons : function() {

var self = this;

var div = this.document.createElement("div");

this.content.appendChild(div);

div.className = "buttons";

for (var i = 0; i < arguments.length; ++i) {

var btn = arguments[i];

var button = this.document.createElement("button");

div.appendChild(button);

switch (btn) {

case "ok":

button.innerHTML = this.plugin.localize("OK");

button.onclick = function() {

try {

self.callFormInputHandler();

} catch(e) { };

return false;

};

break;

case "cancel":

button.innerHTML = this.plugin.localize("Cancel");

button.onclick = function() {

self.close();

return false;

};

break;

}

}

},

/**

* Call the form input handler

*

* @return boolean false

*/

callFormInputHandler : function() {

var tags = ["input", "textarea", "select"];

var params = new Object();

for (var ti = tags.length; --ti >= 0;) {

var tag = tags[ti];

var els = this.content.getElementsByTagName(tag);

for (var j = 0; j < els.length; ++j) {

var el = els[j];

var val = el.value;

if (el.nodeName.toLowerCase() == "input") {

if (el.type == "checkbox") {

val = el.checked;

}

}

params[el.name] = val;

}

}

this.action(this, params);

return false;

},

/**

* Cheks if the dialogue has an open dialogue window

*

* @return boolean true if the dialogue has an open window

*/

hasOpenedWindow : function () {

return this.dialogWindow && !this.dialogWindow.closed;

},

/**

* Initialize the dialog window: load the stylesheets, localize labels, resize if required, etc.

* This function MUST be invoked from the dialog window in the onLoad event handler

*

* @param boolean noResize: if true the window in not resized, but may be centered

*

* @return void

*/

initialize : function (noLocalize, noResize, noStyle) {

this.dialogWindow.HTMLArea = HTMLArea;

this.dialogWindow.dialog = this;

// Capture unload and escape events

this.captureEvents();

// Get stylesheets for the dialog window

if (!noStyle) this.loadStyle();

// Localize the labels of the popup window

if (!noLocalize) this.localize();

// Resize the dialog window to its contents

if (!noResize) this.resize(noResize);

},

/**

* Load the stylesheets in the dialog window

*

* @return void

*/

loadStyle : function () {

var head = this.dialogWindow.document.getElementsByTagName("head")[0];

var link = this.dialogWindow.document.createElement("link");

link.rel = "stylesheet";

link.type = "text/css";

link.href = HTMLArea.editorCSS;

if (link.href.indexOf("http") == -1 && !Ext.isIE) link.href = HTMLArea.hostUrl + link.href;

head.appendChild(link);

},

/**

* Localize the labels contained in the dialog window

*

* @return void

*/

localize : function () {

var label;

var types = ["input", "label", "option", "select", "legend", "span", "td", "button", "div", "h1", "h2", "a"];

for (var type = 0; type < types.length; ++type) {

var elements = this.dialogWindow.document.getElementsByTagName(types[type]);

for (var i = elements.length; --i >= 0;) {

var element = elements[i];

if (element.firstChild && element.firstChild.data) {

label = this.plugin.localize(element.firstChild.data);

if (label) element.firstChild.data = label;

}

if (element.title) {

label = this.plugin.localize(element.title);

if (label) element.title = label;

}

// resetting the selected option for Mozilla

if (types[type] == "option" && element.selected ) {

element.selected = false;

element.selected = true;

}

}

}

label = this.plugin.localize(this.dialogWindow.document.title);

if (label) this.dialogWindow.document.title = label;

},

/**

* Resize the dialog window to its contents

*

* @param boolean noResize: if true the window in not resized, but may be centered

*

* @return void

*/

resize : function (noResize) {

var buttonConfiguration = this.plugin.editorConfiguration.buttons[this.plugin.editorConfiguration.convertButtonId[this.buttonId]];

if (!this.plugin.editorConfiguration.dialogueWindows.doNotResize

&& (!buttonConfiguration || !buttonConfiguration.dialogueWindow || !buttonConfiguration.dialogueWindow.doNotResize)) {

// Resize if allowed

var dialogWindow = this.dialogWindow;

var doc = dialogWindow.document;

var content = doc.getElementById("content");

// As of Google Chrome build 1798, window resizeTo and resizeBy are completely erratic: do nothing

if (Ext.isGecko || ((Ext.isIE || Ext.isOpera || (Ext.isWebKit && !Ext.isChrome)) && content)) {

var self = this;

setTimeout( function() {

if (!noResize) {

if (content) {

self.resizeToContent(content);

} else if (dialogWindow.sizeToContent) {

dialogWindow.sizeToContent();

}

}

self.centerOnParent();

}, 75);

} else if (!noResize) {

var body = doc.body;

if (Ext.isIE) {

var innerX = (doc.documentElement && doc.documentElement.clientWidth) ? doc.documentElement.clientWidth : body.clientWidth;

var innerY = (doc.documentElement && doc.documentElement.clientHeight) ? doc.documentElement.clientHeight : body.clientHeight;

var pageY = Math.max(body.scrollHeight, body.offsetHeight);

if (innerY == pageY) {

dialogWindow.resizeTo(body.scrollWidth, body.scrollHeight + 80);

} else {

dialogWindow.resizeBy((innerX < body.scrollWidth) ? (Math.max(body.scrollWidth, body.offsetWidth) - innerX) : 0, (body.scrollHeight - body.offsetHeight));

}

// As of Google Chrome build 1798, window resizeTo and resizeBy are completely erratic: do nothing

} else if (Ext.isSafari || Ext.isOpera) {

dialogWindow.resizeTo(dialogWindow.innerWidth, body.offsetHeight + 10);

if (dialogWindow.innerHeight < body.scrollHeight) {

dialogWindow.resizeBy(0, (body.scrollHeight - dialogWindow.innerHeight) + 10);

}

}

this.centerOnParent();

} else {

this.centerOnParent();

}

} else {

this.centerOnParent();

}

},

/**

* Resize the Opera dialog window to its contents, based on size of content div

*

* @param object content: reference to the div (may also be form) section containing the contents of the dialog window

*

* @return void

*/

resizeToContent : function(content) {

var dialogWindow = this.dialogWindow;

var doc = dialogWindow.document;

var docElement = doc.documentElement;

var body = doc.body;

var width = 0, height = 0;

var contentWidth = content.offsetWidth;

var contentHeight = content.offsetHeight;

if (Ext.isGecko || Ext.isWebKit) {

dialogWindow.resizeTo(contentWidth, contentHeight + (Ext.isWebKit ? 40 : (Ext.isGecko2 ? 75 : 95)));

} else {

dialogWindow.resizeTo(contentWidth + 200, contentHeight + 200);

if (dialogWindow.innerWidth) {

width = dialogWindow.innerWidth;

height = dialogWindow.innerHeight;

} else if (docElement && docElement.clientWidth) {

width = docElement.clientWidth;

height = docElement.clientHeight;

} else if (body && body.clientWidth) {

width = body.clientWidth;

height = body.clientHeight;

}

dialogWindow.resizeTo(contentWidth + ((contentWidth + 200 ) - width), contentHeight + ((contentHeight + 200) - (height - 16)));

}

},

/**

* Center the dialogue window on the parent window

*

* @return void

*/

centerOnParent : function () {

var buttonConfiguration = this.plugin.editorConfiguration.buttons[this.plugin.editorConfiguration.convertButtonId[this.buttonId]];

if (!this.plugin.editorConfiguration.dialogueWindows.doNotCenter && (!buttonConfiguration || !buttonConfiguration.dialogueWindow || !buttonConfiguration.dialogueWindow.doNotCenter)) {

var dialogWindow = this.dialogWindow;

var doc = dialogWindow.document;

var body = doc.body;

// Center on parent if allowed

if (!Ext.isIE) {

var x = dialogWindow.opener.screenX + (dialogWindow.opener.outerWidth - dialogWindow.outerWidth) / 2;

var y = dialogWindow.opener.screenY + (dialogWindow.opener.outerHeight - dialogWindow.outerHeight) / 2;

} else {

var W = body.offsetWidth;

var H = body.offsetHeight;

var x = (screen.availWidth - W) / 2;

var y = (screen.availHeight - H) / 2;

}

// As of build 1798, Google Chrome moveTo breaks the window dimensions: do nothing

if (!Ext.isChrome) {

try {

dialogWindow.moveTo(x, y);

} catch(e) { }

}

}

},

/**

* Perform the action function when the dialog end

*

* @return void

*/

performAction : function (val) {

if (val && this.action) {

this.action(val);

}

},

/**

* Bring the focus on the dialog window

*

* @return void

*/

focus : function () {

if (this.hasOpenedWindow()) {

this.dialogWindow.focus();

}

},

/**

* Close the dialog window

*

* @return void

*/

close : function () {

if (this.dialogWindow) {

try {

if (this.dialogWindow.openedDialog) {

this.dialogWindow.openedDialog.close();

}

} catch(e) { }

HTMLArea.Dialog[this.plugin.name] = null;

if (!this.dialogWindow.closed) {

this.dialogWindow.dialog = null;

if (Ext.isWebKit || Ext.isIE) {

this.dialogWindow.blur();

}

this.dialogWindow.close();

// Safari 3.1.2 does not set the closed flag

if (!this.dialogWindow.closed) {

this.dialogWindow = null;

}

}

// Opera unload event may be triggered after the editor iframe is gone

if (this.plugin.editor._iframe) {

this.plugin.editor.toolbar.update();

}

}

return false;

},

/**

* Make function reference in order to avoid memory leakage in IE

*

* @param string functionName: the name of the dialog function to be invoked

*

* @return function function definition invoking the specified function of the dialog

*/

makeFunctionReference : function (functionName) {

var self = this;

return (function(arg1, arg2) {

self[functionName](arg1, arg2);});

},

/**

* Escape event handler

*

* @param object ev: the event

*

* @return boolean false if the event was handled

*/

closeOnEscape : function(event) {

var ev = event.browserEvent;

if (ev.keyCode == 27) {

if (!Ext.isIE) {

var parentWindow = ev.currentTarget.defaultView;

} else {

var parentWindow = ev.srcElement.parentNode.parentNode.parentWindow;

}

if (parentWindow && parentWindow.dialog) {

// If the dialogue window as an onEscape function, invoke it

if (typeof(parentWindow.onEscape) == "function") {

parentWindow.onEscape(ev);

}

if (parentWindow.dialog) {

parentWindow.dialog.close();

}

return false;

}

}

return true;

},

/**

* Capture unload and escape events

*

* @return void

*/

captureEvents : function (skipUnload) {

// Capture unload events on the dialogue window and the editor frame

if (!Ext.isIE && this.plugin.editor._iframe.contentWindow) {

Ext.EventManager.on(this.plugin.editor._iframe.contentWindow, 'unload', this.close, this, {single: true});

}

if (!skipUnload) {

Ext.EventManager.on(this.dialogWindow, 'unload', this.close, this, {single: true});

}

// Capture escape key on the dialogue window

Ext.EventManager.on(this.dialogWindow.document, 'keypress', this.closeOnEscape, this, {single: true});

}

});