mxWindow

Basic window inside a document.

Examples

Creating a simple window.

var tb = document.createElement('div');
var wnd = new mxWindow('Title', tb, 100, 100, 200, 200, true, true);
wnd.setVisible(true);

Creating a window that contains an iframe.

var frame = document.createElement('iframe');
frame.setAttribute('width', '192px');
frame.setAttribute('height', '172px');
frame.setAttribute('src', 'http://www.example.com/');
frame.style.backgroundColor = 'white';

var w = document.body.clientWidth;
var h = (document.body.clientHeight || document.documentElement.clientHeight);
var wnd = new mxWindow('Title', frame, (w-200)/2, (h-200)/3, 200, 200);
wnd.setVisible(true);

To limit the movement of a window, eg. to keep it from being moved beyond the top, left corner the following method can be overridden (recommended):

wnd.setLocation = function(x, y)
{
  x = Math.max(0, x);
  y = Math.max(0, y);
  mxWindow.prototype.setLocation.apply(this, arguments);
};

Or the following event handler can be used

wnd.addListener(mxEvent.MOVE, function(e)
{
  wnd.setLocation(Math.max(0, wnd.getX()), Math.max(0, wnd.getY()));
});

To keep a window inside the current window

mxEvent.addListener(window, 'resize', mxUtils.bind(this, function()
{
  var iw = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  var ih = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

  var x = this.window.getX();
  var y = this.window.getY();

  if (x + this.window.table.clientWidth > iw)
  {
    x = Math.max(0, iw - this.window.table.clientWidth);
  }

  if (y + this.window.table.clientHeight > ih)
  {
    y = Math.max(0, ih - this.window.table.clientHeight);
  }

  if (this.window.getX() != x || this.window.getY() != y)
  {
    this.window.setLocation(x, y);
  }
}));
Summary
mxWindowBasic window inside a document.
Events
mxEvent.MOVE_STARTFires before the window is moved.
mxEvent.MOVEFires while the window is being moved.
mxEvent.MOVE_ENDFires after the window is moved.
mxEvent.RESIZE_STARTFires before the window is resized.
mxEvent.RESIZEFires while the window is being resized.
mxEvent.RESIZE_ENDFires after the window is resized.
mxEvent.MAXIMIZEFires after the window is maximized.
mxEvent.MINIMIZEFires after the window is minimized.
mxEvent.NORMALIZEFires after the window is normalized, that is, it returned from maximized or minimized state.
mxEvent.ACTIVATEFires after a window is activated.
mxEvent.SHOWFires after the window is shown.
mxEvent.HIDEFires after the window is hidden.
mxEvent.CLOSEFires before the window is closed.
mxEvent.DESTROYFires before the window is destroyed.
Functions
mxWindowConstructs a new window with the given dimension and title to display the specified content.
Variables
closeImageURL of the image to be used for the close icon in the titlebar.
minimizeImageURL of the image to be used for the minimize icon in the titlebar.
normalizeImageURL of the image to be used for the normalize icon in the titlebar.
maximizeImageURL of the image to be used for the maximize icon in the titlebar.
resizeImageURL of the image to be used for the resize icon.
visibleBoolean flag that represents the visible state of the window.
minimumSizemxRectangle that specifies the minimum width and height of the window.
destroyOnCloseSpecifies if the window should be destroyed when it is closed.
contentHeightCorrectionDefines the correction factor for computing the height of the contentWrapper.
titleReference to the DOM node (TD) that contains the title.
contentReference to the DOM node that represents the window content.
Functions
initInitializes the DOM tree that represents the window.
setTitleSets the window title to the given string.
setScrollableSets if the window contents should be scrollable.
activatePuts the window on top of all other windows.
getElementReturuns the outermost DOM node that makes up the window.
fitMakes sure the window is inside the client area of the window.
isResizableReturns true if the window is resizable.
setResizableSets if the window should be resizable.
setSizeSets the size of the window.
setMinimizableSets if the window is minimizable.
getMinimumSizeReturns an mxRectangle that specifies the size for the minimized window.
installMinimizeHandlerInstalls the event listeners required for minimizing the window.
setMaximizableSets if the window is maximizable.
installMaximizeHandlerInstalls the event listeners required for maximizing the window.
installMoveHandlerInstalls the event listeners required for moving the window.
setLocationSets the upper, left corner of the window.
getXReturns the current position on the x-axis.
getYReturns the current position on the y-axis.
installCloseHandlerAdds the closeImage as a new image node in <closeImg> and installs the <close> event.
setImageSets the image associated with the window.
setClosableSets the image associated with the window.
isVisibleReturns true if the window is visible.
setVisibleShows or hides the window depending on the given flag.
showShows the window.
hideHides the window.
destroyDestroys the window and removes all associated resources.

Events

mxEvent.MOVE_START

Fires before the window is moved.  The <code>event</code> property contains the corresponding mouse event.

mxEvent.MOVE

Fires while the window is being moved.  The <code>event</code> property contains the corresponding mouse event.

mxEvent.MOVE_END

Fires after the window is moved.  The <code>event</code> property contains the corresponding mouse event.

mxEvent.RESIZE_START

Fires before the window is resized.  The <code>event</code> property contains the corresponding mouse event.

mxEvent.RESIZE

Fires while the window is being resized.  The <code>event</code> property contains the corresponding mouse event.

mxEvent.RESIZE_END

Fires after the window is resized.  The <code>event</code> property contains the corresponding mouse event.

mxEvent.MAXIMIZE

Fires after the window is maximized.  The <code>event</code> property contains the corresponding mouse event.

mxEvent.MINIMIZE

Fires after the window is minimized.  The <code>event</code> property contains the corresponding mouse event.

mxEvent.NORMALIZE

Fires after the window is normalized, that is, it returned from maximized or minimized state.  The <code>event</code> property contains the corresponding mouse event.

mxEvent.ACTIVATE

Fires after a window is activated.  The <code>previousWindow</code> property contains the previous window.  The event sender is the active window.

mxEvent.SHOW

Fires after the window is shown.  This event has no properties.

mxEvent.HIDE

Fires after the window is hidden.  This event has no properties.

mxEvent.CLOSE

Fires before the window is closed.  The <code>event</code> property contains the corresponding mouse event.

mxEvent.DESTROY

Fires before the window is destroyed.  This event has no properties.

Functions

mxWindow

function mxWindow(title,
content,
x,
y,
width,
height,
minimizable,
movable,
replaceNode,
style)

Constructs a new window with the given dimension and title to display the specified content.  The window elements use the given style as a prefix for the classnames of the respective window elements, namely, the window title and window pane.  The respective postfixes are appended to the given stylename as follows:

styleBase style for the window.
style+TitleStyle for the window title.
style+PaneStyle for the window pane.

The default value for style is mxWindow, resulting in the following classnames for the window elements: mxWindow, mxWindowTitle and mxWindowPane.

If replaceNode is given then the window replaces the given DOM node in the document.

Parameters

titleString that represents the title of the new window.
contentDOM node that is used as the window content.
xX-coordinate of the window location.
yY-coordinate of the window location.
widthWidth of the window.
heightOptional height of the window.  Default is to match the height of the content at the specified width.
minimizableOptional boolean indicating if the window is minimizable.  Default is true.
movableOptional boolean indicating if the window is movable.  Default is true.
replaceNodeOptional DOM node that the window should replace.
styleOptional base classname for the window elements.  Default is mxWindow.

Variables

closeImage

mxWindow.prototype.closeImage

URL of the image to be used for the close icon in the titlebar.

minimizeImage

mxWindow.prototype.minimizeImage

URL of the image to be used for the minimize icon in the titlebar.

normalizeImage

mxWindow.prototype.normalizeImage

URL of the image to be used for the normalize icon in the titlebar.

maximizeImage

mxWindow.prototype.maximizeImage

URL of the image to be used for the maximize icon in the titlebar.

resizeImage

mxWindow.prototype.resizeImage

URL of the image to be used for the resize icon.

visible

mxWindow.prototype.visible

Boolean flag that represents the visible state of the window.

minimumSize

mxWindow.prototype.minimumSize

mxRectangle that specifies the minimum width and height of the window.  Default is (50, 40).

destroyOnClose

mxWindow.prototype.destroyOnClose

Specifies if the window should be destroyed when it is closed.  If this is false then the window is hidden using setVisible.  Default is true.

contentHeightCorrection

mxWindow.prototype.contentHeightCorrection

Defines the correction factor for computing the height of the contentWrapper.  Default is 6 for IE 7/8 standards mode and 2 for all other browsers and modes.

title

mxWindow.prototype.title

Reference to the DOM node (TD) that contains the title.

content

mxWindow.prototype.content

Reference to the DOM node that represents the window content.

Functions

init

mxWindow.prototype.init = function(x,
y,
width,
height,
style)

Initializes the DOM tree that represents the window.

setTitle

mxWindow.prototype.setTitle = function(title)

Sets the window title to the given string.  HTML markup inside the title will be escaped.

setScrollable

mxWindow.prototype.setScrollable = function(scrollable)

Sets if the window contents should be scrollable.

activate

mxWindow.prototype.activate = function()

Puts the window on top of all other windows.

getElement

mxWindow.prototype.getElement = function()

Returuns the outermost DOM node that makes up the window.

fit

mxWindow.prototype.fit = function()

Makes sure the window is inside the client area of the window.

isResizable

mxWindow.prototype.isResizable = function()

Returns true if the window is resizable.

setResizable

mxWindow.prototype.setResizable = function(resizable)

Sets if the window should be resizable.  To avoid interference with some built-in features of IE10 and later, the use of the following code is recommended if there are resizable mxWindows in the page:

if (mxClient.IS_POINTER)
{
  document.body.style.msTouchAction = 'none';
}

setSize

mxWindow.prototype.setSize = function(width,
height)

Sets the size of the window.

setMinimizable

mxWindow.prototype.setMinimizable = function(minimizable)

Sets if the window is minimizable.

getMinimumSize

mxWindow.prototype.getMinimumSize = function()

Returns an mxRectangle that specifies the size for the minimized window.  A width or height of 0 means keep the existing width or height.  This implementation returns the height of the window title and keeps the width.

installMinimizeHandler

mxWindow.prototype.installMinimizeHandler = function()

Installs the event listeners required for minimizing the window.

setMaximizable

mxWindow.prototype.setMaximizable = function(maximizable)

Sets if the window is maximizable.

installMaximizeHandler

mxWindow.prototype.installMaximizeHandler = function()

Installs the event listeners required for maximizing the window.

installMoveHandler

mxWindow.prototype.installMoveHandler = function()

Installs the event listeners required for moving the window.

setLocation

mxWindow.prototype.setLocation = function(x,
y)

Sets the upper, left corner of the window.

getX

mxWindow.prototype.getX = function()

Returns the current position on the x-axis.

getY

mxWindow.prototype.getY = function()

Returns the current position on the y-axis.

installCloseHandler

mxWindow.prototype.installCloseHandler = function()

Adds the closeImage as a new image node in <closeImg> and installs the <close> event.

setImage

mxWindow.prototype.setImage = function(image)

Sets the image associated with the window.

Parameters

imageURL of the image to be used.

setClosable

mxWindow.prototype.setClosable = function(closable)

Sets the image associated with the window.

Parameters

closableBoolean specifying if the window should be closable.

isVisible

mxWindow.prototype.isVisible = function()

Returns true if the window is visible.

setVisible

mxWindow.prototype.setVisible = function(visible)

Shows or hides the window depending on the given flag.

Parameters

visibleBoolean indicating if the window should be made visible.

show

mxWindow.prototype.show = function()

Shows the window.

hide

mxWindow.prototype.hide = function()

Hides the window.

destroy

mxWindow.prototype.destroy = function()

Destroys the window and removes all associated resources.  Fires a destroy event prior to destroying the window.

function mxWindow(title,
content,
x,
y,
width,
height,
minimizable,
movable,
replaceNode,
style)
Constructs a new window with the given dimension and title to display the specified content.
mxWindow.prototype.closeImage
URL of the image to be used for the close icon in the titlebar.
mxWindow.prototype.minimizeImage
URL of the image to be used for the minimize icon in the titlebar.
mxWindow.prototype.normalizeImage
URL of the image to be used for the normalize icon in the titlebar.
mxWindow.prototype.maximizeImage
URL of the image to be used for the maximize icon in the titlebar.
mxWindow.prototype.resizeImage
URL of the image to be used for the resize icon.
mxWindow.prototype.visible
Boolean flag that represents the visible state of the window.
mxWindow.prototype.minimumSize
mxRectangle that specifies the minimum width and height of the window.
Extends mxPoint to implement a 2-dimensional rectangle with double precision coordinates.
mxWindow.prototype.destroyOnClose
Specifies if the window should be destroyed when it is closed.
mxWindow.prototype.contentHeightCorrection
Defines the correction factor for computing the height of the contentWrapper.
mxWindow.prototype.title
Reference to the DOM node (TD) that contains the title.
mxWindow.prototype.content
Reference to the DOM node that represents the window content.
mxWindow.prototype.init = function(x,
y,
width,
height,
style)
Initializes the DOM tree that represents the window.
mxWindow.prototype.setTitle = function(title)
Sets the window title to the given string.
mxWindow.prototype.setScrollable = function(scrollable)
Sets if the window contents should be scrollable.
mxWindow.prototype.activate = function()
Puts the window on top of all other windows.
mxWindow.prototype.getElement = function()
Returuns the outermost DOM node that makes up the window.
mxWindow.prototype.fit = function()
Makes sure the window is inside the client area of the window.
mxWindow.prototype.isResizable = function()
Returns true if the window is resizable.
mxWindow.prototype.setResizable = function(resizable)
Sets if the window should be resizable.
mxWindow.prototype.setSize = function(width,
height)
Sets the size of the window.
mxWindow.prototype.setMinimizable = function(minimizable)
Sets if the window is minimizable.
mxWindow.prototype.getMinimumSize = function()
Returns an mxRectangle that specifies the size for the minimized window.
mxWindow.prototype.installMinimizeHandler = function()
Installs the event listeners required for minimizing the window.
mxWindow.prototype.setMaximizable = function(maximizable)
Sets if the window is maximizable.
mxWindow.prototype.installMaximizeHandler = function()
Installs the event listeners required for maximizing the window.
mxWindow.prototype.installMoveHandler = function()
Installs the event listeners required for moving the window.
mxWindow.prototype.setLocation = function(x,
y)
Sets the upper, left corner of the window.
mxWindow.prototype.getX = function()
Returns the current position on the x-axis.
mxWindow.prototype.getY = function()
Returns the current position on the y-axis.
mxWindow.prototype.installCloseHandler = function()
Adds the closeImage as a new image node in closeImg and installs the close event.
mxWindow.prototype.setImage = function(image)
Sets the image associated with the window.
mxWindow.prototype.setClosable = function(closable)
Sets the image associated with the window.
mxWindow.prototype.isVisible = function()
Returns true if the window is visible.
mxWindow.prototype.setVisible = function(visible)
Shows or hides the window depending on the given flag.
mxWindow.prototype.show = function()
Shows the window.
mxWindow.prototype.hide = function()
Hides the window.
mxWindow.prototype.destroy = function()
Destroys the window and removes all associated resources.
Close