Class mxWindow

Creating a simple window.

example

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.

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 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(x, y)
{
  x = Math.max(0, x);
  y = Math.max(0, y);
  setLocation.apply(this, arguments);
};

Or the following event handler can be used:

example

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:

example

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.