3 * Dependency-based user interface in a web page.
5 * (c) 2013 Mark Wooding
8 /*----- Licensing notice --------------------------------------------------*
10 * This program is free software; you can redistribute it and/or
11 * modify it under the terms of the GNU General Public License as
12 * published by the Free Software Foundation; either version 2 of the
13 * License, or (at your option) any later version.
15 * This program is distributed in the hope that it will be useful,
16 * but WITHOUT ANY WARRANTY; without even the implied warranty of
17 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
18 * GNU Library General Public License for more details.
20 * You should have received a copy of the GNU General Public License
21 * along with this program; if not, see <https://www.gnu.org/licenses/>.
24 var DEP_UI
= {}; (function () {
26 /*----- Utility functions and classes -------------------------------------*/
29 /* Write the string MSG to the `trace' element, if there is one. */
32 if (e
!== null) e
.textContent
+= msg
;
36 function trap(what
, func
) {
40 debug('caught exception in ' + what
+ ': ' + e
);
47 /* Find and return the element with the given ID. */
48 return document
.getElementById(id
);
52 function add_elt_class(elt
, cls
) {
53 /* Add the class name CLS to element ELT's `class' attribute. */
55 if (!elt
.className
.match('\\b' + cls
+ '\\b'))
56 elt
.className
+= ' ' + cls
58 DEP_UI
.add_elt_class
= add_elt_class
;
60 function rm_elt_class(elt
, cls
) {
61 /* Remove the class name CLS from element ELT's `class' attribute. */
63 elt
.className
= elt
.className
.replace(
64 new RegExp ('\\s*\\b' + cls
+ '\\b\\s*'), ' ');
66 DEP_UI
.rm_elt_class
= rm_elt_class
;
68 /* A gadget which can arrange to perform an idempotent action (the FUNC
69 * argument) again `soon'.
77 /* Make sure the function is called again soon. If we've already been
78 * kicked, then put off the action for a bit more (in case things need
83 if (this.timer
!== null) clearTimeout(this.timer
);
84 this.timer
= setTimeout(function () { me
.func(); }, 50);
89 /*----- Conversion machinery ----------------------------------------------*/
91 /* An exception, thrown if a conversion function doesn't like what it
94 BadValue
= new DEP
.Tag('BadValue'); DEP
.BadValue
= BadValue
;
96 function convert_to_numeric(string
) {
97 /* Convert the argument STRING to a number. */
99 if (!string
.match('\\S')) throw BadValue
;
100 var n
= Number(string
);
101 if (n
!== n
) throw BadValue
;
104 DEP_UI
.convert_to_numeric
= convert_to_numeric
;
106 function convert_from_numeric(num
) {
107 /* Convert the argument number NUM to a string, in a useful way. */
108 return num
.toFixed(3);
110 DEP_UI
.convert_from_numeric
= convert_from_numeric
;
112 /*----- User interface functions ------------------------------------------*/
114 /* A list of input fields which might need periodic kicking. */
115 var KICK_INPUT_FIELDS
= [];
117 function input_widget(id
, dep
, kickfn
) {
118 /* Bind an input widget (with the given ID) to a DEP, calling KICKFN (with
119 * the widget element as its argument) to update DEP from the state of the
120 * widget. This is common machinery for `input_field' and `input_radio'.
125 // Name the dep after our id.
128 // Arrange to update the dep `shortly after' updates.
129 function kick() { kickfn(e
); }
130 var soon
= new Soon(kick
);
131 function kick_soon() { soon
.kick(); }
132 e
.addEventListener('input', kick_soon
, false);
134 // Set our field to the correct state when the page finishes loading.
135 KICK_INPUT_FIELDS
.push(kick
);
138 function input_field(id
, dep
, convert
) {
139 /* Bind an input field (with the given ID) to a DEP, converting the user's
140 * input with the CONVERT function.
143 input_widget(id
, dep
, function (e
) {
144 /* Update the dep from the element content. If the CONVERT function
145 * doesn't like the input then mark the dep as bad and highlight the
152 val
= convert(e
.value
);
154 rm_elt_class(e
, 'bad');
157 if (err
!== BadValue
) throw err
;
159 add_elt_class(e
, 'bad');
163 DEP_UI
.input_field
= input_field
;
165 function input_radio(id
, dep
) {
166 /* Bind a radio button (with the given ID) to a DEP. When the user frobs
167 * the button, set the dep to the element's `value' attribute.
170 input_widget(id
, dep
, function (e
) {
171 // Make sure we're actually chosen. We might get called regardless of
173 if (e
.checked
) dep
.set_value(e
.value
);
176 DEP_UI
.input_radio
= input_radio
;
178 function output_field(id
, dep
, convert
) {
179 /* Bind a DEP to an output element (given by ID), converting the dep's
180 * value using the CONVERT function.
186 /* Update the element, highlighting it if the dep is bad. */
188 rm_elt_class(e
, 'bad');
189 e
.value
= convert(dep
.value());
191 add_elt_class(e
, 'bad');
196 // Name the dep after our id.
199 // Keep track of the dep's value.
200 dep
.add_listener(kicked
);
203 DEP_UI
.output_field
= output_field
;
205 /*----- Periodic maintenance ----------------------------------------------*/
207 function kick_all() {
208 /* Kick all of the input fields we know about. Their `kick' functions are
209 * all on the list `KICK_INPUT_FIELDS'.
211 DEP
.dolist(KICK_INPUT_FIELDS
, function (func
) { func(); });
214 // And make sure we get everything started when the page is fully loaded.
215 window
.addEventListener('load', kick_all
, false);
217 /*----- That's all, folks -------------------------------------------------*/