From c90d64f2439cf4fc5ac07f0ace27100aad2b69be Mon Sep 17 00:00:00 2001 From: Ben Harris Date: Mon, 17 Oct 2022 22:04:16 +0100 Subject: [PATCH] js: Move most style settings from JavaScript to CSS Some elements (generally those created by JavaScript) had their style parameters set directly by JavaScript. Putting styles in CSS generally makes them easier to understand (and fiddle with), so I've done that. The only styles left in JavaScript are those that are calculated by JavaScript (like the status-bar size) and the random-seed permalink visibility because I wasn't quite sure how to handle it. --- emcclib.js | 19 +++++------------ emccpre.js | 24 ++++------------------ html/jspage.pl | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 64 insertions(+), 34 deletions(-) diff --git a/emcclib.js b/emcclib.js index c81c576..00f718e 100644 --- a/emcclib.js +++ b/emcclib.js @@ -72,9 +72,8 @@ mergeInto(LibraryManager.library, { var item = document.createElement("li"); item.setAttribute("data-index", value); var tick = document.createElement("span"); + tick.className = "tick"; tick.appendChild(document.createTextNode("\u2713")); - tick.style.color = "transparent"; - tick.style.paddingRight = "0.5em"; item.appendChild(tick); item.appendChild(document.createTextNode(name)); gametypesubmenus[menuid].appendChild(item); @@ -103,8 +102,7 @@ mergeInto(LibraryManager.library, { // nicely with their neighbours. var tick = document.createElement("span"); tick.appendChild(document.createTextNode("\u2713")); - tick.style.color = "transparent"; - tick.style.paddingRight = "0.5em"; + tick.className = "tick"; item.appendChild(tick); item.appendChild(document.createTextNode(name)); var submenu = document.createElement("ul"); @@ -138,9 +136,9 @@ mergeInto(LibraryManager.library, { var item = gametypeitems[i]; var tick = item.firstChild; if (item.getAttribute("data-index") == n) { - tick.style.color = "inherit"; + tick.classList.add("selected"); } else { - tick.style.color = "transparent"; + tick.classList.remove("selected"); } } }, @@ -522,16 +520,9 @@ mergeInto(LibraryManager.library, { js_canvas_make_statusbar: function() { var statusholder = document.getElementById("statusbarholder"); statusbar = document.createElement("div"); - statusbar.style.overflow = "hidden"; + statusbar.id = "statusbar"; statusbar.style.width = (onscreen_canvas.width - 4) + "px"; statusholder.style.width = onscreen_canvas.width + "px"; - statusbar.style.height = "1.2em"; - statusbar.style.textAlign = "left"; - statusbar.style.background = "#d8d8d8"; - statusbar.style.borderLeft = '2px solid #c8c8c8'; - statusbar.style.borderTop = '2px solid #c8c8c8'; - statusbar.style.borderRight = '2px solid #e8e8e8'; - statusbar.style.borderBottom = '2px solid #e8e8e8'; statusbar.appendChild(document.createTextNode(" ")); statusholder.appendChild(statusbar); }, diff --git a/emccpre.js b/emccpre.js index caa3250..961999b 100644 --- a/emccpre.js +++ b/emccpre.js @@ -179,29 +179,17 @@ 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; + dlg_dimmer.id = "dlgdimmer"; // Now create a form which sits on top of that in turn. dlg_form = document.createElement("form"); + dlg_form.id = "dlgform"; 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.className = "title"; title.appendChild(document.createTextNode(titletext)); dlg_form.appendChild(title); @@ -471,11 +459,7 @@ function initPuzzle() { } resizable_div = document.getElementById("resizable"); resizable_div.appendChild(resize_handle); - resize_handle.style.position = 'absolute'; - resize_handle.style.zIndex = 98; - resize_handle.style.bottom = "0"; - resize_handle.style.right = "0"; - resize_handle.style.cursor = "se-resize"; + resize_handle.id = "resizehandle"; resize_handle.title = "Drag to resize the puzzle. Right-click to restore the default size."; var resize_xbase = null, resize_ybase = null, restore_pending = false; var resize_xoffset = null, resize_yoffset = null; diff --git a/html/jspage.pl b/html/jspage.pl index 574f255..3a241e4 100755 --- a/html/jspage.pl +++ b/html/jspage.pl @@ -191,6 +191,61 @@ EOF display: flex; } +#gamemenu .tick { + /* The tick next to a menu item, or its unselected equivalent. */ + padding-right: 0.5em; + color: transparent; +} + +#gamemenu .tick.selected { + /* Tick for a selected menu entry. */ + color: inherit; +} + +#statusbar { + overflow: hidden; + height: 1.2em; + text-align: left; + background: #d8d8d8; + border-left: 2px solid #c8c8c8; + border-top: 2px solid #c8c8c8; + border-right: 2px solid #e8e8e8; + border-bottom: 2px solid #e8e8e8; +} + +#dlgdimmer { + width: 100%; + height: 100%; + background: #000000; + position: fixed; + opacity: 0.3; + left: 0; + top: 0; + z-index: 99; +} + +#dlgform { + opacity: 1; + background: #ffffff; + color: #000000; + position: absolute; + border: 2px solid black; + padding: 20px; + z-index: 100; +} + +#dlgform .title { + margin-top: 0px; +} + +#resizehandle { + position: absolute; + z-index: 98; + bottom: 0; + right: 0; + cursor: se-resize; +} + #apology { padding: 0 1em 0 1em; margin: 1em;