diff options
-rw-r--r-- | docs/dynmetrics/index.html | 12 | ||||
-rw-r--r-- | docs/res/bindings.js | 37 |
2 files changed, 37 insertions, 12 deletions
diff --git a/docs/dynmetrics/index.html b/docs/dynmetrics/index.html index dfcad2204..ba60cdce6 100644 --- a/docs/dynmetrics/index.html +++ b/docs/dynmetrics/index.html @@ -42,10 +42,13 @@ endfor <const>e</const><sup>(<const>c</const> × fontSize)</sup> </formula> <formula> - leading = <const>l</const> × fontSize + leading = <num>1.4</num> × fontSize </formula> - <formula title="Base of natural logarithm"> - <const>e</const> ≈ <num>2.718</num> + <formula> + <const title="Constant a">a</const> = <num data-binding="var-a">-0.016</num> + <const title="Constant b">b</const> = <num data-binding="var-b">0.21</num> + <const title="Constant c">c</const> = <num data-binding="var-c">-0.18</num> + <const title="Base of natural logarithm">e</const> ≈ <num>2.718</num> </formula> </p> <p class="small-window"> @@ -473,8 +476,7 @@ bindings.configure('style', null, null, function (style) { }) -bindings.bindAllInputs('.control input') -bindings.bindAllInputs('.control select') +bindings.bindAllInputs('[data-binding]') // double-click base tracking to reset $('input[type="range"][data-binding="base-tracking"]').addEventListener( diff --git a/docs/res/bindings.js b/docs/res/bindings.js index eb51b87d5..901b4ac37 100644 --- a/docs/res/bindings.js +++ b/docs/res/bindings.js @@ -6,6 +6,7 @@ function Binding(name){ this.name = name this.value = undefined this.inputs = [] + this.outputs = [] this.listeners = [] this.parser = undefined this.formatter = passThrough @@ -30,6 +31,13 @@ Binding.prototype.addInput = function(el) { el.addEventListener('input', _onInput, {passive:true}) } +Binding.prototype.addOutput = function(el) { + this.outputs.push(el) + if (this.value !== undefined) { + el.innerText = this.formatter(this.value) + } +} + // listener signature: // function(nextval string, prevval string, b Binding)void @@ -40,7 +48,6 @@ Binding.prototype.addListener = function(listener) { Binding.prototype.setValue = function(nextval, origin) { - // console.log('Binding.setValue nextval:', nextval, {origin}) var prevval = this.value if (this.parser) { nextval = this.parser(nextval, prevval) @@ -50,11 +57,15 @@ Binding.prototype.setValue = function(nextval, origin) { } var binding = this this.value = nextval + var value = binding.formatter(nextval) this.inputs.forEach(function(input) { if (input.el !== origin) { - input.el.value = binding.formatter(nextval) + input.el.value = value } }) + this.outputs.forEach(function(el) { + el.innerText = value + }) this.listeners.forEach(function(listener) { listener(nextval, prevval, this) }) @@ -75,23 +86,35 @@ Bindings.prototype.getBinding = function(name, input) { } Bindings.prototype.bindInput = function(name, input) { - // console.log('bindInput', name, input) var binding = this.getBinding(name) binding.addInput(input) } +Bindings.prototype.bindOutput = function(name, el) { + var binding = this.getBinding(name) + binding.addOutput(el) +} + Bindings.prototype.bindAllInputs = function(queryOrInputElementList) { var bindings = this - var inputs = ( + var elements = ( typeof queryOrInputElementList == 'string' ? $$(queryOrInputElementList) : queryOrInputElementList ) - inputs.forEach(function(input) { - var bindingName = input.dataset.binding + elements.forEach(function(el) { + var bindingName = el.dataset.binding if (bindingName) { - bindings.bindInput(bindingName, input) + if ( + el.tagName == 'INPUT' || + el.tagName == 'TEXTAREA' || + el.tagName == 'SELECT' + ) { + bindings.bindInput(bindingName, el) + } else { + bindings.bindOutput(bindingName, el) + } } }) } |