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 <http://www.gnu.org/licenses/>.
24 var DEP_UI = {}; (function () { with (DEP_UI) {
26 /*----- Utility functions and classes -------------------------------------*/
28 DEP_UI.debug = function(msg) {
29 /* Write the string MSG to the `trace' element, if there is one. */
32 if (e !== null) e.textContent += msg;
35 DEP_UI.trap = function(what, func) {
39 debug('caught exception in ' + what + ': ' + e);
44 DEP_UI.elt = function (id) {
45 /* Find and return the element with the given ID. */
46 return document.getElementById(id);
49 DEP_UI.add_elt_class = function (elt, cls) {
50 /* Add the class name CLS to element ELT's `class' attribute. */
52 if (!elt.className.match('\\b' + cls + '\\b'))
53 elt.className += ' ' + cls
56 DEP_UI.rm_elt_class = function (elt, cls) {
57 /* Remove the class name CLS from element ELT's `class' attribute. */
59 elt.className = elt.className.replace(
60 new RegExp ('\\s*\\b' + cls + '\\b\\s*'), ' ');
63 /* A gadget which can arrange to perform an idempotent action (the FUNC
64 * argument) again `soon'.
66 DEP_UI.Soon = function (func) {
72 /* Make sure the function is called again soon. If we've already been
73 * kicked, then put off the action for a bit more (in case things need
78 if (this.timer !== null) clearTimeout(this.timer);
79 this.timer = setTimeout(function () { me.func(); }, 50);
83 /*----- Conversion machinery ----------------------------------------------*/
85 /* An exception, thrown if a conversion function doesn't like what it
88 DEP_UI.BadValue = new DEP.Tag('BadValue');
90 DEP_UI.convert_to_numeric = function (string) {
91 /* Convert the argument STRING to a number. */
93 if (!string.match('\\S')) throw BadValue;
94 var n = Number(string);
95 if (n !== n) throw BadValue;
99 DEP_UI.convert_from_numeric = function (num) {
100 /* Convert the argument number NUM to a string, in a useful way. */
101 return num.toFixed(3);
104 /*----- User interface functions ------------------------------------------*/
106 /* A list of input fields which might need periodic kicking. */
107 var KICK_INPUT_FIELDS = [];
109 DEP_UI.input_field = function (id, dep, convert) {
110 /* Bind an input field (with the given ID) to a DEP, converting the user's
111 * input with the CONVERT function.
117 /* Update the dep from the element content. If the convert function
118 * doesn't like the input then mark the dep as bad and highlight the
125 val = convert(e.value);
127 rm_elt_class(e, 'bad');
130 if (err !== BadValue) throw err;
132 add_elt_class(e, 'bad');
136 // Name the dep after our id.
139 // Arrange to update the dep `shortly after' updates.
140 var soon = new Soon(kick);
141 function kick_soon () { soon.kick(); }
142 e.addEventListener('click', kick_soon, false);
143 e.addEventListener('blur', kick_soon, false);
144 e.addEventListener('keypress', kick_soon, false);
146 // Sadly, the collection of events above isn't comprehensive, because we
147 // don't actually get told about edits as a result of clipboard operations,
148 // or even (sometimes) deletes, so add our `kick' function to a list of
149 // such functions to be run periodically just in case.
150 KICK_INPUT_FIELDS.push(kick);
153 DEP_UI.input_radio = function (id, dep) {
154 /* Bind a radio button (with the given ID) to a DEP. When the user frobs
155 * the button, set the dep to the element's `value' attribute.
161 // Make sure we're actually chosen. We get called periodically
162 // regardless of user input.
163 if (e.checked) dep.set_value(e.value);
166 // Name the dep after our id.
169 // Arrange to update the dep `shortly after' updates.
170 var soon = new Soon(kick);
171 function kick_soon () { soon.kick(); }
172 e.addEventListener('click', kick_soon, false);
173 e.addEventListener('changed', kick_soon, false);
175 // The situation for radio buttons doesn't seem as bad as for text widgets,
176 // but let's be on the safe side.
177 KICK_INPUT_FIELDS.push(kick);
180 DEP_UI.output_field = function (id, dep, convert) {
181 /* Bind a DEP to an output element (given by ID), converting the dep's
182 * value using the CONVERT function.
188 /* Update the element, highlighting it if the dep is bad. */
190 rm_elt_class(e, 'bad');
191 e.value = convert(dep.value());
193 add_elt_class(e, 'bad');
198 // Name the dep after our id.
201 // Keep track of the dep's value.
202 dep.add_listener(kicked);
206 /*----- Periodic maintenance ----------------------------------------------*/
208 function kick_all() {
209 /* Kick all of the input fields we know about. Their `kick' functions are
210 * all on the list `KICK_INPUT_FIELDS'.
212 DEP.dolist(KICK_INPUT_FIELDS, function (func) { func(); });
215 // Update the input fields relatively frequently.
216 setInterval(kick_all, 500);
218 // And make sure we get everything started when the page is fully loaded.
219 window.addEventListener('load', kick_all, false);
221 /*----- That's all, folks -------------------------------------------------*/