Bride of Windows

See the demo page for the finished version of the code.

Resize Cursors

The resize drag process is very similar to that for a move drag but a couple of additional steps are needed in order to set a direction for the resize and change the cursor accordingly.

For this, the mousemove and mouseout events captured for the window frame. By using these events, the cursor will change as the user moves the mouse over the window edge, giving him or her a visual clue that the window can be resized.

The function winResizeCursorSet() handles a mouseover on the window frame. It first checks that the window is not currently minimized or already in the process of a resize drag. It also checks that the event originated from the window frame itself, not a sub element such as the title bar or client area, etc.

  if (this.parentWindow.isMinimized || winCtrl.inResizeDrag)
    return;

  // If not on window frame, restore cursor and exit.

  if (browser.isIE)
    target = window.event.srcElement;
  if (browser.isNS)
    target = event.target;
  if (target != this.parentWindow.frame)
    return;

If everything is OK, it proceeds to find the position of the cursor relative to the edges of the frame.

  // Find resize direction.

  if (browser.isIE) {
    xOff = window.event.offsetX;
    yOff = window.event.offsetY;
  }
  if (browser.isNS) {
    xOff = event.layerX;
    yOff = event.layerY;
  }
  winCtrl.resizeDirection = ""
  if (yOff <= winCtrl.resizeCornerSize)
    winCtrl.resizeDirection += "n";
  else if (yOff >= this.parentWindow.frame.offsetHeight -
           winCtrl.resizeCornerSize)
    winCtrl.resizeDirection += "s";
  if (xOff <= winCtrl.resizeCornerSize)
    winCtrl.resizeDirection += "w";
  else if (xOff >= this.parentWindow.frame.offsetWidth -
           winCtrl.resizeCornerSize)
    winCtrl.resizeDirection += "e";

The value set in winCtrl.resizeCornerSize is used for comparison. The value used in the demo is 16, so if the cursor is within 16 pixels of a given edge, it's considered a "hit." Note that it's possible for the cursor to be within range of two edges, at the corners.

This results in the variable winCtrl.resizeDirection being set to one of eight directions: "n", "ne", "e", "se", etc.

It's possible that the cursor is over the window frame but not close enough to any edge to set a direction. So if no direction was "hit", the function explicitly fires the mouseout event to ensure that the cursor is reset.

  if (winCtrl.resizeDirection == "") {
    this.onmouseout(event);
    return;
  }

But if it is close enough to the edge, the function changes the cursor to the appropriate resize style.

  // Change cursor.

  if (browser.isIE)
    document.body.style.cursor = winCtrl.resizeDirection + "-resize";
  if (browser.isNS)
    this.parentWindow.frame.style.cursor =
      winCtrl.resizeDirection + "-resize";

The function winResizeCursorRestore() handles the mouseout event. It simply resets the cursor, provided that a resize drag is not currently being performed.

function winResizeCursorRestore(event) {

  if (winCtrl.inResizeDrag)
    return;

  // Restore cursor.

  if (browser.isIE)
    document.body.style.cursor = "";
  if (browser.isNS)
    this.parentWindow.frame.style.cursor = "";
}

The effect of these event handlers can be seen in the demo by moving the mouse pointer along the outer edge of the window frame.

The Resize Drag

When a mousedown occurs on the window frame, winResizeDragStart() is called. As with the mouseover handler, it checks to ensure that the event originated from the window frame itself.

  // Make sure the event is on the window frame.

  if (browser.isIE)
    target = window.event.srcElement;
  if (browser.isNS)
    target = event.target;
  if (target != this.parentWindow.frame)
    return;

  this.parentWindow.makeActive();

  if (this.parentWindow.isMinimized)
    return;

If so, it makes the window active. Next it checks to see if the window is currently minimized. A resize should not be performed on a minimized window so it will exit if that is the case.

Prev | Next