Class MaxWindow

Basic window inside a document.

Creating a simple window.

Example

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

Creating a window that contains an iframe.

Example

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 MaxWindow('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(x, y)
{
  x = Math.max(0, x);
  y = Math.max(0, y);
  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);
  }
}));

Event: mxEvent.MOVE_START

Fires before the window is moved. The event property contains the corresponding mouse event.

Event: mxEvent.MOVE

Fires while the window is being moved. The event property contains the corresponding mouse event.

Event: mxEvent.MOVE_END

Fires after the window is moved. The event property contains the corresponding mouse event.

Event: mxEvent.RESIZE_START

Fires before the window is resized. The event property contains the corresponding mouse event.

Event: mxEvent.RESIZE

Fires while the window is being resized. The event property contains the corresponding mouse event.

Event: mxEvent.RESIZE_END

Fires after the window is resized. The event property contains the corresponding mouse event.

Event: mxEvent.MAXIMIZE

Fires after the window is maximized. The event property contains the corresponding mouse event.

Event: mxEvent.MINIMIZE

Fires after the window is minimized. The event property contains the corresponding mouse event.

Event: mxEvent.NORMALIZE

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

Event: mxEvent.ACTIVATE

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

Event: mxEvent.SHOW

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

Event: mxEvent.HIDE

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

Event: mxEvent.CLOSE

Fires before the window is closed. The event property contains the corresponding mouse event.

Event: mxEvent.DESTROY

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

MaxWindow

Hierarchy (view full)

Constructors

constructor

Properties

buttons closeImage closeImg content contentWrapper destroyOnClose div eventListeners eventsEnabled eventSource image maximize maximizeImage minimize minimizeImage minimumSize normalizeImage resize resizeImage table td title visible

Methods

activate addListener destroy fireEvent fit getElement getEventSource getMinimumSize getX getY hide init installCloseHandler installMaximizeHandler installMinimizeHandler installMoveHandler isEventsEnabled isResizable isVisible removeListener setClosable setEventsEnabled setEventSource setImage setLocation setMaximizable setMinimizable setResizable setScrollable setSize setTitle setVisible show

Constructors

constructor

  • new MaxWindow(title, content, x, y, width?, height?, minimizable?, movable?, replaceNode?, style?): MaxWindow

  • Parameters

    • title: string
    • content: null | HTMLElement
    • x: number
    • y: number
    • width: null | number = null
    • height: null | number = null
    • minimizable: boolean = true
    • movable: boolean = true
    • replaceNode: null | HTMLElement = null
    • Optionalstyle: string

    Returns MaxWindow

Properties

buttons

buttons: HTMLElement

closeImage

closeImage: string = ...

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

closeImg

closeImg: HTMLElement

content

content: HTMLElement

Reference to the DOM node that represents the window content.

contentWrapper

contentWrapper: HTMLElement

destroyOnClose

destroyOnClose: boolean = true

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

div

div: HTMLElement

eventListeners

eventListeners: EventListenerObject[] = []

Holds the event names and associated listeners in an array. The array contains the event name followed by the respective listener for each registered listener.

eventsEnabled

eventsEnabled: boolean = true

Specifies if events can be fired. Default is true.

eventSource

eventSource: null | EventTarget = null

Optional source for events. Default is null.

image

image: HTMLImageElement

maximize

maximize: HTMLElement

maximizeImage

maximizeImage: string = ...

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

minimize

minimize: HTMLElement

minimizeImage

minimizeImage: string = ...

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

minimumSize

minimumSize: Rectangle = ...

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

normalizeImage

normalizeImage: string = ...

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

resize

resize: HTMLElement

resizeImage

resizeImage: string = ...

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

table

table: HTMLElement

td

td: HTMLElement

title

title: HTMLElement

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

visible

visible: boolean = false

Boolean flag that represents the visible state of the window.

Methods

activate

  • activate(): void

  • Puts the window on top of all other windows.

    Returns void

addListener

  • addListener(name, funct): void

  • Binds the specified function to the given event name. If no event name is given, then the listener is registered for all events.

    The parameters of the listener are the sender and an EventObject.

    Parameters

    • name: string
    • funct: Function

    Returns void

destroy

  • destroy(): void

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

    Returns void

fireEvent

  • fireEvent(evt, sender?): void

  • Dispatches the given event to the listeners which are registered for the event. The sender argument is optional. The current execution scope ("this") is used for the listener invocation (see Utils#bind).

    Example:

    fireEvent(new mxEventObject("eventName", key1, val1, .., keyN, valN))

    Parameters

    • evt: EventObject

      EventObject that represents the event.

    • sender: null | EventTarget = null

      Optional sender to be passed to the listener. Default value is the return value of .

    Returns void

fit

  • fit(): void

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

    Returns void

getElement

  • getElement(): HTMLElement

  • Returuns the outermost DOM node that makes up the window.

    Returns HTMLElement

getEventSource

getMinimumSize

  • getMinimumSize(): Rectangle

  • Returns an Rectangle 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.

    Returns Rectangle

getX

  • getX(): number

  • Returns the current position on the x-axis.

    Returns number

getY

  • getY(): number

  • Returns the current position on the y-axis.

    Returns number

hide

init

  • init(x, y, width?, height?, style?): void

  • Initializes the DOM tree that represents the window.

    Parameters

    • x: number
    • y: number
    • width: null | number = null
    • height: null | number = null
    • style: string = 'mxWindow'

    Returns void

installCloseHandler

  • installCloseHandler(): void

  • Adds the as a new image node in and installs the event.

    Returns void

installMaximizeHandler

  • installMaximizeHandler(): void

  • Installs the event listeners required for maximizing the window.

    Returns void

installMinimizeHandler

  • installMinimizeHandler(): void

  • Installs the event listeners required for minimizing the window.

    Returns void

installMoveHandler

  • installMoveHandler(): void

  • Installs the event listeners required for moving the window.

    Returns void

isEventsEnabled

isResizable

  • isResizable(): boolean

  • Returns true if the window is resizable.

    Returns boolean

isVisible

  • isVisible(): boolean

  • Returns true if the window is visible.

    Returns boolean

removeListener

setClosable

  • setClosable(closable): void

  • Sets the image associated with the window.

    Parameters

    • closable: boolean

      Boolean specifying if the window should be closable.

    Returns void

setEventsEnabled

setEventSource

setImage

  • setImage(image): void

  • Sets the image associated with the window.

    Parameters

    • image: string

      URL of the image to be used.

    Returns void

setLocation

  • setLocation(x, y): void

  • Sets the upper, left corner of the window.

    Parameters

    • x: number
    • y: number

    Returns void

setMaximizable

  • setMaximizable(maximizable): void

  • Sets if the window is maximizable.

    Parameters

    • maximizable: boolean

    Returns void

setMinimizable

  • setMinimizable(minimizable): void

  • Sets if the window is minimizable.

    Parameters

    • minimizable: boolean

    Returns void

setResizable

  • setResizable(resizable): void

  • 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 s in the page:

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

    Parameters

    • resizable: boolean

    Returns void

setScrollable

  • setScrollable(scrollable): void

  • Sets if the window contents should be scrollable.

    Parameters

    • scrollable: boolean

    Returns void

setSize

  • setSize(width, height): void

  • Sets the size of the window.

    Parameters

    • width: number
    • height: number

    Returns void

setTitle

  • setTitle(title): void

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

    Parameters

    • title: string

    Returns void

setVisible

  • setVisible(visible): void

  • Shows or hides the window depending on the given flag.

    Parameters

    • visible: boolean

      Boolean indicating if the window should be made visible.

    Returns void

show

Settings

Member Visibility

On This Page

Event: mxEvent.MOVE_STARTEvent: mxEvent.MOVEEvent: mxEvent.MOVE_ENDEvent: mxEvent.RESIZE_STARTEvent: mxEvent.RESIZEEvent: mxEvent.RESIZE_ENDEvent: mxEvent.MAXIMIZEEvent: mxEvent.MINIMIZEEvent: mxEvent.NORMALIZEEvent: mxEvent.ACTIVATEEvent: mxEvent.SHOWEvent: mxEvent.HIDEEvent: mxEvent.CLOSEEvent: mxEvent.DESTROY
Constructors
Properties
Methods