Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | 20x 20x 20x 20x 3x 3x 3x 2x 2x 2x 2x 5x 15x 5x 5x 4x 4x | 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}"]`); if (!out) return null; const bindInOut = new BindInOut(anIn, out); return bindInOut.addEvents().updateOut(); } } export default BindInOut; |