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; }