1
// Copyright 2005 The Closure Library Authors. All Rights Reserved.
2
//
3
// Licensed under the Apache License, Version 2.0 (the "License");
4
// you may not use this file except in compliance with the License.
5
// You may obtain a copy of the License at
6
//
7
//      http://www.apache.org/licenses/LICENSE-2.0
8
//
9
// Unless required by applicable law or agreed to in writing, software
10
// distributed under the License is distributed on an "AS-IS" BASIS,
11
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12
// See the License for the specific language governing permissions and
13
// limitations under the License.
14

15
/**
16
 * @fileoverview A class that can be used to listen to font size changes.
17
 * @author [email protected] (Erik Arvidsson)
18
 */
19

20
goog.provide('goog.dom.FontSizeMonitor');
21
goog.provide('goog.dom.FontSizeMonitor.EventType');
22

23
goog.require('goog.dom');
24
goog.require('goog.dom.TagName');
25
goog.require('goog.events');
26
goog.require('goog.events.EventTarget');
27
goog.require('goog.events.EventType');
28
goog.require('goog.userAgent');
29

30

31
// TODO(arv): Move this to goog.events instead.
32

33

34

35
/**
36
 * This class can be used to monitor changes in font size.  Instances will
37
 * dispatch a {@code goog.dom.FontSizeMonitor.EventType.CHANGE} event.
38
 * Example usage:
39
 * <pre>
40
 * var fms = new goog.dom.FontSizeMonitor();
41
 * goog.events.listen(fms, goog.dom.FontSizeMonitor.EventType.CHANGE,
42
 *     function(e) {
43
 *       alert('Font size was changed');
44
 *     });
45
 * </pre>
46
 * @param {goog.dom.DomHelper=} opt_domHelper DOM helper object that is used to
47
 *     determine where to insert the DOM nodes used to determine when the font
48
 *     size changes.
49
 * @constructor
50
 * @extends {goog.events.EventTarget}
51
 * @final
52
 */
53
goog.dom.FontSizeMonitor = function(opt_domHelper) {
54
  goog.events.EventTarget.call(this);
55

56
  var dom = opt_domHelper || goog.dom.getDomHelper();
57

58
  /**
59
   * Offscreen iframe which we use to detect resize events.
60
   * @type {HTMLElement}
61
   * @private
62
   */
63
  this.sizeElement_ = /** @type {!HTMLElement} */ (
64
      dom.createDom(
65
          // The size of the iframe is expressed in em, which are font size
66
          // relative
67
          // which will cause the iframe to be resized when the font size
68
          // changes.
69
          // The actual values are not relevant as long as we can ensure that
70
          // the
71
          // iframe has a non zero size and is completely off screen.
72
          goog.userAgent.IE ? goog.dom.TagName.DIV : goog.dom.TagName.IFRAME, {
73
            'style': 'position:absolute;width:9em;height:9em;top:-99em',
74
            'tabIndex': -1,
75
            'aria-hidden': 'true'
76
          }));
77
  var p = dom.getDocument().body;
78
  p.insertBefore(this.sizeElement_, p.firstChild);
79

80
  /**
81
   * The object that we listen to resize events on.
82
   * @type {Element|Window}
83
   * @private
84
   */
85
  var resizeTarget = this.resizeTarget_ = goog.userAgent.IE ?
86
      this.sizeElement_ :
87
      goog.dom.getFrameContentWindow(
88
          /** @type {HTMLIFrameElement} */ (this.sizeElement_));
89

90
  // We need to open and close the document to get Firefox 2 to work.  We must
91
  // not do this for IE in case we are using HTTPS since accessing the document
92
  // on an about:blank iframe in IE using HTTPS raises a Permission Denied
93
  // error.
94
  if (goog.userAgent.GECKO) {
95
    var doc = resizeTarget.document;
96
    doc.open();
97
    doc.close();
98
  }
99

100
  // Listen to resize event on the window inside the iframe.
101
  goog.events.listen(
102
      resizeTarget, goog.events.EventType.RESIZE, this.handleResize_, false,
103
      this);
104

105
  /**
106
   * Last measured width of the iframe element.
107
   * @type {number}
108
   * @private
109
   */
110
  this.lastWidth_ = this.sizeElement_.offsetWidth;
111
};
112
goog.inherits(goog.dom.FontSizeMonitor, goog.events.EventTarget);
113

114

115
/**
116
 * The event types that the FontSizeMonitor fires.
117
 * @enum {string}
118
 */
119
goog.dom.FontSizeMonitor.EventType = {
120
  // TODO(arv): Change value to 'change' after updating the callers.
121
  CHANGE: 'fontsizechange'
122
};
123

124

125
/**
126
 * Constant for the change event.
127
 * @type {string}
128
 * @deprecated Use {@code goog.dom.FontSizeMonitor.EventType.CHANGE} instead.
129
 */
130
goog.dom.FontSizeMonitor.CHANGE_EVENT =
131
    goog.dom.FontSizeMonitor.EventType.CHANGE;
132

133

134
/** @override */
135
goog.dom.FontSizeMonitor.prototype.disposeInternal = function() {
136
  goog.dom.FontSizeMonitor.superClass_.disposeInternal.call(this);
137

138
  goog.events.unlisten(
139
      this.resizeTarget_, goog.events.EventType.RESIZE, this.handleResize_,
140
      false, this);
141
  this.resizeTarget_ = null;
142

143
  // Firefox 2 crashes if the iframe is removed during the unload phase.
144
  if (!goog.userAgent.GECKO || goog.userAgent.isVersionOrHigher('1.9')) {
145
    goog.dom.removeNode(this.sizeElement_);
146
  }
147
  delete this.sizeElement_;
148
};
149

150

151
/**
152
 * Handles the onresize event of the iframe and dispatches a change event in
153
 * case its size really changed.
154
 * @param {goog.events.BrowserEvent} e The event object.
155
 * @private
156
 */
157
goog.dom.FontSizeMonitor.prototype.handleResize_ = function(e) {
158
  // Only dispatch the event if the size really changed.  Some newer browsers do
159
  // not really change the font-size,  instead they zoom the whole page.  This
160
  // does trigger window resize events on the iframe but the logical pixel size
161
  // remains the same (the device pixel size changes but that is irrelevant).
162
  var currentWidth = this.sizeElement_.offsetWidth;
163
  if (this.lastWidth_ != currentWidth) {
164
    this.lastWidth_ = currentWidth;
165
    this.dispatchEvent(goog.dom.FontSizeMonitor.EventType.CHANGE);
166
  }
167
};
168

169