ArticleViewportSizeMonitor - doctype - HOWTO detect when the user resizes the browser window (goog.dom.ViewportSizeMonitor)

Updated Nov 15, 2008 by pilgrim
Labels:	is-article, about-dom, about-events
ArticleViewportSizeMonitor
HOWTO detect when the user resizes the browser window (goog.dom.ViewportSizeMonitor)
TODO intro
The code

/**
 * This class can be used to monitor changes in the viewport size.  Instances
 * dispatch a {@link goog.events.EventType.RESIZE} event when the viewport size
 * changes.  Handlers can call {@link goog.dom.ViewportSizeMonitor#getSize} to
 * get the new viewport size.
 *
 * Use this class if you want to execute resize/reflow logic each time the
 * user resizes the browser window.  This class is guaranteed to only dispatch
 * {@code RESIZE} events when the pixel dimensions of the viewport change.
 * (Internet Explorer fires resize events if any element on the page is resized,
 * even if the viewport dimensions are unchanged, which can lead to infinite
 * resize loops.)
 *
 * Example usage:
 *  <pre>
 *    var vsm = new goog.dom.ViewportSizeMonitor();
 *    goog.events.listen(vsm, goog.events.EventType.RESIZE, function(e) {
 *      alert('Viewport size changed to ' + vsm.getSize());
 *    });
 *  </pre>
 *
 * Manually verified on IE6, IE7, FF2, Opera 9, and WebKit.  {@code getSize}
 * doesn't always return the correct viewport height on Safari 2.0.4.
 *
 * @param {Window} opt_window The window to monitor; defaults to the window in
 *    which this code is executing.
 * @constructor
 * @extends goog.events.EventTarget
 */
goog.dom.ViewportSizeMonitor = function(opt_window) {
  goog.events.EventTarget.call(this);

  // Default the window to the current window if unspecified.
  this.window_ = opt_window || window;

  // Listen for window resize events.
  this.listenerKey_ = goog.events.listen(this.window_,
      goog.events.EventType.RESIZE, this.handleResize_, false, this);

  // Set the initial size.
  this.size_ = goog.dom.getViewportSize(this.window_);
};


goog.dom.ViewportSizeMonitor.inherits(goog.events.EventTarget);


/**
 * Event listener key for window the window resize handler, as returned by
 * {@link goog.events.listen}.
 * @type String
 * @private
 */
goog.dom.ViewportSizeMonitor.prototype.listenerKey_ = null;


/**
 * The window to monitor.  Defaults to the window in which the code is running.
 * @type Window
 * @private
 */
goog.dom.ViewportSizeMonitor.prototype.window_ = null;


/**
 * The most recently recorded size of the viewport, in pixels.
 * @type goog.math.Size
 * @private
 */
goog.dom.ViewportSizeMonitor.prototype.size_ = null;


/**
 * The parent event target. 
 * @type goog.events.EventTarget
 * @private
 */
goog.dom.ViewportSizeMonitor.prototype.parentEventTarget_ = null;


/**
 * Returns the parent of this event target to use for bubbling. This allows
 * derived classes to bubble events up their own parent chain.
 *
 * @return {goog.events.EventTarget} The parent EventTarget or null if there
 * is no parent.
 */
goog.dom.ViewportSizeMonitor.prototype.getParentEventTarget = function() {
  return this.parentEventTarget_;
};


/**
 * Sets the parent of this event target to use for bubbling. This allows
 * derived classes to bubble events up their own parent chain.
 *
 * @param {goog.events.EventTarget} target The parent EventTarget
 */
goog.dom.ViewportSizeMonitor.prototype.setParentEventTarget = function(target) {
  this.parentEventTarget_ = target;
};


/**
 * Returns the most recently recorded size of the viewport, in pixels.  May
 * return null if no window resize event has been handled yet.
 * @return {goog.math.Size} The viewport dimensions, in pixels.
 */
goog.dom.ViewportSizeMonitor.prototype.getSize = function() {
  // Return a clone instead of the original to preserve encapsulation.
  return this.size_ ? this.size_.clone() : null;
};


/**
 * Disposes of the object.  Overrides {@link goog.events.EventTarget#dispose}.
 */
goog.dom.ViewportSizeMonitor.prototype.dispose = function() {
  if (!this.getDisposed()) {
    goog.dom.ViewportSizeMonitor.superClass_.dispose.call(this);

    if (this.listenerKey_) {
      goog.events.unlistenByKey(this.listenerKey_);
      this.listenerKey_ = null;
    }

    this.window_ = null;
    this.size_ = null;
  }
};


/**
 * Handles window resize events by measuring the new dimensions of the viewport
 * and dispatching a {@link goog.events.EventType.RESIZE} event if the new
 * dimensions are different from the current ones.
 * @param {goog.events.Event} event The window resize event to handle.
 * @private
 */
goog.dom.ViewportSizeMonitor.prototype.handleResize_ = function(event) {
  var size = goog.dom.getViewportSize(this.window_);
  if (!goog.math.Size.equals(size, this.size_)) {
    this.size_ = size;
    this.dispatchEvent(goog.events.EventType.RESIZE);
  }
};
The code walkthrough

TODO walkthrough
The code

The code walkthrough

Further reading
