tusharmath/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 -->
  <style>
    .container div {
      border: 1px solid #000;
      margin: 10px;
      padding: 10px;
      user-select: none;
      -webkit-user-select: none;
      cursor: default;
    }
    .block {
      height: 50px;
      width: 50px;
      background-color: #000;
      will-change: transform
    }
  </style>
</head>
<body>
  <!-- put markup and other contents here -->
  <div class="container">
    <div class="a">.a
      <div class="b">.b (dragme and view console)
        <div class="c">.c
          <div class="d">.d

          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="block"></div>
</body>
</html>

## index.js
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program

console.clear()
import R from 'ramda'
import O from 'observable-air'

const coord = R.pickAll(['clientX', 'clientY'])
const matchSelector = R.curry((s, ev) => ev.target.matches(s))
const never$ = new O.Observable(i => undefined)

const rafThrottle = source$ => new O.Observable((ob, sh) => {
  var value = null
  var schedule = null

  function onFrame () {
    ob.next(value)
    schedule = null
  }

  function onValue (__value) {
    value = __value
    if(!schedule) {
      sh.requestAnimationFrame(onFrame)
    }
  }
  return source$.subscribe({
    next: onValue,
    error: err => ob.error(err),
    complete: () => ob.complete()
  })
})

const fromDOM = R.uncurryN(2, selector => R.pipe(
  O.fromDOM(document.body),
  O.filter(matchSelector(selector)),
  O.map(coord)
))

const transistor = (source$) => R.pipe(
  O.map(i => i ? source$ : never$),
  O.switchLatest
)
const move$ = fromDOM('.b', 'mousemove')
const down$ = fromDOM('.b', 'mousedown')
const up$ = fromDOM('.b', 'mouseup')
const button$ = O.merge([
  O.map(R.T, down$),
  O.map(R.F, up$)
])

const mouseMove = R.pipe(
  O.map(R.always(move$)),
  O.switchLatest,
  O.map(coord)
)

const drag = R.pipe(
  O.map(i => i ? move$ : never$),
  O.switchLatest
)

const block = document.querySelector('.block')

rafThrottle(drag(button$))
  .subscribe({next : x => {
    block.style.transform = `translateX(${x.clientX}px)`
  }})

## package.json
{
  "name": "rwc-observable-support",
  "dependencies": {
    "ramda": "0.22.1",
    "observable-air": "1.10.1"
  },
  "version": "0.0.0"
}

## transpiled.js
'use strict';

var _ramda = require('ramda');

var _ramda2 = _interopRequireDefault(_ramda);

var _observableAir = require('observable-air');

var _observableAir2 = _interopRequireDefault(_observableAir);

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

// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program

console.clear();


var coord = _ramda2.default.pickAll(['clientX', 'clientY']);
var matchSelector = _ramda2.default.curry(function (s, ev) {
  return ev.target.matches(s);
});
var never$ = new _observableAir2.default.Observable(function (i) {
  return undefined;
});

var rafThrottle = function rafThrottle(source$) {
  return new _observableAir2.default.Observable(function (ob, sh) {
    var value = null;
    var schedule = null;

    function onFrame() {
      ob.next(value);
      schedule = null;
    }

    function onValue(__value) {
      value = __value;
      if (!schedule) {
        sh.requestAnimationFrame(onFrame);
      }
    }
    return source$.subscribe({
      next: onValue,
      error: function error(err) {
        return ob.error(err);
      },
      complete: function complete() {
        return ob.complete();
      }
    });
  });
};

var fromDOM = _ramda2.default.uncurryN(2, function (selector) {
  return _ramda2.default.pipe(_observableAir2.default.fromDOM(document.body), _observableAir2.default.filter(matchSelector(selector)), _observableAir2.default.map(coord));
});

var transistor = function transistor(source$) {
  return _ramda2.default.pipe(_observableAir2.default.map(function (i) {
    return i ? source$ : never$;
  }), _observableAir2.default.switchLatest);
};
var move$ = fromDOM('.b', 'mousemove');
var down$ = fromDOM('.b', 'mousedown');
var up$ = fromDOM('.b', 'mouseup');
var button$ = _observableAir2.default.merge([_observableAir2.default.map(_ramda2.default.T, down$), _observableAir2.default.map(_ramda2.default.F, up$)]);

var mouseMove = _ramda2.default.pipe(_observableAir2.default.map(_ramda2.default.always(move$)), _observableAir2.default.switchLatest, _observableAir2.default.map(coord));

var drag = _ramda2.default.pipe(_observableAir2.default.map(function (i) {
  return i ? move$ : never$;
}), _observableAir2.default.switchLatest);

var block = document.querySelector('.block');

rafThrottle(drag(button$)).subscribe({ next: function next(x) {
    block.style.transform = 'translateX(' + x.clientX + 'px)';
  } });
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	<style>
	.container div {
	border: 1px solid #000;
	margin: 10px;
	padding: 10px;
	user-select: none;
	-webkit-user-select: none;
	cursor: default;
	}
	.block {
	height: 50px;
	width: 50px;
	background-color: #000;
	will-change: transform
	}
	</style>
	</head>
	<body>
	<!-- put markup and other contents here -->
	<div class="container">
	<div class="a">.a
	<div class="b">.b (dragme and view console)
	<div class="c">.c
	<div class="d">.d

	</div>
	</div>
	</div>
	</div>
	</div>
	<div class="block"></div>
	</body>
	</html>
	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program
	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program

	console.clear()
	import R from 'ramda'
	import O from 'observable-air'

	const coord = R.pickAll(['clientX', 'clientY'])
	const matchSelector = R.curry((s, ev) => ev.target.matches(s))
	const never$ = new O.Observable(i => undefined)

	const rafThrottle = source$ => new O.Observable((ob, sh) => {
	var value = null
	var schedule = null

	function onFrame () {
	ob.next(value)
	schedule = null
	}

	function onValue (__value) {
	value = __value
	if(!schedule) {
	sh.requestAnimationFrame(onFrame)
	}
	}
	return source$.subscribe({
	next: onValue,
	error: err => ob.error(err),
	complete: () => ob.complete()
	})
	})

	const fromDOM = R.uncurryN(2, selector => R.pipe(
	O.fromDOM(document.body),
	O.filter(matchSelector(selector)),
	O.map(coord)
	))

	const transistor = (source$) => R.pipe(
	O.map(i => i ? source$ : never$),
	O.switchLatest
	)
	const move$ = fromDOM('.b', 'mousemove')
	const down$ = fromDOM('.b', 'mousedown')
	const up$ = fromDOM('.b', 'mouseup')
	const button$ = O.merge([
	O.map(R.T, down$),
	O.map(R.F, up$)
	])

	const mouseMove = R.pipe(
	O.map(R.always(move$)),
	O.switchLatest,
	O.map(coord)
	)

	const drag = R.pipe(
	O.map(i => i ? move$ : never$),
	O.switchLatest
	)

	const block = document.querySelector('.block')

	rafThrottle(drag(button$))
	.subscribe({next : x => {
	block.style.transform = `translateX(${x.clientX}px)`
	}})
	{
	"name": "rwc-observable-support",
	"dependencies": {
	"ramda": "0.22.1",
	"observable-air": "1.10.1"
	},
	"version": "0.0.0"
	}
	'use strict';

	var _ramda = require('ramda');

	var _ramda2 = _interopRequireDefault(_ramda);

	var _observableAir = require('observable-air');

	var _observableAir2 = _interopRequireDefault(_observableAir);

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

	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program
	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program

	console.clear();


	var coord = _ramda2.default.pickAll(['clientX', 'clientY']);
	var matchSelector = _ramda2.default.curry(function (s, ev) {
	return ev.target.matches(s);
	});
	var never$ = new _observableAir2.default.Observable(function (i) {
	return undefined;
	});

	var rafThrottle = function rafThrottle(source$) {
	return new _observableAir2.default.Observable(function (ob, sh) {
	var value = null;
	var schedule = null;

	function onFrame() {
	ob.next(value);
	schedule = null;
	}

	function onValue(__value) {
	value = __value;
	if (!schedule) {
	sh.requestAnimationFrame(onFrame);
	}
	}
	return source$.subscribe({
	next: onValue,
	error: function error(err) {
	return ob.error(err);
	},
	complete: function complete() {
	return ob.complete();
	}
	});
	});
	};

	var fromDOM = _ramda2.default.uncurryN(2, function (selector) {
	return _ramda2.default.pipe(_observableAir2.default.fromDOM(document.body), _observableAir2.default.filter(matchSelector(selector)), _observableAir2.default.map(coord));
	});

	var transistor = function transistor(source$) {
	return _ramda2.default.pipe(_observableAir2.default.map(function (i) {
	return i ? source$ : never$;
	}), _observableAir2.default.switchLatest);
	};
	var move$ = fromDOM('.b', 'mousemove');
	var down$ = fromDOM('.b', 'mousedown');
	var up$ = fromDOM('.b', 'mouseup');
	var button$ = _observableAir2.default.merge([_observableAir2.default.map(_ramda2.default.T, down$), _observableAir2.default.map(_ramda2.default.F, up$)]);

	var mouseMove = _ramda2.default.pipe(_observableAir2.default.map(_ramda2.default.always(move$)), _observableAir2.default.switchLatest, _observableAir2.default.map(coord));

	var drag = _ramda2.default.pipe(_observableAir2.default.map(function (i) {
	return i ? move$ : never$;
	}), _observableAir2.default.switchLatest);

	var block = document.querySelector('.block');

	rafThrottle(drag(button$)).subscribe({ next: function next(x) {
	block.style.transform = 'translateX(' + x.clientX + 'px)';
	} });