2993 lines
98 KiB
JavaScript
2993 lines
98 KiB
JavaScript
// Copyright 2006 The Closure Library Authors. All Rights Reserved.
|
|
//
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License.
|
|
// You may obtain a copy of the License at
|
|
//
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS-IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
|
|
/**
|
|
* @fileoverview Utilities for manipulating the browser's Document Object Model
|
|
* Inspiration taken *heavily* from mochikit (http://mochikit.com/).
|
|
*
|
|
* You can use {@link goog.dom.DomHelper} to create new dom helpers that refer
|
|
* to a different document object. This is useful if you are working with
|
|
* frames or multiple windows.
|
|
*
|
|
* @author arv@google.com (Erik Arvidsson)
|
|
*/
|
|
|
|
|
|
// TODO(arv): Rename/refactor getTextContent and getRawTextContent. The problem
|
|
// is that getTextContent should mimic the DOM3 textContent. We should add a
|
|
// getInnerText (or getText) which tries to return the visible text, innerText.
|
|
|
|
|
|
goog.provide('goog.dom');
|
|
goog.provide('goog.dom.Appendable');
|
|
goog.provide('goog.dom.DomHelper');
|
|
|
|
goog.require('goog.array');
|
|
goog.require('goog.asserts');
|
|
goog.require('goog.dom.BrowserFeature');
|
|
goog.require('goog.dom.NodeType');
|
|
goog.require('goog.dom.TagName');
|
|
goog.require('goog.dom.safe');
|
|
goog.require('goog.html.SafeHtml');
|
|
goog.require('goog.html.uncheckedconversions');
|
|
goog.require('goog.math.Coordinate');
|
|
goog.require('goog.math.Size');
|
|
goog.require('goog.object');
|
|
goog.require('goog.string');
|
|
goog.require('goog.string.Unicode');
|
|
goog.require('goog.userAgent');
|
|
|
|
|
|
/**
|
|
* @define {boolean} Whether we know at compile time that the browser is in
|
|
* quirks mode.
|
|
*/
|
|
goog.define('goog.dom.ASSUME_QUIRKS_MODE', false);
|
|
|
|
|
|
/**
|
|
* @define {boolean} Whether we know at compile time that the browser is in
|
|
* standards compliance mode.
|
|
*/
|
|
goog.define('goog.dom.ASSUME_STANDARDS_MODE', false);
|
|
|
|
|
|
/**
|
|
* Whether we know the compatibility mode at compile time.
|
|
* @type {boolean}
|
|
* @private
|
|
*/
|
|
goog.dom.COMPAT_MODE_KNOWN_ =
|
|
goog.dom.ASSUME_QUIRKS_MODE || goog.dom.ASSUME_STANDARDS_MODE;
|
|
|
|
|
|
/**
|
|
* Gets the DomHelper object for the document where the element resides.
|
|
* @param {(Node|Window)=} opt_element If present, gets the DomHelper for this
|
|
* element.
|
|
* @return {!goog.dom.DomHelper} The DomHelper.
|
|
*/
|
|
goog.dom.getDomHelper = function(opt_element) {
|
|
return opt_element ?
|
|
new goog.dom.DomHelper(goog.dom.getOwnerDocument(opt_element)) :
|
|
(goog.dom.defaultDomHelper_ ||
|
|
(goog.dom.defaultDomHelper_ = new goog.dom.DomHelper()));
|
|
};
|
|
|
|
|
|
/**
|
|
* Cached default DOM helper.
|
|
* @type {!goog.dom.DomHelper|undefined}
|
|
* @private
|
|
*/
|
|
goog.dom.defaultDomHelper_;
|
|
|
|
|
|
/**
|
|
* Gets the document object being used by the dom library.
|
|
* @return {!Document} Document object.
|
|
*/
|
|
goog.dom.getDocument = function() {
|
|
return document;
|
|
};
|
|
|
|
|
|
/**
|
|
* Gets an element from the current document by element id.
|
|
*
|
|
* If an Element is passed in, it is returned.
|
|
*
|
|
* @param {string|Element} element Element ID or a DOM node.
|
|
* @return {Element} The element with the given ID, or the node passed in.
|
|
*/
|
|
goog.dom.getElement = function(element) {
|
|
return goog.dom.getElementHelper_(document, element);
|
|
};
|
|
|
|
|
|
/**
|
|
* Gets an element by id from the given document (if present).
|
|
* If an element is given, it is returned.
|
|
* @param {!Document} doc
|
|
* @param {string|Element} element Element ID or a DOM node.
|
|
* @return {Element} The resulting element.
|
|
* @private
|
|
*/
|
|
goog.dom.getElementHelper_ = function(doc, element) {
|
|
return goog.isString(element) ? doc.getElementById(element) : element;
|
|
};
|
|
|
|
|
|
/**
|
|
* Gets an element by id, asserting that the element is found.
|
|
*
|
|
* This is used when an element is expected to exist, and should fail with
|
|
* an assertion error if it does not (if assertions are enabled).
|
|
*
|
|
* @param {string} id Element ID.
|
|
* @return {!Element} The element with the given ID, if it exists.
|
|
*/
|
|
goog.dom.getRequiredElement = function(id) {
|
|
return goog.dom.getRequiredElementHelper_(document, id);
|
|
};
|
|
|
|
|
|
/**
|
|
* Helper function for getRequiredElementHelper functions, both static and
|
|
* on DomHelper. Asserts the element with the given id exists.
|
|
* @param {!Document} doc
|
|
* @param {string} id
|
|
* @return {!Element} The element with the given ID, if it exists.
|
|
* @private
|
|
*/
|
|
goog.dom.getRequiredElementHelper_ = function(doc, id) {
|
|
// To prevent users passing in Elements as is permitted in getElement().
|
|
goog.asserts.assertString(id);
|
|
var element = goog.dom.getElementHelper_(doc, id);
|
|
element =
|
|
goog.asserts.assertElement(element, 'No element found with id: ' + id);
|
|
return element;
|
|
};
|
|
|
|
|
|
/**
|
|
* Alias for getElement.
|
|
* @param {string|Element} element Element ID or a DOM node.
|
|
* @return {Element} The element with the given ID, or the node passed in.
|
|
* @deprecated Use {@link goog.dom.getElement} instead.
|
|
*/
|
|
goog.dom.$ = goog.dom.getElement;
|
|
|
|
|
|
/**
|
|
* Looks up elements by both tag and class name, using browser native functions
|
|
* ({@code querySelectorAll}, {@code getElementsByTagName} or
|
|
* {@code getElementsByClassName}) where possible. This function
|
|
* is a useful, if limited, way of collecting a list of DOM elements
|
|
* with certain characteristics. {@code goog.dom.query} offers a
|
|
* more powerful and general solution which allows matching on CSS3
|
|
* selector expressions, but at increased cost in code size. If all you
|
|
* need is particular tags belonging to a single class, this function
|
|
* is fast and sleek.
|
|
*
|
|
* Note that tag names are case sensitive in the SVG namespace, and this
|
|
* function converts opt_tag to uppercase for comparisons. For queries in the
|
|
* SVG namespace you should use querySelector or querySelectorAll instead.
|
|
* https://bugzilla.mozilla.org/show_bug.cgi?id=963870
|
|
* https://bugs.webkit.org/show_bug.cgi?id=83438
|
|
*
|
|
* @see {goog.dom.query}
|
|
*
|
|
* @param {?string=} opt_tag Element tag name.
|
|
* @param {?string=} opt_class Optional class name.
|
|
* @param {(Document|Element)=} opt_el Optional element to look in.
|
|
* @return {!IArrayLike<!Element>} Array-like list of elements (only a length
|
|
* property and numerical indices are guaranteed to exist).
|
|
*/
|
|
goog.dom.getElementsByTagNameAndClass = function(opt_tag, opt_class, opt_el) {
|
|
return goog.dom.getElementsByTagNameAndClass_(
|
|
document, opt_tag, opt_class, opt_el);
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns a static, array-like list of the elements with the provided
|
|
* className.
|
|
* @see {goog.dom.query}
|
|
* @param {string} className the name of the class to look for.
|
|
* @param {(Document|Element)=} opt_el Optional element to look in.
|
|
* @return {!IArrayLike<!Element>} The items found with the class name provided.
|
|
*/
|
|
goog.dom.getElementsByClass = function(className, opt_el) {
|
|
var parent = opt_el || document;
|
|
if (goog.dom.canUseQuerySelector_(parent)) {
|
|
return parent.querySelectorAll('.' + className);
|
|
}
|
|
return goog.dom.getElementsByTagNameAndClass_(
|
|
document, '*', className, opt_el);
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns the first element with the provided className.
|
|
* @see {goog.dom.query}
|
|
* @param {string} className the name of the class to look for.
|
|
* @param {Element|Document=} opt_el Optional element to look in.
|
|
* @return {Element} The first item with the class name provided.
|
|
*/
|
|
goog.dom.getElementByClass = function(className, opt_el) {
|
|
var parent = opt_el || document;
|
|
var retVal = null;
|
|
if (parent.getElementsByClassName) {
|
|
retVal = parent.getElementsByClassName(className)[0];
|
|
} else if (goog.dom.canUseQuerySelector_(parent)) {
|
|
retVal = parent.querySelector('.' + className);
|
|
} else {
|
|
retVal = goog.dom.getElementsByTagNameAndClass_(
|
|
document, '*', className, opt_el)[0];
|
|
}
|
|
return retVal || null;
|
|
};
|
|
|
|
|
|
/**
|
|
* Ensures an element with the given className exists, and then returns the
|
|
* first element with the provided className.
|
|
* @see {goog.dom.query}
|
|
* @param {string} className the name of the class to look for.
|
|
* @param {!Element|!Document=} opt_root Optional element or document to look
|
|
* in.
|
|
* @return {!Element} The first item with the class name provided.
|
|
* @throws {goog.asserts.AssertionError} Thrown if no element is found.
|
|
*/
|
|
goog.dom.getRequiredElementByClass = function(className, opt_root) {
|
|
var retValue = goog.dom.getElementByClass(className, opt_root);
|
|
return goog.asserts.assert(
|
|
retValue, 'No element found with className: ' + className);
|
|
};
|
|
|
|
|
|
/**
|
|
* Prefer the standardized (http://www.w3.org/TR/selectors-api/), native and
|
|
* fast W3C Selectors API.
|
|
* @param {!(Element|Document)} parent The parent document object.
|
|
* @return {boolean} whether or not we can use parent.querySelector* APIs.
|
|
* @private
|
|
*/
|
|
goog.dom.canUseQuerySelector_ = function(parent) {
|
|
return !!(parent.querySelectorAll && parent.querySelector);
|
|
};
|
|
|
|
|
|
/**
|
|
* Helper for {@code getElementsByTagNameAndClass}.
|
|
* @param {!Document} doc The document to get the elements in.
|
|
* @param {?string=} opt_tag Element tag name.
|
|
* @param {?string=} opt_class Optional class name.
|
|
* @param {(Document|Element)=} opt_el Optional element to look in.
|
|
* @return {!IArrayLike<!Element>} Array-like list of elements (only a length
|
|
* property and numerical indices are guaranteed to exist).
|
|
* @private
|
|
*/
|
|
goog.dom.getElementsByTagNameAndClass_ = function(
|
|
doc, opt_tag, opt_class, opt_el) {
|
|
var parent = opt_el || doc;
|
|
var tagName = (opt_tag && opt_tag != '*') ? opt_tag.toUpperCase() : '';
|
|
|
|
if (goog.dom.canUseQuerySelector_(parent) && (tagName || opt_class)) {
|
|
var query = tagName + (opt_class ? '.' + opt_class : '');
|
|
return parent.querySelectorAll(query);
|
|
}
|
|
|
|
// Use the native getElementsByClassName if available, under the assumption
|
|
// that even when the tag name is specified, there will be fewer elements to
|
|
// filter through when going by class than by tag name
|
|
if (opt_class && parent.getElementsByClassName) {
|
|
var els = parent.getElementsByClassName(opt_class);
|
|
|
|
if (tagName) {
|
|
var arrayLike = {};
|
|
var len = 0;
|
|
|
|
// Filter for specific tags if requested.
|
|
for (var i = 0, el; el = els[i]; i++) {
|
|
if (tagName == el.nodeName) {
|
|
arrayLike[len++] = el;
|
|
}
|
|
}
|
|
arrayLike.length = len;
|
|
|
|
return /** @type {!IArrayLike<!Element>} */ (arrayLike);
|
|
} else {
|
|
return els;
|
|
}
|
|
}
|
|
|
|
var els = parent.getElementsByTagName(tagName || '*');
|
|
|
|
if (opt_class) {
|
|
var arrayLike = {};
|
|
var len = 0;
|
|
for (var i = 0, el; el = els[i]; i++) {
|
|
var className = el.className;
|
|
// Check if className has a split function since SVG className does not.
|
|
if (typeof className.split == 'function' &&
|
|
goog.array.contains(className.split(/\s+/), opt_class)) {
|
|
arrayLike[len++] = el;
|
|
}
|
|
}
|
|
arrayLike.length = len;
|
|
return /** @type {!IArrayLike<!Element>} */ (arrayLike);
|
|
} else {
|
|
return els;
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Alias for {@code getElementsByTagNameAndClass}.
|
|
* @param {?string=} opt_tag Element tag name.
|
|
* @param {?string=} opt_class Optional class name.
|
|
* @param {Element=} opt_el Optional element to look in.
|
|
* @return {!IArrayLike<!Element>} Array-like list of elements (only a length
|
|
* property and numerical indices are guaranteed to exist).
|
|
* @deprecated Use {@link goog.dom.getElementsByTagNameAndClass} instead.
|
|
*/
|
|
goog.dom.$$ = goog.dom.getElementsByTagNameAndClass;
|
|
|
|
|
|
/**
|
|
* Sets multiple properties on a node.
|
|
* @param {Element} element DOM node to set properties on.
|
|
* @param {Object} properties Hash of property:value pairs.
|
|
*/
|
|
goog.dom.setProperties = function(element, properties) {
|
|
goog.object.forEach(properties, function(val, key) {
|
|
if (key == 'style') {
|
|
element.style.cssText = val;
|
|
} else if (key == 'class') {
|
|
element.className = val;
|
|
} else if (key == 'for') {
|
|
element.htmlFor = val;
|
|
} else if (goog.dom.DIRECT_ATTRIBUTE_MAP_.hasOwnProperty(key)) {
|
|
element.setAttribute(goog.dom.DIRECT_ATTRIBUTE_MAP_[key], val);
|
|
} else if (
|
|
goog.string.startsWith(key, 'aria-') ||
|
|
goog.string.startsWith(key, 'data-')) {
|
|
element.setAttribute(key, val);
|
|
} else {
|
|
element[key] = val;
|
|
}
|
|
});
|
|
};
|
|
|
|
|
|
/**
|
|
* Map of attributes that should be set using
|
|
* element.setAttribute(key, val) instead of element[key] = val. Used
|
|
* by goog.dom.setProperties.
|
|
*
|
|
* @private {!Object<string, string>}
|
|
* @const
|
|
*/
|
|
goog.dom.DIRECT_ATTRIBUTE_MAP_ = {
|
|
'cellpadding': 'cellPadding',
|
|
'cellspacing': 'cellSpacing',
|
|
'colspan': 'colSpan',
|
|
'frameborder': 'frameBorder',
|
|
'height': 'height',
|
|
'maxlength': 'maxLength',
|
|
'nonce': 'nonce',
|
|
'role': 'role',
|
|
'rowspan': 'rowSpan',
|
|
'type': 'type',
|
|
'usemap': 'useMap',
|
|
'valign': 'vAlign',
|
|
'width': 'width'
|
|
};
|
|
|
|
|
|
/**
|
|
* Gets the dimensions of the viewport.
|
|
*
|
|
* Gecko Standards mode:
|
|
* docEl.clientWidth Width of viewport excluding scrollbar.
|
|
* win.innerWidth Width of viewport including scrollbar.
|
|
* body.clientWidth Width of body element.
|
|
*
|
|
* docEl.clientHeight Height of viewport excluding scrollbar.
|
|
* win.innerHeight Height of viewport including scrollbar.
|
|
* body.clientHeight Height of document.
|
|
*
|
|
* Gecko Backwards compatible mode:
|
|
* docEl.clientWidth Width of viewport excluding scrollbar.
|
|
* win.innerWidth Width of viewport including scrollbar.
|
|
* body.clientWidth Width of viewport excluding scrollbar.
|
|
*
|
|
* docEl.clientHeight Height of document.
|
|
* win.innerHeight Height of viewport including scrollbar.
|
|
* body.clientHeight Height of viewport excluding scrollbar.
|
|
*
|
|
* IE6/7 Standards mode:
|
|
* docEl.clientWidth Width of viewport excluding scrollbar.
|
|
* win.innerWidth Undefined.
|
|
* body.clientWidth Width of body element.
|
|
*
|
|
* docEl.clientHeight Height of viewport excluding scrollbar.
|
|
* win.innerHeight Undefined.
|
|
* body.clientHeight Height of document element.
|
|
*
|
|
* IE5 + IE6/7 Backwards compatible mode:
|
|
* docEl.clientWidth 0.
|
|
* win.innerWidth Undefined.
|
|
* body.clientWidth Width of viewport excluding scrollbar.
|
|
*
|
|
* docEl.clientHeight 0.
|
|
* win.innerHeight Undefined.
|
|
* body.clientHeight Height of viewport excluding scrollbar.
|
|
*
|
|
* Opera 9 Standards and backwards compatible mode:
|
|
* docEl.clientWidth Width of viewport excluding scrollbar.
|
|
* win.innerWidth Width of viewport including scrollbar.
|
|
* body.clientWidth Width of viewport excluding scrollbar.
|
|
*
|
|
* docEl.clientHeight Height of document.
|
|
* win.innerHeight Height of viewport including scrollbar.
|
|
* body.clientHeight Height of viewport excluding scrollbar.
|
|
*
|
|
* WebKit:
|
|
* Safari 2
|
|
* docEl.clientHeight Same as scrollHeight.
|
|
* docEl.clientWidth Same as innerWidth.
|
|
* win.innerWidth Width of viewport excluding scrollbar.
|
|
* win.innerHeight Height of the viewport including scrollbar.
|
|
* frame.innerHeight Height of the viewport exluding scrollbar.
|
|
*
|
|
* Safari 3 (tested in 522)
|
|
*
|
|
* docEl.clientWidth Width of viewport excluding scrollbar.
|
|
* docEl.clientHeight Height of viewport excluding scrollbar in strict mode.
|
|
* body.clientHeight Height of viewport excluding scrollbar in quirks mode.
|
|
*
|
|
* @param {Window=} opt_window Optional window element to test.
|
|
* @return {!goog.math.Size} Object with values 'width' and 'height'.
|
|
*/
|
|
goog.dom.getViewportSize = function(opt_window) {
|
|
// TODO(arv): This should not take an argument
|
|
return goog.dom.getViewportSize_(opt_window || window);
|
|
};
|
|
|
|
|
|
/**
|
|
* Helper for {@code getViewportSize}.
|
|
* @param {Window} win The window to get the view port size for.
|
|
* @return {!goog.math.Size} Object with values 'width' and 'height'.
|
|
* @private
|
|
*/
|
|
goog.dom.getViewportSize_ = function(win) {
|
|
var doc = win.document;
|
|
var el = goog.dom.isCss1CompatMode_(doc) ? doc.documentElement : doc.body;
|
|
return new goog.math.Size(el.clientWidth, el.clientHeight);
|
|
};
|
|
|
|
|
|
/**
|
|
* Calculates the height of the document.
|
|
*
|
|
* @return {number} The height of the current document.
|
|
*/
|
|
goog.dom.getDocumentHeight = function() {
|
|
return goog.dom.getDocumentHeight_(window);
|
|
};
|
|
|
|
/**
|
|
* Calculates the height of the document of the given window.
|
|
*
|
|
* @param {!Window} win The window whose document height to retrieve.
|
|
* @return {number} The height of the document of the given window.
|
|
*/
|
|
goog.dom.getDocumentHeightForWindow = function(win) {
|
|
return goog.dom.getDocumentHeight_(win);
|
|
};
|
|
|
|
/**
|
|
* Calculates the height of the document of the given window.
|
|
*
|
|
* Function code copied from the opensocial gadget api:
|
|
* gadgets.window.adjustHeight(opt_height)
|
|
*
|
|
* @private
|
|
* @param {!Window} win The window whose document height to retrieve.
|
|
* @return {number} The height of the document of the given window.
|
|
*/
|
|
goog.dom.getDocumentHeight_ = function(win) {
|
|
// NOTE(eae): This method will return the window size rather than the document
|
|
// size in webkit quirks mode.
|
|
var doc = win.document;
|
|
var height = 0;
|
|
|
|
if (doc) {
|
|
// Calculating inner content height is hard and different between
|
|
// browsers rendering in Strict vs. Quirks mode. We use a combination of
|
|
// three properties within document.body and document.documentElement:
|
|
// - scrollHeight
|
|
// - offsetHeight
|
|
// - clientHeight
|
|
// These values differ significantly between browsers and rendering modes.
|
|
// But there are patterns. It just takes a lot of time and persistence
|
|
// to figure out.
|
|
|
|
var body = doc.body;
|
|
var docEl = /** @type {!HTMLElement} */ (doc.documentElement);
|
|
if (!(docEl && body)) {
|
|
return 0;
|
|
}
|
|
|
|
// Get the height of the viewport
|
|
var vh = goog.dom.getViewportSize_(win).height;
|
|
if (goog.dom.isCss1CompatMode_(doc) && docEl.scrollHeight) {
|
|
// In Strict mode:
|
|
// The inner content height is contained in either:
|
|
// document.documentElement.scrollHeight
|
|
// document.documentElement.offsetHeight
|
|
// Based on studying the values output by different browsers,
|
|
// use the value that's NOT equal to the viewport height found above.
|
|
height =
|
|
docEl.scrollHeight != vh ? docEl.scrollHeight : docEl.offsetHeight;
|
|
} else {
|
|
// In Quirks mode:
|
|
// documentElement.clientHeight is equal to documentElement.offsetHeight
|
|
// except in IE. In most browsers, document.documentElement can be used
|
|
// to calculate the inner content height.
|
|
// However, in other browsers (e.g. IE), document.body must be used
|
|
// instead. How do we know which one to use?
|
|
// If document.documentElement.clientHeight does NOT equal
|
|
// document.documentElement.offsetHeight, then use document.body.
|
|
var sh = docEl.scrollHeight;
|
|
var oh = docEl.offsetHeight;
|
|
if (docEl.clientHeight != oh) {
|
|
sh = body.scrollHeight;
|
|
oh = body.offsetHeight;
|
|
}
|
|
|
|
// Detect whether the inner content height is bigger or smaller
|
|
// than the bounding box (viewport). If bigger, take the larger
|
|
// value. If smaller, take the smaller value.
|
|
if (sh > vh) {
|
|
// Content is larger
|
|
height = sh > oh ? sh : oh;
|
|
} else {
|
|
// Content is smaller
|
|
height = sh < oh ? sh : oh;
|
|
}
|
|
}
|
|
}
|
|
|
|
return height;
|
|
};
|
|
|
|
|
|
/**
|
|
* Gets the page scroll distance as a coordinate object.
|
|
*
|
|
* @param {Window=} opt_window Optional window element to test.
|
|
* @return {!goog.math.Coordinate} Object with values 'x' and 'y'.
|
|
* @deprecated Use {@link goog.dom.getDocumentScroll} instead.
|
|
*/
|
|
goog.dom.getPageScroll = function(opt_window) {
|
|
var win = opt_window || goog.global || window;
|
|
return goog.dom.getDomHelper(win.document).getDocumentScroll();
|
|
};
|
|
|
|
|
|
/**
|
|
* Gets the document scroll distance as a coordinate object.
|
|
*
|
|
* @return {!goog.math.Coordinate} Object with values 'x' and 'y'.
|
|
*/
|
|
goog.dom.getDocumentScroll = function() {
|
|
return goog.dom.getDocumentScroll_(document);
|
|
};
|
|
|
|
|
|
/**
|
|
* Helper for {@code getDocumentScroll}.
|
|
*
|
|
* @param {!Document} doc The document to get the scroll for.
|
|
* @return {!goog.math.Coordinate} Object with values 'x' and 'y'.
|
|
* @private
|
|
*/
|
|
goog.dom.getDocumentScroll_ = function(doc) {
|
|
var el = goog.dom.getDocumentScrollElement_(doc);
|
|
var win = goog.dom.getWindow_(doc);
|
|
if (goog.userAgent.IE && goog.userAgent.isVersionOrHigher('10') &&
|
|
win.pageYOffset != el.scrollTop) {
|
|
// The keyboard on IE10 touch devices shifts the page using the pageYOffset
|
|
// without modifying scrollTop. For this case, we want the body scroll
|
|
// offsets.
|
|
return new goog.math.Coordinate(el.scrollLeft, el.scrollTop);
|
|
}
|
|
return new goog.math.Coordinate(
|
|
win.pageXOffset || el.scrollLeft, win.pageYOffset || el.scrollTop);
|
|
};
|
|
|
|
|
|
/**
|
|
* Gets the document scroll element.
|
|
* @return {!Element} Scrolling element.
|
|
*/
|
|
goog.dom.getDocumentScrollElement = function() {
|
|
return goog.dom.getDocumentScrollElement_(document);
|
|
};
|
|
|
|
|
|
/**
|
|
* Helper for {@code getDocumentScrollElement}.
|
|
* @param {!Document} doc The document to get the scroll element for.
|
|
* @return {!Element} Scrolling element.
|
|
* @private
|
|
*/
|
|
goog.dom.getDocumentScrollElement_ = function(doc) {
|
|
// Old WebKit needs body.scrollLeft in both quirks mode and strict mode. We
|
|
// also default to the documentElement if the document does not have a body
|
|
// (e.g. a SVG document).
|
|
// Uses http://dev.w3.org/csswg/cssom-view/#dom-document-scrollingelement to
|
|
// avoid trying to guess about browser behavior from the UA string.
|
|
if (doc.scrollingElement) {
|
|
return doc.scrollingElement;
|
|
}
|
|
if (!goog.userAgent.WEBKIT && goog.dom.isCss1CompatMode_(doc)) {
|
|
return doc.documentElement;
|
|
}
|
|
return doc.body || doc.documentElement;
|
|
};
|
|
|
|
|
|
/**
|
|
* Gets the window object associated with the given document.
|
|
*
|
|
* @param {Document=} opt_doc Document object to get window for.
|
|
* @return {!Window} The window associated with the given document.
|
|
*/
|
|
goog.dom.getWindow = function(opt_doc) {
|
|
// TODO(arv): This should not take an argument.
|
|
return opt_doc ? goog.dom.getWindow_(opt_doc) : window;
|
|
};
|
|
|
|
|
|
/**
|
|
* Helper for {@code getWindow}.
|
|
*
|
|
* @param {!Document} doc Document object to get window for.
|
|
* @return {!Window} The window associated with the given document.
|
|
* @private
|
|
*/
|
|
goog.dom.getWindow_ = function(doc) {
|
|
return doc.parentWindow || doc.defaultView;
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns a dom node with a set of attributes. This function accepts varargs
|
|
* for subsequent nodes to be added. Subsequent nodes will be added to the
|
|
* first node as childNodes.
|
|
*
|
|
* So:
|
|
* <code>createDom('div', null, createDom('p'), createDom('p'));</code>
|
|
* would return a div with two child paragraphs
|
|
*
|
|
* @param {string} tagName Tag to create.
|
|
* @param {(Object|Array<string>|string)=} opt_attributes If object, then a map
|
|
* of name-value pairs for attributes. If a string, then this is the
|
|
* className of the new element. If an array, the elements will be joined
|
|
* together as the className of the new element.
|
|
* @param {...(Object|string|Array|NodeList)} var_args Further DOM nodes or
|
|
* strings for text nodes. If one of the var_args is an array or NodeList,
|
|
* its elements will be added as childNodes instead.
|
|
* @return {!Element} Reference to a DOM node.
|
|
*/
|
|
goog.dom.createDom = function(tagName, opt_attributes, var_args) {
|
|
return goog.dom.createDom_(document, arguments);
|
|
};
|
|
|
|
|
|
/**
|
|
* Helper for {@code createDom}.
|
|
* @param {!Document} doc The document to create the DOM in.
|
|
* @param {!Arguments} args Argument object passed from the callers. See
|
|
* {@code goog.dom.createDom} for details.
|
|
* @return {!Element} Reference to a DOM node.
|
|
* @private
|
|
*/
|
|
goog.dom.createDom_ = function(doc, args) {
|
|
var tagName = args[0];
|
|
var attributes = args[1];
|
|
|
|
// Internet Explorer is dumb:
|
|
// name: https://msdn.microsoft.com/en-us/library/ms534184(v=vs.85).aspx
|
|
// type: https://msdn.microsoft.com/en-us/library/ms534700(v=vs.85).aspx
|
|
// Also does not allow setting of 'type' attribute on 'input' or 'button'.
|
|
if (!goog.dom.BrowserFeature.CAN_ADD_NAME_OR_TYPE_ATTRIBUTES && attributes &&
|
|
(attributes.name || attributes.type)) {
|
|
var tagNameArr = ['<', tagName];
|
|
if (attributes.name) {
|
|
tagNameArr.push(' name="', goog.string.htmlEscape(attributes.name), '"');
|
|
}
|
|
if (attributes.type) {
|
|
tagNameArr.push(' type="', goog.string.htmlEscape(attributes.type), '"');
|
|
|
|
// Clone attributes map to remove 'type' without mutating the input.
|
|
var clone = {};
|
|
goog.object.extend(clone, attributes);
|
|
|
|
// JSCompiler can't see how goog.object.extend added this property,
|
|
// because it was essentially added by reflection.
|
|
// So it needs to be quoted.
|
|
delete clone['type'];
|
|
|
|
attributes = clone;
|
|
}
|
|
tagNameArr.push('>');
|
|
tagName = tagNameArr.join('');
|
|
}
|
|
|
|
var element = doc.createElement(tagName);
|
|
|
|
if (attributes) {
|
|
if (goog.isString(attributes)) {
|
|
element.className = attributes;
|
|
} else if (goog.isArray(attributes)) {
|
|
element.className = attributes.join(' ');
|
|
} else {
|
|
goog.dom.setProperties(element, attributes);
|
|
}
|
|
}
|
|
|
|
if (args.length > 2) {
|
|
goog.dom.append_(doc, element, args, 2);
|
|
}
|
|
|
|
return element;
|
|
};
|
|
|
|
|
|
/**
|
|
* Appends a node with text or other nodes.
|
|
* @param {!Document} doc The document to create new nodes in.
|
|
* @param {!Node} parent The node to append nodes to.
|
|
* @param {!Arguments} args The values to add. See {@code goog.dom.append}.
|
|
* @param {number} startIndex The index of the array to start from.
|
|
* @private
|
|
*/
|
|
goog.dom.append_ = function(doc, parent, args, startIndex) {
|
|
function childHandler(child) {
|
|
// TODO(user): More coercion, ala MochiKit?
|
|
if (child) {
|
|
parent.appendChild(
|
|
goog.isString(child) ? doc.createTextNode(child) : child);
|
|
}
|
|
}
|
|
|
|
for (var i = startIndex; i < args.length; i++) {
|
|
var arg = args[i];
|
|
// TODO(attila): Fix isArrayLike to return false for a text node.
|
|
if (goog.isArrayLike(arg) && !goog.dom.isNodeLike(arg)) {
|
|
// If the argument is a node list, not a real array, use a clone,
|
|
// because forEach can't be used to mutate a NodeList.
|
|
goog.array.forEach(
|
|
goog.dom.isNodeList(arg) ? goog.array.toArray(arg) : arg,
|
|
childHandler);
|
|
} else {
|
|
childHandler(arg);
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Alias for {@code createDom}.
|
|
* @param {string} tagName Tag to create.
|
|
* @param {(string|Object)=} opt_attributes If object, then a map of name-value
|
|
* pairs for attributes. If a string, then this is the className of the new
|
|
* element.
|
|
* @param {...(Object|string|Array|NodeList)} var_args Further DOM nodes or
|
|
* strings for text nodes. If one of the var_args is an array, its
|
|
* children will be added as childNodes instead.
|
|
* @return {!Element} Reference to a DOM node.
|
|
* @deprecated Use {@link goog.dom.createDom} instead.
|
|
*/
|
|
goog.dom.$dom = goog.dom.createDom;
|
|
|
|
|
|
/**
|
|
* Creates a new element.
|
|
* @param {string} name Tag name.
|
|
* @return {!Element} The new element.
|
|
*/
|
|
goog.dom.createElement = function(name) {
|
|
return document.createElement(name);
|
|
};
|
|
|
|
|
|
/**
|
|
* Creates a new text node.
|
|
* @param {number|string} content Content.
|
|
* @return {!Text} The new text node.
|
|
*/
|
|
goog.dom.createTextNode = function(content) {
|
|
return document.createTextNode(String(content));
|
|
};
|
|
|
|
|
|
/**
|
|
* Create a table.
|
|
* @param {number} rows The number of rows in the table. Must be >= 1.
|
|
* @param {number} columns The number of columns in the table. Must be >= 1.
|
|
* @param {boolean=} opt_fillWithNbsp If true, fills table entries with
|
|
* {@code goog.string.Unicode.NBSP} characters.
|
|
* @return {!Element} The created table.
|
|
*/
|
|
goog.dom.createTable = function(rows, columns, opt_fillWithNbsp) {
|
|
// TODO(user): Return HTMLTableElement, also in prototype function.
|
|
// Callers need to be updated to e.g. not assign numbers to table.cellSpacing.
|
|
return goog.dom.createTable_(document, rows, columns, !!opt_fillWithNbsp);
|
|
};
|
|
|
|
|
|
/**
|
|
* Create a table.
|
|
* @param {!Document} doc Document object to use to create the table.
|
|
* @param {number} rows The number of rows in the table. Must be >= 1.
|
|
* @param {number} columns The number of columns in the table. Must be >= 1.
|
|
* @param {boolean} fillWithNbsp If true, fills table entries with
|
|
* {@code goog.string.Unicode.NBSP} characters.
|
|
* @return {!HTMLTableElement} The created table.
|
|
* @private
|
|
*/
|
|
goog.dom.createTable_ = function(doc, rows, columns, fillWithNbsp) {
|
|
var table = /** @type {!HTMLTableElement} */
|
|
(doc.createElement(goog.dom.TagName.TABLE));
|
|
var tbody = table.appendChild(doc.createElement(goog.dom.TagName.TBODY));
|
|
for (var i = 0; i < rows; i++) {
|
|
var tr = doc.createElement(goog.dom.TagName.TR);
|
|
for (var j = 0; j < columns; j++) {
|
|
var td = doc.createElement(goog.dom.TagName.TD);
|
|
// IE <= 9 will create a text node if we set text content to the empty
|
|
// string, so we avoid doing it unless necessary. This ensures that the
|
|
// same DOM tree is returned on all browsers.
|
|
if (fillWithNbsp) {
|
|
goog.dom.setTextContent(td, goog.string.Unicode.NBSP);
|
|
}
|
|
tr.appendChild(td);
|
|
}
|
|
tbody.appendChild(tr);
|
|
}
|
|
return table;
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
* Creates a new Node from constant strings of HTML markup.
|
|
* @param {...!goog.string.Const} var_args The HTML strings to concatenate then
|
|
* convert into a node.
|
|
* @return {!Node}
|
|
*/
|
|
goog.dom.constHtmlToNode = function(var_args) {
|
|
var stringArray = goog.array.map(arguments, goog.string.Const.unwrap);
|
|
var safeHtml =
|
|
goog.html.uncheckedconversions
|
|
.safeHtmlFromStringKnownToSatisfyTypeContract(
|
|
goog.string.Const.from(
|
|
'Constant HTML string, that gets turned into a ' +
|
|
'Node later, so it will be automatically balanced.'),
|
|
stringArray.join(''));
|
|
return goog.dom.safeHtmlToNode(safeHtml);
|
|
};
|
|
|
|
|
|
/**
|
|
* Converts HTML markup into a node. This is a safe version of
|
|
* {@code goog.dom.htmlToDocumentFragment} which is now deleted.
|
|
* @param {!goog.html.SafeHtml} html The HTML markup to convert.
|
|
* @return {!Node} The resulting node.
|
|
*/
|
|
goog.dom.safeHtmlToNode = function(html) {
|
|
return goog.dom.safeHtmlToNode_(document, html);
|
|
};
|
|
|
|
|
|
/**
|
|
* Helper for {@code safeHtmlToNode}.
|
|
* @param {!Document} doc The document.
|
|
* @param {!goog.html.SafeHtml} html The HTML markup to convert.
|
|
* @return {!Node} The resulting node.
|
|
* @private
|
|
*/
|
|
goog.dom.safeHtmlToNode_ = function(doc, html) {
|
|
var tempDiv = doc.createElement(goog.dom.TagName.DIV);
|
|
if (goog.dom.BrowserFeature.INNER_HTML_NEEDS_SCOPED_ELEMENT) {
|
|
goog.dom.safe.setInnerHtml(
|
|
tempDiv, goog.html.SafeHtml.concat(goog.html.SafeHtml.BR, html));
|
|
tempDiv.removeChild(tempDiv.firstChild);
|
|
} else {
|
|
goog.dom.safe.setInnerHtml(tempDiv, html);
|
|
}
|
|
return goog.dom.childrenToNode_(doc, tempDiv);
|
|
};
|
|
|
|
|
|
/**
|
|
* Helper for {@code safeHtmlToNode_}.
|
|
* @param {!Document} doc The document.
|
|
* @param {!Node} tempDiv The input node.
|
|
* @return {!Node} The resulting node.
|
|
* @private
|
|
*/
|
|
goog.dom.childrenToNode_ = function(doc, tempDiv) {
|
|
if (tempDiv.childNodes.length == 1) {
|
|
return tempDiv.removeChild(tempDiv.firstChild);
|
|
} else {
|
|
var fragment = doc.createDocumentFragment();
|
|
while (tempDiv.firstChild) {
|
|
fragment.appendChild(tempDiv.firstChild);
|
|
}
|
|
return fragment;
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns true if the browser is in "CSS1-compatible" (standards-compliant)
|
|
* mode, false otherwise.
|
|
* @return {boolean} True if in CSS1-compatible mode.
|
|
*/
|
|
goog.dom.isCss1CompatMode = function() {
|
|
return goog.dom.isCss1CompatMode_(document);
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns true if the browser is in "CSS1-compatible" (standards-compliant)
|
|
* mode, false otherwise.
|
|
* @param {!Document} doc The document to check.
|
|
* @return {boolean} True if in CSS1-compatible mode.
|
|
* @private
|
|
*/
|
|
goog.dom.isCss1CompatMode_ = function(doc) {
|
|
if (goog.dom.COMPAT_MODE_KNOWN_) {
|
|
return goog.dom.ASSUME_STANDARDS_MODE;
|
|
}
|
|
|
|
return doc.compatMode == 'CSS1Compat';
|
|
};
|
|
|
|
|
|
/**
|
|
* Determines if the given node can contain children, intended to be used for
|
|
* HTML generation.
|
|
*
|
|
* IE natively supports node.canHaveChildren but has inconsistent behavior.
|
|
* Prior to IE8 the base tag allows children and in IE9 all nodes return true
|
|
* for canHaveChildren.
|
|
*
|
|
* In practice all non-IE browsers allow you to add children to any node, but
|
|
* the behavior is inconsistent:
|
|
*
|
|
* <pre>
|
|
* var a = document.createElement(goog.dom.TagName.BR);
|
|
* a.appendChild(document.createTextNode('foo'));
|
|
* a.appendChild(document.createTextNode('bar'));
|
|
* console.log(a.childNodes.length); // 2
|
|
* console.log(a.innerHTML); // Chrome: "", IE9: "foobar", FF3.5: "foobar"
|
|
* </pre>
|
|
*
|
|
* For more information, see:
|
|
* http://dev.w3.org/html5/markup/syntax.html#syntax-elements
|
|
*
|
|
* TODO(user): Rename shouldAllowChildren() ?
|
|
*
|
|
* @param {Node} node The node to check.
|
|
* @return {boolean} Whether the node can contain children.
|
|
*/
|
|
goog.dom.canHaveChildren = function(node) {
|
|
if (node.nodeType != goog.dom.NodeType.ELEMENT) {
|
|
return false;
|
|
}
|
|
switch (/** @type {!Element} */ (node).tagName) {
|
|
case goog.dom.TagName.APPLET:
|
|
case goog.dom.TagName.AREA:
|
|
case goog.dom.TagName.BASE:
|
|
case goog.dom.TagName.BR:
|
|
case goog.dom.TagName.COL:
|
|
case goog.dom.TagName.COMMAND:
|
|
case goog.dom.TagName.EMBED:
|
|
case goog.dom.TagName.FRAME:
|
|
case goog.dom.TagName.HR:
|
|
case goog.dom.TagName.IMG:
|
|
case goog.dom.TagName.INPUT:
|
|
case goog.dom.TagName.IFRAME:
|
|
case goog.dom.TagName.ISINDEX:
|
|
case goog.dom.TagName.KEYGEN:
|
|
case goog.dom.TagName.LINK:
|
|
case goog.dom.TagName.NOFRAMES:
|
|
case goog.dom.TagName.NOSCRIPT:
|
|
case goog.dom.TagName.META:
|
|
case goog.dom.TagName.OBJECT:
|
|
case goog.dom.TagName.PARAM:
|
|
case goog.dom.TagName.SCRIPT:
|
|
case goog.dom.TagName.SOURCE:
|
|
case goog.dom.TagName.STYLE:
|
|
case goog.dom.TagName.TRACK:
|
|
case goog.dom.TagName.WBR:
|
|
return false;
|
|
}
|
|
return true;
|
|
};
|
|
|
|
|
|
/**
|
|
* Appends a child to a node.
|
|
* @param {Node} parent Parent.
|
|
* @param {Node} child Child.
|
|
*/
|
|
goog.dom.appendChild = function(parent, child) {
|
|
parent.appendChild(child);
|
|
};
|
|
|
|
|
|
/**
|
|
* Appends a node with text or other nodes.
|
|
* @param {!Node} parent The node to append nodes to.
|
|
* @param {...goog.dom.Appendable} var_args The things to append to the node.
|
|
* If this is a Node it is appended as is.
|
|
* If this is a string then a text node is appended.
|
|
* If this is an array like object then fields 0 to length - 1 are appended.
|
|
*/
|
|
goog.dom.append = function(parent, var_args) {
|
|
goog.dom.append_(goog.dom.getOwnerDocument(parent), parent, arguments, 1);
|
|
};
|
|
|
|
|
|
/**
|
|
* Removes all the child nodes on a DOM node.
|
|
* @param {Node} node Node to remove children from.
|
|
*/
|
|
goog.dom.removeChildren = function(node) {
|
|
// Note: Iterations over live collections can be slow, this is the fastest
|
|
// we could find. The double parenthesis are used to prevent JsCompiler and
|
|
// strict warnings.
|
|
var child;
|
|
while ((child = node.firstChild)) {
|
|
node.removeChild(child);
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Inserts a new node before an existing reference node (i.e. as the previous
|
|
* sibling). If the reference node has no parent, then does nothing.
|
|
* @param {Node} newNode Node to insert.
|
|
* @param {Node} refNode Reference node to insert before.
|
|
*/
|
|
goog.dom.insertSiblingBefore = function(newNode, refNode) {
|
|
if (refNode.parentNode) {
|
|
refNode.parentNode.insertBefore(newNode, refNode);
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Inserts a new node after an existing reference node (i.e. as the next
|
|
* sibling). If the reference node has no parent, then does nothing.
|
|
* @param {Node} newNode Node to insert.
|
|
* @param {Node} refNode Reference node to insert after.
|
|
*/
|
|
goog.dom.insertSiblingAfter = function(newNode, refNode) {
|
|
if (refNode.parentNode) {
|
|
refNode.parentNode.insertBefore(newNode, refNode.nextSibling);
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Insert a child at a given index. If index is larger than the number of child
|
|
* nodes that the parent currently has, the node is inserted as the last child
|
|
* node.
|
|
* @param {Element} parent The element into which to insert the child.
|
|
* @param {Node} child The element to insert.
|
|
* @param {number} index The index at which to insert the new child node. Must
|
|
* not be negative.
|
|
*/
|
|
goog.dom.insertChildAt = function(parent, child, index) {
|
|
// Note that if the second argument is null, insertBefore
|
|
// will append the child at the end of the list of children.
|
|
parent.insertBefore(child, parent.childNodes[index] || null);
|
|
};
|
|
|
|
|
|
/**
|
|
* Removes a node from its parent.
|
|
* @param {Node} node The node to remove.
|
|
* @return {Node} The node removed if removed; else, null.
|
|
*/
|
|
goog.dom.removeNode = function(node) {
|
|
return node && node.parentNode ? node.parentNode.removeChild(node) : null;
|
|
};
|
|
|
|
|
|
/**
|
|
* Replaces a node in the DOM tree. Will do nothing if {@code oldNode} has no
|
|
* parent.
|
|
* @param {Node} newNode Node to insert.
|
|
* @param {Node} oldNode Node to replace.
|
|
*/
|
|
goog.dom.replaceNode = function(newNode, oldNode) {
|
|
var parent = oldNode.parentNode;
|
|
if (parent) {
|
|
parent.replaceChild(newNode, oldNode);
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Flattens an element. That is, removes it and replace it with its children.
|
|
* Does nothing if the element is not in the document.
|
|
* @param {Element} element The element to flatten.
|
|
* @return {Element|undefined} The original element, detached from the document
|
|
* tree, sans children; or undefined, if the element was not in the document
|
|
* to begin with.
|
|
*/
|
|
goog.dom.flattenElement = function(element) {
|
|
var child, parent = element.parentNode;
|
|
if (parent && parent.nodeType != goog.dom.NodeType.DOCUMENT_FRAGMENT) {
|
|
// Use IE DOM method (supported by Opera too) if available
|
|
if (element.removeNode) {
|
|
return /** @type {Element} */ (element.removeNode(false));
|
|
} else {
|
|
// Move all children of the original node up one level.
|
|
while ((child = element.firstChild)) {
|
|
parent.insertBefore(child, element);
|
|
}
|
|
|
|
// Detach the original element.
|
|
return /** @type {Element} */ (goog.dom.removeNode(element));
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns an array containing just the element children of the given element.
|
|
* @param {Element} element The element whose element children we want.
|
|
* @return {!(Array<!Element>|NodeList<!Element>)} An array or array-like list
|
|
* of just the element children of the given element.
|
|
*/
|
|
goog.dom.getChildren = function(element) {
|
|
// We check if the children attribute is supported for child elements
|
|
// since IE8 misuses the attribute by also including comments.
|
|
if (goog.dom.BrowserFeature.CAN_USE_CHILDREN_ATTRIBUTE &&
|
|
element.children != undefined) {
|
|
return element.children;
|
|
}
|
|
// Fall back to manually filtering the element's child nodes.
|
|
return goog.array.filter(element.childNodes, function(node) {
|
|
return node.nodeType == goog.dom.NodeType.ELEMENT;
|
|
});
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns the first child node that is an element.
|
|
* @param {Node} node The node to get the first child element of.
|
|
* @return {Element} The first child node of {@code node} that is an element.
|
|
*/
|
|
goog.dom.getFirstElementChild = function(node) {
|
|
if (goog.isDef(node.firstElementChild)) {
|
|
return /** @type {!Element} */ (node).firstElementChild;
|
|
}
|
|
return goog.dom.getNextElementNode_(node.firstChild, true);
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns the last child node that is an element.
|
|
* @param {Node} node The node to get the last child element of.
|
|
* @return {Element} The last child node of {@code node} that is an element.
|
|
*/
|
|
goog.dom.getLastElementChild = function(node) {
|
|
if (goog.isDef(node.lastElementChild)) {
|
|
return /** @type {!Element} */ (node).lastElementChild;
|
|
}
|
|
return goog.dom.getNextElementNode_(node.lastChild, false);
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns the first next sibling that is an element.
|
|
* @param {Node} node The node to get the next sibling element of.
|
|
* @return {Element} The next sibling of {@code node} that is an element.
|
|
*/
|
|
goog.dom.getNextElementSibling = function(node) {
|
|
if (goog.isDef(node.nextElementSibling)) {
|
|
return /** @type {!Element} */ (node).nextElementSibling;
|
|
}
|
|
return goog.dom.getNextElementNode_(node.nextSibling, true);
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns the first previous sibling that is an element.
|
|
* @param {Node} node The node to get the previous sibling element of.
|
|
* @return {Element} The first previous sibling of {@code node} that is
|
|
* an element.
|
|
*/
|
|
goog.dom.getPreviousElementSibling = function(node) {
|
|
if (goog.isDef(node.previousElementSibling)) {
|
|
return /** @type {!Element} */ (node).previousElementSibling;
|
|
}
|
|
return goog.dom.getNextElementNode_(node.previousSibling, false);
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns the first node that is an element in the specified direction,
|
|
* starting with {@code node}.
|
|
* @param {Node} node The node to get the next element from.
|
|
* @param {boolean} forward Whether to look forwards or backwards.
|
|
* @return {Element} The first element.
|
|
* @private
|
|
*/
|
|
goog.dom.getNextElementNode_ = function(node, forward) {
|
|
while (node && node.nodeType != goog.dom.NodeType.ELEMENT) {
|
|
node = forward ? node.nextSibling : node.previousSibling;
|
|
}
|
|
|
|
return /** @type {Element} */ (node);
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns the next node in source order from the given node.
|
|
* @param {Node} node The node.
|
|
* @return {Node} The next node in the DOM tree, or null if this was the last
|
|
* node.
|
|
*/
|
|
goog.dom.getNextNode = function(node) {
|
|
if (!node) {
|
|
return null;
|
|
}
|
|
|
|
if (node.firstChild) {
|
|
return node.firstChild;
|
|
}
|
|
|
|
while (node && !node.nextSibling) {
|
|
node = node.parentNode;
|
|
}
|
|
|
|
return node ? node.nextSibling : null;
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns the previous node in source order from the given node.
|
|
* @param {Node} node The node.
|
|
* @return {Node} The previous node in the DOM tree, or null if this was the
|
|
* first node.
|
|
*/
|
|
goog.dom.getPreviousNode = function(node) {
|
|
if (!node) {
|
|
return null;
|
|
}
|
|
|
|
if (!node.previousSibling) {
|
|
return node.parentNode;
|
|
}
|
|
|
|
node = node.previousSibling;
|
|
while (node && node.lastChild) {
|
|
node = node.lastChild;
|
|
}
|
|
|
|
return node;
|
|
};
|
|
|
|
|
|
/**
|
|
* Whether the object looks like a DOM node.
|
|
* @param {?} obj The object being tested for node likeness.
|
|
* @return {boolean} Whether the object looks like a DOM node.
|
|
*/
|
|
goog.dom.isNodeLike = function(obj) {
|
|
return goog.isObject(obj) && obj.nodeType > 0;
|
|
};
|
|
|
|
|
|
/**
|
|
* Whether the object looks like an Element.
|
|
* @param {?} obj The object being tested for Element likeness.
|
|
* @return {boolean} Whether the object looks like an Element.
|
|
*/
|
|
goog.dom.isElement = function(obj) {
|
|
return goog.isObject(obj) && obj.nodeType == goog.dom.NodeType.ELEMENT;
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns true if the specified value is a Window object. This includes the
|
|
* global window for HTML pages, and iframe windows.
|
|
* @param {?} obj Variable to test.
|
|
* @return {boolean} Whether the variable is a window.
|
|
*/
|
|
goog.dom.isWindow = function(obj) {
|
|
return goog.isObject(obj) && obj['window'] == obj;
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns an element's parent, if it's an Element.
|
|
* @param {Element} element The DOM element.
|
|
* @return {Element} The parent, or null if not an Element.
|
|
*/
|
|
goog.dom.getParentElement = function(element) {
|
|
var parent;
|
|
if (goog.dom.BrowserFeature.CAN_USE_PARENT_ELEMENT_PROPERTY) {
|
|
var isIe9 = goog.userAgent.IE && goog.userAgent.isVersionOrHigher('9') &&
|
|
!goog.userAgent.isVersionOrHigher('10');
|
|
// SVG elements in IE9 can't use the parentElement property.
|
|
// goog.global['SVGElement'] is not defined in IE9 quirks mode.
|
|
if (!(isIe9 && goog.global['SVGElement'] &&
|
|
element instanceof goog.global['SVGElement'])) {
|
|
parent = element.parentElement;
|
|
if (parent) {
|
|
return parent;
|
|
}
|
|
}
|
|
}
|
|
parent = element.parentNode;
|
|
return goog.dom.isElement(parent) ? /** @type {!Element} */ (parent) : null;
|
|
};
|
|
|
|
|
|
/**
|
|
* Whether a node contains another node.
|
|
* @param {?Node} parent The node that should contain the other node.
|
|
* @param {?Node} descendant The node to test presence of.
|
|
* @return {boolean} Whether the parent node contains the descendent node.
|
|
*/
|
|
goog.dom.contains = function(parent, descendant) {
|
|
if (!parent || !descendant) {
|
|
return false;
|
|
}
|
|
// We use browser specific methods for this if available since it is faster
|
|
// that way.
|
|
|
|
// IE DOM
|
|
if (parent.contains && descendant.nodeType == goog.dom.NodeType.ELEMENT) {
|
|
return parent == descendant || parent.contains(descendant);
|
|
}
|
|
|
|
// W3C DOM Level 3
|
|
if (typeof parent.compareDocumentPosition != 'undefined') {
|
|
return parent == descendant ||
|
|
Boolean(parent.compareDocumentPosition(descendant) & 16);
|
|
}
|
|
|
|
// W3C DOM Level 1
|
|
while (descendant && parent != descendant) {
|
|
descendant = descendant.parentNode;
|
|
}
|
|
return descendant == parent;
|
|
};
|
|
|
|
|
|
/**
|
|
* Compares the document order of two nodes, returning 0 if they are the same
|
|
* node, a negative number if node1 is before node2, and a positive number if
|
|
* node2 is before node1. Note that we compare the order the tags appear in the
|
|
* document so in the tree <b><i>text</i></b> the B node is considered to be
|
|
* before the I node.
|
|
*
|
|
* @param {Node} node1 The first node to compare.
|
|
* @param {Node} node2 The second node to compare.
|
|
* @return {number} 0 if the nodes are the same node, a negative number if node1
|
|
* is before node2, and a positive number if node2 is before node1.
|
|
*/
|
|
goog.dom.compareNodeOrder = function(node1, node2) {
|
|
// Fall out quickly for equality.
|
|
if (node1 == node2) {
|
|
return 0;
|
|
}
|
|
|
|
// Use compareDocumentPosition where available
|
|
if (node1.compareDocumentPosition) {
|
|
// 4 is the bitmask for FOLLOWS.
|
|
return node1.compareDocumentPosition(node2) & 2 ? 1 : -1;
|
|
}
|
|
|
|
// Special case for document nodes on IE 7 and 8.
|
|
if (goog.userAgent.IE && !goog.userAgent.isDocumentModeOrHigher(9)) {
|
|
if (node1.nodeType == goog.dom.NodeType.DOCUMENT) {
|
|
return -1;
|
|
}
|
|
if (node2.nodeType == goog.dom.NodeType.DOCUMENT) {
|
|
return 1;
|
|
}
|
|
}
|
|
|
|
// Process in IE using sourceIndex - we check to see if the first node has
|
|
// a source index or if its parent has one.
|
|
if ('sourceIndex' in node1 ||
|
|
(node1.parentNode && 'sourceIndex' in node1.parentNode)) {
|
|
var isElement1 = node1.nodeType == goog.dom.NodeType.ELEMENT;
|
|
var isElement2 = node2.nodeType == goog.dom.NodeType.ELEMENT;
|
|
|
|
if (isElement1 && isElement2) {
|
|
return node1.sourceIndex - node2.sourceIndex;
|
|
} else {
|
|
var parent1 = node1.parentNode;
|
|
var parent2 = node2.parentNode;
|
|
|
|
if (parent1 == parent2) {
|
|
return goog.dom.compareSiblingOrder_(node1, node2);
|
|
}
|
|
|
|
if (!isElement1 && goog.dom.contains(parent1, node2)) {
|
|
return -1 * goog.dom.compareParentsDescendantNodeIe_(node1, node2);
|
|
}
|
|
|
|
|
|
if (!isElement2 && goog.dom.contains(parent2, node1)) {
|
|
return goog.dom.compareParentsDescendantNodeIe_(node2, node1);
|
|
}
|
|
|
|
return (isElement1 ? node1.sourceIndex : parent1.sourceIndex) -
|
|
(isElement2 ? node2.sourceIndex : parent2.sourceIndex);
|
|
}
|
|
}
|
|
|
|
// For Safari, we compare ranges.
|
|
var doc = goog.dom.getOwnerDocument(node1);
|
|
|
|
var range1, range2;
|
|
range1 = doc.createRange();
|
|
range1.selectNode(node1);
|
|
range1.collapse(true);
|
|
|
|
range2 = doc.createRange();
|
|
range2.selectNode(node2);
|
|
range2.collapse(true);
|
|
|
|
return range1.compareBoundaryPoints(
|
|
goog.global['Range'].START_TO_END, range2);
|
|
};
|
|
|
|
|
|
/**
|
|
* Utility function to compare the position of two nodes, when
|
|
* {@code textNode}'s parent is an ancestor of {@code node}. If this entry
|
|
* condition is not met, this function will attempt to reference a null object.
|
|
* @param {!Node} textNode The textNode to compare.
|
|
* @param {Node} node The node to compare.
|
|
* @return {number} -1 if node is before textNode, +1 otherwise.
|
|
* @private
|
|
*/
|
|
goog.dom.compareParentsDescendantNodeIe_ = function(textNode, node) {
|
|
var parent = textNode.parentNode;
|
|
if (parent == node) {
|
|
// If textNode is a child of node, then node comes first.
|
|
return -1;
|
|
}
|
|
var sibling = node;
|
|
while (sibling.parentNode != parent) {
|
|
sibling = sibling.parentNode;
|
|
}
|
|
return goog.dom.compareSiblingOrder_(sibling, textNode);
|
|
};
|
|
|
|
|
|
/**
|
|
* Utility function to compare the position of two nodes known to be non-equal
|
|
* siblings.
|
|
* @param {Node} node1 The first node to compare.
|
|
* @param {!Node} node2 The second node to compare.
|
|
* @return {number} -1 if node1 is before node2, +1 otherwise.
|
|
* @private
|
|
*/
|
|
goog.dom.compareSiblingOrder_ = function(node1, node2) {
|
|
var s = node2;
|
|
while ((s = s.previousSibling)) {
|
|
if (s == node1) {
|
|
// We just found node1 before node2.
|
|
return -1;
|
|
}
|
|
}
|
|
|
|
// Since we didn't find it, node1 must be after node2.
|
|
return 1;
|
|
};
|
|
|
|
|
|
/**
|
|
* Find the deepest common ancestor of the given nodes.
|
|
* @param {...Node} var_args The nodes to find a common ancestor of.
|
|
* @return {Node} The common ancestor of the nodes, or null if there is none.
|
|
* null will only be returned if two or more of the nodes are from different
|
|
* documents.
|
|
*/
|
|
goog.dom.findCommonAncestor = function(var_args) {
|
|
var i, count = arguments.length;
|
|
if (!count) {
|
|
return null;
|
|
} else if (count == 1) {
|
|
return arguments[0];
|
|
}
|
|
|
|
var paths = [];
|
|
var minLength = Infinity;
|
|
for (i = 0; i < count; i++) {
|
|
// Compute the list of ancestors.
|
|
var ancestors = [];
|
|
var node = arguments[i];
|
|
while (node) {
|
|
ancestors.unshift(node);
|
|
node = node.parentNode;
|
|
}
|
|
|
|
// Save the list for comparison.
|
|
paths.push(ancestors);
|
|
minLength = Math.min(minLength, ancestors.length);
|
|
}
|
|
var output = null;
|
|
for (i = 0; i < minLength; i++) {
|
|
var first = paths[0][i];
|
|
for (var j = 1; j < count; j++) {
|
|
if (first != paths[j][i]) {
|
|
return output;
|
|
}
|
|
}
|
|
output = first;
|
|
}
|
|
return output;
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns the owner document for a node.
|
|
* @param {Node|Window} node The node to get the document for.
|
|
* @return {!Document} The document owning the node.
|
|
*/
|
|
goog.dom.getOwnerDocument = function(node) {
|
|
// TODO(nnaze): Update param signature to be non-nullable.
|
|
goog.asserts.assert(node, 'Node cannot be null or undefined.');
|
|
return /** @type {!Document} */ (
|
|
node.nodeType == goog.dom.NodeType.DOCUMENT ? node : node.ownerDocument ||
|
|
node.document);
|
|
};
|
|
|
|
|
|
/**
|
|
* Cross-browser function for getting the document element of a frame or iframe.
|
|
* @param {Element} frame Frame element.
|
|
* @return {!Document} The frame content document.
|
|
*/
|
|
goog.dom.getFrameContentDocument = function(frame) {
|
|
return frame.contentDocument ||
|
|
/** @type {!HTMLFrameElement} */ (frame).contentWindow.document;
|
|
};
|
|
|
|
|
|
/**
|
|
* Cross-browser function for getting the window of a frame or iframe.
|
|
* @param {Element} frame Frame element.
|
|
* @return {Window} The window associated with the given frame, or null if none
|
|
* exists.
|
|
*/
|
|
goog.dom.getFrameContentWindow = function(frame) {
|
|
try {
|
|
return frame.contentWindow ||
|
|
(frame.contentDocument ? goog.dom.getWindow(frame.contentDocument) :
|
|
null);
|
|
} catch (e) {
|
|
// NOTE(user): In IE8, checking the contentWindow or contentDocument
|
|
// properties will throw a "Unspecified Error" exception if the iframe is
|
|
// not inserted in the DOM. If we get this we can be sure that no window
|
|
// exists, so return null.
|
|
}
|
|
return null;
|
|
};
|
|
|
|
|
|
/**
|
|
* Sets the text content of a node, with cross-browser support.
|
|
* @param {Node} node The node to change the text content of.
|
|
* @param {string|number} text The value that should replace the node's content.
|
|
*/
|
|
goog.dom.setTextContent = function(node, text) {
|
|
goog.asserts.assert(
|
|
node != null,
|
|
'goog.dom.setTextContent expects a non-null value for node');
|
|
|
|
if ('textContent' in node) {
|
|
node.textContent = text;
|
|
} else if (node.nodeType == goog.dom.NodeType.TEXT) {
|
|
node.data = text;
|
|
} else if (
|
|
node.firstChild && node.firstChild.nodeType == goog.dom.NodeType.TEXT) {
|
|
// If the first child is a text node we just change its data and remove the
|
|
// rest of the children.
|
|
while (node.lastChild != node.firstChild) {
|
|
node.removeChild(node.lastChild);
|
|
}
|
|
node.firstChild.data = text;
|
|
} else {
|
|
goog.dom.removeChildren(node);
|
|
var doc = goog.dom.getOwnerDocument(node);
|
|
node.appendChild(doc.createTextNode(String(text)));
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Gets the outerHTML of a node, which islike innerHTML, except that it
|
|
* actually contains the HTML of the node itself.
|
|
* @param {Element} element The element to get the HTML of.
|
|
* @return {string} The outerHTML of the given element.
|
|
*/
|
|
goog.dom.getOuterHtml = function(element) {
|
|
goog.asserts.assert(
|
|
element !== null,
|
|
'goog.dom.getOuterHtml expects a non-null value for element');
|
|
// IE, Opera and WebKit all have outerHTML.
|
|
if ('outerHTML' in element) {
|
|
return element.outerHTML;
|
|
} else {
|
|
var doc = goog.dom.getOwnerDocument(element);
|
|
var div = doc.createElement(goog.dom.TagName.DIV);
|
|
div.appendChild(element.cloneNode(true));
|
|
return div.innerHTML;
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Finds the first descendant node that matches the filter function, using
|
|
* a depth first search. This function offers the most general purpose way
|
|
* of finding a matching element. You may also wish to consider
|
|
* {@code goog.dom.query} which can express many matching criteria using
|
|
* CSS selector expressions. These expressions often result in a more
|
|
* compact representation of the desired result.
|
|
* @see goog.dom.query
|
|
*
|
|
* @param {Node} root The root of the tree to search.
|
|
* @param {function(Node) : boolean} p The filter function.
|
|
* @return {Node|undefined} The found node or undefined if none is found.
|
|
*/
|
|
goog.dom.findNode = function(root, p) {
|
|
var rv = [];
|
|
var found = goog.dom.findNodes_(root, p, rv, true);
|
|
return found ? rv[0] : undefined;
|
|
};
|
|
|
|
|
|
/**
|
|
* Finds all the descendant nodes that match the filter function, using a
|
|
* a depth first search. This function offers the most general-purpose way
|
|
* of finding a set of matching elements. You may also wish to consider
|
|
* {@code goog.dom.query} which can express many matching criteria using
|
|
* CSS selector expressions. These expressions often result in a more
|
|
* compact representation of the desired result.
|
|
|
|
* @param {Node} root The root of the tree to search.
|
|
* @param {function(Node) : boolean} p The filter function.
|
|
* @return {!Array<!Node>} The found nodes or an empty array if none are found.
|
|
*/
|
|
goog.dom.findNodes = function(root, p) {
|
|
var rv = [];
|
|
goog.dom.findNodes_(root, p, rv, false);
|
|
return rv;
|
|
};
|
|
|
|
|
|
/**
|
|
* Finds the first or all the descendant nodes that match the filter function,
|
|
* using a depth first search.
|
|
* @param {Node} root The root of the tree to search.
|
|
* @param {function(Node) : boolean} p The filter function.
|
|
* @param {!Array<!Node>} rv The found nodes are added to this array.
|
|
* @param {boolean} findOne If true we exit after the first found node.
|
|
* @return {boolean} Whether the search is complete or not. True in case findOne
|
|
* is true and the node is found. False otherwise.
|
|
* @private
|
|
*/
|
|
goog.dom.findNodes_ = function(root, p, rv, findOne) {
|
|
if (root != null) {
|
|
var child = root.firstChild;
|
|
while (child) {
|
|
if (p(child)) {
|
|
rv.push(child);
|
|
if (findOne) {
|
|
return true;
|
|
}
|
|
}
|
|
if (goog.dom.findNodes_(child, p, rv, findOne)) {
|
|
return true;
|
|
}
|
|
child = child.nextSibling;
|
|
}
|
|
}
|
|
return false;
|
|
};
|
|
|
|
|
|
/**
|
|
* Map of tags whose content to ignore when calculating text length.
|
|
* @private {!Object<string, number>}
|
|
* @const
|
|
*/
|
|
goog.dom.TAGS_TO_IGNORE_ = {
|
|
'SCRIPT': 1,
|
|
'STYLE': 1,
|
|
'HEAD': 1,
|
|
'IFRAME': 1,
|
|
'OBJECT': 1
|
|
};
|
|
|
|
|
|
/**
|
|
* Map of tags which have predefined values with regard to whitespace.
|
|
* @private {!Object<string, string>}
|
|
* @const
|
|
*/
|
|
goog.dom.PREDEFINED_TAG_VALUES_ = {
|
|
'IMG': ' ',
|
|
'BR': '\n'
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns true if the element has a tab index that allows it to receive
|
|
* keyboard focus (tabIndex >= 0), false otherwise. Note that some elements
|
|
* natively support keyboard focus, even if they have no tab index.
|
|
* @param {!Element} element Element to check.
|
|
* @return {boolean} Whether the element has a tab index that allows keyboard
|
|
* focus.
|
|
*/
|
|
goog.dom.isFocusableTabIndex = function(element) {
|
|
return goog.dom.hasSpecifiedTabIndex_(element) &&
|
|
goog.dom.isTabIndexFocusable_(element);
|
|
};
|
|
|
|
|
|
/**
|
|
* Enables or disables keyboard focus support on the element via its tab index.
|
|
* Only elements for which {@link goog.dom.isFocusableTabIndex} returns true
|
|
* (or elements that natively support keyboard focus, like form elements) can
|
|
* receive keyboard focus. See http://go/tabindex for more info.
|
|
* @param {Element} element Element whose tab index is to be changed.
|
|
* @param {boolean} enable Whether to set or remove a tab index on the element
|
|
* that supports keyboard focus.
|
|
*/
|
|
goog.dom.setFocusableTabIndex = function(element, enable) {
|
|
if (enable) {
|
|
element.tabIndex = 0;
|
|
} else {
|
|
// Set tabIndex to -1 first, then remove it. This is a workaround for
|
|
// Safari (confirmed in version 4 on Windows). When removing the attribute
|
|
// without setting it to -1 first, the element remains keyboard focusable
|
|
// despite not having a tabIndex attribute anymore.
|
|
element.tabIndex = -1;
|
|
element.removeAttribute('tabIndex'); // Must be camelCase!
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns true if the element can be focused, i.e. it has a tab index that
|
|
* allows it to receive keyboard focus (tabIndex >= 0), or it is an element
|
|
* that natively supports keyboard focus.
|
|
* @param {!Element} element Element to check.
|
|
* @return {boolean} Whether the element allows keyboard focus.
|
|
*/
|
|
goog.dom.isFocusable = function(element) {
|
|
var focusable;
|
|
// Some elements can have unspecified tab index and still receive focus.
|
|
if (goog.dom.nativelySupportsFocus_(element)) {
|
|
// Make sure the element is not disabled ...
|
|
focusable = !element.disabled &&
|
|
// ... and if a tab index is specified, it allows focus.
|
|
(!goog.dom.hasSpecifiedTabIndex_(element) ||
|
|
goog.dom.isTabIndexFocusable_(element));
|
|
} else {
|
|
focusable = goog.dom.isFocusableTabIndex(element);
|
|
}
|
|
|
|
// IE requires elements to be visible in order to focus them.
|
|
return focusable && goog.userAgent.IE ?
|
|
goog.dom.hasNonZeroBoundingRect_(/** @type {!HTMLElement} */ (element)) :
|
|
focusable;
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns true if the element has a specified tab index.
|
|
* @param {!Element} element Element to check.
|
|
* @return {boolean} Whether the element has a specified tab index.
|
|
* @private
|
|
*/
|
|
goog.dom.hasSpecifiedTabIndex_ = function(element) {
|
|
// IE returns 0 for an unset tabIndex, so we must use getAttributeNode(),
|
|
// which returns an object with a 'specified' property if tabIndex is
|
|
// specified. This works on other browsers, too.
|
|
var attrNode = element.getAttributeNode('tabindex'); // Must be lowercase!
|
|
return goog.isDefAndNotNull(attrNode) && attrNode.specified;
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns true if the element's tab index allows the element to be focused.
|
|
* @param {!Element} element Element to check.
|
|
* @return {boolean} Whether the element's tab index allows focus.
|
|
* @private
|
|
*/
|
|
goog.dom.isTabIndexFocusable_ = function(element) {
|
|
var index = /** @type {!HTMLElement} */ (element).tabIndex;
|
|
// NOTE: IE9 puts tabIndex in 16-bit int, e.g. -2 is 65534.
|
|
return goog.isNumber(index) && index >= 0 && index < 32768;
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns true if the element is focusable even when tabIndex is not set.
|
|
* @param {!Element} element Element to check.
|
|
* @return {boolean} Whether the element natively supports focus.
|
|
* @private
|
|
*/
|
|
goog.dom.nativelySupportsFocus_ = function(element) {
|
|
return element.tagName == goog.dom.TagName.A ||
|
|
element.tagName == goog.dom.TagName.INPUT ||
|
|
element.tagName == goog.dom.TagName.TEXTAREA ||
|
|
element.tagName == goog.dom.TagName.SELECT ||
|
|
element.tagName == goog.dom.TagName.BUTTON;
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns true if the element has a bounding rectangle that would be visible
|
|
* (i.e. its width and height are greater than zero).
|
|
* @param {!HTMLElement} element Element to check.
|
|
* @return {boolean} Whether the element has a non-zero bounding rectangle.
|
|
* @private
|
|
*/
|
|
goog.dom.hasNonZeroBoundingRect_ = function(element) {
|
|
var rect;
|
|
if (!goog.isFunction(element['getBoundingClientRect']) ||
|
|
// In IE, getBoundingClientRect throws on detached nodes.
|
|
(goog.userAgent.IE && element.parentElement == null)) {
|
|
rect = {'height': element.offsetHeight, 'width': element.offsetWidth};
|
|
} else {
|
|
rect = element.getBoundingClientRect();
|
|
}
|
|
return goog.isDefAndNotNull(rect) && rect.height > 0 && rect.width > 0;
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns the text content of the current node, without markup and invisible
|
|
* symbols. New lines are stripped and whitespace is collapsed,
|
|
* such that each character would be visible.
|
|
*
|
|
* In browsers that support it, innerText is used. Other browsers attempt to
|
|
* simulate it via node traversal. Line breaks are canonicalized in IE.
|
|
*
|
|
* @param {Node} node The node from which we are getting content.
|
|
* @return {string} The text content.
|
|
*/
|
|
goog.dom.getTextContent = function(node) {
|
|
var textContent;
|
|
// Note(arv): IE9, Opera, and Safari 3 support innerText but they include
|
|
// text nodes in script tags. So we revert to use a user agent test here.
|
|
if (goog.dom.BrowserFeature.CAN_USE_INNER_TEXT && node !== null &&
|
|
('innerText' in node)) {
|
|
textContent = goog.string.canonicalizeNewlines(node.innerText);
|
|
// Unfortunately .innerText() returns text with ­ symbols
|
|
// We need to filter it out and then remove duplicate whitespaces
|
|
} else {
|
|
var buf = [];
|
|
goog.dom.getTextContent_(node, buf, true);
|
|
textContent = buf.join('');
|
|
}
|
|
|
|
// Strip ­ entities. goog.format.insertWordBreaks inserts them in Opera.
|
|
textContent = textContent.replace(/ \xAD /g, ' ').replace(/\xAD/g, '');
|
|
// Strip ​ entities. goog.format.insertWordBreaks inserts them in IE8.
|
|
textContent = textContent.replace(/\u200B/g, '');
|
|
|
|
// Skip this replacement on old browsers with working innerText, which
|
|
// automatically turns into ' ' and / +/ into ' ' when reading
|
|
// innerText.
|
|
if (!goog.dom.BrowserFeature.CAN_USE_INNER_TEXT) {
|
|
textContent = textContent.replace(/ +/g, ' ');
|
|
}
|
|
if (textContent != ' ') {
|
|
textContent = textContent.replace(/^\s*/, '');
|
|
}
|
|
|
|
return textContent;
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns the text content of the current node, without markup.
|
|
*
|
|
* Unlike {@code getTextContent} this method does not collapse whitespaces
|
|
* or normalize lines breaks.
|
|
*
|
|
* @param {Node} node The node from which we are getting content.
|
|
* @return {string} The raw text content.
|
|
*/
|
|
goog.dom.getRawTextContent = function(node) {
|
|
var buf = [];
|
|
goog.dom.getTextContent_(node, buf, false);
|
|
|
|
return buf.join('');
|
|
};
|
|
|
|
|
|
/**
|
|
* Recursive support function for text content retrieval.
|
|
*
|
|
* @param {Node} node The node from which we are getting content.
|
|
* @param {Array<string>} buf string buffer.
|
|
* @param {boolean} normalizeWhitespace Whether to normalize whitespace.
|
|
* @private
|
|
*/
|
|
goog.dom.getTextContent_ = function(node, buf, normalizeWhitespace) {
|
|
if (node.nodeName in goog.dom.TAGS_TO_IGNORE_) {
|
|
// ignore certain tags
|
|
} else if (node.nodeType == goog.dom.NodeType.TEXT) {
|
|
if (normalizeWhitespace) {
|
|
buf.push(String(node.nodeValue).replace(/(\r\n|\r|\n)/g, ''));
|
|
} else {
|
|
buf.push(node.nodeValue);
|
|
}
|
|
} else if (node.nodeName in goog.dom.PREDEFINED_TAG_VALUES_) {
|
|
buf.push(goog.dom.PREDEFINED_TAG_VALUES_[node.nodeName]);
|
|
} else {
|
|
var child = node.firstChild;
|
|
while (child) {
|
|
goog.dom.getTextContent_(child, buf, normalizeWhitespace);
|
|
child = child.nextSibling;
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns the text length of the text contained in a node, without markup. This
|
|
* is equivalent to the selection length if the node was selected, or the number
|
|
* of cursor movements to traverse the node. Images & BRs take one space. New
|
|
* lines are ignored.
|
|
*
|
|
* @param {Node} node The node whose text content length is being calculated.
|
|
* @return {number} The length of {@code node}'s text content.
|
|
*/
|
|
goog.dom.getNodeTextLength = function(node) {
|
|
return goog.dom.getTextContent(node).length;
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns the text offset of a node relative to one of its ancestors. The text
|
|
* length is the same as the length calculated by goog.dom.getNodeTextLength.
|
|
*
|
|
* @param {Node} node The node whose offset is being calculated.
|
|
* @param {Node=} opt_offsetParent The node relative to which the offset will
|
|
* be calculated. Defaults to the node's owner document's body.
|
|
* @return {number} The text offset.
|
|
*/
|
|
goog.dom.getNodeTextOffset = function(node, opt_offsetParent) {
|
|
var root = opt_offsetParent || goog.dom.getOwnerDocument(node).body;
|
|
var buf = [];
|
|
while (node && node != root) {
|
|
var cur = node;
|
|
while ((cur = cur.previousSibling)) {
|
|
buf.unshift(goog.dom.getTextContent(cur));
|
|
}
|
|
node = node.parentNode;
|
|
}
|
|
// Trim left to deal with FF cases when there might be line breaks and empty
|
|
// nodes at the front of the text
|
|
return goog.string.trimLeft(buf.join('')).replace(/ +/g, ' ').length;
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns the node at a given offset in a parent node. If an object is
|
|
* provided for the optional third parameter, the node and the remainder of the
|
|
* offset will stored as properties of this object.
|
|
* @param {Node} parent The parent node.
|
|
* @param {number} offset The offset into the parent node.
|
|
* @param {Object=} opt_result Object to be used to store the return value. The
|
|
* return value will be stored in the form {node: Node, remainder: number}
|
|
* if this object is provided.
|
|
* @return {Node} The node at the given offset.
|
|
*/
|
|
goog.dom.getNodeAtOffset = function(parent, offset, opt_result) {
|
|
var stack = [parent], pos = 0, cur = null;
|
|
while (stack.length > 0 && pos < offset) {
|
|
cur = stack.pop();
|
|
if (cur.nodeName in goog.dom.TAGS_TO_IGNORE_) {
|
|
// ignore certain tags
|
|
} else if (cur.nodeType == goog.dom.NodeType.TEXT) {
|
|
var text = cur.nodeValue.replace(/(\r\n|\r|\n)/g, '').replace(/ +/g, ' ');
|
|
pos += text.length;
|
|
} else if (cur.nodeName in goog.dom.PREDEFINED_TAG_VALUES_) {
|
|
pos += goog.dom.PREDEFINED_TAG_VALUES_[cur.nodeName].length;
|
|
} else {
|
|
for (var i = cur.childNodes.length - 1; i >= 0; i--) {
|
|
stack.push(cur.childNodes[i]);
|
|
}
|
|
}
|
|
}
|
|
if (goog.isObject(opt_result)) {
|
|
opt_result.remainder = cur ? cur.nodeValue.length + offset - pos - 1 : 0;
|
|
opt_result.node = cur;
|
|
}
|
|
|
|
return cur;
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns true if the object is a {@code NodeList}. To qualify as a NodeList,
|
|
* the object must have a numeric length property and an item function (which
|
|
* has type 'string' on IE for some reason).
|
|
* @param {Object} val Object to test.
|
|
* @return {boolean} Whether the object is a NodeList.
|
|
*/
|
|
goog.dom.isNodeList = function(val) {
|
|
// TODO(attila): Now the isNodeList is part of goog.dom we can use
|
|
// goog.userAgent to make this simpler.
|
|
// A NodeList must have a length property of type 'number' on all platforms.
|
|
if (val && typeof val.length == 'number') {
|
|
// A NodeList is an object everywhere except Safari, where it's a function.
|
|
if (goog.isObject(val)) {
|
|
// A NodeList must have an item function (on non-IE platforms) or an item
|
|
// property of type 'string' (on IE).
|
|
return typeof val.item == 'function' || typeof val.item == 'string';
|
|
} else if (goog.isFunction(val)) {
|
|
// On Safari, a NodeList is a function with an item property that is also
|
|
// a function.
|
|
return typeof val.item == 'function';
|
|
}
|
|
}
|
|
|
|
// Not a NodeList.
|
|
return false;
|
|
};
|
|
|
|
|
|
/**
|
|
* Walks up the DOM hierarchy returning the first ancestor that has the passed
|
|
* tag name and/or class name. If the passed element matches the specified
|
|
* criteria, the element itself is returned.
|
|
* @param {Node} element The DOM node to start with.
|
|
* @param {?(goog.dom.TagName|string)=} opt_tag The tag name to match (or
|
|
* null/undefined to match only based on class name).
|
|
* @param {?string=} opt_class The class name to match (or null/undefined to
|
|
* match only based on tag name).
|
|
* @param {number=} opt_maxSearchSteps Maximum number of levels to search up the
|
|
* dom.
|
|
* @return {Element} The first ancestor that matches the passed criteria, or
|
|
* null if no match is found.
|
|
*/
|
|
goog.dom.getAncestorByTagNameAndClass = function(
|
|
element, opt_tag, opt_class, opt_maxSearchSteps) {
|
|
if (!opt_tag && !opt_class) {
|
|
return null;
|
|
}
|
|
var tagName = opt_tag ? opt_tag.toUpperCase() : null;
|
|
return /** @type {Element} */ (goog.dom.getAncestor(element, function(node) {
|
|
return (!tagName || node.nodeName == tagName) &&
|
|
(!opt_class ||
|
|
goog.isString(node.className) &&
|
|
goog.array.contains(node.className.split(/\s+/), opt_class));
|
|
}, true, opt_maxSearchSteps));
|
|
};
|
|
|
|
|
|
/**
|
|
* Walks up the DOM hierarchy returning the first ancestor that has the passed
|
|
* class name. If the passed element matches the specified criteria, the
|
|
* element itself is returned.
|
|
* @param {Node} element The DOM node to start with.
|
|
* @param {string} className The class name to match.
|
|
* @param {number=} opt_maxSearchSteps Maximum number of levels to search up the
|
|
* dom.
|
|
* @return {Element} The first ancestor that matches the passed criteria, or
|
|
* null if none match.
|
|
*/
|
|
goog.dom.getAncestorByClass = function(element, className, opt_maxSearchSteps) {
|
|
return goog.dom.getAncestorByTagNameAndClass(
|
|
element, null, className, opt_maxSearchSteps);
|
|
};
|
|
|
|
|
|
/**
|
|
* Walks up the DOM hierarchy returning the first ancestor that passes the
|
|
* matcher function.
|
|
* @param {Node} element The DOM node to start with.
|
|
* @param {function(Node) : boolean} matcher A function that returns true if the
|
|
* passed node matches the desired criteria.
|
|
* @param {boolean=} opt_includeNode If true, the node itself is included in
|
|
* the search (the first call to the matcher will pass startElement as
|
|
* the node to test).
|
|
* @param {number=} opt_maxSearchSteps Maximum number of levels to search up the
|
|
* dom.
|
|
* @return {Node} DOM node that matched the matcher, or null if there was
|
|
* no match.
|
|
*/
|
|
goog.dom.getAncestor = function(
|
|
element, matcher, opt_includeNode, opt_maxSearchSteps) {
|
|
if (!opt_includeNode) {
|
|
element = element.parentNode;
|
|
}
|
|
var steps = 0;
|
|
while (element &&
|
|
(opt_maxSearchSteps == null || steps <= opt_maxSearchSteps)) {
|
|
goog.asserts.assert(element.name != 'parentNode');
|
|
if (matcher(element)) {
|
|
return element;
|
|
}
|
|
element = element.parentNode;
|
|
steps++;
|
|
}
|
|
// Reached the root of the DOM without a match
|
|
return null;
|
|
};
|
|
|
|
|
|
/**
|
|
* Determines the active element in the given document.
|
|
* @param {Document} doc The document to look in.
|
|
* @return {Element} The active element.
|
|
*/
|
|
goog.dom.getActiveElement = function(doc) {
|
|
try {
|
|
return doc && doc.activeElement;
|
|
} catch (e) {
|
|
// NOTE(nicksantos): Sometimes, evaluating document.activeElement in IE
|
|
// throws an exception. I'm not 100% sure why, but I suspect it chokes
|
|
// on document.activeElement if the activeElement has been recently
|
|
// removed from the DOM by a JS operation.
|
|
//
|
|
// We assume that an exception here simply means
|
|
// "there is no active element."
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
|
|
/**
|
|
* Gives the current devicePixelRatio.
|
|
*
|
|
* By default, this is the value of window.devicePixelRatio (which should be
|
|
* preferred if present).
|
|
*
|
|
* If window.devicePixelRatio is not present, the ratio is calculated with
|
|
* window.matchMedia, if present. Otherwise, gives 1.0.
|
|
*
|
|
* Some browsers (including Chrome) consider the browser zoom level in the pixel
|
|
* ratio, so the value may change across multiple calls.
|
|
*
|
|
* @return {number} The number of actual pixels per virtual pixel.
|
|
*/
|
|
goog.dom.getPixelRatio = function() {
|
|
var win = goog.dom.getWindow();
|
|
if (goog.isDef(win.devicePixelRatio)) {
|
|
return win.devicePixelRatio;
|
|
} else if (win.matchMedia) {
|
|
return goog.dom.matchesPixelRatio_(.75) ||
|
|
goog.dom.matchesPixelRatio_(1.5) || goog.dom.matchesPixelRatio_(2) ||
|
|
goog.dom.matchesPixelRatio_(3) || 1;
|
|
}
|
|
return 1;
|
|
};
|
|
|
|
|
|
/**
|
|
* Calculates a mediaQuery to check if the current device supports the
|
|
* given actual to virtual pixel ratio.
|
|
* @param {number} pixelRatio The ratio of actual pixels to virtual pixels.
|
|
* @return {number} pixelRatio if applicable, otherwise 0.
|
|
* @private
|
|
*/
|
|
goog.dom.matchesPixelRatio_ = function(pixelRatio) {
|
|
var win = goog.dom.getWindow();
|
|
var query =
|
|
('(-webkit-min-device-pixel-ratio: ' + pixelRatio + '),' +
|
|
'(min--moz-device-pixel-ratio: ' + pixelRatio + '),' +
|
|
'(min-resolution: ' + pixelRatio + 'dppx)');
|
|
return win.matchMedia(query).matches ? pixelRatio : 0;
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
* Create an instance of a DOM helper with a new document object.
|
|
* @param {Document=} opt_document Document object to associate with this
|
|
* DOM helper.
|
|
* @constructor
|
|
*/
|
|
goog.dom.DomHelper = function(opt_document) {
|
|
/**
|
|
* Reference to the document object to use
|
|
* @type {!Document}
|
|
* @private
|
|
*/
|
|
this.document_ = opt_document || goog.global.document || document;
|
|
};
|
|
|
|
|
|
/**
|
|
* Gets the dom helper object for the document where the element resides.
|
|
* @param {Node=} opt_node If present, gets the DomHelper for this node.
|
|
* @return {!goog.dom.DomHelper} The DomHelper.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getDomHelper = goog.dom.getDomHelper;
|
|
|
|
|
|
/**
|
|
* Sets the document object.
|
|
* @param {!Document} document Document object.
|
|
*/
|
|
goog.dom.DomHelper.prototype.setDocument = function(document) {
|
|
this.document_ = document;
|
|
};
|
|
|
|
|
|
/**
|
|
* Gets the document object being used by the dom library.
|
|
* @return {!Document} Document object.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getDocument = function() {
|
|
return this.document_;
|
|
};
|
|
|
|
|
|
/**
|
|
* Alias for {@code getElementById}. If a DOM node is passed in then we just
|
|
* return that.
|
|
* @param {string|Element} element Element ID or a DOM node.
|
|
* @return {Element} The element with the given ID, or the node passed in.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getElement = function(element) {
|
|
return goog.dom.getElementHelper_(this.document_, element);
|
|
};
|
|
|
|
|
|
/**
|
|
* Gets an element by id, asserting that the element is found.
|
|
*
|
|
* This is used when an element is expected to exist, and should fail with
|
|
* an assertion error if it does not (if assertions are enabled).
|
|
*
|
|
* @param {string} id Element ID.
|
|
* @return {!Element} The element with the given ID, if it exists.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getRequiredElement = function(id) {
|
|
return goog.dom.getRequiredElementHelper_(this.document_, id);
|
|
};
|
|
|
|
|
|
/**
|
|
* Alias for {@code getElement}.
|
|
* @param {string|Element} element Element ID or a DOM node.
|
|
* @return {Element} The element with the given ID, or the node passed in.
|
|
* @deprecated Use {@link goog.dom.DomHelper.prototype.getElement} instead.
|
|
*/
|
|
goog.dom.DomHelper.prototype.$ = goog.dom.DomHelper.prototype.getElement;
|
|
|
|
|
|
/**
|
|
* Looks up elements by both tag and class name, using browser native functions
|
|
* ({@code querySelectorAll}, {@code getElementsByTagName} or
|
|
* {@code getElementsByClassName}) where possible. The returned array is a live
|
|
* NodeList or a static list depending on the code path taken.
|
|
*
|
|
* @see goog.dom.query
|
|
*
|
|
* @param {?string=} opt_tag Element tag name or * for all tags.
|
|
* @param {?string=} opt_class Optional class name.
|
|
* @param {(Document|Element)=} opt_el Optional element to look in.
|
|
* @return {!IArrayLike<!Element>} Array-like list of elements (only a length
|
|
* property and numerical indices are guaranteed to exist).
|
|
*/
|
|
goog.dom.DomHelper.prototype.getElementsByTagNameAndClass = function(
|
|
opt_tag, opt_class, opt_el) {
|
|
return goog.dom.getElementsByTagNameAndClass_(
|
|
this.document_, opt_tag, opt_class, opt_el);
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns an array of all the elements with the provided className.
|
|
* @see {goog.dom.query}
|
|
* @param {string} className the name of the class to look for.
|
|
* @param {Element|Document=} opt_el Optional element to look in.
|
|
* @return {!IArrayLike<!Element>} The items found with the class name provided.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getElementsByClass = function(className, opt_el) {
|
|
var doc = opt_el || this.document_;
|
|
return goog.dom.getElementsByClass(className, doc);
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns the first element we find matching the provided class name.
|
|
* @see {goog.dom.query}
|
|
* @param {string} className the name of the class to look for.
|
|
* @param {(Element|Document)=} opt_el Optional element to look in.
|
|
* @return {Element} The first item found with the class name provided.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getElementByClass = function(className, opt_el) {
|
|
var doc = opt_el || this.document_;
|
|
return goog.dom.getElementByClass(className, doc);
|
|
};
|
|
|
|
|
|
/**
|
|
* Ensures an element with the given className exists, and then returns the
|
|
* first element with the provided className.
|
|
* @see {goog.dom.query}
|
|
* @param {string} className the name of the class to look for.
|
|
* @param {(!Element|!Document)=} opt_root Optional element or document to look
|
|
* in.
|
|
* @return {!Element} The first item found with the class name provided.
|
|
* @throws {goog.asserts.AssertionError} Thrown if no element is found.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getRequiredElementByClass = function(
|
|
className, opt_root) {
|
|
var root = opt_root || this.document_;
|
|
return goog.dom.getRequiredElementByClass(className, root);
|
|
};
|
|
|
|
|
|
/**
|
|
* Alias for {@code getElementsByTagNameAndClass}.
|
|
* @deprecated Use DomHelper getElementsByTagNameAndClass.
|
|
* @see goog.dom.query
|
|
*
|
|
* @param {?string=} opt_tag Element tag name.
|
|
* @param {?string=} opt_class Optional class name.
|
|
* @param {Element=} opt_el Optional element to look in.
|
|
* @return {!IArrayLike<!Element>} Array-like list of elements (only a length
|
|
* property and numerical indices are guaranteed to exist).
|
|
*/
|
|
goog.dom.DomHelper.prototype.$$ =
|
|
goog.dom.DomHelper.prototype.getElementsByTagNameAndClass;
|
|
|
|
|
|
/**
|
|
* Sets a number of properties on a node.
|
|
* @param {Element} element DOM node to set properties on.
|
|
* @param {Object} properties Hash of property:value pairs.
|
|
*/
|
|
goog.dom.DomHelper.prototype.setProperties = goog.dom.setProperties;
|
|
|
|
|
|
/**
|
|
* Gets the dimensions of the viewport.
|
|
* @param {Window=} opt_window Optional window element to test. Defaults to
|
|
* the window of the Dom Helper.
|
|
* @return {!goog.math.Size} Object with values 'width' and 'height'.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getViewportSize = function(opt_window) {
|
|
// TODO(arv): This should not take an argument. That breaks the rule of a
|
|
// a DomHelper representing a single frame/window/document.
|
|
return goog.dom.getViewportSize(opt_window || this.getWindow());
|
|
};
|
|
|
|
|
|
/**
|
|
* Calculates the height of the document.
|
|
*
|
|
* @return {number} The height of the document.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getDocumentHeight = function() {
|
|
return goog.dom.getDocumentHeight_(this.getWindow());
|
|
};
|
|
|
|
|
|
/**
|
|
* Typedef for use with goog.dom.createDom and goog.dom.append.
|
|
* @typedef {Object|string|Array|NodeList}
|
|
*/
|
|
goog.dom.Appendable;
|
|
|
|
|
|
/**
|
|
* Returns a dom node with a set of attributes. This function accepts varargs
|
|
* for subsequent nodes to be added. Subsequent nodes will be added to the
|
|
* first node as childNodes.
|
|
*
|
|
* So:
|
|
* <code>createDom('div', null, createDom('p'), createDom('p'));</code>
|
|
* would return a div with two child paragraphs
|
|
*
|
|
* An easy way to move all child nodes of an existing element to a new parent
|
|
* element is:
|
|
* <code>createDom('div', null, oldElement.childNodes);</code>
|
|
* which will remove all child nodes from the old element and add them as
|
|
* child nodes of the new DIV.
|
|
*
|
|
* @param {string} tagName Tag to create.
|
|
* @param {Object|string=} opt_attributes If object, then a map of name-value
|
|
* pairs for attributes. If a string, then this is the className of the new
|
|
* element.
|
|
* @param {...goog.dom.Appendable} var_args Further DOM nodes or
|
|
* strings for text nodes. If one of the var_args is an array or
|
|
* NodeList, its elements will be added as childNodes instead.
|
|
* @return {!Element} Reference to a DOM node.
|
|
*/
|
|
goog.dom.DomHelper.prototype.createDom = function(
|
|
tagName, opt_attributes, var_args) {
|
|
return goog.dom.createDom_(this.document_, arguments);
|
|
};
|
|
|
|
|
|
/**
|
|
* Alias for {@code createDom}.
|
|
* @param {string} tagName Tag to create.
|
|
* @param {(Object|string)=} opt_attributes If object, then a map of name-value
|
|
* pairs for attributes. If a string, then this is the className of the new
|
|
* element.
|
|
* @param {...goog.dom.Appendable} var_args Further DOM nodes or strings for
|
|
* text nodes. If one of the var_args is an array, its children will be
|
|
* added as childNodes instead.
|
|
* @return {!Element} Reference to a DOM node.
|
|
* @deprecated Use {@link goog.dom.DomHelper.prototype.createDom} instead.
|
|
*/
|
|
goog.dom.DomHelper.prototype.$dom = goog.dom.DomHelper.prototype.createDom;
|
|
|
|
|
|
/**
|
|
* Creates a new element.
|
|
* @param {string} name Tag name.
|
|
* @return {!Element} The new element.
|
|
*/
|
|
goog.dom.DomHelper.prototype.createElement = function(name) {
|
|
return this.document_.createElement(name);
|
|
};
|
|
|
|
|
|
/**
|
|
* Creates a new text node.
|
|
* @param {number|string} content Content.
|
|
* @return {!Text} The new text node.
|
|
*/
|
|
goog.dom.DomHelper.prototype.createTextNode = function(content) {
|
|
return this.document_.createTextNode(String(content));
|
|
};
|
|
|
|
|
|
/**
|
|
* Create a table.
|
|
* @param {number} rows The number of rows in the table. Must be >= 1.
|
|
* @param {number} columns The number of columns in the table. Must be >= 1.
|
|
* @param {boolean=} opt_fillWithNbsp If true, fills table entries with
|
|
* {@code goog.string.Unicode.NBSP} characters.
|
|
* @return {!HTMLElement} The created table.
|
|
*/
|
|
goog.dom.DomHelper.prototype.createTable = function(
|
|
rows, columns, opt_fillWithNbsp) {
|
|
return goog.dom.createTable_(
|
|
this.document_, rows, columns, !!opt_fillWithNbsp);
|
|
};
|
|
|
|
|
|
/**
|
|
* Converts an HTML into a node or a document fragment. A single Node is used if
|
|
* {@code html} only generates a single node. If {@code html} generates multiple
|
|
* nodes then these are put inside a {@code DocumentFragment}. This is a safe
|
|
* version of {@code goog.dom.DomHelper#htmlToDocumentFragment} which is now
|
|
* deleted.
|
|
* @param {!goog.html.SafeHtml} html The HTML markup to convert.
|
|
* @return {!Node} The resulting node.
|
|
*/
|
|
goog.dom.DomHelper.prototype.safeHtmlToNode = function(html) {
|
|
return goog.dom.safeHtmlToNode_(this.document_, html);
|
|
};
|
|
|
|
|
|
/**
|
|
* Returns true if the browser is in "CSS1-compatible" (standards-compliant)
|
|
* mode, false otherwise.
|
|
* @return {boolean} True if in CSS1-compatible mode.
|
|
*/
|
|
goog.dom.DomHelper.prototype.isCss1CompatMode = function() {
|
|
return goog.dom.isCss1CompatMode_(this.document_);
|
|
};
|
|
|
|
|
|
/**
|
|
* Gets the window object associated with the document.
|
|
* @return {!Window} The window associated with the given document.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getWindow = function() {
|
|
return goog.dom.getWindow_(this.document_);
|
|
};
|
|
|
|
|
|
/**
|
|
* Gets the document scroll element.
|
|
* @return {!Element} Scrolling element.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getDocumentScrollElement = function() {
|
|
return goog.dom.getDocumentScrollElement_(this.document_);
|
|
};
|
|
|
|
|
|
/**
|
|
* Gets the document scroll distance as a coordinate object.
|
|
* @return {!goog.math.Coordinate} Object with properties 'x' and 'y'.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getDocumentScroll = function() {
|
|
return goog.dom.getDocumentScroll_(this.document_);
|
|
};
|
|
|
|
|
|
/**
|
|
* Determines the active element in the given document.
|
|
* @param {Document=} opt_doc The document to look in.
|
|
* @return {Element} The active element.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getActiveElement = function(opt_doc) {
|
|
return goog.dom.getActiveElement(opt_doc || this.document_);
|
|
};
|
|
|
|
|
|
/**
|
|
* Appends a child to a node.
|
|
* @param {Node} parent Parent.
|
|
* @param {Node} child Child.
|
|
*/
|
|
goog.dom.DomHelper.prototype.appendChild = goog.dom.appendChild;
|
|
|
|
|
|
/**
|
|
* Appends a node with text or other nodes.
|
|
* @param {!Node} parent The node to append nodes to.
|
|
* @param {...goog.dom.Appendable} var_args The things to append to the node.
|
|
* If this is a Node it is appended as is.
|
|
* If this is a string then a text node is appended.
|
|
* If this is an array like object then fields 0 to length - 1 are appended.
|
|
*/
|
|
goog.dom.DomHelper.prototype.append = goog.dom.append;
|
|
|
|
|
|
/**
|
|
* Determines if the given node can contain children, intended to be used for
|
|
* HTML generation.
|
|
*
|
|
* @param {Node} node The node to check.
|
|
* @return {boolean} Whether the node can contain children.
|
|
*/
|
|
goog.dom.DomHelper.prototype.canHaveChildren = goog.dom.canHaveChildren;
|
|
|
|
|
|
/**
|
|
* Removes all the child nodes on a DOM node.
|
|
* @param {Node} node Node to remove children from.
|
|
*/
|
|
goog.dom.DomHelper.prototype.removeChildren = goog.dom.removeChildren;
|
|
|
|
|
|
/**
|
|
* Inserts a new node before an existing reference node (i.e., as the previous
|
|
* sibling). If the reference node has no parent, then does nothing.
|
|
* @param {Node} newNode Node to insert.
|
|
* @param {Node} refNode Reference node to insert before.
|
|
*/
|
|
goog.dom.DomHelper.prototype.insertSiblingBefore = goog.dom.insertSiblingBefore;
|
|
|
|
|
|
/**
|
|
* Inserts a new node after an existing reference node (i.e., as the next
|
|
* sibling). If the reference node has no parent, then does nothing.
|
|
* @param {Node} newNode Node to insert.
|
|
* @param {Node} refNode Reference node to insert after.
|
|
*/
|
|
goog.dom.DomHelper.prototype.insertSiblingAfter = goog.dom.insertSiblingAfter;
|
|
|
|
|
|
/**
|
|
* Insert a child at a given index. If index is larger than the number of child
|
|
* nodes that the parent currently has, the node is inserted as the last child
|
|
* node.
|
|
* @param {Element} parent The element into which to insert the child.
|
|
* @param {Node} child The element to insert.
|
|
* @param {number} index The index at which to insert the new child node. Must
|
|
* not be negative.
|
|
*/
|
|
goog.dom.DomHelper.prototype.insertChildAt = goog.dom.insertChildAt;
|
|
|
|
|
|
/**
|
|
* Removes a node from its parent.
|
|
* @param {Node} node The node to remove.
|
|
* @return {Node} The node removed if removed; else, null.
|
|
*/
|
|
goog.dom.DomHelper.prototype.removeNode = goog.dom.removeNode;
|
|
|
|
|
|
/**
|
|
* Replaces a node in the DOM tree. Will do nothing if {@code oldNode} has no
|
|
* parent.
|
|
* @param {Node} newNode Node to insert.
|
|
* @param {Node} oldNode Node to replace.
|
|
*/
|
|
goog.dom.DomHelper.prototype.replaceNode = goog.dom.replaceNode;
|
|
|
|
|
|
/**
|
|
* Flattens an element. That is, removes it and replace it with its children.
|
|
* @param {Element} element The element to flatten.
|
|
* @return {Element|undefined} The original element, detached from the document
|
|
* tree, sans children, or undefined if the element was already not in the
|
|
* document.
|
|
*/
|
|
goog.dom.DomHelper.prototype.flattenElement = goog.dom.flattenElement;
|
|
|
|
|
|
/**
|
|
* Returns an array containing just the element children of the given element.
|
|
* @param {Element} element The element whose element children we want.
|
|
* @return {!(Array<!Element>|NodeList<!Element>)} An array or array-like list
|
|
* of just the element children of the given element.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getChildren = goog.dom.getChildren;
|
|
|
|
|
|
/**
|
|
* Returns the first child node that is an element.
|
|
* @param {Node} node The node to get the first child element of.
|
|
* @return {Element} The first child node of {@code node} that is an element.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getFirstElementChild =
|
|
goog.dom.getFirstElementChild;
|
|
|
|
|
|
/**
|
|
* Returns the last child node that is an element.
|
|
* @param {Node} node The node to get the last child element of.
|
|
* @return {Element} The last child node of {@code node} that is an element.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getLastElementChild = goog.dom.getLastElementChild;
|
|
|
|
|
|
/**
|
|
* Returns the first next sibling that is an element.
|
|
* @param {Node} node The node to get the next sibling element of.
|
|
* @return {Element} The next sibling of {@code node} that is an element.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getNextElementSibling =
|
|
goog.dom.getNextElementSibling;
|
|
|
|
|
|
/**
|
|
* Returns the first previous sibling that is an element.
|
|
* @param {Node} node The node to get the previous sibling element of.
|
|
* @return {Element} The first previous sibling of {@code node} that is
|
|
* an element.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getPreviousElementSibling =
|
|
goog.dom.getPreviousElementSibling;
|
|
|
|
|
|
/**
|
|
* Returns the next node in source order from the given node.
|
|
* @param {Node} node The node.
|
|
* @return {Node} The next node in the DOM tree, or null if this was the last
|
|
* node.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getNextNode = goog.dom.getNextNode;
|
|
|
|
|
|
/**
|
|
* Returns the previous node in source order from the given node.
|
|
* @param {Node} node The node.
|
|
* @return {Node} The previous node in the DOM tree, or null if this was the
|
|
* first node.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getPreviousNode = goog.dom.getPreviousNode;
|
|
|
|
|
|
/**
|
|
* Whether the object looks like a DOM node.
|
|
* @param {?} obj The object being tested for node likeness.
|
|
* @return {boolean} Whether the object looks like a DOM node.
|
|
*/
|
|
goog.dom.DomHelper.prototype.isNodeLike = goog.dom.isNodeLike;
|
|
|
|
|
|
/**
|
|
* Whether the object looks like an Element.
|
|
* @param {?} obj The object being tested for Element likeness.
|
|
* @return {boolean} Whether the object looks like an Element.
|
|
*/
|
|
goog.dom.DomHelper.prototype.isElement = goog.dom.isElement;
|
|
|
|
|
|
/**
|
|
* Returns true if the specified value is a Window object. This includes the
|
|
* global window for HTML pages, and iframe windows.
|
|
* @param {?} obj Variable to test.
|
|
* @return {boolean} Whether the variable is a window.
|
|
*/
|
|
goog.dom.DomHelper.prototype.isWindow = goog.dom.isWindow;
|
|
|
|
|
|
/**
|
|
* Returns an element's parent, if it's an Element.
|
|
* @param {Element} element The DOM element.
|
|
* @return {Element} The parent, or null if not an Element.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getParentElement = goog.dom.getParentElement;
|
|
|
|
|
|
/**
|
|
* Whether a node contains another node.
|
|
* @param {Node} parent The node that should contain the other node.
|
|
* @param {Node} descendant The node to test presence of.
|
|
* @return {boolean} Whether the parent node contains the descendent node.
|
|
*/
|
|
goog.dom.DomHelper.prototype.contains = goog.dom.contains;
|
|
|
|
|
|
/**
|
|
* Compares the document order of two nodes, returning 0 if they are the same
|
|
* node, a negative number if node1 is before node2, and a positive number if
|
|
* node2 is before node1. Note that we compare the order the tags appear in the
|
|
* document so in the tree <b><i>text</i></b> the B node is considered to be
|
|
* before the I node.
|
|
*
|
|
* @param {Node} node1 The first node to compare.
|
|
* @param {Node} node2 The second node to compare.
|
|
* @return {number} 0 if the nodes are the same node, a negative number if node1
|
|
* is before node2, and a positive number if node2 is before node1.
|
|
*/
|
|
goog.dom.DomHelper.prototype.compareNodeOrder = goog.dom.compareNodeOrder;
|
|
|
|
|
|
/**
|
|
* Find the deepest common ancestor of the given nodes.
|
|
* @param {...Node} var_args The nodes to find a common ancestor of.
|
|
* @return {Node} The common ancestor of the nodes, or null if there is none.
|
|
* null will only be returned if two or more of the nodes are from different
|
|
* documents.
|
|
*/
|
|
goog.dom.DomHelper.prototype.findCommonAncestor = goog.dom.findCommonAncestor;
|
|
|
|
|
|
/**
|
|
* Returns the owner document for a node.
|
|
* @param {Node} node The node to get the document for.
|
|
* @return {!Document} The document owning the node.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getOwnerDocument = goog.dom.getOwnerDocument;
|
|
|
|
|
|
/**
|
|
* Cross browser function for getting the document element of an iframe.
|
|
* @param {Element} iframe Iframe element.
|
|
* @return {!Document} The frame content document.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getFrameContentDocument =
|
|
goog.dom.getFrameContentDocument;
|
|
|
|
|
|
/**
|
|
* Cross browser function for getting the window of a frame or iframe.
|
|
* @param {Element} frame Frame element.
|
|
* @return {Window} The window associated with the given frame.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getFrameContentWindow =
|
|
goog.dom.getFrameContentWindow;
|
|
|
|
|
|
/**
|
|
* Sets the text content of a node, with cross-browser support.
|
|
* @param {Node} node The node to change the text content of.
|
|
* @param {string|number} text The value that should replace the node's content.
|
|
*/
|
|
goog.dom.DomHelper.prototype.setTextContent = goog.dom.setTextContent;
|
|
|
|
|
|
/**
|
|
* Gets the outerHTML of a node, which islike innerHTML, except that it
|
|
* actually contains the HTML of the node itself.
|
|
* @param {Element} element The element to get the HTML of.
|
|
* @return {string} The outerHTML of the given element.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getOuterHtml = goog.dom.getOuterHtml;
|
|
|
|
|
|
/**
|
|
* Finds the first descendant node that matches the filter function. This does
|
|
* a depth first search.
|
|
* @param {Node} root The root of the tree to search.
|
|
* @param {function(Node) : boolean} p The filter function.
|
|
* @return {Node|undefined} The found node or undefined if none is found.
|
|
*/
|
|
goog.dom.DomHelper.prototype.findNode = goog.dom.findNode;
|
|
|
|
|
|
/**
|
|
* Finds all the descendant nodes that matches the filter function. This does a
|
|
* depth first search.
|
|
* @param {Node} root The root of the tree to search.
|
|
* @param {function(Node) : boolean} p The filter function.
|
|
* @return {Array<Node>} The found nodes or an empty array if none are found.
|
|
*/
|
|
goog.dom.DomHelper.prototype.findNodes = goog.dom.findNodes;
|
|
|
|
|
|
/**
|
|
* Returns true if the element has a tab index that allows it to receive
|
|
* keyboard focus (tabIndex >= 0), false otherwise. Note that some elements
|
|
* natively support keyboard focus, even if they have no tab index.
|
|
* @param {!Element} element Element to check.
|
|
* @return {boolean} Whether the element has a tab index that allows keyboard
|
|
* focus.
|
|
*/
|
|
goog.dom.DomHelper.prototype.isFocusableTabIndex = goog.dom.isFocusableTabIndex;
|
|
|
|
|
|
/**
|
|
* Enables or disables keyboard focus support on the element via its tab index.
|
|
* Only elements for which {@link goog.dom.isFocusableTabIndex} returns true
|
|
* (or elements that natively support keyboard focus, like form elements) can
|
|
* receive keyboard focus. See http://go/tabindex for more info.
|
|
* @param {Element} element Element whose tab index is to be changed.
|
|
* @param {boolean} enable Whether to set or remove a tab index on the element
|
|
* that supports keyboard focus.
|
|
*/
|
|
goog.dom.DomHelper.prototype.setFocusableTabIndex =
|
|
goog.dom.setFocusableTabIndex;
|
|
|
|
|
|
/**
|
|
* Returns true if the element can be focused, i.e. it has a tab index that
|
|
* allows it to receive keyboard focus (tabIndex >= 0), or it is an element
|
|
* that natively supports keyboard focus.
|
|
* @param {!Element} element Element to check.
|
|
* @return {boolean} Whether the element allows keyboard focus.
|
|
*/
|
|
goog.dom.DomHelper.prototype.isFocusable = goog.dom.isFocusable;
|
|
|
|
|
|
/**
|
|
* Returns the text contents of the current node, without markup. New lines are
|
|
* stripped and whitespace is collapsed, such that each character would be
|
|
* visible.
|
|
*
|
|
* In browsers that support it, innerText is used. Other browsers attempt to
|
|
* simulate it via node traversal. Line breaks are canonicalized in IE.
|
|
*
|
|
* @param {Node} node The node from which we are getting content.
|
|
* @return {string} The text content.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getTextContent = goog.dom.getTextContent;
|
|
|
|
|
|
/**
|
|
* Returns the text length of the text contained in a node, without markup. This
|
|
* is equivalent to the selection length if the node was selected, or the number
|
|
* of cursor movements to traverse the node. Images & BRs take one space. New
|
|
* lines are ignored.
|
|
*
|
|
* @param {Node} node The node whose text content length is being calculated.
|
|
* @return {number} The length of {@code node}'s text content.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getNodeTextLength = goog.dom.getNodeTextLength;
|
|
|
|
|
|
/**
|
|
* Returns the text offset of a node relative to one of its ancestors. The text
|
|
* length is the same as the length calculated by
|
|
* {@code goog.dom.getNodeTextLength}.
|
|
*
|
|
* @param {Node} node The node whose offset is being calculated.
|
|
* @param {Node=} opt_offsetParent Defaults to the node's owner document's body.
|
|
* @return {number} The text offset.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getNodeTextOffset = goog.dom.getNodeTextOffset;
|
|
|
|
|
|
/**
|
|
* Returns the node at a given offset in a parent node. If an object is
|
|
* provided for the optional third parameter, the node and the remainder of the
|
|
* offset will stored as properties of this object.
|
|
* @param {Node} parent The parent node.
|
|
* @param {number} offset The offset into the parent node.
|
|
* @param {Object=} opt_result Object to be used to store the return value. The
|
|
* return value will be stored in the form {node: Node, remainder: number}
|
|
* if this object is provided.
|
|
* @return {Node} The node at the given offset.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getNodeAtOffset = goog.dom.getNodeAtOffset;
|
|
|
|
|
|
/**
|
|
* Returns true if the object is a {@code NodeList}. To qualify as a NodeList,
|
|
* the object must have a numeric length property and an item function (which
|
|
* has type 'string' on IE for some reason).
|
|
* @param {Object} val Object to test.
|
|
* @return {boolean} Whether the object is a NodeList.
|
|
*/
|
|
goog.dom.DomHelper.prototype.isNodeList = goog.dom.isNodeList;
|
|
|
|
|
|
/**
|
|
* Walks up the DOM hierarchy returning the first ancestor that has the passed
|
|
* tag name and/or class name. If the passed element matches the specified
|
|
* criteria, the element itself is returned.
|
|
* @param {Node} element The DOM node to start with.
|
|
* @param {?(goog.dom.TagName|string)=} opt_tag The tag name to match (or
|
|
* null/undefined to match only based on class name).
|
|
* @param {?string=} opt_class The class name to match (or null/undefined to
|
|
* match only based on tag name).
|
|
* @param {number=} opt_maxSearchSteps Maximum number of levels to search up the
|
|
* dom.
|
|
* @return {Element} The first ancestor that matches the passed criteria, or
|
|
* null if no match is found.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getAncestorByTagNameAndClass =
|
|
goog.dom.getAncestorByTagNameAndClass;
|
|
|
|
|
|
/**
|
|
* Walks up the DOM hierarchy returning the first ancestor that has the passed
|
|
* class name. If the passed element matches the specified criteria, the
|
|
* element itself is returned.
|
|
* @param {Node} element The DOM node to start with.
|
|
* @param {string} class The class name to match.
|
|
* @param {number=} opt_maxSearchSteps Maximum number of levels to search up the
|
|
* dom.
|
|
* @return {Element} The first ancestor that matches the passed criteria, or
|
|
* null if none match.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getAncestorByClass = goog.dom.getAncestorByClass;
|
|
|
|
|
|
/**
|
|
* Walks up the DOM hierarchy returning the first ancestor that passes the
|
|
* matcher function.
|
|
* @param {Node} element The DOM node to start with.
|
|
* @param {function(Node) : boolean} matcher A function that returns true if the
|
|
* passed node matches the desired criteria.
|
|
* @param {boolean=} opt_includeNode If true, the node itself is included in
|
|
* the search (the first call to the matcher will pass startElement as
|
|
* the node to test).
|
|
* @param {number=} opt_maxSearchSteps Maximum number of levels to search up the
|
|
* dom.
|
|
* @return {Node} DOM node that matched the matcher, or null if there was
|
|
* no match.
|
|
*/
|
|
goog.dom.DomHelper.prototype.getAncestor = goog.dom.getAncestor;
|