Browse Source

💡 Use `the-dom`

master
Mattéo Delabre 8 years ago
parent
commit
d5a6933de9
  1. 5
      package.json
  2. 143
      scripts/dom.js
  3. 7
      scripts/index.js

5
package.json

@ -8,7 +8,7 @@
},
"scripts": {
"build": "browserify -t [ babelify --presets [ es2015 ] ] scripts/index.js > bundle.js"
},
},
"keywords": [
"chaos",
"fractals",
@ -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

@ -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);

7
scripts/index.js

@ -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…
Cancel
Save