From 9fb99b63ff9a891c5c5ee781b77480d0f70e3b78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matt=C3=A9o=20Delabre?= Date: Wed, 23 Dec 2015 22:31:51 +0100 Subject: [PATCH] :bulb: REACT ALL THE THINGS --- .eslintrc | 7 +- bundle.js | 6554 +++++++++++++++++++++++++++++++++++++++----- package.json | 16 +- scripts/chaos.js | 15 +- scripts/fractal.js | 234 ++ scripts/index.js | 121 +- scripts/utils.js | 31 - 7 files changed, 6145 insertions(+), 833 deletions(-) create mode 100644 scripts/fractal.js delete mode 100644 scripts/utils.js diff --git a/.eslintrc b/.eslintrc index 56af0ac..036bf46 100644 --- a/.eslintrc +++ b/.eslintrc @@ -29,9 +29,14 @@ }, "ecmaFeatures": { - "modules": true + "modules": true, + "jsx": true }, + "plugins": [ + "react" + ], + "env": { "es6": true, "browser": true diff --git a/bundle.js b/bundle.js index 0bb5576..b995201 100644 --- a/bundle.js +++ b/bundle.js @@ -1,674 +1,5882 @@ -"use strict"; - -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 = 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 = 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'; - - var utils = require('./utils'); - - var split = utils.split; - var 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 - */ - var wrapClass = function wrapClass(node) { - var res = { - add: function add(el) { - if (!this.has(el)) { - var classes = split(node.className); - - classes.push(el); - node.className = classes.join(' '); - } - - return this; - }, - - delete: function _delete(el) { - var classes = split(node.className), - pos = classes.indexOf(el); - - if (pos > -1) { - classes.splice(pos, 1); - node.className = classes.join(' '); - return true; - } - - return false; - }, - - 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: 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; - - 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; - }, { "./utils": 5 }], 3: [function (require, module, exports) { - 'use strict'; - - var wrapClass = require('./class'); - var wrapStyle = require('./style'); - var 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 - */ - 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 - */ - var wrapList = function wrapList(list) { - var length = list.length; - var result = []; - - for (var i = 0; i < length; i += 1) { - result.push(wrapNode(list.item(i))); - } - - return Object.assign(result, { - on: function on(evts, handler) { - result.forEach(function (node) { - return node.on(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 - */ - var wrapNode = function wrapNode(node) { - if (node === null || (typeof node === "undefined" ? "undefined" : _typeof(node)) !== 'object') { - return null; - } - - return { - node: node, - - // search among children - 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: function equal(el) { - return 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: 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() { - 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: 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: 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; - } - - 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: function on(evts, handler) { - split(evts).forEach(function (evt) { - node.addEventListener(evt, handler); - }); - }, - - off: function off(evts, handler) { - split(evts).forEach(function (evt) { - node.removeEventListener(evt, handler); - }); - } - }; - }; - - module.exports = wrapNode; - }, { "./class": 2, "./style": 4, "./utils": 5 }], 4: [function (require, module, exports) { - 'use strict'; - - var 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 - */ - var wrapStyle = function wrapStyle(node) { - var res = { - set: function set(prop, value) { - node.style.setProperty(prop, value); - return this; - }, - - delete: function _delete(prop) { - return node.style.removeProperty(prop) !== ''; - }, - has: function has(prop) { - return [].slice.call(node.style).indexOf(prop) > -1; - }, - - get: function get(prop) { - var result = node.style.getPropertyValue(prop); - - if (result.trim() === '') { - return undefined; - } - - return result; - }, - - clear: function clear() { - var length = node.style.length; - - for (var i = 0; i < length; i += 1) { - node.style.removeProperty(node.style[i]); - } - }, - - get size() { - return node.style.length; - }, - - 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; - - 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; - }, { "./utils": 5 }], 5: [function (require, module, exports) { - 'use strict'; - - var whitespace = /\s+/g; - - /** - * Split a list of whitespace separated tokens, - * excluding empty ones - * - * @param {string} str Input string - * @return {Array} Split tokens - */ - 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 = function (arr) { - var _next = 0; - - return { - next: function next() { - return _next < arr.length ? { value: arr[_next++], done: false } : { done: true }; - } - }; - }; - }, {}], 6: [function (require, module, exports) { - 'use strict' - - /** - * Choose an index at random among a list of weights, - * more weighted indices have a greater proability to be chosen - * - * @param {Array} weights List of weights - * @return {number} Selected index - */ - ; - - Object.defineProperty(exports, "__esModule", { - value: true - }); - var chooseIndex = function chooseIndex(weights) { - var number = Math.random(); - var sum = 0, - index = 0; - - while (number >= sum) { - sum += weights[index]; - index += 1; - } - - return index - 1; - }; - - /** - * Starting from the last point in `points`, add - * `iterations` number of point generated by applying - * transformations chosen at random among `transforms` - * - * @param {Array} points Initial set of points - * @param {number} iterations Number of points to plot - * @param {Array} transforms List of available transforms - * @param {Array} weights Probability weights for each transform - * @return {null} - */ - var applyChaos = exports.applyChaos = function applyChaos(points, iterations, transforms, weights) { - var point = points[points.length - 1]; - - if (weights === undefined) { - weights = Array.apply(null, Array(transforms.length)).map(function () { - return 1 / transforms.length; - }); - } - - while (iterations--) { - var index = chooseIndex(weights); - point = transforms[index](point); - points.push(point); - } - }; - }, {}], 7: [function (require, module, exports) { - 'use strict'; - - Object.defineProperty(exports, "__esModule", { - value: true - }); - var linearTransform = function linearTransform(a, b, c, d, e, f) { - return function (point) { - return [a * point[0] + b * point[1] + e, c * point[0] + d * point[1] + f]; - }; - }; - - var polygonTransforms = function polygonTransforms(vertices, frac) { - return vertices.map(function (vertex) { - return linearTransform(frac, 0, 0, frac, vertex[0] * (frac - 1), vertex[1] * (frac - 1)); - }); - }; - - var barnsley = exports.barnsley = [[linearTransform(0, 0, 0, 0.16, 0, 0), linearTransform(.85, .04, -.04, .85, 0, 1.6), linearTransform(.20, -.26, .23, .22, 0, 1.6), linearTransform(-.15, .28, .26, .24, 0, .44)], [.01, .85, .07, .07]]; - - var sierpinski = exports.sierpinski = [polygonTransforms([[.866, .5], [-.866, .5], [0, -1]], 1 / 2), [1 / 3, 1 / 3, 1 / 3]]; - }, {}], 8: [function (require, module, exports) { - 'use strict'; - - var _theDom = require('the-dom'); - - var _chaos = require('./chaos'); - - var _ifs = require('./ifs'); - - function _toConsumableArray(arr) { - if (Array.isArray(arr)) { - for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { - arr2[i] = arr[i]; - }return arr2; - } else { - return Array.from(arr); - } - } - - var _html = (0, _theDom.html)(document); - - var body = _html.body; - - var content = body.find('#content'); - var plotting = body.find('#plotting').node; - var ctx = plotting.getContext('2d'); - - var dragging = false; - var center = undefined, - zoom = 200; - var width = undefined, - height = undefined; - - var points = [[0, 0]]; - - /** - * Re-render the scene from scratch - * - * @return {null} - */ - var render = function render() { - plotting.width = width; - plotting.height = height; - - // do not plot (very) small sizes - if (width < 1) { - return; - } - - // do the chaos game - var image = ctx.getImageData(0, 0, width, height); - var length = points.length; - var color = [0, 0, 0]; - - for (var i = 50; i < length; i += 1) { - var x = Math.floor(points[i][0] * zoom + center[0]); - var y = height - Math.floor(points[i][1] * zoom + center[1]); - - if (x >= 0 && x < width && y >= 0 && y < height) { - var index = (y * width + x) * 4; - - image.data[index] = color[0]; - image.data[index + 1] = color[1]; - image.data[index + 2] = color[2]; - image.data[index + 3] = 255; - } - } - - ctx.putImageData(image, 0, 0); - }; - - /** - * Update the scene when the window has been resized - * - * @return {null} - */ - var resize = function resize() { - width = content.node.clientWidth; - height = content.node.clientHeight; - center = [Math.floor(width / 2), Math.floor(height / 2)]; - - render(); - }; - - /** - * Zoom on the cursor position when using mouse wheel - */ - content.on('wheel', function (event) { - var delta = event.deltaMode === 0 ? event.deltaY / 53 : event.deltaY; - var newZoom = zoom * Math.max(0, 1 - delta * .035); - - // which (unprojected) point does the mouse point on? - var mouse = [(event.offsetX - center[0]) / zoom, (height - event.offsetY - center[1]) / zoom]; - - // we need to set the center so that `mouse` stays at - // the same position on screen, i.e (vectorially): - // mouse * newZoom + newCenter = mouse * zoom + center - // => newCenter = mouse * zoom - mouse * newZoom + center - center = [mouse[0] * zoom - mouse[0] * newZoom + center[0], mouse[1] * zoom - mouse[1] * newZoom + center[1]]; - - zoom = newZoom; - render(); - - event.preventDefault(); - }); - - /** - * Pan the content with click-drag action - */ - content.on('mousedown', function (event) { - return dragging = [event.offsetX, event.offsetY]; - }); - content.on('mouseup', function () { - return dragging = false; - }); - content.on('mousemove', function (event) { - if (dragging !== false) { - var newMouse = [event.offsetX, event.offsetY]; - var movement = [newMouse[0] - dragging[0], newMouse[1] - dragging[1]]; - - center[0] += movement[0]; - center[1] -= movement[1]; - - render(); - dragging = newMouse; - - event.preventDefault(); - } - }); - - _chaos.applyChaos.apply(undefined, [points, 200000].concat(_toConsumableArray(_ifs.barnsley))); - window.onresize = resize; - resize(); - }, { "./chaos": 6, "./ifs": 7, "the-dom": 1 }] }, {}, [8]); +"use strict";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 camelize('background-color') + * < "backgroundColor" + * + * @param {string} string + * @return {string} + */function camelize(string){return string.replace(_hyphenPattern,function(_,character){return character.toUpperCase();});}module.exports=camelize;},{}],4:[function(require,module,exports){ /** + * Copyright 2013-2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule camelizeStyleName + * @typechecks + */'use strict';var camelize=require('./camelize');var msPattern=/^-ms-/; /** + * Camelcases a hyphenated CSS property name, for example: + * + * > camelizeStyleName('background-color') + * < "backgroundColor" + * > camelizeStyleName('-moz-transition') + * < "MozTransition" + * > camelizeStyleName('-ms-transition') + * < "msTransition" + * + * As Andi Smith suggests + * (http://www.andismith.com/blog/2012/02/modernizr-prefixed/), an `-ms` prefix + * is converted to lowercase `ms`. + * + * @param {string} string + * @return {string} + */function camelizeStyleName(string){return camelize(string.replace(msPattern,'ms-'));}module.exports=camelizeStyleName;},{"./camelize":3}],5:[function(require,module,exports){ /** + * Copyright 2013-2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule containsNode + * @typechecks + */'use strict';var isTextNode=require('./isTextNode'); /*eslint-disable no-bitwise */ /** + * Checks if a given DOM node contains or is another DOM node. + * + * @param {?DOMNode} outerNode Outer DOM node. + * @param {?DOMNode} innerNode Inner DOM node. + * @return {boolean} True if `outerNode` contains or is `innerNode`. + */function containsNode(_x,_x2){var _again=true;_function: while(_again){var outerNode=_x,innerNode=_x2;_again=false;if(!outerNode||!innerNode){return false;}else if(outerNode===innerNode){return true;}else if(isTextNode(outerNode)){return false;}else if(isTextNode(innerNode)){_x=outerNode;_x2=innerNode.parentNode;_again=true;continue _function;}else if(outerNode.contains){return outerNode.contains(innerNode);}else if(outerNode.compareDocumentPosition){return !!(outerNode.compareDocumentPosition(innerNode)&16);}else {return false;}}}module.exports=containsNode;},{"./isTextNode":18}],6:[function(require,module,exports){ /** + * Copyright 2013-2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule createArrayFromMixed + * @typechecks + */'use strict';var toArray=require('./toArray'); /** + * Perform a heuristic test to determine if an object is "array-like". + * + * A monk asked Joshu, a Zen master, "Has a dog Buddha nature?" + * Joshu replied: "Mu." + * + * This function determines if its argument has "array nature": it returns + * true if the argument is an actual array, an `arguments' object, or an + * HTMLCollection (e.g. node.childNodes or node.getElementsByTagName()). + * + * It will return false for other array-like objects like Filelist. + * + * @param {*} obj + * @return {boolean} + */function hasArrayNature(obj){return (// not null/false +!!obj&&( // arrays are objects, NodeLists are functions in Safari +(typeof obj==="undefined"?"undefined":_typeof(obj))=='object'||typeof obj=='function')&& // quacks like an array +'length' in obj&& // not window +!('setInterval' in obj)&& // no DOM node should be considered an array-like +// a 'select' element has 'length' and 'item' properties on IE8 +typeof obj.nodeType!='number'&&( // a real array +Array.isArray(obj)|| // arguments +'callee' in obj|| // HTMLCollection/NodeList +'item' in obj));} /** + * Ensure that the argument is an array by wrapping it in an array if it is not. + * Creates a copy of the argument if it is already an array. + * + * This is mostly useful idiomatically: + * + * var createArrayFromMixed = require('createArrayFromMixed'); + * + * function takesOneOrMoreThings(things) { + * things = createArrayFromMixed(things); + * ... + * } + * + * This allows you to treat `things' as an array, but accept scalars in the API. + * + * If you need to convert an array-like object, like `arguments`, into an array + * use toArray instead. + * + * @param {*} obj + * @return {array} + */function createArrayFromMixed(obj){if(!hasArrayNature(obj)){return [obj];}else if(Array.isArray(obj)){return obj.slice();}else {return toArray(obj);}}module.exports=createArrayFromMixed;},{"./toArray":26}],7:[function(require,module,exports){(function(process){ /** + * Copyright 2013-2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule createNodesFromMarkup + * @typechecks + */ /*eslint-disable fb-www/unsafe-html*/'use strict';var ExecutionEnvironment=require('./ExecutionEnvironment');var createArrayFromMixed=require('./createArrayFromMixed');var getMarkupWrap=require('./getMarkupWrap');var invariant=require('./invariant'); /** + * Dummy container used to render all markup. + */var dummyNode=ExecutionEnvironment.canUseDOM?document.createElement('div'):null; /** + * Pattern used by `getNodeName`. + */var nodeNamePattern=/^\s*<(\w+)/; /** + * Extracts the `nodeName` of the first element in a string of markup. + * + * @param {string} markup String of markup. + * @return {?string} Node name of the supplied markup. + */function getNodeName(markup){var nodeNameMatch=markup.match(nodeNamePattern);return nodeNameMatch&&nodeNameMatch[1].toLowerCase();} /** + * Creates an array containing the nodes rendered from the supplied markup. The + * optionally supplied `handleScript` function will be invoked once for each + *