From 06d7d0b117640ef549bc5c4ffe2da75cf9a6c06e Mon Sep 17 00:00:00 2001 From: =?utf8?q?Rapha=C3=ABl=20Jakse?= Date: Mon, 5 Oct 2020 23:47:06 +0200 Subject: [PATCH] Fix support for Safari 8+ --- public/index.html | 4 +++- public/trivabble.css | 24 ++++++++++++++++++++++-- public/trivabble.js | 38 ++++++++++++++++++++++---------------- server/trivabble-server.js | 20 +++++++++++++++++++- 4 files changed, 66 insertions(+), 20 deletions(-) diff --git a/public/index.html b/public/index.html index cfe7f75..e5924b2 100644 --- a/public/index.html +++ b/public/index.html @@ -99,7 +99,9 @@
- +
+ +

Number of tiles in the bag:
102

diff --git a/public/trivabble.css b/public/trivabble.css index 960a2ec..711af96 100644 --- a/public/trivabble.css +++ b/public/trivabble.css @@ -79,6 +79,9 @@ html, #board, [draggable], .tile { width: 100%; top: 0px; left: 0px; + display: -webkit-flex; + -webkit-justify-content: center; + -webkit-flex-direction: column; display: flex; justify-content: center; flex-direction: column; @@ -346,7 +349,7 @@ td.blink { } #panel { - -webkit-justify-content:center; + /* -webkit-justify-content:center; does not look good */ justify-content:space-between; text-align:center; } @@ -424,6 +427,7 @@ td.blink { } #participants .score-cell button { + min-height:4ex; /* for old webkit */ min-height: auto; font-size:x-small; padding:0 1ex; @@ -526,6 +530,7 @@ td.blink { background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; + -webkit-transition: visibility 0s linear 0.25s, opacity 0.25s 0s; transform: scale(1.1); transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s; z-index: 1; @@ -580,6 +585,7 @@ td.blink { .show-modal { opacity: 1; visibility: visible; + -webkit-transition: visibility 0s linear 0s, opacity 0.25s 0s; transform: scale(1.0); transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s; } @@ -612,10 +618,15 @@ td.blink { font-size:small; border-radius:3px; border:none; - margin:0 0 0 auto; + margin:0; min-height: 2em; } +#panel #btn-settings-wrapper { + text-align:right; +} + + #btn-settings:before { content: "⚙️ " } @@ -639,6 +650,10 @@ td.blink { #help-box { margin-left:1ex; margin-top:1ex; + display:-webkit-flex; + -webkit-flex-direction:column; + -webkit-justify-content:center; + -webkit-align-items:center; align-items:center; display:flex; flex-direction:column; @@ -646,11 +661,14 @@ td.blink { } #help-box-inner { + display:-webkit-flex; + -webkit-flex-direction:row; display:flex; flex-direction:row; min-height:2em; border-top:1px solid gray; border-bottom:1px solid gray; + -webkit-align-items:center; align-items:center; } @@ -705,6 +723,8 @@ button#next-help-msg:hover { } #panel-buttons { + display:-webkit-flex; + -webkit-flex-direction: column; display:flex; flex-direction:column; } diff --git a/public/trivabble.js b/public/trivabble.js index 4441ee5..ccfd03d 100644 --- a/public/trivabble.js +++ b/public/trivabble.js @@ -864,7 +864,7 @@ const content = document.createElement("div"); content.appendChild(document.createElement("span")); content.lastChild.className = "info"; - content.lastChild.textContent = info; + content.lastChild.textContent = info || ""; chatMessage("", content); return content; } @@ -1829,6 +1829,11 @@ } } + function getRowIndex(tr) { + // tr.rowIndex is -1 on WebKit-based browsers in Debian Jessie, hence this function + return [].indexOf.call(tr.parentNode.rows, tr); + } + function triggerFlashLight(cell) { if (!cell) { return; @@ -1836,7 +1841,7 @@ const letters = "ABCDEFGHIJKLMNO"; const col = cell.cellIndex - 1; - const row = cell.parentNode.rowIndex - 1; + const row = getRowIndex(cell.parentNode) - 1; sendCmds([{ cmd: "msg", @@ -1852,7 +1857,7 @@ const tilePlaceholder = getParentWithClass(e.target, "tile-placeholder"); if (tilePlaceholder) { const cell = tilePlaceholder.parentNode; - if (cell.cellIndex && cell.parentNode.rowIndex) { + if (cell.cellIndex && getRowIndex(cell.parentNode)) { return cell; } } @@ -2052,7 +2057,8 @@ }; } - if (!document.documentElement.style.setProperty && document.getElementById("flash-light-color-p")) { + // thx https://stackoverflow.com/a/26633844 + if (!(window.CSS && CSS.supports && CSS.supports("color", "var(--v)")) && document.getElementById("flash-light-color-p")) { document.getElementById("flash-light-color-p").hidden = true; return; } @@ -2240,14 +2246,14 @@ board.rows[0].appendChild(document.createElement("th")); board.rows[0].lastChild.textContent = i + 1; - board.appendChild(document.createElement("tr")); - board.lastChild.appendChild(document.createElement("th")); - board.lastChild.lastChild.textContent = letters[i]; + const row = board.insertRow(-1); + row.appendChild(document.createElement("th")); + row.lastChild.textContent = letters[i]; for (let j = 0; j < 15; j++) { cell = document.createElement("td"); boardCells.push(cell); - board.lastChild.appendChild(cell); + row.appendChild(cell); cell.appendChild(document.createElement("div")); cell.lastChild.className = "tile-placeholder"; @@ -2256,7 +2262,7 @@ specialCell("doubleWord", board.lastChild.lastChild); cell = board.lastChild.lastChild.getElementsByClassName("special-cell-label")[0]; cell.textContent = "★"; - board.lastChild.lastChild.id = "center-cell"; + row.lastChild.id = "center-cell"; } else if (i % 7 === 0 && j % 7 === 0) { specialCell("tripleWord", board.lastChild.lastChild); } else if ((i === j || i + j === 14) && (i < 5 || i > 9)) { @@ -2268,21 +2274,21 @@ } } - board.lastChild.appendChild(document.createElement("th")); - board.lastChild.lastChild.textContent = letters[i]; + row.appendChild(document.createElement("th")); + row.lastChild.textContent = letters[i]; } board.rows[0].appendChild(board.rows[0].cells[0].cloneNode(false)); - board.appendChild(document.createElement("tr")); - board.lastChild.appendChild(board.rows[0].cells[0].cloneNode(false)); + const row = board.insertRow(-1); + row.appendChild(board.rows[0].cells[0].cloneNode(false)); for (let i = 0; i < 15; i++) { - board.lastChild.appendChild(document.createElement("th")); - board.lastChild.lastChild.textContent = i + 1; + row.appendChild(document.createElement("th")); + row.lastChild.textContent = i + 1; } - board.lastChild.appendChild(board.rows[0].cells[0].cloneNode(false)); + row.appendChild(board.rows[0].cells[0].cloneNode(false)); if (getSetting("trivabbleGameNumber")) { document.getElementById("number").textContent = getSetting("trivabbleGameNumber"); diff --git a/server/trivabble-server.js b/server/trivabble-server.js index 890bb85..02e205a 100644 --- a/server/trivabble-server.js +++ b/server/trivabble-server.js @@ -29,6 +29,7 @@ const port = parseInt(process.env.TRIVABBLE_PORT || "3000"); const host = process.env.TRIVABBLE_HOST || "localhost"; +const disableCSP = process.env.DISABLE_CSP || false; const SAVE_TIMEOUT = 5000; const KEEP_ALIVE = 30000; @@ -998,7 +999,24 @@ 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.setHeader( + "Content-Security-Policy", + "default-src 'none'; " + + "script-src 'self'; " + + "style-src 'self'; " + + "img-src 'self'; " + + (disableCSP ? "" : "connect-src 'self' " + ( + // uzbl (like Safari 9 / iPad 2) does not like unsecure websockets on the + // same port with connect-src 'self' + // See https://github.com/w3c/webappsec-csp/issues/7 + "ws://" + host + ":" + port + " " + + "ws://127.0.0.1:" + port + " " + + "ws://localhost:" + port + "; " + )) + + "media-src 'self'" + ); + response.end(contents); }); } else { -- 2.30.2