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

4
package.json
View File

@ -7,7 +7,7 @@
"url": "git+https://github.com/MattouFP/chaos.git"
},
"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": [
"chaos",
@ -23,7 +23,9 @@
"dependencies": {
"babel-preset-es2015": "^6.3.13",
"babelify": "^7.2.0",
"babel-cli": "^6.3.17",
"browserify": "^12.0.1",
"the-dom": "^0.1.0"
}
}