dom.js
Members
-
static, constant $
-
Finds a single DOM element matching
selector
within the optionalcontext
of another DOM element (defaulting todocument
). -
static, constant $$
-
Finds a all DOM elements matching
selector
within the optionalcontext
of another DOM element (defaulting todocument
).
Methods
-
static addClass(element, …classesToAdd) → {Element}
-
Add a class name to an element.
Parameters:
Name Type Attributes Description element
Element Element to add class name to.
classesToAdd
string <repeatable>
One or more class name to add.
Returns:
Element -The DOM element with the added class name.
-
static appendContent(el, content) → {Element}
-
Normalizes and appends content to an element.
Parameters:
Name Type Description el
Element Element to append normalized content to.
content
module:dom~ContentDescriptor A content descriptor value.
Returns:
Element -The element with appended normalized content.
-
static blockTextSelection()
-
Attempt to block the ability to select text.
-
static computedStyle(el, prop)
-
A safe getComputedStyle.
This is needed because in Firefox, if the player is loaded in an iframe with
display:none
, thengetComputedStyle
returnsnull
, so, we do a null-check to make sure that the player doesn't break in these cases.Parameters:
Name Type Description el
Element The element you want the computed style of
prop
string The property name you want
-
static createEl(tagNameopt, propertiesopt, attributesopt, contentopt) → {Element}
-
Creates an element and applies properties, attributes, and inserts content.
Parameters:
Name Type Attributes Default Description tagName
string <optional>
'div' Name of tag to be created.
properties
Object <optional>
{} Element properties to be applied.
attributes
Object <optional>
{} Element attributes to be applied.
content
module:dom~ContentDescriptor <optional>
A content descriptor object.
Returns:
Element -The element that was created.
-
static emptyEl(el) → {Element}
-
Empties the contents of an element.
Parameters:
Name Type Description el
Element The element to empty children from
Returns:
Element -The element with no children
-
static findPosition(el) → {module:dom~module:dom~Position}
-
Get the position of an element in the DOM.
Uses
getBoundingClientRect
technique from John Resig.Parameters:
Name Type Description el
Element Element from which to get offset.
Returns:
module:dom~module:dom~Position -The position of the element that was passed in.
-
static getAttribute(el, attribute) → {string}
-
Get the value of an element's attribute.
Parameters:
Name Type Description el
Element A DOM element.
attribute
string Attribute to get the value of.
Returns:
string -The value of the attribute.
-
static getAttributes(tag) → {Object}
-
Get an element's attribute values, as defined on the HTML tag.
Attributes are not the same as properties. They're defined on the tag or with setAttribute.
Parameters:
Name Type Description tag
Element Element from which to get tag attributes.
Returns:
Object -All attributes of the element. Boolean attributes will be
true
orfalse
, others will be strings. -
static getBoundingClientRect(el) → {Object|undefined}
-
Identical to the native
getBoundingClientRect
function, but ensures that the method is supported at all (it is in all browsers we claim to support) and that the element is in the DOM before continuing.This wrapper function also shims properties which are not provided by some older browsers (namely, IE8).
Additionally, some browsers do not support adding properties to a
ClientRect
/DOMRect
object; so, we shallow-copy it with the standard properties (exceptx
andy
which are not widely supported). This helps avoid implementations where keys are non-enumerable.Parameters:
Name Type Description el
Element Element whose
ClientRect
we want to calculate.Returns:
Object | undefined -Always returns a plain object - or
undefined
if it cannot. -
static getPointerPosition(el, event) → {module:dom~module:dom~Coordinates}
-
Get the pointer position within an element.
The base on the coordinates are the bottom left of the element.
Parameters:
Name Type Description el
Element Element on which to get the pointer position on.
event
Event Event object.
Returns:
module:dom~module:dom~Coordinates -A coordinates object corresponding to the mouse position.
-
static hasClass(element, classToCheck) → {boolean}
-
Check if an element has a class name.
Parameters:
Name Type Description element
Element Element to check
classToCheck
string Class name to check for
Throws:
-
Throws an error if
classToCheck
has white space. - Type
- Error
Returns:
boolean -Will be
true
if the element has a class,false
otherwise. -
-
static insertContent(el, content) → {Element}
-
Normalizes and inserts content into an element; this is identical to
appendContent()
, except it empties the element first.Parameters:
Name Type Description el
Element Element to insert normalized content into.
content
module:dom~ContentDescriptor A content descriptor value.
Returns:
Element -The element with inserted normalized content.
-
static isEl(value) → {boolean}
-
Determines, via duck typing, whether or not a value is a DOM element.
Parameters:
Name Type Description value
* The value to check.
Returns:
boolean -Will be
true
if the value is a DOM element,false
otherwise. -
static isInFrame() → {boolean}
-
Determines if the current DOM is embedded in an iframe.
Returns:
boolean -Will be
true
if the DOM is embedded in an iframe,false
otherwise. -
static isReal() → {boolean}
-
Whether the current DOM interface appears to be real (i.e. not simulated).
Returns:
boolean -Will be
true
if the DOM appears to be real,false
otherwise. -
static isSingleLeftClick(event) → {boolean}
-
Check if an event was a single left click.
Parameters:
Name Type Description event
Event Event object.
Returns:
boolean -Will be
true
if a single left click,false
otherwise. -
static isTextNode(value) → {boolean}
-
Determines, via duck typing, whether or not a value is a text node.
Parameters:
Name Type Description value
* Check if this value is a text node.
Returns:
boolean -Will be
true
if the value is a text node,false
otherwise. -
static normalizeContent(content) → {Array}
-
Normalizes content for eventual insertion into the DOM.
This allows a wide range of content definition methods, but helps protect from falling into the trap of simply writing to
innerHTML
, which could be an XSS concern.The content for an element can be passed in multiple types and combinations, whose behavior is as follows:
Parameters:
Name Type Description content
module:dom~ContentDescriptor A content descriptor value.
Returns:
Array -All of the content that was passed in, normalized to an array of elements or text nodes.
-
static prependTo(child, parent)
-
Insert an element as the first child node of another
Parameters:
Name Type Description child
Element Element to insert
parent
Element Element to insert child into
-
static removeAttribute(el, attribute)
-
Remove an element's attribute.
Parameters:
Name Type Description el
Element A DOM element.
attribute
string Attribute to remove.
-
static removeClass(element, …classesToRemove) → {Element}
-
Remove a class name from an element.
Parameters:
Name Type Attributes Description element
Element Element to remove a class name from.
classesToRemove
string <repeatable>
One or more class name to remove.
Returns:
Element -The DOM element with class name removed.
-
static setAttribute(el, attribute, value)
-
Set the value of an element's attribute.
Parameters:
Name Type Description el
Element A DOM element.
attribute
string Attribute to set.
value
string Value to set the attribute to.
-
static setAttributes(el, attributesopt)
-
Apply attributes to an HTML element.
Parameters:
Name Type Attributes Description el
Element Element to add attributes to.
attributes
Object <optional>
Attributes to be applied.
-
static textContent(el, text) → {Element}
-
Injects text into an element, replacing any existing contents entirely.
Parameters:
Name Type Description el
Element The element to add text content into
text
string The text content to add.
Returns:
Element -The element with added text content.
-
static toggleClass(element, classToToggle, predicateopt) → {Element}
-
Adds or removes a class name to/from an element depending on an optional condition or the presence/absence of the class name.
Parameters:
Name Type Attributes Description element
Element The element to toggle a class name on.
classToToggle
string The class that should be toggled.
predicate
boolean | module:dom~module:dom~PredicateCallback <optional>
See the return value for module:dom~module:dom~PredicateCallback
Returns:
Element -The element with a class that has been toggled.
-
static unblockTextSelection()
-
Turn off text selection blocking.
Type Definitions
-
ContentDescriptor()
-
This is a mixed value that describes content to be injected into the DOM via some method. It can be of the following types:
Type Description string
The value will be normalized into a text node. Element
The value will be accepted as-is. Text
A TextNode. The value will be accepted as-is. Array
A one-dimensional array of strings, elements, text nodes, or functions. These functions should return a string, element, or text node (any other return value, like an array, will be ignored). Function
A function, which is expected to return a string, element, text node, or array - any of the other possible values described above. This means that a content descriptor could be a function that returns an array of functions, but those second-level functions must return strings, elements, or text nodes. -
Coordinates
-
Represents x and y coordinates for a DOM element or mouse pointer.
Properties:
Name Type Description x
number x coordinate in pixels
y
number y coordinate in pixels
-
Position
-
Represents the position of a DOM element on the page.
Properties:
Name Type Description left
number Pixels to the left.
top
number Pixels from the top.
-
PredicateCallback(element, classToToggle) → {boolean|undefined}
-
The callback definition for toggleClass.
Parameters:
Name Type Description element
Element The DOM element of the Component.
classToToggle
string The
className
that wants to be toggledReturns:
boolean | undefined -If
true
is returned, theclassToToggle
will be added to theelement
. Iffalse
, theclassToToggle
will be removed from theelement
. Ifundefined
, the callback will be ignored.