diff options
Diffstat (limited to 'docs/samples/bindings.js')
-rw-r--r-- | docs/samples/bindings.js | 159 |
1 files changed, 159 insertions, 0 deletions
diff --git a/docs/samples/bindings.js b/docs/samples/bindings.js new file mode 100644 index 000000000..cac29e417 --- /dev/null +++ b/docs/samples/bindings.js @@ -0,0 +1,159 @@ +// requires index.js + +function Binding(name){ + this.name = name + this.value = undefined + this.inputs = [] + this.listeners = [] + this.formatter = undefined +} + + +Binding.prototype.addInput = function(el) { + var binding = this + var _onInput = function(ev) { + binding.setValue(el.value, el) + } + var input = { + el: el, + _onInput: _onInput, + } + this.inputs.push(input) + if (this.value === undefined) { + this.value = el.value + } else { + input.el.value = this.value + } + el.addEventListener('input', _onInput, {passive:true}) +} + + +// listener signature: +// function(nextval string, prevval string, b Binding)void +// +Binding.prototype.addListener = function(listener) { + this.listeners.push(listener) +} + + +Binding.prototype.setValue = function(nextval, origin) { + // console.log('Binding.setValue nextval:', nextval, {origin}) + var prevval = this.value + if (this.formatter) { + nextval = this.formatter(nextval, prevval) + } + if (this.value === nextval) { + return + } + var binding = this + this.value = nextval + this.inputs.forEach(function(input) { + if (input.el !== origin) { + input.el.value = nextval + } + }) + this.listeners.forEach(function(listener) { + listener(nextval, prevval, this) + }) +} + + +function Bindings() { + this.bindings = {} +} + +Bindings.prototype.getBinding = function(name, input) { + var binding = this.bindings[name] + if (!binding) { + binding = new Binding(name) + this.bindings[name] = binding + } + return binding +} + +Bindings.prototype.bindInput = function(name, input) { + // console.log('bindInput', name, input) + var binding = this.getBinding(name) + binding.addInput(input) +} + +Bindings.prototype.bindAllInputs = function(queryOrInputElementList) { + var bindings = this + + var inputs = ( + typeof queryOrInputElementList == 'string' ? $$(queryOrInputElementList) : + queryOrInputElementList + ) + + inputs.forEach(function(input) { + var bindingName = input.dataset.binding + if (bindingName) { + bindings.bindInput(bindingName, input) + } + }) +} + +// listener signature: +// function(nextval string, prevval string, b Binding)void +// +Bindings.prototype.addListener = function(name, listener) { + var binding = this.getBinding(name) + binding.addListener(listener) +} + +Bindings.prototype.setValue = function(name, value) { + var binding = this.getBinding(name) + binding.setValue(value) +} + + +Bindings.prototype.value = function(name, defaultValue) { + var binding = this.bindings[name] + return binding && binding.value !== undefined ? binding.value : defaultValue +} + + +function fmt_float(nextval, prevval) { + var n = parseFloat(nextval) + return isNaN(n) ? 0 : n +} + +function fmt_int(nextval, prevval) { + var n = parseInt(nextval) + return isNaN(n) ? 0 : n +} + + +// configure is convenience function for setting value, adding a +// listener and associating a formatter with a binding. +// If a listener and a value is provided, the value is set and the listener +// is immediately invoked. +// +Bindings.prototype.configure = function(name, value, formatter, listener) { + var binding = this.getBinding(name) + if (listener) { + binding.addListener(listener) + } + if (value !== undefined && value !== null) { + binding.setValue(value) + } + if (formatter) { + if (typeof formatter == 'string') { + switch (formatter) { + case 'number': + case 'float': + formatter = fmt_float; break; + + case 'int': + case 'integer': + formatter = fmt_int; break; + + default: + throw new Error('unknown formatter "' + formatter + '"') + } + } else if (typeof formatter != 'function') { + throw new Error('formatter should be a string or function') + } + binding.formatter = formatter + } +} |