get rid of inline styles
This commit is contained in:
Raphaël Jakse
parent
02e8d3f6a5
commit
191fc7c69e
|
|
@ -33,7 +33,7 @@
|
|||
<option value="ro">Română</option>
|
||||
</select>
|
||||
</p>
|
||||
<p id="board-lang-selection" style="display:none">
|
||||
<p id="board-lang-selection" hidden="true">
|
||||
<label for="board-lang" data-l10n="text-content">Board language: </label>
|
||||
<select id="board-lang">
|
||||
<option value="fr">French</option>
|
||||
|
|
@ -51,10 +51,10 @@
|
|||
<div id="prefs">
|
||||
<p><label><input type="checkbox" id="tiles-sound" /><span data-l10n="text-content">Sound of the tiles</span></label></p>
|
||||
<p><label><input type="checkbox" id="msg-sound" /><span data-l10n="text-content">Sound of messages</span></label></p>
|
||||
<p id="enable-spell-checker-outer" style="display:none"><label><input type="checkbox" id="enable-spell-checker" /> <span data-l10n="text-content">Enable spell checker</span></label></p>
|
||||
<p id="enable-spell-checker-outer" hidden="true"><label><input type="checkbox" id="enable-spell-checker" /> <span data-l10n="text-content">Enable spell checker</span></label></p>
|
||||
<p><label><span data-l10n="text-content">(fast)</span><input type="range" min="0" max="0" id="double-tap-duration"/><span data-l10n="text-content">(slow)</span><br/><span data-l10n="text-content">Double tap duration</span></label></p>
|
||||
<p><label><span data-l10n="text-content">(fast)</span><input type="range" min="0" max="0" id="flash-light-duration"/><span data-l10n="text-content">(slow)</span><br/><span data-l10n="text-content">Flash light duration</span></label></p>
|
||||
<p><label><input type="color" size="6" id="flash-light-color" /> <span data-l10n="text-content">Flash light color</span></label></p>
|
||||
<p id="flash-light-color-p"><label><input type="color" size="6" id="flash-light-color" /> <span data-l10n="text-content">Flash light color</span></label></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -79,22 +79,22 @@
|
|||
<div id="panel-buttons">
|
||||
<button id="clear-rack" class="minibutton" data-l10n="text-content">Put back all the tiles of your rack in the bag</button>
|
||||
<button id="show-rack" class="minibutton" data-l10n="text-content">Show my rack to other players</button>
|
||||
<button id="check-spelling" class="minibutton" data-l10n="text-content" style="display:none">Check spelling for new words</button>
|
||||
<button id="check-spelling" class="minibutton" data-l10n="text-content" hidden="true">Check spelling for new words</button>
|
||||
</div>
|
||||
<div id="help-box">
|
||||
<p id="help-box-title" data-l10n="text-content">Tip!</p>
|
||||
<div id="help-box-inner">
|
||||
<div id="help-messages">
|
||||
<p data-l10n="text-content" style="display:none">Click on the bag to take one tile.</p>
|
||||
<p data-l10n="text-content" style="display:none">Click on someone's score to change it.</p>
|
||||
<p data-l10n="text-content" style="display:none">Who's turn? Click on the Turn button!</p>
|
||||
<p data-l10n="text-content" style="display:none">Click on (+) to increase someone's score.</p>
|
||||
<p data-l10n="text-content" style="display:none">Show a cell to everyone by double-clicking on it.</p>
|
||||
<p data-l10n="text-content" hidden="true">Click on the bag to take one tile.</p>
|
||||
<p data-l10n="text-content" hidden="true">Click on someone's score to change it.</p>
|
||||
<p data-l10n="text-content" hidden="true">Who's turn? Click on the Turn button!</p>
|
||||
<p data-l10n="text-content" hidden="true">Click on (+) to increase someone's score.</p>
|
||||
<p data-l10n="text-content" hidden="true">Show a cell to everyone by double-clicking on it.</p>
|
||||
</div>
|
||||
<button id="next-help-msg" class="minibutton" data-l10n="title" title="Next tip">→</button>
|
||||
</div>
|
||||
</div>
|
||||
<p id="info-spell-checking" style="display:none;"><span data-l10n="text-content">Spell checking is based on:</span> <a rel="noopener noreferrer" target="_blank" href="http://aspell.net">Aspell</a></p>
|
||||
<p id="info-spell-checking" hidden="true"><span data-l10n="text-content">Spell checking is based on:</span> <a rel="noopener noreferrer" target="_blank" href="http://aspell.net">Aspell</a></p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue