aboutsummaryrefslogtreecommitdiffstats
path: root/src/js/utils/elements.js
diff options
context:
space:
mode:
authorSam Potts <sam@potts.es>2020-04-11 16:23:14 +1000
committerSam Potts <sam@potts.es>2020-04-11 16:23:14 +1000
commit502d5977d79148957828cbf313b7ef4c9f31973f (patch)
tree71bbffcffc9745c5b672a122f3937519ba67c1c4 /src/js/utils/elements.js
parent8f5b59c18cc7837bde9af55d24d12e1fd939043d (diff)
downloadplyr-502d5977d79148957828cbf313b7ef4c9f31973f.tar.lz
plyr-502d5977d79148957828cbf313b7ef4c9f31973f.tar.xz
plyr-502d5977d79148957828cbf313b7ef4c9f31973f.zip
Converted to 2 space indentation
Diffstat (limited to 'src/js/utils/elements.js')
-rw-r--r--src/js/utils/elements.js336
1 files changed, 168 insertions, 168 deletions
diff --git a/src/js/utils/elements.js b/src/js/utils/elements.js
index acff0dd9..b48fa7e1 100644
--- a/src/js/utils/elements.js
+++ b/src/js/utils/elements.js
@@ -7,257 +7,257 @@ import { extend } from './objects';
// Wrap an element
export function wrap(elements, wrapper) {
- // Convert `elements` to an array, if necessary.
- const targets = elements.length ? elements : [elements];
-
- // Loops backwards to prevent having to clone the wrapper on the
- // first element (see `child` below).
- Array.from(targets)
- .reverse()
- .forEach((element, index) => {
- const child = index > 0 ? wrapper.cloneNode(true) : wrapper;
- // Cache the current parent and sibling.
- const parent = element.parentNode;
- const sibling = element.nextSibling;
-
- // Wrap the element (is automatically removed from its current
- // parent).
- child.appendChild(element);
-
- // If the element had a sibling, insert the wrapper before
- // the sibling to maintain the HTML structure; otherwise, just
- // append it to the parent.
- if (sibling) {
- parent.insertBefore(child, sibling);
- } else {
- parent.appendChild(child);
- }
- });
+ // Convert `elements` to an array, if necessary.
+ const targets = elements.length ? elements : [elements];
+
+ // Loops backwards to prevent having to clone the wrapper on the
+ // first element (see `child` below).
+ Array.from(targets)
+ .reverse()
+ .forEach((element, index) => {
+ const child = index > 0 ? wrapper.cloneNode(true) : wrapper;
+ // Cache the current parent and sibling.
+ const parent = element.parentNode;
+ const sibling = element.nextSibling;
+
+ // Wrap the element (is automatically removed from its current
+ // parent).
+ child.appendChild(element);
+
+ // If the element had a sibling, insert the wrapper before
+ // the sibling to maintain the HTML structure; otherwise, just
+ // append it to the parent.
+ if (sibling) {
+ parent.insertBefore(child, sibling);
+ } else {
+ parent.appendChild(child);
+ }
+ });
}
// Set attributes
export function setAttributes(element, attributes) {
- if (!is.element(element) || is.empty(attributes)) {
- return;
- }
-
- // Assume null and undefined attributes should be left out,
- // Setting them would otherwise convert them to "null" and "undefined"
- Object.entries(attributes)
- .filter(([, value]) => !is.nullOrUndefined(value))
- .forEach(([key, value]) => element.setAttribute(key, value));
+ if (!is.element(element) || is.empty(attributes)) {
+ return;
+ }
+
+ // Assume null and undefined attributes should be left out,
+ // Setting them would otherwise convert them to "null" and "undefined"
+ Object.entries(attributes)
+ .filter(([, value]) => !is.nullOrUndefined(value))
+ .forEach(([key, value]) => element.setAttribute(key, value));
}
// Create a DocumentFragment
export function createElement(type, attributes, text) {
- // Create a new <element>
- const element = document.createElement(type);
+ // Create a new <element>
+ const element = document.createElement(type);
- // Set all passed attributes
- if (is.object(attributes)) {
- setAttributes(element, attributes);
- }
+ // Set all passed attributes
+ if (is.object(attributes)) {
+ setAttributes(element, attributes);
+ }
- // Add text node
- if (is.string(text)) {
- element.innerText = text;
- }
+ // Add text node
+ if (is.string(text)) {
+ element.innerText = text;
+ }
- // Return built element
- return element;
+ // Return built element
+ return element;
}
// Inaert an element after another
export function insertAfter(element, target) {
- if (!is.element(element) || !is.element(target)) {
- return;
- }
+ if (!is.element(element) || !is.element(target)) {
+ return;
+ }
- target.parentNode.insertBefore(element, target.nextSibling);
+ target.parentNode.insertBefore(element, target.nextSibling);
}
// Insert a DocumentFragment
export function insertElement(type, parent, attributes, text) {
- if (!is.element(parent)) {
- return;
- }
+ if (!is.element(parent)) {
+ return;
+ }
- parent.appendChild(createElement(type, attributes, text));
+ parent.appendChild(createElement(type, attributes, text));
}
// Remove element(s)
export function removeElement(element) {
- if (is.nodeList(element) || is.array(element)) {
- Array.from(element).forEach(removeElement);
- return;
- }
+ if (is.nodeList(element) || is.array(element)) {
+ Array.from(element).forEach(removeElement);
+ return;
+ }
- if (!is.element(element) || !is.element(element.parentNode)) {
- return;
- }
+ if (!is.element(element) || !is.element(element.parentNode)) {
+ return;
+ }
- element.parentNode.removeChild(element);
+ element.parentNode.removeChild(element);
}
// Remove all child elements
export function emptyElement(element) {
- if (!is.element(element)) {
- return;
- }
+ if (!is.element(element)) {
+ return;
+ }
- let { length } = element.childNodes;
+ let { length } = element.childNodes;
- while (length > 0) {
- element.removeChild(element.lastChild);
- length -= 1;
- }
+ while (length > 0) {
+ element.removeChild(element.lastChild);
+ length -= 1;
+ }
}
// Replace element
export function replaceElement(newChild, oldChild) {
- if (!is.element(oldChild) || !is.element(oldChild.parentNode) || !is.element(newChild)) {
- return null;
- }
+ if (!is.element(oldChild) || !is.element(oldChild.parentNode) || !is.element(newChild)) {
+ return null;
+ }
- oldChild.parentNode.replaceChild(newChild, oldChild);
+ oldChild.parentNode.replaceChild(newChild, oldChild);
- return newChild;
+ return newChild;
}
// Get an attribute object from a string selector
export function getAttributesFromSelector(sel, existingAttributes) {
- // For example:
- // '.test' to { class: 'test' }
- // '#test' to { id: 'test' }
- // '[data-test="test"]' to { 'data-test': 'test' }
+ // For example:
+ // '.test' to { class: 'test' }
+ // '#test' to { id: 'test' }
+ // '[data-test="test"]' to { 'data-test': 'test' }
+
+ if (!is.string(sel) || is.empty(sel)) {
+ return {};
+ }
+
+ const attributes = {};
+ const existing = extend({}, existingAttributes);
+
+ sel.split(',').forEach(s => {
+ // Remove whitespace
+ const selector = s.trim();
+ const className = selector.replace('.', '');
+ const stripped = selector.replace(/[[\]]/g, '');
+ // Get the parts and value
+ const parts = stripped.split('=');
+ const [key] = parts;
+ const value = parts.length > 1 ? parts[1].replace(/["']/g, '') : '';
+ // Get the first character
+ const start = selector.charAt(0);
+
+ switch (start) {
+ case '.':
+ // Add to existing classname
+ if (is.string(existing.class)) {
+ attributes.class = `${existing.class} ${className}`;
+ } else {
+ attributes.class = className;
+ }
+ break;
- if (!is.string(sel) || is.empty(sel)) {
- return {};
- }
+ case '#':
+ // ID selector
+ attributes.id = selector.replace('#', '');
+ break;
- const attributes = {};
- const existing = extend({}, existingAttributes);
-
- sel.split(',').forEach(s => {
- // Remove whitespace
- const selector = s.trim();
- const className = selector.replace('.', '');
- const stripped = selector.replace(/[[\]]/g, '');
- // Get the parts and value
- const parts = stripped.split('=');
- const [key] = parts;
- const value = parts.length > 1 ? parts[1].replace(/["']/g, '') : '';
- // Get the first character
- const start = selector.charAt(0);
-
- switch (start) {
- case '.':
- // Add to existing classname
- if (is.string(existing.class)) {
- attributes.class = `${existing.class} ${className}`;
- } else {
- attributes.class = className;
- }
- break;
-
- case '#':
- // ID selector
- attributes.id = selector.replace('#', '');
- break;
-
- case '[':
- // Attribute selector
- attributes[key] = value;
-
- break;
-
- default:
- break;
- }
- });
+ case '[':
+ // Attribute selector
+ attributes[key] = value;
- return extend(existing, attributes);
+ break;
+
+ default:
+ break;
+ }
+ });
+
+ return extend(existing, attributes);
}
// Toggle hidden
export function toggleHidden(element, hidden) {
- if (!is.element(element)) {
- return;
- }
+ if (!is.element(element)) {
+ return;
+ }
- let hide = hidden;
+ let hide = hidden;
- if (!is.boolean(hide)) {
- hide = !element.hidden;
- }
+ if (!is.boolean(hide)) {
+ hide = !element.hidden;
+ }
- // eslint-disable-next-line no-param-reassign
- element.hidden = hide;
+ // eslint-disable-next-line no-param-reassign
+ element.hidden = hide;
}
// Mirror Element.classList.toggle, with IE compatibility for "force" argument
export function toggleClass(element, className, force) {
- if (is.nodeList(element)) {
- return Array.from(element).map(e => toggleClass(e, className, force));
+ if (is.nodeList(element)) {
+ return Array.from(element).map(e => toggleClass(e, className, force));
+ }
+
+ if (is.element(element)) {
+ let method = 'toggle';
+ if (typeof force !== 'undefined') {
+ method = force ? 'add' : 'remove';
}
- if (is.element(element)) {
- let method = 'toggle';
- if (typeof force !== 'undefined') {
- method = force ? 'add' : 'remove';
- }
-
- element.classList[method](className);
- return element.classList.contains(className);
- }
+ element.classList[method](className);
+ return element.classList.contains(className);
+ }
- return false;
+ return false;
}
// Has class name
export function hasClass(element, className) {
- return is.element(element) && element.classList.contains(className);
+ return is.element(element) && element.classList.contains(className);
}
// Element matches selector
export function matches(element, selector) {
- const { prototype } = Element;
+ const { prototype } = Element;
- function match() {
- return Array.from(document.querySelectorAll(selector)).includes(this);
- }
+ function match() {
+ return Array.from(document.querySelectorAll(selector)).includes(this);
+ }
- const method =
- prototype.matches ||
- prototype.webkitMatchesSelector ||
- prototype.mozMatchesSelector ||
- prototype.msMatchesSelector ||
- match;
+ const method =
+ prototype.matches ||
+ prototype.webkitMatchesSelector ||
+ prototype.mozMatchesSelector ||
+ prototype.msMatchesSelector ||
+ match;
- return method.call(element, selector);
+ return method.call(element, selector);
}
// Find all elements
export function getElements(selector) {
- return this.elements.container.querySelectorAll(selector);
+ return this.elements.container.querySelectorAll(selector);
}
// Find a single element
export function getElement(selector) {
- return this.elements.container.querySelector(selector);
+ return this.elements.container.querySelector(selector);
}
// Set focus and tab focus class
export function setFocus(element = null, tabFocus = false) {
- if (!is.element(element)) {
- return;
- }
+ if (!is.element(element)) {
+ return;
+ }
- // Set regular focus
- element.focus({ preventScroll: true });
+ // Set regular focus
+ element.focus({ preventScroll: true });
- // If we want to mimic keyboard focus via tab
- if (tabFocus) {
- toggleClass(element, this.config.classNames.tabFocus);
- }
+ // If we want to mimic keyboard focus via tab
+ if (tabFocus) {
+ toggleClass(element, this.config.classNames.tabFocus);
+ }
}