From 191fc7c69e5a4e654ef4270e52af17ed84130fce Mon Sep 17 00:00:00 2001 From: =?utf8?q?Rapha=C3=ABl=20Jakse?= Date: Sat, 3 Oct 2020 12:27:16 +0200 Subject: [PATCH] get rid of inline styles --- public/index.html | 20 ++++++------ public/trivabble.css | 13 +++++--- public/trivabble.js | 65 ++++++++++++++++++++------------------ server/trivabble-server.js | 1 + 4 files changed, 54 insertions(+), 45 deletions(-) diff --git a/public/index.html b/public/index.html index f7e910c..0d956d1 100644 --- a/public/index.html +++ b/public/index.html @@ -33,7 +33,7 @@

-

- +

-

+

@@ -79,22 +79,22 @@
- +

Tip!

-

Click on the bag to take one tile.

-

Click on someone's score to change it.

-

Who's turn? Click on the Turn button!

-

Click on (+) to increase someone's score.

-

Show a cell to everyone by double-clicking on it.

+ + + + +
- + diff --git a/public/trivabble.css b/public/trivabble.css index 3d89dd2..b350a44 100644 --- a/public/trivabble.css +++ b/public/trivabble.css @@ -1,3 +1,7 @@ + :root { + --flash-light-color: #ee6633; +} + #board { border-collapse:collapse; } @@ -226,15 +230,16 @@ button[disabled=disabled], button:disabled { } } -.laser-highlighting .tile { +.flash-light-highlighting .tile { transition:none; } -.laser-highlight { - background-color: #E3E; +.flash-light-highlight { + background-color: #ee6633; + background-color: var(--flash-light-color); } -.laser-highlight .tile:not(.tile-highlight) { +.flash-light-highlight .tile:not(.tile-highlight) { background-color: inherit; } diff --git a/public/trivabble.js b/public/trivabble.js index 33e497d..1441202 100644 --- a/public/trivabble.js +++ b/public/trivabble.js @@ -696,7 +696,7 @@ } function touchStartTilePreventDefault(e) { - laserTouch(e); + flashLightTouch(e); return preventDefault(e); } @@ -1827,7 +1827,7 @@ } } - function triggerLaser(cell) { + function triggerFlashLight(cell) { if (!cell) { return; } @@ -1858,39 +1858,39 @@ return null; } - function laserDblClick(e) { - triggerLaser(getCellFromEvent(e)); + function flashLightDblClick(e) { + triggerFlashLight(getCellFromEvent(e)); } - function laserTouch(e) { + function flashLightTouch(e) { const cell = getCellFromEvent(e); if (!cell) { return; } - if ((laserTouch.last !== cell) || (Date.now() - laserTouch.date > getSetting("DOUBLE_TAP_DURATION"))) { - laserTouch.last = cell; - laserTouch.date = Date.now(); + if ((flashLightTouch.last !== cell) || (Date.now() - flashLightTouch.date > getSetting("DOUBLE_TAP_DURATION"))) { + flashLightTouch.last = cell; + flashLightTouch.date = Date.now(); return; } - triggerLaser(cell); + triggerFlashLight(cell); } function localHighlightCell(id) { const placeholder = boardCells[id].getElementsByClassName("tile-placeholder")[0]; - placeholder.classList.add("laser-highlighting"); - placeholder.classList.add("laser-highlight"); + placeholder.classList.add("flash-light-highlighting"); + placeholder.classList.add("flash-light-highlight"); const sixthFlashLightDuration = getSetting("FLASH_LIGHT_DURATION") / 6; function on() { - placeholder.classList.add("laser-highlight"); + placeholder.classList.add("flash-light-highlight"); } function off() { - placeholder.classList.remove("laser-highlight"); + placeholder.classList.remove("flash-light-highlight"); } setTimeout(off, sixthFlashLightDuration); @@ -1901,7 +1901,7 @@ setTimeout( function () { - placeholder.classList.remove("laser-highlighting"); + placeholder.classList.remove("flash-light-highlighting"); }, sixthFlashLightDuration * 6 ); @@ -1997,18 +1997,18 @@ function initSpellChecker() { if (getSetting("ENABLE_SPELL_CHECKER")) { - document.getElementById("enable-spell-checker-outer").style.display = ""; + document.getElementById("enable-spell-checker-outer").hidden = false; } document.getElementById("enable-spell-checker").onclick = spellCheckerSettingChecked; if (!getSetting("ENABLE_SPELL_CHECKER") || !getSetting("spellCheckerEnabled")) { - document.getElementById("check-spelling").style.display = "none"; + document.getElementById("check-spelling").hidden = true; document.getElementById("enable-spell-checker").checked = false; - document.getElementById("info-spell-checking").style.display = "none"; + document.getElementById("info-spell-checking").hidden = true; } else { - document.getElementById("check-spelling").style.display = ""; - document.getElementById("info-spell-checking").style.display = ""; + document.getElementById("check-spelling").hidden = false; + document.getElementById("info-spell-checking").hidden = false; document.getElementById("enable-spell-checker").checked = true; } } @@ -2030,9 +2030,9 @@ return values.length - 1; } - function initLaserPointer() { - document.body.addEventListener("dblclick", laserDblClick); - document.body.addEventListener("touchstart", laserTouch); + function initFlashLight() { + document.body.addEventListener("dblclick", flashLightDblClick); + document.body.addEventListener("touchstart", flashLightTouch); const doubleTapDuration = document.getElementById("double-tap-duration"); if (doubleTapDuration) { @@ -2058,15 +2058,18 @@ }; } + if (!document.documentElement.style.setProperty && document.getElementById("flash-light-color-p")) { + document.getElementById("flash-light-color-p").hidden = true; + return; + } + const flashLightColor = document.getElementById("flash-light-color"); if (flashLightColor) { - console.log(getSetting("FLASH_LIGHT_COLOR")); flashLightColor.value = getSetting("FLASH_LIGHT_COLOR"); flashLightColor.onchange = function () { - setSetting("FLASH_LIGHT_COLOR", document.getElementById("flash-light-color").value); - const style = document.createElement("style"); - style.textContent = ".laser-highlight {background-color: " + getSetting("FLASH_LIGHT_COLOR") + ";}"; - document.body.appendChild(style); + const color = document.getElementById("flash-light-color").value; + setSetting("FLASH_LIGHT_COLOR", color); + document.documentElement.style.setProperty("--flash-light-color", color); }; flashLightColor.onchange(); } @@ -2081,13 +2084,13 @@ if (helpMessages) { const listOfMessages = helpMessages.getElementsByTagName("p"); if ((nextHelpMessage.index >= 0) && (nextHelpMessage.index < listOfMessages.length)) { - listOfMessages[nextHelpMessage.index].style.display = "none"; + listOfMessages[nextHelpMessage.index].hidden = true; } nextHelpMessage.index++; if (nextHelpMessage.index === listOfMessages.length) { nextHelpMessage.index = 0; } - listOfMessages[nextHelpMessage.index].style.display = ""; + listOfMessages[nextHelpMessage.index].hidden = false; } } @@ -2127,7 +2130,7 @@ if (!boardLangSelect) { const boardLangSelection = document.getElementById("board-lang-selection"); boardLangSelect = boardLangSelection.querySelector("select"); - boardLangSelection.style.display = ""; + boardLangSelection.hidden = false; } boardLangSelect.textContent = ""; @@ -2313,7 +2316,7 @@ initGame(); initSound(); initSpellChecker(); - initLaserPointer(); + initFlashLight(); nextHelpMessage(); }; diff --git a/server/trivabble-server.js b/server/trivabble-server.js index 7421b25..890bb85 100644 --- a/server/trivabble-server.js +++ b/server/trivabble-server.js @@ -998,6 +998,7 @@ function handleRequest(request, response) { } response.setHeader("Content-Type", mime); + response.setHeader("Content-Security-Policy", "default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self'; connect-src 'self'; media-src 'self'"); response.end(contents); }); } else { -- 2.30.2