Bride of Windows

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

The next step for both browsers is to find the difference between the frame element's style and offset widths. Again, it sets the width style and compares it to the resulting offsetWidth.

  // Find the difference between the frame's style and offset
  // widths. For IE, adjust the client area/frame width
  // difference accordingly.

  w = this.frame.offsetWidth;
  this.frame.style.width = w + "px";
  dw = this.frame.offsetWidth - w;
  w -= dw;     
  this.frame.style.width = w + "px";
  if (browser.isIE)
    this.widthDiff -= dw;

For IE, the widthDiff property is updated to account for this difference. So not it holds the correct value to be used in sizing the client area when the window frame is resized.

Next, the script determines a minimum width for the window frame. To get this, it calls the minimize() method on the window. The function for this would normally set the frame to the minimum width but since that hasn't been set yet, it just removes the width setting from the frame.

It also sets the width of the title bar text element to a fixed value, given by winCtrl.minimizedTextWidth and removes the client area from display. The result of all this is shown at right.

The code then measures the resulting offsetWidth of the frame and subtracts the difference value found earlier to get the corresponding style width. This is then saved in a property named minimumWidth.

  // Find the minimum width for resize.

  this.isOpen = true;  // Flag as open so minimize call will work.
  this.minimize();
  // Get the minimum width.
  if (browser.isNS && browser.version >= 1.2)
    // For later versions of Gecko.
    this.minimumWidth = this.frame.offsetWidth;
  else
    // For all others.
    this.minimumWidth = this.frame.offsetWidth - dw;

Note that later versions of Netscape/Mozilla need a minor adjustment to the width value.

Next the script needs to check the width of the title bar text and determine the minimum frame width that will fit the full title text without clipping. For this, it simply removes the width style setting from the title bar text element. The result is shown at left.

  // Find the frame width at which or below the title bar text will
  // need to be clipped.

  this.titleBarText.style.width = "";
  this.clipTextMinimumWidth = this.frame.offsetWidth - dw;

Again, it uses the resulting offsetWidth of the frame to find the matching style width. This is saved as a property with the name clipTextMinimumWidth.

Now anytime the window is resized, if the new size is less than this value then the script will know to clip the title bar text element.

Next, it sets a minimum height for the client area. Fortunately, no measurements or calculations are needed. This can simply be set to one pixel.

  // Set the minimum height.

  this.minimumHeight = 1;

The last step is to restore the window to it's original position, size and state.

  // Restore window. For IE, set client area width.

  this.restore();
  this.isOpen = false;  // Reset flag.
  initWd = Math.max(initWd, this.minimumWidth);
  this.frame.style.width = initWd + "px";
  if (browser.isIE)
    this.clientArea.style.width = (initWd - this.widthDiff) + "px";

  // Clip the title bar text if needed.

  if (this.clipTextMinimumWidth >= this.minimumWidth)
    this.titleBarText.style.width =
      (winCtrl.minimizedTextWidth + initWd - this.minimumWidth) + "px";

  // Restore the window to its original position.

  this.frame.style.left = initLt;

First, a call to the restore() method is used to undo the effects of the minimize() call. Then the frame is set back to its initial width, unless that happens to be less than the minimumWidth value just calculated. If so, the window is sized using this value instead. For IE, a width is also set on the client area's style based on the frame width and the widthDiff value calculated earlier.

Next it compares the frame width to clipTextMinimumWidth and clips the title bar text if necessary. The final act is to restore the window to its original position.

Once the Window object has been created, the window is ready for use and any of it's methods can be called. We'll look at the code for these next.

Implementing the Window Methods

Four of the window methods work in pairs; open/close and minimize/restore. For the most part, these methods merely change a window's appearance by altering display style properties on individual window elements.

Opening and Closing a Window

These two are the easiest to implement. A window is opened by setting the visibility style of its frame to visible. The code also restores the window if it happens to be minimized and, as with most other methods, makes the window the active one.

function winOpen() {

  if (this.isOpen)
    return;

  // Restore the window and make it visible.

  this.makeActive();
  this.isOpen = true;
  if (this.isMinimized)
    this.restore();
  this.frame.style.visibility = "visible";
}

This ensures that the window and its contents are fully visible whenever open() is called.

Closing a window is even simpler. The window frame's visibility is set to hidden, making the window disappear from view.

function winClose() {

  // Hide the window.

  this.frame.style.visibility = "hidden";
  this.isOpen = false;
}

Prev | Next