From b31ea221673a8f49a383a4a119d6edaabd39642d Mon Sep 17 00:00:00 2001 From: Simon Tatham Date: Tue, 5 Sep 2017 20:09:56 +0100 Subject: [PATCH] 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. --- emcclib.js | 64 ++++++---------------------------------------------- emccpre.js | 66 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 73 insertions(+), 57 deletions(-) diff --git a/emcclib.js b/emcclib.js index 3f51df4..907dc19 100644 --- a/emcclib.js +++ b/emcclib.js @@ -574,38 +574,7 @@ mergeInto(LibraryManager.library, { * 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 @@ mergeInto(LibraryManager.library, { * 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 @@ mergeInto(LibraryManager.library, { * 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(); }, /* diff --git a/emccpre.js b/emccpre.js index d715858..efd54ae 100644 --- a/emccpre.js +++ b/emccpre.js @@ -129,6 +129,72 @@ function disable_menu_item(item, disabledFlag) { 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. -- 2.30.2