UNPKG

accessibility-developer-tools

Version:

This is a library of accessibility-related testing and utility code.

1,493 lines (1,311 loc) 108 kB
// 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; /** * Gets elements by tag name. * @param {!goog.dom.TagName<T>} tagName * @param {(!Document|!Element)=} opt_parent Parent element or document where to * look for elements. Defaults to document. * @return {!NodeList<R>} List of elements. The members of the list are * {!Element} if tagName is not a member of goog.dom.TagName or more * specific types if it is (e.g. {!HTMLAnchorElement} for * goog.dom.TagName.A). * @template T * @template R := cond(isUnknown(T), 'Element', T) =: */ goog.dom.getElementsByTagName = function(tagName, opt_parent) { var parent = opt_parent || document; return parent.getElementsByTagName(String(tagName)); }; /** * 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|?goog.dom.TagName<T>)=} opt_tag Element tag name. * @param {?string=} opt_class Optional class name. * @param {(Document|Element)=} opt_el Optional element to look in. * @return {!IArrayLike<R>} Array-like list of elements (only a length property * and numerical indices are guaranteed to exist). The members of the array * are {!Element} if opt_tag is not a member of goog.dom.TagName or more * specific types if it is (e.g. {!HTMLAnchorElement} for * goog.dom.TagName.A). * @template T * @template R := cond(isUnknown(T), 'Element', T) =: */ 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|?goog.dom.TagName<T>)=} opt_tag Element tag name. * @param {?string=} opt_class Optional class name. * @param {(Document|Element)=} opt_el Optional element to look in. * @return {!IArrayLike<R>} Array-like list of elements (only a length property * and numerical indices are guaranteed to exist). The members of the array * are {!Element} if opt_tag is not a member of goog.dom.TagName or more * specific types if it is (e.g. {!HTMLAnchorElement} for * goog.dom.TagName.A). * @template T * @template R := cond(isUnknown(T), 'Element', T) =: * @private */ goog.dom.getElementsByTagNameAndClass_ = function( doc, opt_tag, opt_class, opt_el) { var parent = opt_el || doc; var tagName = (opt_tag && opt_tag != '*') ? String(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|?goog.dom.TagName<T>)=} opt_tag Element tag name. * @param {?string=} opt_class Optional class name. * @param {Element=} opt_el Optional element to look in. * @return {!IArrayLike<R>} Array-like list of elements (only a length property * and numerical indices are guaranteed to exist). The members of the array * are {!Element} if opt_tag is not a member of goog.dom.TagName or more * specific types if it is (e.g. {!HTMLAnchorElement} for * goog.dom.TagName.A). * @template T * @template R := cond(isUnknown(T), 'Element', T) =: * @deprecated Use {@link goog.dom.getElementsByTagNameAndClass} instead. */ goog.dom.$$ = goog.dom.getElementsByTagNameAndClass; /** * Sets multiple properties, and sometimes attributes, on an element. Note that * properties are simply object properties on the element instance, while * attributes are visible in the DOM. Many properties map to attributes with the * same names, some with different names, and there are also unmappable cases. * * This method sets properties by default (which means that custom attributes * are not supported). These are the exeptions (some of which is legacy): * - "style": Even though this is an attribute name, it is translated to a * property, "style.cssText". Note that this property sanitizes and formats * its value, unlike the attribute. * - "class": This is an attribute name, it is translated to the "className" * property. * - "for": This is an attribute name, it is translated to the "htmlFor" * property. * - Entries in {@see goog.dom.DIRECT_ATTRIBUTE_MAP_} are set as attributes, * this is probably due to browser quirks. * - "aria-*", "data-*": Always set as attributes, they have no property * counterparts. * * @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(goog.dom.TagName.DIV, null, createDom(goog.dom.TagName.P), createDom(goog.dom.TagName.P));</code> * would return a div with two child paragraphs * * For passing properties, please see {@link goog.dom.setProperties} for more * information. * * @param {string|!goog.dom.TagName<T>} tagName Tag to create. * @param {(Object|Array<string>|string)=} opt_properties If object, then a map * of name-value pairs for properties. 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 {R} Reference to a DOM node. The return type is {!Element} if tagName * is a string or a more specific type if it is a member of * goog.dom.TagName (e.g. {!HTMLAnchorElement} for goog.dom.TagName.A). * @template T * @template R := cond(isUnknown(T), 'Element', T) =: */ goog.dom.createDom = function(tagName, opt_properties, 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 = String(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|!goog.dom.TagName<T>} tagName Tag to create. * @param {(string|Object)=} opt_properties If object, then a map of name-value * pairs for properties. 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 {R} Reference to a DOM node. The return type is {!Element} if tagName * is a string or a more specific type if it is a member of * goog.dom.TagName (e.g. {!HTMLAnchorElement} for goog.dom.TagName.A). * @template T * @template R := cond(isUnknown(T), 'Element', T) =: * @deprecated Use {@link goog.dom.createDom} instead. */ goog.dom.$dom = goog.dom.createDom; /** * Creates a new element. * @param {string|!goog.dom.TagName<T>} name Tag to create. * @return {R} The new element. The return type is {!Element} if name is * a string or a more specific type if it is a member of goog.dom.TagName * (e.g. {!HTMLAnchorElement} for goog.dom.TagName.A). * @template T * @template R := cond(isUnknown(T), 'Element', T) =: */ goog.dom.createElement = function(name) { return goog.dom.createElement_(document, name); }; /** * Creates a new element. * @param {!Document} doc The document to create the element in. * @param {string|!goog.dom.TagName<T>} name Tag to create. * @return {R} The new element. The return type is {!Element} if name is * a string or a more specific type if it is a member of goog.dom.TagName * (e.g. {!HTMLAnchorElement} for goog.dom.TagName.A). * @template T * @template R := cond(isUnknown(T), 'Element', T) =: * @private */ goog.dom.createElement_ = function(doc, name) { return doc.createElement(String(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(mlourenco): 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 = goog.dom.createElement_(doc, goog.dom.TagName.TABLE); var tbody = table.appendChild(goog.dom.createElement_(doc, goog.dom.TagName.TBODY)); for (var i = 0; i < rows; i++) { var tr = goog.dom.createElement_(doc, goog.dom.TagName.TR); for (var j = 0; j < columns; j++) { var td = goog.dom.createElement_(doc, 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 = goog.dom.createElement_(doc, 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 = goog.dom.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 String(goog.dom.TagName.APPLET): case String(goog.dom.TagName.AREA): case String(goog.dom.TagName.BASE): case String(goog.dom.TagName.BR): case String(goog.dom.TagName.COL): case String(goog.dom.TagName.COMMAND): case String(goog.dom.TagName.EMBED): case String(goog.dom.TagName.FRAME): case String(goog.dom.TagName.HR): case String(goog.dom.TagName.IMG): case String(goog.dom.TagName.INPUT): case String(goog.dom.TagName.IFRAME): case String(goog.dom.TagName.ISINDEX): case String(goog.dom.TagName.KEYGEN): case String(goog.dom.TagName.LINK): case String(goog.dom.TagName.NOFRAMES): case String(goog.dom.TagName.NOSCRIPT): case String(goog.dom.TagName.META): case String(goog.dom.TagName.OBJECT): case String(goog.dom.TagName.PARAM): case String(goog.dom.TagName.SCRIPT): case String(goog.dom.TagName.SOURCE): case String(goog.dom.TagName.STYLE): case String(goog.dom.TagName.TRACK): case String(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 == no