Basic window inside a document.
Creating a simple window.
let tb = document.createElement('div'); let wnd = new mxWindow('Title', tb, 100, 100, 200, 200, true, true); wnd.setVisible(true);
Creating a window that contains an iframe.
let frame = document.createElement('iframe'); frame.setAttribute('width', '192px'); frame.setAttribute('height', '172px'); frame.setAttribute('src', 'http://www.example.com/'); frame.style.backgroundColor = 'white'; let w = document.body.clientWidth; let h = (document.body.clientHeight || document.documentElement.clientHeight); let 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); };
wnd.addListener(mxEvent.MOVE, function(e) { wnd.setLocation(Math.max(0, wnd.getX()), Math.max(0, wnd.getY())); });
mxEvent.addListener(window, 'resize', mxUtils.bind(this, function() { let iw = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; let ih = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; let x = this.window.getX(); let 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); } }));
mxWindow | Basic window inside a document. |
Events | |
mxEvent. | Fires before the window is moved. |
mxEvent.MOVE | Fires while the window is being moved. |
mxEvent. | Fires after the window is moved. |
mxEvent. | Fires before the window is resized. |
mxEvent. | Fires while the window is being resized. |
mxEvent. | Fires after the window is resized. |
mxEvent. | Fires after the window is maximized. |
mxEvent. | Fires after the window is minimized. |
mxEvent. | Fires after the window is normalized, that is, it returned from maximized or minimized state. |
mxEvent. | Fires after a window is activated. |
mxEvent.SHOW | Fires after the window is shown. |
mxEvent.HIDE | Fires after the window is hidden. |
mxEvent. | Fires before the window is closed. |
mxEvent. | Fires before the window is destroyed. |
Functions | |
mxWindow | Constructs a new window with the given dimension and title to display the specified content. |
Variables | |
closeImage | URL of the image to be used for the close icon in the titlebar. |
minimizeImage | URL of the image to be used for the minimize icon in the titlebar. |
normalizeImage | URL of the image to be used for the normalize icon in the titlebar. |
maximizeImage | URL of the image to be used for the maximize icon in the titlebar. |
resizeImage | URL of the image to be used for the resize icon. |
visible | Boolean flag that represents the visible state of the window. |
minimumSize | mxRectangle that specifies the minimum width and height of the window. |
destroyOnClose | Specifies if the window should be destroyed when it is closed. |
contentHeightCorrection | Defines the correction factor for computing the height of the contentWrapper. |
title | Reference to the DOM node (TD) that contains the title. |
content | Reference to the DOM node that represents the window content. |
Functions | |
init | Initializes the DOM tree that represents the window. |
setTitle | Sets the window title to the given string. |
setScrollable | Sets if the window contents should be scrollable. |
activate | Puts the window on top of all other windows. |
getElement | Returuns the outermost DOM node that makes up the window. |
fit | Makes sure the window is inside the client area of the window. |
isResizable | Returns true if the window is resizable. |
setResizable | Sets if the window should be resizable. |
setSize | Sets the size of the window. |
setMinimizable | Sets if the window is minimizable. |
getMinimumSize | Returns an mxRectangle that specifies the size for the minimized window. |
installMinimizeHandler | Installs the event listeners required for minimizing the window. |
setMaximizable | Sets if the window is maximizable. |
installMaximizeHandler | Installs the event listeners required for maximizing the window. |
installMoveHandler | Installs the event listeners required for moving the window. |
setLocation | Sets the upper, left corner of the window. |
getX | Returns the current position on the x-axis. |
getY | Returns the current position on the y-axis. |
installCloseHandler | Adds the closeImage as a new image node in <closeImg> and installs the <close> event. |
setImage | Sets the image associated with the window. |
setClosable | Sets the image associated with the window. |
isVisible | Returns true if the window is visible. |
setVisible | Shows or hides the window depending on the given flag. |
show | Shows the window. |
hide | Hides the window. |
destroy | Destroys the window and removes all associated resources. |
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:
style | Base style for the window. |
style+Title | Style for the window title. |
style+Pane | Style 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.
title | String that represents the title of the new window. |
content | DOM node that is used as the window content. |
x | X-coordinate of the window location. |
y | Y-coordinate of the window location. |
width | Width of the window. |
height | Optional height of the window. Default is to match the height of the content at the specified width. |
minimizable | Optional boolean indicating if the window is minimizable. Default is true. |
movable | Optional boolean indicating if the window is movable. Default is true. |
replaceNode | Optional DOM node that the window should replace. |
style | Optional base classname for the window elements. Default is mxWindow. |
mxWindow.prototype.minimumSize
mxRectangle that specifies the minimum width and height of the window. Default is (50, 40).
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.
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'; }
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.
mxWindow.prototype.installCloseHandler = function()
Adds the closeImage as a new image node in <closeImg> and installs the <close> event.
mxWindow.prototype.destroy = function()
Destroys the window and removes all associated resources. Fires a destroy event prior to destroying the window.
Constructs a new window with the given dimension and title to display the specified content.
function mxWindow( title, content, x, y, width, height, minimizable, movable, replaceNode, style )
URL of the image to be used for the close icon in the titlebar.
mxWindow.prototype.closeImage
URL of the image to be used for the minimize icon in the titlebar.
mxWindow.prototype.minimizeImage
URL of the image to be used for the normalize icon in the titlebar.
mxWindow.prototype.normalizeImage
URL of the image to be used for the maximize icon in the titlebar.
mxWindow.prototype.maximizeImage
URL of the image to be used for the resize icon.
mxWindow.prototype.resizeImage
Boolean flag that represents the visible state of the window.
mxWindow.prototype.visible
mxRectangle that specifies the minimum width and height of the window.
mxWindow.prototype.minimumSize
Specifies if the window should be destroyed when it is closed.
mxWindow.prototype.destroyOnClose
Defines the correction factor for computing the height of the contentWrapper.
mxWindow.prototype.contentHeightCorrection
Reference to the DOM node (TD) that contains the title.
mxWindow.prototype.title
Reference to the DOM node that represents the window content.
mxWindow.prototype.content
Initializes the DOM tree that represents the window.
mxWindow.prototype.init = function( x, y, width, height, style )
Sets the window title to the given string.
mxWindow.prototype.setTitle = function( title )
Sets if the window contents should be scrollable.
mxWindow.prototype.setScrollable = function( scrollable )
Puts the window on top of all other windows.
mxWindow.prototype.activate = function()
Returuns the outermost DOM node that makes up the window.
mxWindow.prototype.getElement = function()
Makes sure the window is inside the client area of the window.
mxWindow.prototype.fit = function()
Returns true if the window is resizable.
mxWindow.prototype.isResizable = function()
Sets if the window should be resizable.
mxWindow.prototype.setResizable = function( resizable )
Sets the size of the window.
mxWindow.prototype.setSize = function( width, height )
Sets if the window is minimizable.
mxWindow.prototype.setMinimizable = function( minimizable )
Returns an mxRectangle that specifies the size for the minimized window.
mxWindow.prototype.getMinimumSize = function()
Installs the event listeners required for minimizing the window.
mxWindow.prototype.installMinimizeHandler = function()
Sets if the window is maximizable.
mxWindow.prototype.setMaximizable = function( maximizable )
Installs the event listeners required for maximizing the window.
mxWindow.prototype.installMaximizeHandler = function()
Installs the event listeners required for moving the window.
mxWindow.prototype.installMoveHandler = function()
Sets the upper, left corner of the window.
mxWindow.prototype.setLocation = function( x, y )
Returns the current position on the x-axis.
mxWindow.prototype.getX = function()
Returns the current position on the y-axis.
mxWindow.prototype.getY = function()
Adds the closeImage as a new image node in closeImg and installs the close event.
mxWindow.prototype.installCloseHandler = function()
Sets the image associated with the window.
mxWindow.prototype.setImage = function( image )
Sets the image associated with the window.
mxWindow.prototype.setClosable = function( closable )
Returns true if the window is visible.
mxWindow.prototype.isVisible = function()
Shows or hides the window depending on the given flag.
mxWindow.prototype.setVisible = function( visible )
Shows the window.
mxWindow.prototype.show = function()
Hides the window.
mxWindow.prototype.hide = function()
Destroys the window and removes all associated resources.
mxWindow.prototype.destroy = function()