trxcllnt/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <!-- put additional styles and scripts here -->
</head>
<body>
  <!-- put markup and other contents here -->
</body>
</html>

## index.js
import { Scheduler } from 'rxjs';

const root = getRootDiv();
const rect = { x: 0, y: 0, w: 200, h: 200};
const box1 = root.appendChild(createBox());
const box2 = root.appendChild(createBox());
const scheduler = Scheduler.animationFrame;

scheduler.schedule(moveBox(box1), 0, {
    ...rect,
    tx: 0, ty: 0,
    ix: rect.w / (rect.w * 2),
    iy: rect.h / (rect.h * 2),
});

scheduler.schedule(moveBox(box2), 0, {
    tx: 0, ty: 0,
    x: rect.w, y: rect.h,
    ix: -1 * rect.w / (rect.w * 2),
    iy: -1 * rect.h / (rect.h * 2),
});

function moveBox(box) {
    return function(state) {
        const { x, y, tx, ty } = state;
        if (tx < rect.w && ty < rect.h) {
            box.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
            state.x = x + state.ix;
            state.y = y + state.iy;
            state.tx = tx + Math.abs(state.ix);
            state.ty = ty + Math.abs(state.iy);
            this.schedule(state);
        }
    }
}

function createBox(parent) {
  const box = document.createElement('div');
  box.style.width = `${rect.w}px`;
  box.style.height = `${rect.h}px`;
  box.style.opacity = 0.25;
  box.style.background = '#000000';
  box.style.position = 'absolute';
  return box;
}

function getRootDiv(root) {
  root = (
    document.getElementById('root') ||
    document.body.appendChild((
      root = document.createElement('div')) && (
      root.id = 'root') && (
      root)
    )
  );
  root.style.top = 0;
  root.style.left = 0;
  root.style.right = 0;
  root.style.bottom = 0;
  root.style.overflow = 'hidden';
  root.style.position = 'absolute';
  root.style['transform-style'] = 'preserve-3d';
  return root;
}

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "babel-runtime": "6.9.2",
    "rxjs": "5.0.0-beta.10"
  }
}

## transpiled.js
'use strict';

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _rxjs = require('rxjs');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var root = getRootDiv();
var rect = { x: 0, y: 0, w: 200, h: 200 };
var box1 = root.appendChild(createBox());
var box2 = root.appendChild(createBox());
var scheduler = _rxjs.Scheduler.animationFrame;

scheduler.schedule(moveBox(box1), 0, (0, _extends3.default)({}, rect, {
    tx: 0, ty: 0,
    ix: rect.w / (rect.w * 2),
    iy: rect.h / (rect.h * 2)
}));

scheduler.schedule(moveBox(box2), 0, {
    tx: 0, ty: 0,
    x: rect.w, y: rect.h,
    ix: -1 * rect.w / (rect.w * 2),
    iy: -1 * rect.h / (rect.h * 2)
});

function moveBox(box) {
    return function (state) {
        var x = state.x;
        var y = state.y;
        var tx = state.tx;
        var ty = state.ty;

        if (tx < rect.w && ty < rect.h) {
            box.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0px)';
            state.x = x + state.ix;
            state.y = y + state.iy;
            state.tx = tx + Math.abs(state.ix);
            state.ty = ty + Math.abs(state.iy);
            this.schedule(state);
        }
    };
}

function createBox(parent) {
    var box = document.createElement('div');
    box.style.width = rect.w + 'px';
    box.style.height = rect.h + 'px';
    box.style.opacity = 0.25;
    box.style.background = '#000000';
    box.style.position = 'absolute';
    return box;
}

function getRootDiv(root) {
    root = document.getElementById('root') || document.body.appendChild((root = document.createElement('div')) && (root.id = 'root') && root);
    root.style.top = 0;
    root.style.left = 0;
    root.style.right = 0;
    root.style.bottom = 0;
    root.style.overflow = 'hidden';
    root.style.position = 'absolute';
    root.style['transform-style'] = 'preserve-3d';
    return root;
}
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	</head>
	<body>
	<!-- put markup and other contents here -->
	</body>
	</html>
	import { Scheduler } from 'rxjs';

	const root = getRootDiv();
	const rect = { x: 0, y: 0, w: 200, h: 200};
	const box1 = root.appendChild(createBox());
	const box2 = root.appendChild(createBox());
	const scheduler = Scheduler.animationFrame;

	scheduler.schedule(moveBox(box1), 0, {
	...rect,
	tx: 0, ty: 0,
	ix: rect.w / (rect.w * 2),
	iy: rect.h / (rect.h * 2),
	});

	scheduler.schedule(moveBox(box2), 0, {
	tx: 0, ty: 0,
	x: rect.w, y: rect.h,
	ix: -1 * rect.w / (rect.w * 2),
	iy: -1 * rect.h / (rect.h * 2),
	});

	function moveBox(box) {
	return function(state) {
	const { x, y, tx, ty } = state;
	if (tx < rect.w && ty < rect.h) {
	box.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
	state.x = x + state.ix;
	state.y = y + state.iy;
	state.tx = tx + Math.abs(state.ix);
	state.ty = ty + Math.abs(state.iy);
	this.schedule(state);
	}
	}
	}

	function createBox(parent) {
	const box = document.createElement('div');
	box.style.width = `${rect.w}px`;
	box.style.height = `${rect.h}px`;
	box.style.opacity = 0.25;
	box.style.background = '#000000';
	box.style.position = 'absolute';
	return box;
	}

	function getRootDiv(root) {
	root = (
	document.getElementById('root') \|\|
	document.body.appendChild((
	root = document.createElement('div')) && (
	root.id = 'root') && (
	root)
	)
	);
	root.style.top = 0;
	root.style.left = 0;
	root.style.right = 0;
	root.style.bottom = 0;
	root.style.overflow = 'hidden';
	root.style.position = 'absolute';
	root.style['transform-style'] = 'preserve-3d';
	return root;
	}
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"babel-runtime": "6.9.2",
	"rxjs": "5.0.0-beta.10"
	}
	}
	'use strict';

	var _extends2 = require('babel-runtime/helpers/extends');

	var _extends3 = _interopRequireDefault(_extends2);

	var _rxjs = require('rxjs');

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	var root = getRootDiv();
	var rect = { x: 0, y: 0, w: 200, h: 200 };
	var box1 = root.appendChild(createBox());
	var box2 = root.appendChild(createBox());
	var scheduler = _rxjs.Scheduler.animationFrame;

	scheduler.schedule(moveBox(box1), 0, (0, _extends3.default)({}, rect, {
	tx: 0, ty: 0,
	ix: rect.w / (rect.w * 2),
	iy: rect.h / (rect.h * 2)
	}));

	scheduler.schedule(moveBox(box2), 0, {
	tx: 0, ty: 0,
	x: rect.w, y: rect.h,
	ix: -1 * rect.w / (rect.w * 2),
	iy: -1 * rect.h / (rect.h * 2)
	});

	function moveBox(box) {
	return function (state) {
	var x = state.x;
	var y = state.y;
	var tx = state.tx;
	var ty = state.ty;

	if (tx < rect.w && ty < rect.h) {
	box.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0px)';
	state.x = x + state.ix;
	state.y = y + state.iy;
	state.tx = tx + Math.abs(state.ix);
	state.ty = ty + Math.abs(state.iy);
	this.schedule(state);
	}
	};
	}

	function createBox(parent) {
	var box = document.createElement('div');
	box.style.width = rect.w + 'px';
	box.style.height = rect.h + 'px';
	box.style.opacity = 0.25;
	box.style.background = '#000000';
	box.style.position = 'absolute';
	return box;
	}

	function getRootDiv(root) {
	root = document.getElementById('root') \|\| document.body.appendChild((root = document.createElement('div')) && (root.id = 'root') && root);
	root.style.top = 0;
	root.style.left = 0;
	root.style.right = 0;
	root.style.bottom = 0;
	root.style.overflow = 'hidden';
	root.style.position = 'absolute';
	root.style['transform-style'] = 'preserve-3d';
	return root;
	}