Add an Ui module to provide operations on «widgets» — so far only the forms that can be enabled/disabled according to the state of the webSocket connection

www/index.html

@@ -10,6 +10,7 @@
     <script src="screen.js"></script>
     <script src="save.js"></script>
     <script src="messaging.js"></script>
+    <script src="ui.js"></script>
     <script src="session.js"></script>
     <script src="room.js"></script>
     <script src="statusHandler.js"></script>

www/main.js

@@ -7,6 +7,7 @@ window.addEventListener('load', function() {
   var save = Save();
   var screen = Screen({dom: dom, i18n: i18n});
   var messaging = Messaging({screen: screen});
+  var ui = Ui({messaging: messaging});
   var session = Session({messaging: messaging, save: save});
   var room = Room({dom: dom, messaging: messaging, session: session, fun: fun});
   var statusHandler = StatusHandler();

www/ui.js

@@ -0,0 +1,38 @@
+function Ui(modules) {
+	var connectedForms = {};
+
+	modules.messaging.addEventListener('open', refreshForms);
+	modules.messaging.addEventListener('close', refreshForms);
+
+	return {
+		connectedForm: connectedForm,
+		enableForm: enableForm
+	};
+
+	function connectedForm(formId) {
+		var root = document.getElementById(formId);
+		connectedForms[formId] = {
+			root: root,
+			submits: root.querySelectorAll('[type=submit]'),
+			enabled: false
+		};
+		return root;
+	}
+
+	function enableForm(formId, enabled) {
+		connectedForms[formId].enabled = enabled || undefined == enabled;
+		refreshForm(connectedForms[formId]);
+	}
+
+	function refreshForms() {
+		for(var key in connectedForms) {
+			refreshForm(connectedForms[key]);
+		}
+	}
+
+	function refreshForm(form) {
+		form.submits.forEach(function(button) {
+			button.disabled = !(modules.messaging.isOn() && form.enabled);
+		});
+	}
+}