Bind Library Experiment

by wio_dude

HTML

<input id="x" type="text" value="3"/>
<input id="y" type="text" value="4"/>
<br />
<input id="r" type="text" value="5"/>
<input id="a" type="text" value="5"/>

JavaScript

const $el = {};
$el.x = document.getElementById('x');
$el.y = document.getElementById('y');
$el.r = document.getElementById('r');
$el.a = document.getElementById('a');

function createDynamicValue(v) {
	return {
  	_value: v,
    _listeners: [],
    _locked: false,
    _update() {
    	const v = this.get();
      this._locked = true;
      for (const listener of this._listeners) {
        listener(v);
      }
      this._locked = false;
    },
    get() {
    	return this._value;
    },
    set(v) {
    	if (!this._locked) {
        this._value = v;
        this._update();
      }
    },
    onUpdate(listener) {
    	this._listeners.push(listener);
    },
    off(listner) {
    	this._listeners = this._listeners.filter((x) => x !== listner);
    },
  };
}

function createInputValue(el) {
	const self = {
  	_el: el,
    _listeners: [],
    _locked: false,
    _update() {
    	const v = this.get();
      this._locked = true;
      for (const listener of this._listeners) {
        listener(v);
      }
      this._locked = false;
    },
    get() {
    	return this._el.value;
    },
    set(v) {
    	if (!this._locked) {
        this._el.value = v;
        this._update();
      }
    },
    onUpdate(listener) {
    	this._listeners.push(listener);
    },
  };
  el.addEventListener('input', (evt) => self._update());
  return self;
}

function createArrayValue(...values) {
	const self = {
  	_values: values,
    _listeners: [],
    _locked: false,
    _updateLocked: false,
    _update() {
    	if (!this._updateLocked) {
        const v = this.get();
        this._locked = true;
        for (const listener of this._listeners) {
          listener(v);
        }
        this._locked = false;
      }
    },
    get() {
    	return this._values.map(x => x.get());
    },
    set(v) {
    	if (!this._locked) {
      	this._updateLocked = true;
        for (const [i, value] of v.entries()) {
          this._values[i].set(value);
      	}
        this._updateLocked = false;
   ...