ref: b31ea221673a8f49a383a4a119d6edaabd39642d
parent: 5e53ec5e36de0485467cb9553b8fa0bb580dc403
author: Simon Tatham <anakin@pobox.com>
date: Tue Sep 5 16:09:56 EDT 2017
Factor some HTML dialog functions out of emcclib. I'm about to want to call these from Javascript as well as from Emscripten-compiled C, so I need versions of them that aren't wrapped up in the Emscripten library object and also don't expect half their parameters to be Emscripten-verse char pointers requiring calls to Pointer_stringify. The easiest way to achieve all of that is to turn the Emscripten- ready versions of those functions in emcclib.js into tiny wrappers around the JS versions, which do the pointer stringification and a couple of other details like directing callbacks to the right C functions.
--- a/emcclib.js
+++ b/emcclib.js
@@ -574,38 +574,7 @@
* overlay on top of the rest of the puzzle web page.
*/
js_dialog_init: function(titletext) {- // Create an overlay on the page which darkens everything
- // beneath it.
- dlg_dimmer = document.createElement("div");- dlg_dimmer.style.width = "100%";
- dlg_dimmer.style.height = "100%";
- dlg_dimmer.style.background = '#000000';
- dlg_dimmer.style.position = 'fixed';
- dlg_dimmer.style.opacity = 0.3;
- dlg_dimmer.style.top = dlg_dimmer.style.left = 0;
- dlg_dimmer.style["z-index"] = 99;
-
- // Now create a form which sits on top of that in turn.
- dlg_form = document.createElement("form");- dlg_form.style.width = (window.innerWidth * 2 / 3) + "px";
- dlg_form.style.opacity = 1;
- dlg_form.style.background = '#ffffff';
- dlg_form.style.color = '#000000';
- dlg_form.style.position = 'absolute';
- dlg_form.style.border = "2px solid black";
- dlg_form.style.padding = "20px";
- dlg_form.style.top = (window.innerHeight / 10) + "px";
- dlg_form.style.left = (window.innerWidth / 6) + "px";
- dlg_form.style["z-index"] = 100;
-
- var title = document.createElement("p");- title.style.marginTop = "0px";
- title.appendChild(document.createTextNode
- (Pointer_stringify(titletext)));
- dlg_form.appendChild(title);
-
- dlg_return_funcs = [];
- dlg_next_id = 0;
+ dialog_init(Pointer_stringify(titletext));
},
/*
@@ -700,29 +669,13 @@
* everything else on the page.
*/
js_dialog_launch: function() {- // Put in the OK and Cancel buttons at the bottom.
- var button;
-
- button = document.createElement("input");- button.type = "button";
- button.value = "OK";
- button.onclick = function(event) {+ dialog_launch(function(event) {for (var i in dlg_return_funcs)
dlg_return_funcs[i]();
- command(3);
- }
- dlg_form.appendChild(button);
-
- button = document.createElement("input");- button.type = "button";
- button.value = "Cancel";
- button.onclick = function(event) {- command(4);
- }
- dlg_form.appendChild(button);
-
- document.body.appendChild(dlg_dimmer);
- document.body.appendChild(dlg_form);
+ command(3); // OK
+ }, function(event) {+ command(4); // Cancel
+ });
},
/*
@@ -732,10 +685,7 @@
* associated with it.
*/
js_dialog_cleanup: function() {- document.body.removeChild(dlg_dimmer);
- document.body.removeChild(dlg_form);
- dlg_dimmer = dlg_form = null;
- onscreen_canvas.focus();
+ dialog_cleanup();
},
/*
--- a/emccpre.js
+++ b/emccpre.js
@@ -129,6 +129,72 @@
item.className = "";
}
+// Dialog-box functions called from both C and JS.
+function dialog_init(titletext) {+ // Create an overlay on the page which darkens everything
+ // beneath it.
+ dlg_dimmer = document.createElement("div");+ dlg_dimmer.style.width = "100%";
+ dlg_dimmer.style.height = "100%";
+ dlg_dimmer.style.background = '#000000';
+ dlg_dimmer.style.position = 'fixed';
+ dlg_dimmer.style.opacity = 0.3;
+ dlg_dimmer.style.top = dlg_dimmer.style.left = 0;
+ dlg_dimmer.style["z-index"] = 99;
+
+ // Now create a form which sits on top of that in turn.
+ dlg_form = document.createElement("form");+ dlg_form.style.width = (window.innerWidth * 2 / 3) + "px";
+ dlg_form.style.opacity = 1;
+ dlg_form.style.background = '#ffffff';
+ dlg_form.style.color = '#000000';
+ dlg_form.style.position = 'absolute';
+ dlg_form.style.border = "2px solid black";
+ dlg_form.style.padding = "20px";
+ dlg_form.style.top = (window.innerHeight / 10) + "px";
+ dlg_form.style.left = (window.innerWidth / 6) + "px";
+ dlg_form.style["z-index"] = 100;
+
+ var title = document.createElement("p");+ title.style.marginTop = "0px";
+ title.appendChild(document.createTextNode(titletext));
+ dlg_form.appendChild(title);
+
+ dlg_return_funcs = [];
+ dlg_next_id = 0;
+}
+
+function dialog_launch(ok_function, cancel_function) {+ // Put in the OK and Cancel buttons at the bottom.
+ var button;
+
+ if (ok_function) {+ button = document.createElement("input");+ button.type = "button";
+ button.value = "OK";
+ button.onclick = ok_function;
+ dlg_form.appendChild(button);
+ }
+
+ if (cancel_function) {+ button = document.createElement("input");+ button.type = "button";
+ button.value = "Cancel";
+ button.onclick = cancel_function;
+ dlg_form.appendChild(button);
+ }
+
+ document.body.appendChild(dlg_dimmer);
+ document.body.appendChild(dlg_form);
+}
+
+function dialog_cleanup() {+ document.body.removeChild(dlg_dimmer);
+ document.body.removeChild(dlg_form);
+ dlg_dimmer = dlg_form = null;
+ onscreen_canvas.focus();
+}
+
// Init function called from body.onload.
function initPuzzle() {// Construct the off-screen canvas used for double buffering.