🐛 Checkout bundle.js

This commit is contained in:
Mattéo Delabre 2015-12-21 23:38:53 +01:00
parent d5a6933de9
commit 88e598f794
2 changed files with 531 additions and 1 deletions

1
.gitignore vendored
View File

@ -1,2 +1 @@
node_modules node_modules
bundle.js

531
bundle.js Normal file
View File

@ -0,0 +1,531 @@
(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';
const 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);
/**
* 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),
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';
const utils = require('./utils');
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) {
if (!this.has(el)) {
const classes = split(node.className);
classes.push(el);
node.className = classes.join(' ');
}
return this;
},
delete: el => {
const classes = split(node.className), pos = classes.indexOf(el);
if (pos > -1) {
classes.splice(pos, 1);
node.className = classes.join(' ');
return true;
}
return false;
},
has: el => split(node.className).indexOf(el) !== -1,
clear: () => 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])),
forEach: function (callback, thisArg) {
for (let cls of this) {
callback.call(thisArg, cls, cls, this);
}
}
};
res[Symbol.iterator] = res.values;
return res;
};
module.exports = wrapClass;
},{"./utils":5}],3:[function(require,module,exports){
'use strict';
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;
/**
* 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 = [];
for (let 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));
},
off: (evts, handler) => {
result.forEach(node => 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') {
return null;
}
return {
node,
// search among children
find: query => wrapNode(node.querySelector(query)),
findAll: query => wrapList(node.querySelectorAll(query)),
// access node's relative tree (parent, children, siblings)
equal: el => unwrap(el) === node,
get following() {
return wrapNode(node.nextElementSibling);
},
get preceding() {
return wrapNode(node.previousElementSibling);
},
get parent() {
return wrapNode(node.parentNode);
},
get children() {
return wrapList(node.children);
},
// 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),
// get and set element attributes
get name() {
return node.tagName.toLowerCase().trim();
},
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;
}
},
getAttr: attr => node.getAttribute(attr),
setAttr: (attr, value) => 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 => {
if (child) {
node.removeChild(unwrap(child));
return;
}
node.parentNode.removeChild(node);
},
// manipulate element's CSS (see wrapClass, wrapStyle)
class: wrapClass(node),
style: wrapStyle(node),
// change an element's content
get text() {
return node.textContent;
},
set text(val) {
node.textContent = val;
},
get html() {
return node.innerHTML;
},
set html(val) {
node.innerHTML = val;
},
// listen to events
on: (evts, handler) => {
split(evts).forEach(evt => {
node.addEventListener(evt, handler);
});
},
off: (evts, handler) => {
split(evts).forEach(evt => {
node.removeEventListener(evt, handler);
});
}
};
};
module.exports = wrapNode;
},{"./class":2,"./style":4,"./utils":5}],4:[function(require,module,exports){
'use strict';
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) {
node.style.setProperty(prop, value);
return this;
},
delete: prop => node.style.removeProperty(prop) !== '',
has: prop => [].slice.call(node.style).indexOf(prop) > -1,
get: prop => {
const result = node.style.getPropertyValue(prop);
if (result.trim() === '') {
return undefined;
}
return result;
},
clear: () => {
const length = node.style.length;
for (let i = 0; i < length; i += 1) {
node.style.removeProperty(node.style[i]);
}
},
get size() {
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)])),
forEach: function (callback, thisArg) {
for (let cls of this) {
callback.call(thisArg, cls, cls, this);
}
}
};
res[Symbol.iterator] = res.values;
return res;
};
module.exports = wrapStyle;
},{"./utils":5}],5:[function(require,module,exports){
'use strict';
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);
/**
* 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;
return {
next: () => next < arr.length ?
{value: arr[next++], done: false} :
{done: true}
};
};
},{}],6:[function(require,module,exports){
'use strict';
var _theDom = require('the-dom');
var _utils = require('./utils');
var _html = (0, _theDom.html)(document);
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 padding = 40; // padding between the canvas edges and the points
var image = undefined,
width = undefined,
height = undefined;
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
*
* @param {number} width Fractal width
* @param {number} height Fractal height
* @param {number} fraction Fraction to use
* @param {Array} colors Color of each vertex
* @return {ImageData} Generated pixel data
*/
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);
var count = colors.length;
var vertices = [];
var angleStep = 2 * Math.PI / count;
var initialAngle = undefined;
// creating 0-width image data will throw an error
if (width <= 0 || height <= 0) {
return ctx.createImageData(1, 1);
}
var image = ctx.createImageData(width, height);
var data = image.data;
// we will rotate around an inscribed circle to calculate
// the vertices' positions. We adapt the initial angle so
// that usual polygons look better
if (count === 3) {
initialAngle = -Math.PI / 2;
} else if (count === 4) {
initialAngle = Math.PI / 4;
} else {
initialAngle = 0;
}
for (var i = 0; i < count; i += 1) {
var current = angleStep * i + initialAngle;
vertices.push([Math.floor(Math.cos(current) * radius + cx), Math.floor(Math.sin(current) * radius + cy)]);
}
// now we apply the chaos algorithm:
// for any point, the next point is a `fraction` of the
// distance between it and a random vertex
var point = vertices[0];
var iterations = 200000;
var drop = 1000;
while (iterations--) {
var vertexNumber = (0, _utils.randomNumber)(0, count);
var vertex = vertices[vertexNumber],
color = colors[vertexNumber];
point = [Math.floor((point[0] - vertex[0]) * fraction + vertex[0]), Math.floor((point[1] - vertex[1]) * fraction + vertex[1])];
// skip the first 1000 points
if (drop === 0) {
var i = (point[1] * width + point[0]) * 4;
data[i] = color[0];
data[i + 1] = color[1];
data[i + 2] = color[2];
data[i + 3] = 255;
} else {
drop--;
}
}
return image;
};
/**
* Render the scene, recalculating the points
* positions if they need to
*
* @return {null}
*/
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]]);
lastUpdate = +new Date();
}
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() {
width = content.node.clientWidth;
height = content.node.clientHeight;
plotting.setAttr('width', width);
plotting.setAttr('height', height);
render();
};
window.onresize = resize;
resize();
},{"./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;
};
/**
* Generate a random color
*
* @return {Array} RGB components
*/
var randomColor = exports.randomColor = function randomColor() {
var color = [];
for (var i = 0; i < 3; i++) {
color.push(Math.round(Math.random().toFixed(2) * 255));
}
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 = 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) {
return '#' + hex(color[0]) + hex(color[1]) + hex(color[2]);
};
},{}]},{},[6]);