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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
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
}
}
|
