matteo
/
chaos
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

🐛 Full ES6 => ES5 transpiling

This commit is contained in:
Mattéo Delabre 2015-12-21 23:50:48 +01:00
parent 88e598f794
commit 6d6af1092d
2 changed files with 608 additions and 483 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

449
bundle.js
View File

@ -1,50 +1,71 @@
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ "use strict";
'use strict';
const wrapNode = require('./lib/node'); function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj; }
/** (function e(t, n, r) {
function s(o, u) {
if (!n[o]) {
if (!t[o]) {
var a = typeof require == "function" && require;if (!u && a) return a(o, !0);if (i) return i(o, !0);var f = new Error("Cannot find module '" + o + "'");throw f.code = "MODULE_NOT_FOUND", f;
}var l = n[o] = { exports: {} };t[o][0].call(l.exports, function (e) {
var n = t[o][1][e];return s(n ? n : e);
}, l, l.exports, e, t, n, r);
}return n[o].exports;
}var i = typeof require == "function" && require;for (var o = 0; o < r.length; o++) {
s(r[o]);
}return s;
})({ 1: [function (require, module, exports) {
'use strict';
var wrapNode = require('./lib/node');
/**
* Import given node into `the-dom` * Import given node into `the-dom`
* *
* @param {Node} node Node to import * @param {Node} node Node to import
* @return {Object} Wrapped node * @return {Object} Wrapped node
*/ */
exports.import = (node) => wrapNode(node); exports.import = function (node) {
return wrapNode(node);
};
/** /**
* Import an HTML document into `the-dom` * Import an HTML document into `the-dom`
* *
* @param {HTMLDocument} doc Document to import * @param {HTMLDocument} doc Document to import
* @return {Object} A hash with doctype, body, head, html props * @return {Object} A hash with doctype, body, head, html props
*/ */
exports.html = doc => ({ exports.html = function (doc) {
create: name => doc.createElement(name), return {
create: function create(name) {
return doc.createElement(name);
},
body: wrapNode(doc.body), body: wrapNode(doc.body),
head: wrapNode(doc.head), head: wrapNode(doc.head),
html: wrapNode(doc.documentElement), html: wrapNode(doc.documentElement),
doctype: wrapNode(doc.doctype) doctype: wrapNode(doc.doctype)
}); };
};
}, { "./lib/node": 3 }], 2: [function (require, module, exports) {
'use strict';
},{"./lib/node":3}],2:[function(require,module,exports){ var utils = require('./utils');
'use strict';
const utils = require('./utils'); var split = utils.split;
var iterateArray = utils.iterateArray;
const split = utils.split; /**
const iterateArray = utils.iterateArray;
/**
* Create an object to manipulate given node's CSS classes * Create an object to manipulate given node's CSS classes
* *
* @param {HTMLElement} node Input element * @param {HTMLElement} node Input element
* @see `Set` documentation for behaviour information * @see `Set` documentation for behaviour information
* @return {Object} Set-like object * @return {Object} Set-like object
*/ */
const wrapClass = node => { var wrapClass = function wrapClass(node) {
const res = { var res = {
add: function (el) { add: function add(el) {
if (!this.has(el)) { if (!this.has(el)) {
const classes = split(node.className); var classes = split(node.className);
classes.push(el); classes.push(el);
node.className = classes.join(' '); node.className = classes.join(' ');
@ -53,8 +74,9 @@ const wrapClass = node => {
return this; return this;
}, },
delete: el => { delete: function _delete(el) {
const classes = split(node.className), pos = classes.indexOf(el); var classes = split(node.className),
pos = classes.indexOf(el);
if (pos > -1) { if (pos > -1) {
classes.splice(pos, 1); classes.splice(pos, 1);
@ -65,93 +87,136 @@ const wrapClass = node => {
return false; return false;
}, },
has: el => split(node.className).indexOf(el) !== -1, has: function has(el) {
clear: () => node.className = '', return split(node.className).indexOf(el) !== -1;
},
clear: function clear() {
return node.className = '';
},
get size() { get size() {
return split(node.className).length; return split(node.className).length;
}, },
keys: () => iterateArray(split(node.className)), keys: function keys() {
values: () => iterateArray(split(node.className)), return iterateArray(split(node.className));
entries: () => iterateArray(split(node.className).map(el => [el, el])), },
values: function values() {
return iterateArray(split(node.className));
},
entries: function entries() {
return iterateArray(split(node.className).map(function (el) {
return [el, el];
}));
},
forEach: function forEach(callback, thisArg) {
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = this[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var cls = _step.value;
forEach: function (callback, thisArg) {
for (let cls of this) {
callback.call(thisArg, cls, cls, this); callback.call(thisArg, cls, cls, this);
} }
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
} }
}; };
res[Symbol.iterator] = res.values; res[Symbol.iterator] = res.values;
return res; return res;
}; };
module.exports = wrapClass; module.exports = wrapClass;
}, { "./utils": 5 }], 3: [function (require, module, exports) {
'use strict';
},{"./utils":5}],3:[function(require,module,exports){ var wrapClass = require('./class');
'use strict'; var wrapStyle = require('./style');
var split = require('./utils').split;
const wrapClass = require('./class'); /**
const wrapStyle = require('./style');
const split = require('./utils').split;
/**
* Ensure a node is not wrapped before using it in native methods * Ensure a node is not wrapped before using it in native methods
* *
* @param {Node|Object} node A node, wrapped or not * @param {Node|Object} node A node, wrapped or not
* @return {Node} Unwrapped node * @return {Node} Unwrapped node
*/ */
const unwrap = node => var unwrap = function unwrap(node) {
(typeof node !== 'object' || node === null || !node.node) ? node : node.node; return (typeof node === "undefined" ? "undefined" : _typeof(node)) !== 'object' || node === null || !node.node ? node : node.node;
};
/** /**
* Turn a NodeList/HTMLCollection into an array * Turn a NodeList/HTMLCollection into an array
* for easy manipulation * for easy manipulation
* *
* @param {NodeList|HTMLCollection} list Input collection * @param {NodeList|HTMLCollection} list Input collection
* @return {Array} Wrapping array * @return {Array} Wrapping array
*/ */
const wrapList = list => { var wrapList = function wrapList(list) {
const length = list.length; var length = list.length;
let result = []; var result = [];
for (let i = 0; i < length; i += 1) { for (var i = 0; i < length; i += 1) {
result.push(wrapNode(list.item(i))); result.push(wrapNode(list.item(i)));
} }
return Object.assign(result, { return Object.assign(result, {
on: (evts, handler) => { on: function on(evts, handler) {
result.forEach(node => node.on(evts, handler)); result.forEach(function (node) {
return node.on(evts, handler);
});
}, },
off: (evts, handler) => { off: function off(evts, handler) {
result.forEach(node => node.off(evts, handler)); result.forEach(function (node) {
return node.off(evts, handler);
});
} }
}); });
}; };
/** /**
* Create an object of shortcuts to manipulate * Create an object of shortcuts to manipulate
* given node more easily * given node more easily
* *
* @param {Node} Input node * @param {Node} Input node
* @return {Object} DOM shortcuts * @return {Object} DOM shortcuts
*/ */
const wrapNode = node => { var wrapNode = function wrapNode(node) {
if (node === null || typeof node !== 'object') { if (node === null || (typeof node === "undefined" ? "undefined" : _typeof(node)) !== 'object') {
return null; return null;
} }
return { return {
node, node: node,
// search among children // search among children
find: query => wrapNode(node.querySelector(query)), find: function find(query) {
findAll: query => wrapList(node.querySelectorAll(query)), return wrapNode(node.querySelector(query));
},
findAll: function findAll(query) {
return wrapList(node.querySelectorAll(query));
},
// access node's relative tree (parent, children, siblings) // access node's relative tree (parent, children, siblings)
equal: el => unwrap(el) === node, equal: function equal(el) {
return unwrap(el) === node;
},
get following() { get following() {
return wrapNode(node.nextElementSibling); return wrapNode(node.nextElementSibling);
@ -170,10 +235,18 @@ const wrapNode = node => {
}, },
// check relative positions // check relative positions
precedes: el => !!(unwrap(el).compareDocumentPosition(node) & 2), precedes: function precedes(el) {
follows: el => !!(unwrap(el).compareDocumentPosition(node) & 4), return !!(unwrap(el).compareDocumentPosition(node) & 2);
contains: el => !!(unwrap(el).compareDocumentPosition(node) & 8), },
contained: el => !!(unwrap(el).compareDocumentPosition(node) & 16), follows: function follows(el) {
return !!(unwrap(el).compareDocumentPosition(node) & 4);
},
contains: function contains(el) {
return !!(unwrap(el).compareDocumentPosition(node) & 8);
},
contained: function contained(el) {
return !!(unwrap(el).compareDocumentPosition(node) & 16);
},
// get and set element attributes // get and set element attributes
get name() { get name() {
@ -182,24 +255,40 @@ const wrapNode = node => {
get type() { get type() {
switch (node.nodeType) { switch (node.nodeType) {
case 1: return 'element'; case 1:
case 3: return 'text'; return 'element';
case 7: return 'processing-instruction'; case 3:
case 8: return 'comment'; return 'text';
case 9: return 'document'; case 7:
case 10: return 'document-type'; return 'processing-instruction';
case 11: return 'document-fragment'; case 8:
default: return null; return 'comment';
case 9:
return 'document';
case 10:
return 'document-type';
case 11:
return 'document-fragment';
default:
return null;
} }
}, },
getAttr: attr => node.getAttribute(attr), getAttr: function getAttr(attr) {
setAttr: (attr, value) => node.setAttribute(attr, value), return node.getAttribute(attr);
},
setAttr: function setAttr(attr, value) {
return node.setAttribute(attr, value);
},
// place an element in the DOM tree // place an element in the DOM tree
append: subnode => node.appendChild(unwrap(subnode)), append: function append(subnode) {
attach: parent => unwrap(parent).appendChild(node), return node.appendChild(unwrap(subnode));
remove: child => { },
attach: function attach(parent) {
return unwrap(parent).appendChild(node);
},
remove: function remove(child) {
if (child) { if (child) {
node.removeChild(unwrap(child)); node.removeChild(unwrap(child));
return; return;
@ -230,46 +319,49 @@ const wrapNode = node => {
}, },
// listen to events // listen to events
on: (evts, handler) => { on: function on(evts, handler) {
split(evts).forEach(evt => { split(evts).forEach(function (evt) {
node.addEventListener(evt, handler); node.addEventListener(evt, handler);
}); });
}, },
off: (evts, handler) => { off: function off(evts, handler) {
split(evts).forEach(evt => { split(evts).forEach(function (evt) {
node.removeEventListener(evt, handler); node.removeEventListener(evt, handler);
}); });
} }
}; };
}; };
module.exports = wrapNode; module.exports = wrapNode;
}, { "./class": 2, "./style": 4, "./utils": 5 }], 4: [function (require, module, exports) {
'use strict';
},{"./class":2,"./style":4,"./utils":5}],4:[function(require,module,exports){ var iterateArray = require('./utils').iterateArray;
'use strict';
const iterateArray = require('./utils').iterateArray; /**
/**
* Create an object to manipulate given node's CSS styles * Create an object to manipulate given node's CSS styles
* *
* @param {HTMLElement} node Input element * @param {HTMLElement} node Input element
* @see `Map` documentation for behaviour information * @see `Map` documentation for behaviour information
* @return {Object} Map-like object * @return {Object} Map-like object
*/ */
const wrapStyle = node => { var wrapStyle = function wrapStyle(node) {
const res = { var res = {
set: function (prop, value) { set: function set(prop, value) {
node.style.setProperty(prop, value); node.style.setProperty(prop, value);
return this; return this;
}, },
delete: prop => node.style.removeProperty(prop) !== '', delete: function _delete(prop) {
has: prop => [].slice.call(node.style).indexOf(prop) > -1, return node.style.removeProperty(prop) !== '';
},
has: function has(prop) {
return [].slice.call(node.style).indexOf(prop) > -1;
},
get: prop => { get: function get(prop) {
const result = node.style.getPropertyValue(prop); var result = node.style.getPropertyValue(prop);
if (result.trim() === '') { if (result.trim() === '') {
return undefined; return undefined;
@ -278,10 +370,10 @@ const wrapStyle = node => {
return result; return result;
}, },
clear: () => { clear: function clear() {
const length = node.style.length; var length = node.style.length;
for (let i = 0; i < length; i += 1) { for (var i = 0; i < length; i += 1) {
node.style.removeProperty(node.style[i]); node.style.removeProperty(node.style[i]);
} }
}, },
@ -290,78 +382,109 @@ const wrapStyle = node => {
return node.style.length; return node.style.length;
}, },
keys: () => iterateArray([].slice.call(node.style)), keys: function keys() {
values: () => iterateArray([].slice.call(node.style).map( return iterateArray([].slice.call(node.style));
prop => node.style.getPropertyValue(prop))), },
entries: () => iterateArray([].slice.call(node.style).map( values: function values() {
prop => [prop, node.style.getPropertyValue(prop)])), return iterateArray([].slice.call(node.style).map(function (prop) {
return node.style.getPropertyValue(prop);
}));
},
entries: function entries() {
return iterateArray([].slice.call(node.style).map(function (prop) {
return [prop, node.style.getPropertyValue(prop)];
}));
},
forEach: function forEach(callback, thisArg) {
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
try {
for (var _iterator2 = this[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var cls = _step2.value;
forEach: function (callback, thisArg) {
for (let cls of this) {
callback.call(thisArg, cls, cls, this); callback.call(thisArg, cls, cls, this);
} }
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
} }
}; };
res[Symbol.iterator] = res.values; res[Symbol.iterator] = res.values;
return res; return res;
}; };
module.exports = wrapStyle; module.exports = wrapStyle;
}, { "./utils": 5 }], 5: [function (require, module, exports) {
'use strict';
},{"./utils":5}],5:[function(require,module,exports){ var whitespace = /\s+/g;
'use strict';
const whitespace = /\s+/g; /**
/**
* Split a list of whitespace separated tokens, * Split a list of whitespace separated tokens,
* excluding empty ones * excluding empty ones
* *
* @param {string} str Input string * @param {string} str Input string
* @return {Array} Split tokens * @return {Array} Split tokens
*/ */
exports.split = str => str.split(whitespace).filter(el => el.trim().length); exports.split = function (str) {
return str.split(whitespace).filter(function (el) {
return el.trim().length;
});
};
/** /**
* Create an iterator on an array * Create an iterator on an array
* *
* @param {Array} arr Array to iterate on * @param {Array} arr Array to iterate on
* @return {Object} Iterator for given array * @return {Object} Iterator for given array
*/ */
exports.iterateArray = (arr) => { exports.iterateArray = function (arr) {
let next = 0; var _next = 0;
return { return {
next: () => next < arr.length ? next: function next() {
{value: arr[next++], done: false} : return _next < arr.length ? { value: arr[_next++], done: false } : { done: true };
{done: true} }
}; };
}; };
}, {}], 6: [function (require, module, exports) {
'use strict';
},{}],6:[function(require,module,exports){ var _theDom = require('the-dom');
'use strict';
var _theDom = require('the-dom'); var _utils = require('./utils');
var _utils = require('./utils'); var _html = (0, _theDom.html)(document);
var _html = (0, _theDom.html)(document); var body = _html.body;
var create = _html.create;
var body = _html.body; var content = body.find('#content');
var create = _html.create; var plotting = body.find('#plotting');
var ctx = plotting.node.getContext('2d');
var content = body.find('#content'); var padding = 40; // padding between the canvas edges and the points
var plotting = body.find('#plotting'); var image = undefined,
var ctx = plotting.node.getContext('2d');
var padding = 40; // padding between the canvas edges and the points
var image = undefined,
width = undefined, width = undefined,
height = undefined; height = undefined;
var lastUpdate = -Infinity; var lastUpdate = -Infinity;
/** /**
* Create a fractal of given width, height, based on * Create a fractal of given width, height, based on
* a polygon of given amount of vertices, using the * a polygon of given amount of vertices, using the
* chaos game applied with given fraction * chaos game applied with given fraction
@ -372,7 +495,7 @@ var lastUpdate = -Infinity;
* @param {Array} colors Color of each vertex * @param {Array} colors Color of each vertex
* @return {ImageData} Generated pixel data * @return {ImageData} Generated pixel data
*/ */
var chaos = function chaos(width, height, fraction, colors) { var chaos = function chaos(width, height, fraction, colors) {
var cx = Math.floor(width / 2); var cx = Math.floor(width / 2);
var cy = Math.floor(height / 2); var cy = Math.floor(height / 2);
var radius = Math.min(cx, cy); var radius = Math.min(cx, cy);
@ -435,15 +558,15 @@ var chaos = function chaos(width, height, fraction, colors) {
} }
return image; return image;
}; };
/** /**
* Render the scene, recalculating the points * Render the scene, recalculating the points
* positions if they need to * positions if they need to
* *
* @return {null} * @return {null}
*/ */
var render = function render() { var render = function render() {
// only recalculate every 16.67 ms // only recalculate every 16.67 ms
if (+new Date() - lastUpdate > 16.67) { if (+new Date() - lastUpdate > 16.67) {
image = chaos(width - 2 * padding, height - 2 * padding, 1 / 2, [[255, 0, 0], [0, 255, 0], [0, 0, 255]]); image = chaos(width - 2 * padding, height - 2 * padding, 1 / 2, [[255, 0, 0], [0, 255, 0], [0, 0, 255]]);
@ -453,15 +576,15 @@ var render = function render() {
ctx.clearRect(0, 0, width, height); ctx.clearRect(0, 0, width, height);
ctx.putImageData(image, padding, padding); ctx.putImageData(image, padding, padding);
}; };
/** /**
* Resize the canvas to fit the new * Resize the canvas to fit the new
* window size and redraw the scene * window size and redraw the scene
* *
* @return {null} * @return {null}
*/ */
var resize = function resize() { var resize = function resize() {
width = content.node.clientWidth; width = content.node.clientWidth;
height = content.node.clientHeight; height = content.node.clientHeight;
@ -469,35 +592,35 @@ var resize = function resize() {
plotting.setAttr('height', height); plotting.setAttr('height', height);
render(); render();
}; };
window.onresize = resize; window.onresize = resize;
resize(); resize();
}, { "./utils": 7, "the-dom": 1 }], 7: [function (require, module, exports) {
'use strict'
},{"./utils":7,"the-dom":1}],7:[function(require,module,exports){ /**
'use strict'
/**
* Get a random whole number * Get a random whole number
* *
* @param {number} min Minimal value for the number * @param {number} min Minimal value for the number
* @param {number} max Maximal value for the number (excluded) * @param {number} max Maximal value for the number (excluded)
* @return {number} Random number * @return {number} Random number
*/ */
; ;
Object.defineProperty(exports, "__esModule", {
value: true
});
var randomNumber = exports.randomNumber = function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
};
/** Object.defineProperty(exports, "__esModule", {
value: true
});
var randomNumber = exports.randomNumber = function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
};
/**
* Generate a random color * Generate a random color
* *
* @return {Array} RGB components * @return {Array} RGB components
*/ */
var randomColor = exports.randomColor = function randomColor() { var randomColor = exports.randomColor = function randomColor() {
var color = []; var color = [];
for (var i = 0; i < 3; i++) { for (var i = 0; i < 3; i++) {
@ -505,27 +628,27 @@ var randomColor = exports.randomColor = function randomColor() {
} }
return color; return color;
}; };
/** /**
* Convert a decimal number to its hexadecimal representation * Convert a decimal number to its hexadecimal representation
* *
* @param {number} input Number to be converted * @param {number} input Number to be converted
* @return {string} Number representation * @return {string} Number representation
*/ */
var hex = function hex(input) { var hex = function hex(input) {
var hex = parseInt(input, 10).toString(16); var hex = parseInt(input, 10).toString(16);
return hex.length === 1 ? '0' + hex : hex; return hex.length === 1 ? '0' + hex : hex;
}; };
/** /**
* Convert a RGB color to its hexadecimal representation * Convert a RGB color to its hexadecimal representation
* *
* @param {Array} color RGB color * @param {Array} color RGB color
* @return {string} Hex representation * @return {string} Hex representation
*/ */
var rgbToHex = exports.rgbToHex = function rgbToHex(color) { var rgbToHex = exports.rgbToHex = function rgbToHex(color) {
return '#' + hex(color[0]) + hex(color[1]) + hex(color[2]); return '#' + hex(color[0]) + hex(color[1]) + hex(color[2]);
}; };
}, {}] }, {}, [6]);
},{}]},{},[6]);

4
package.json
View File

@ -7,7 +7,7 @@
"url": "git+https://github.com/MattouFP/chaos.git" "url": "git+https://github.com/MattouFP/chaos.git"
}, },
"scripts": { "scripts": {
"build": "browserify -t [ babelify --presets [ es2015 ] ] scripts/index.js > bundle.js" "build": "browserify -t [ babelify --presets [ es2015 ] ] scripts/index.js | babel --presets es2015 > bundle.js"
}, },
"keywords": [ "keywords": [
"chaos", "chaos",
@ -23,7 +23,9 @@
"dependencies": { "dependencies": {
"babel-preset-es2015": "^6.3.13", "babel-preset-es2015": "^6.3.13",
"babelify": "^7.2.0", "babelify": "^7.2.0",
"babel-cli": "^6.3.17",
"browserify": "^12.0.1", "browserify": "^12.0.1",
"the-dom": "^0.1.0" "the-dom": "^0.1.0"
} }
} }