Bride of Windows
See the demo page for the finished version of the code.Minimizing and Restoring a Window
When a window is minimized, only its title bar is displayed. This is
accomplished by setting the display
style of its client area to
none.
That causes the browser to render the window as though the
client area did not exist, just the outer frame and title bar.
function winMinimize() { if (!this.isOpen || this.isMinimized) return; this.makeActive(); // Save current frame and title bar text widths. this.restoreFrameWidth = this.frame.style.width; this.restoreTextWidth = this.titleBarText.style.width; // Disable client area display. this.clientArea.style.display = "none"; // Minimize frame and title bar text widths. if (this.minimumWidth) this.frame.style.width = this.minimumWidth + "px"; else this.frame.style.width = ""; this.titleBarText.style.width = winCtrl.minimizedTextWidth + "px"; this.isMinimized = true; }
It first saves the current window frame and text width so these can be reset
when the window is restored. Next it sets turns off the client area display and
sets the window frame and title text to their minimized widths, given by the
window's minimumWidth
property and
winCtrl.minimizedTextWidth,
respectively.
Window()
function minimizes the window for the
first time, in order to calculate the minimumWidth
value. So the
minimize()
function will use a null string for the
width
value if minimumWidth
has not yet been set.
The restore()
method simply resets the window's frame and title
text widths to the values saved when it was minimized, and then restores the
client area display.
function winRestore() { if (!this.isOpen || !this.isMinimized) return; this.makeActive(); // Enable client area display. this.clientArea.style.display = ""; // Restore frame and title bar text widths. this.frame.style.width = this.restoreFrameWidth; this.titleBarText.style.width = this.restoreTextWidth; this.isMinimized = false; }
Note that all the above methods other than close()
use a call
to makeActive()
so that any of these operations will also set the
window as the active one.
Setting the Active Window
The first step in making a window active is to inactive whichever window is
currently the active one. That window is given by
winCtrl.active.
if (winCtrl.active == this) return; // Inactivate the currently active window. if (winCtrl.active) { winCtrl.active.frame.style.backgroundColor = winCtrl.inactiveFrameBackgroundColor; winCtrl.active.frame.style.borderColor = winCtrl.inactiveFrameBorderColor; winCtrl.active.titleBar.style.backgroundColor = winCtrl.inactiveTitleBarColor; winCtrl.active.titleBar.style.color = winCtrl.inactiveTitleTextColor; winCtrl.active.clientArea.style.borderColor = winCtrl.inactiveClientAreaBorderColor; if (browser.isIE) winCtrl.active.clientArea.style.scrollbarBaseColor = winCtrl.inactiveClientAreaScrollbarColor; if (browser.isNS && browser.version < 6.1) winCtrl.active.clientArea.style.overflow = "hidden"; if (winCtrl.active.inactiveButtonsImage) winCtrl.active.titleBarButtons.src = winCtrl.active.inactiveButtonsImage; }
The makeActive()
function uses the values defined in
winCtrl
to change the window's colors and possibly its button
image, if an additional one was specified for it.
overflow
property of any inactive window's
client area is set to hidden,
preventing the scrollbars from
appearing. Therefore, only the active window displays scrollbars, if
needed.
The next step of the makeActive()
function is to make the given
window the active one. This is done by first restoring the window's original
colors and any other settings that may have been changed when the window was
inactivated.
// Activate this window. this.frame.style.backgroundColor = this.activeFrameBackgroundColor; this.frame.style.borderColor = this.activeFrameBorderColor; this.titleBar.style.backgroundColor = this.activeTitleBarColor; this.titleBar.style.color = this.activeTitleTextColor; this.clientArea.style.borderColor = this.activeClientAreaBorderColor; if (browser.isIE) this.clientArea.style.scrollbarBaseColor = this.activeClientAreaScrollbarColor; if (browser.isNS && browser.version < 6.1) this.clientArea.style.overflow = "auto"; if (this.inactiveButtonsImage) this.titleBarButtons.src = this.activeButtonsImage; this.frame.style.zIndex = ++winCtrl.maxzIndex; winCtrl.active = this;
Next, the window needs to be placed at the top of the stacking order so
winCtrl.maxzIndex
is incremented and the new value is assigned to
the window's frame's z-index
style. Finally,
winCtrl.active
is updated to point to this window.
Next we'll look at the code for the event handlers that let the user interact the windows.