Rx.JS Cycles Test

by Santiago J

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.lite.min.js"></script>
<h4>Number</h4>
<input id="number">
<h4>Text</h4>
<input id="text">

JavaScript

var NUMBERS =
		'zero one two three four five six seven eight nine ten'.split(' ');

var NUMBER_TO_TEXT = NUMBERS.reduce((obj, text, index) => {
	obj[index] = text;
  return obj;
}, {});

var TEXT_TO_NUMBER = NUMBERS.reduce((obj, text, index) => {
	obj[text] = String(index);
  return obj;
}, {});

function dispatchEvent(el, name) {
	var e = document.createEvent('HTMLEvents');
  e.initEvent(name, false, true);
  el.dispatchEvent(e);
}

// ------------------------------------------

var numIn = document.querySelector('#number');
var textIn = document.querySelector('#text');

Rx.Observable
	.fromEvent(numIn, 'input')
	.map(e => e.target.value)
	.map(number => NUMBER_TO_TEXT[number])
  .filter(val => val !== undefined)
	.forEach(value => {
    if (textIn.value !== value) {
      textIn.value = value;
      dispatchEvent(textIn, 'input');
    }
  });

Rx.Observable
  .fromEvent(textIn, 'input')
  .map(e => e.target.value)
	.map(text => TEXT_TO_NUMBER[text])
  .filter(val => val !== undefined)
  .forEach(value => {
    if (numIn.value !== value) {
      numIn.value = value;
      dispatchEvent(numIn, 'input');
    }
  });