style cursor on tool selected
This commit is contained in:
parent
2ac980bb82
commit
a475c7fbf3
41
app.js
41
app.js
@ -10,7 +10,6 @@ let suggestionTimer= null
|
||||
let selectedValue = ""
|
||||
let history = []
|
||||
let accessKeyModifiers = "AccessKey+"
|
||||
let penStyle = "ink-pen"
|
||||
|
||||
window.onload = function() {
|
||||
let rowId = 0
|
||||
@ -61,7 +60,7 @@ window.onload = function() {
|
||||
node.title += " [" + (node.accessKeyLabel || accessKeyModifiers + node.accessKey) + "]"
|
||||
}
|
||||
|
||||
enableButtons()
|
||||
enableRadios()
|
||||
highlightAndTab()
|
||||
|
||||
document.onclick = function (event) {
|
||||
@ -93,7 +92,7 @@ function searchCandidatesOf(box) {
|
||||
|
||||
function onclick() {
|
||||
if (selectedValue) {
|
||||
if (penStyle == "ink-pen") {
|
||||
if (inkPenRadio.checked) {
|
||||
this.value = selectedValue
|
||||
} else {
|
||||
if (!this.value.includes(selectedValue))
|
||||
@ -104,13 +103,18 @@ function onclick() {
|
||||
}
|
||||
|
||||
function onfocus() {
|
||||
if (penStyle == "pencil" && this.value == "") {
|
||||
if (pencilRadio.checked && this.value == "") {
|
||||
this.value = this.placeholder
|
||||
this.placeholder = ""
|
||||
this.classList.add("pencil")
|
||||
} else {
|
||||
this.select()
|
||||
}
|
||||
if (selectedValue) {
|
||||
this.style.caretColor = "transparent"
|
||||
} else {
|
||||
this.style.caretColor = "auto"
|
||||
}
|
||||
}
|
||||
|
||||
function oninput() {
|
||||
@ -118,7 +122,7 @@ function oninput() {
|
||||
this.previousValue = this.value
|
||||
this.previousPlaceholder = this.placeholder
|
||||
undoButton.disabled = false
|
||||
if (penStyle != "pencil") {
|
||||
if (inkPenRadio.checked) {
|
||||
refresh(this)
|
||||
}
|
||||
}
|
||||
@ -142,7 +146,7 @@ function refresh(box) {
|
||||
neighbour.required = false
|
||||
})
|
||||
|
||||
enableButtons()
|
||||
enableRadios()
|
||||
highlightAndTab()
|
||||
|
||||
for (neighbour1 of box.neighbourhood) {
|
||||
@ -187,8 +191,8 @@ function onblur() {
|
||||
}
|
||||
}
|
||||
|
||||
function enableButtons() {
|
||||
for (radio of radioValues.getElementsByTagName("input")) {
|
||||
function enableRadios() {
|
||||
for (radio of selectValueRadioGroup.getElementsByTagName("input")) {
|
||||
if (boxes.filter(box => box.value == "").some(box => box.candidates.has(radio.value))) {
|
||||
radio.disabled = false
|
||||
if (radio.previousTitle) {
|
||||
@ -213,7 +217,6 @@ function highlight(radio) {
|
||||
selectedValue = radio.value
|
||||
}
|
||||
highlightAndTab()
|
||||
boxes.filter(box => box.value == "" && box.tabIndex == 0)[0].focus()
|
||||
}
|
||||
|
||||
function highlightAndTab() {
|
||||
@ -225,21 +228,29 @@ function highlightAndTab() {
|
||||
}
|
||||
else {
|
||||
box.classList.remove("same-value")
|
||||
if (box.candidates.has(selectedValue)) {
|
||||
box.classList.remove("forbidden-value")
|
||||
if (box.candidates.has(selectedValue) && !box.disabled) {
|
||||
box.classList.add("allowed")
|
||||
box.classList.remove("forbidden")
|
||||
box.tabIndex = 0
|
||||
} else {
|
||||
box.classList.add("forbidden-value")
|
||||
box.classList.add("forbidden")
|
||||
box.classList.remove("allowed")
|
||||
box.tabIndex = -1
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
boxes.forEach(box => {
|
||||
box.classList.remove("same-value", "forbidden-value")
|
||||
box.classList.remove("same-value", "forbidden")
|
||||
if (selectedValue && !box.disabled) {
|
||||
box.classList.add("allowed")
|
||||
} else {
|
||||
box.classList.remove("allowed")
|
||||
}
|
||||
box.tabIndex = 0
|
||||
})
|
||||
}
|
||||
boxes.filter(box => box.value == "" && box.tabIndex == 0)[0].focus()
|
||||
}
|
||||
|
||||
function shuffle(iterable) {
|
||||
@ -304,7 +315,7 @@ function erase(someBoxes) {
|
||||
searchCandidatesOf(box)
|
||||
refresh(box)
|
||||
}
|
||||
enableButtons()
|
||||
enableRadios()
|
||||
highlightAndTab()
|
||||
}
|
||||
|
||||
@ -325,7 +336,7 @@ function eraseAll() {
|
||||
box.required = false
|
||||
})
|
||||
boxes.forEach(searchCandidatesOf)
|
||||
enableButtons()
|
||||
enableRadios()
|
||||
highlightAndTab()
|
||||
}
|
||||
}
|
||||
17
style.css
17
style.css
@ -89,7 +89,6 @@ div {
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
transition: background 0.5s;
|
||||
caret-color: transparent;
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
input::-webkit-outer-spin-button,
|
||||
@ -110,19 +109,25 @@ button:enabled,
|
||||
color: white;
|
||||
background: #6666ff;
|
||||
}
|
||||
.grid input.forbidden-value:enabled {
|
||||
.grid input.allowed:enabled {
|
||||
cursor: copy;
|
||||
}
|
||||
.grid input.forbidden {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.grid input.forbidden:enabled {
|
||||
background: #ffffaa;
|
||||
}
|
||||
.grid input.same-value:enabled {
|
||||
background: #ffff33;
|
||||
}
|
||||
.grid input.forbidden-value:disabled {
|
||||
.grid input.forbidden:disabled {
|
||||
color: #ffffaa;
|
||||
background: #6666ff;
|
||||
}
|
||||
.grid input.same-value:disabled,
|
||||
button.same-value:enabled,
|
||||
.tools input:checked+label {
|
||||
.tools input:enabled:checked+label {
|
||||
color: #ffffaa !important;
|
||||
background: #00b359 !important;
|
||||
}
|
||||
@ -155,15 +160,13 @@ button:enabled:hover,
|
||||
padding: 5px 9px 5px 10px;
|
||||
margin: 1px 1px 1px 2px;
|
||||
}
|
||||
button.pressed:enabled:hover,
|
||||
.tools input:enabled:checked:hover+label {
|
||||
border-width: 3px;
|
||||
border-style: inset;
|
||||
padding: 4px 6px 2px 9px;
|
||||
margin: 1px 1px 1px 2px;
|
||||
}
|
||||
button.pressed,
|
||||
.tools input:checked+label {
|
||||
.tools input:enabled:checked+label {
|
||||
border: 2px inset #00b359;
|
||||
background: #00b359;
|
||||
padding: 4px 8px 4px 9px;
|
||||
|
||||
@ -73,10 +73,10 @@
|
||||
</table>
|
||||
</form>
|
||||
<section class='tools'>
|
||||
<div id='radioValues' class='radioValues'>
|
||||
<div id='selectValueRadioGroup' class='selectValueRadioGroup'>
|
||||
<?php
|
||||
for($value=1; $value<=9; $value++) {
|
||||
echo " <input type='radio' id='radioValue$value' value='$value' name='radioValues' onclick='highlight(this)' accesskey='$value'/><label for='radioValue$value' title='Écrire un $value'>$value</label>\n";
|
||||
echo " <input type='radio' id='selectValueRadio$value' value='$value' name='selectValueRadioGroup' onclick='highlight(this)' accesskey='$value'/><label for='selectValueRadio$value' title='Écrire un $value'>$value</label>\n";
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user