Mattéo Delabre
8 years ago
3 changed files with 7 additions and 148 deletions
@ -1,143 +0,0 @@ |
|||
'use strict'; |
|||
|
|||
/** |
|||
* dom.js |
|||
* A module that helps working with HTML elements in the DOM |
|||
*/ |
|||
|
|||
const boundaryRegex = /\s+/g; |
|||
|
|||
/** |
|||
* Add a wrapping of utility methods around a Node |
|||
* |
|||
* @param {Node} el Node to wrap |
|||
* @return {Object} Utility-wrapped node |
|||
*/ |
|||
const wrapNode = (el) => Object.freeze({ |
|||
node: el, |
|||
|
|||
// shortcuts
|
|||
get: selector => wrapNode(el.querySelector(selector)), |
|||
all: selector => wrapEls(el.querySelectorAll(selector)), |
|||
|
|||
parent: () => wrapNode(el.parentNode), |
|||
children: () => wrapEls(el.childNodes), |
|||
|
|||
add: subEl => el.appendChild(unwrapNode(subEl)), |
|||
remove: () => el.parentNode.removeChild(el), |
|||
|
|||
getAttr: name => el.getAttribute(name), |
|||
setAttr: (name, val) => el.setAttribute(name, val), |
|||
|
|||
/** |
|||
* Add event listeners for all given events |
|||
* |
|||
* @param {string} events Whitespace-separated list of events |
|||
* @param {function} listener Listener to add |
|||
* @return {null} |
|||
*/ |
|||
on: (events, listener) => { |
|||
events.trim().split(boundaryRegex).forEach( |
|||
event => el.addEventListener(event, listener) |
|||
); |
|||
}, |
|||
|
|||
/** |
|||
* Remove event listeners for all given events |
|||
* |
|||
* @param {strings} events Whitespace-separated list of events |
|||
* @param {function} listener Listener to remove |
|||
* @return {null} |
|||
*/ |
|||
off: (events, listener) => { |
|||
events.trim().split(boundaryRegex).forEach( |
|||
event => el.removeEventListener(event, listener) |
|||
); |
|||
} |
|||
}); |
|||
|
|||
/** |
|||
* Remove a wrapping around a Node |
|||
* |
|||
* @param {Object|Node} el A node, wrapped or not |
|||
* @return {Node} Unwrapped node |
|||
*/ |
|||
const unwrapNode = el => el instanceof Node ? el : el.node; |
|||
|
|||
/** |
|||
* Override the methods of an Array so that it |
|||
* can easily manipulate Nodes it contains |
|||
* |
|||
* @param {Array} list A list to be wrapped |
|||
* @return {Array} Expanded list |
|||
*/ |
|||
const expandList = (list) => Object.assign(list, { |
|||
// shortcuts
|
|||
on: function (events, listener) { |
|||
this.forEach(node => node.on(events, listener)); |
|||
}, |
|||
|
|||
off: function (events, listener) { |
|||
this.forEach(node => node.off(events, listener)); |
|||
}, |
|||
|
|||
/** |
|||
* Check whether this list includes given node |
|||
* |
|||
* @param {Node|Object} el Element to check |
|||
* @return {bool} True if this list contains `el` |
|||
*/ |
|||
includes: function (el) { |
|||
const length = this.length; |
|||
el = unwrapNode(el); |
|||
|
|||
for (let i = 0; i < length; i += 1) { |
|||
if (el === unwrapNode(this[i])) { |
|||
return true; |
|||
} |
|||
} |
|||
|
|||
return false; |
|||
}, |
|||
|
|||
/** |
|||
* Filter nodes in the list, removing filtered out nodes |
|||
* |
|||
* @param {function} check A function that returns true to keep given el |
|||
* @return {Array} New list of nodes after filtering |
|||
*/ |
|||
filter: function (check) { |
|||
const length = this.length, newList = []; |
|||
|
|||
for (let i = 0; i < length; i += 1) { |
|||
if (!check(this[i], i, this)) { |
|||
this[i].remove(); |
|||
} else { |
|||
newList.push(this[i]); |
|||
} |
|||
} |
|||
|
|||
return expandList(newList); |
|||
} |
|||
}); |
|||
|
|||
/** |
|||
* Turn a NodeList into a real Array of Nodes |
|||
* |
|||
* @param {NodeList} els List of nodes to wrap |
|||
* @return {Array} An array of nodes |
|||
*/ |
|||
const wrapList = (els) => { |
|||
const result = [], length = els.length; |
|||
|
|||
for (let i = 0; i < length; i += 1) { |
|||
result[i] = wrapNode(els[i]); |
|||
} |
|||
|
|||
return expandList(result); |
|||
}; |
|||
|
|||
export const create = (name) => wrapNode(document.createElement(name)); |
|||
export const html = wrapNode(document.documentElement); |
|||
export const head = wrapNode(document.head); |
|||
export const body = wrapNode(document.body); |
Loading…
Reference in new issue