49 lines
1.0 KiB
JavaScript
49 lines
1.0 KiB
JavaScript
|
class BindInOut {
|
||
|
|
constructor(bindIn, bindOut) {
|
||
|
|
this.in = bindIn;
|
||
|
|
this.out = bindOut;
|
||
|
|
|
||
|
|
this.eventWrapper = {};
|
||
|
|
this.eventType = /(INPUT|TEXTAREA)/.test(bindIn.tagName) ? 'keyup' : 'change';
|
||
|
|
}
|
||
|
|
|
||
|
|
addEvents() {
|
||
|
|
this.eventWrapper.updateOut = this.updateOut.bind(this);
|
||
|
|
|
||
|
|
this.in.addEventListener(this.eventType, this.eventWrapper.updateOut);
|
||
|
|
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
|
||
|
|
updateOut() {
|
||
|
|
this.out.textContent = this.in.value;
|
||
|
|
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
|
||
|
|
removeEvents() {
|
||
|
|
this.in.removeEventListener(this.eventType, this.eventWrapper.updateOut);
|
||
|
|
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
|
||
|
|
static initAll() {
|
||
|
|
const ins = document.querySelectorAll('*[data-bind-in]');
|
||
|
|
|
||
|
|
return [].map.call(ins, anIn => BindInOut.init(anIn));
|
||
|
|
}
|
||
|
|
|
||
|
|
static init(anIn, anOut) {
|
||
|
|
const out = anOut || document.querySelector(`*[data-bind-out="${anIn.dataset.bindIn}"]`);
|
||
|
|
const bindInOut = new BindInOut(anIn, out);
|
||
|
|
|
||
|
|
return bindInOut.addEvents().updateOut();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const global = window.gl || (window.gl = {});
|
||
|
|
|
||
|
|
global.BindInOut = BindInOut;
|
||
|
|
|
||
|
|
module.exports = BindInOut;
|