💡 Use `the-dom`
This commit is contained in:
parent
071a485f2b
commit
d5a6933de9
|
|
@ -23,6 +23,7 @@
|
|||
"dependencies": {
|
||||
"babel-preset-es2015": "^6.3.13",
|
||||
"babelify": "^7.2.0",
|
||||
"browserify": "^12.0.1"
|
||||
"browserify": "^12.0.1",
|
||||
"the-dom": "^0.1.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
143
scripts/dom.js
143
scripts/dom.js
|
|
@ -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);
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
'use strict';
|
||||
|
||||
import { body, create } from './dom';
|
||||
import { html } from 'the-dom';
|
||||
import { randomNumber, randomColor } from './utils';
|
||||
|
||||
const content = body.get('#content');
|
||||
const plotting = body.get('#plotting');
|
||||
const { body, create } = html(document);
|
||||
const content = body.find('#content');
|
||||
const plotting = body.find('#plotting');
|
||||
const ctx = plotting.node.getContext('2d');
|
||||
|
||||
const padding = 40; // padding between the canvas edges and the points
|
||||
|
|
|
|||
Loading…
Reference in New Issue