cm-chessboard 4.0.10 → 4.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
</style>
|
|
20
20
|
</head>
|
|
21
21
|
<body>
|
|
22
|
-
<h1>
|
|
23
|
-
<
|
|
22
|
+
<h1><a href="../">cm-chessboard</a></h1>
|
|
23
|
+
<h2>Example: Input enabled, move validation with chess.js</h2>
|
|
24
24
|
<p>Input enabled for white. <a href="https://github.com/jhlywa/chess.js">chess.js</a> does the validation and answers
|
|
25
25
|
with random moves.</p>
|
|
26
26
|
<h2 class="visually-hidden">The Board</h2>
|
|
@@ -117,7 +117,13 @@ board.enableMoveInput(inputHandler, COLOR.white)
|
|
|
117
117
|
sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"},
|
|
118
118
|
style: {moveFromMarker: undefined, moveToMarker: undefined}, // disable standard markers
|
|
119
119
|
orientation: COLOR.white,
|
|
120
|
-
|
|
120
|
+
accessibility: {
|
|
121
|
+
brailleNotationInAlt: true, // show the braille notation of the game in the alt attribute of the svg
|
|
122
|
+
movePieceForm: true, // display a form to move a piece (from, to, move)
|
|
123
|
+
boardAsTable: true, // display the board additionally as HTML table
|
|
124
|
+
piecesAsList: true, // display the pieces additionally as List
|
|
125
|
+
visuallyHidden: true // hide all those extra outputs visually but keep them accessible for screen readers and braille displays
|
|
126
|
+
}
|
|
121
127
|
})
|
|
122
128
|
board.enableMoveInput(inputHandler, COLOR.white)
|
|
123
129
|
</script>
|
package/package.json
CHANGED
|
@@ -45,41 +45,52 @@ export class ViewAccessible extends View {
|
|
|
45
45
|
this.th = hlTranslations[this.lang]
|
|
46
46
|
|
|
47
47
|
const accessibilityProps = chessboard.props.accessibility
|
|
48
|
-
if(accessibilityProps.movePieceForm) {
|
|
48
|
+
if (accessibilityProps.movePieceForm) {
|
|
49
49
|
this.movePieceFormContainer = this.createElement(`<div><h3>${this.th.move_piece}</h3><form>
|
|
50
50
|
<label for="move_piece_input_from_${chessboard.id}">${this.th.from}</label><input class="input-from" type="text" size="2" id="move_piece_input_from_${chessboard.id}"/>
|
|
51
51
|
<label for="move_piece_input_to_${chessboard.id}">${this.th.to}</label><input class="input-to" type="text" size="2" id="move_piece_input_to_${chessboard.id}"/>
|
|
52
|
-
<button type="
|
|
52
|
+
<button type="submit" class="button-move">${this.th.move}</button>
|
|
53
53
|
</form><div class="input-status" aria-live="polite"></div></div>`)
|
|
54
|
-
this.
|
|
55
|
-
this.
|
|
56
|
-
this.
|
|
57
|
-
|
|
54
|
+
this.form = this.movePieceFormContainer.querySelector("form")
|
|
55
|
+
this.inputFrom = this.form.querySelector(".input-from")
|
|
56
|
+
this.inputTo = this.form.querySelector(".input-to")
|
|
57
|
+
this.moveButton = this.form.querySelector(".button-move")
|
|
58
|
+
if (accessibilityProps.visuallyHidden) {
|
|
58
59
|
this.movePieceFormContainer.classList.add("visually-hidden")
|
|
59
60
|
}
|
|
60
|
-
this.
|
|
61
|
+
this.form.addEventListener("submit", (evt) => {
|
|
62
|
+
evt.preventDefault()
|
|
61
63
|
if (this.moveInputCallback({
|
|
62
64
|
chessboard: this.chessboard,
|
|
63
65
|
type: INPUT_EVENT_TYPE.moveDone,
|
|
64
66
|
squareFrom: this.inputFrom.value,
|
|
65
67
|
squareTo: this.inputTo.value
|
|
66
68
|
})) {
|
|
67
|
-
this.inputFrom.value
|
|
68
|
-
|
|
69
|
+
this.chessboard.movePiece(this.inputFrom.value, this.inputTo.value,
|
|
70
|
+
true).then(() => {
|
|
71
|
+
this.inputFrom.value = ""
|
|
72
|
+
this.inputTo.value = ""
|
|
73
|
+
})
|
|
69
74
|
}
|
|
70
75
|
})
|
|
71
76
|
this.chessboard.context.appendChild(this.movePieceFormContainer)
|
|
72
77
|
}
|
|
73
78
|
|
|
74
|
-
if(accessibilityProps.boardAsTable) {
|
|
79
|
+
if (accessibilityProps.boardAsTable) {
|
|
75
80
|
this.boardAsTableContainer = this.createElement(`<div><h3>${this.th.board_as_table}</h3><div class="table"></div></div>`)
|
|
76
81
|
this.boardAsTable = this.boardAsTableContainer.querySelector(".table")
|
|
77
82
|
this.chessboard.context.appendChild(this.boardAsTableContainer)
|
|
83
|
+
if (accessibilityProps.visuallyHidden) {
|
|
84
|
+
this.boardAsTableContainer.classList.add("visually-hidden")
|
|
85
|
+
}
|
|
78
86
|
}
|
|
79
|
-
if(accessibilityProps.piecesListContainer) {
|
|
87
|
+
if (accessibilityProps.piecesListContainer) {
|
|
80
88
|
this.piecesListContainer = this.createElement(`<div><h3>${this.th.pieces_lists}</h3><div class="list"></div></div>`)
|
|
81
89
|
this.piecesList = this.piecesListContainer.querySelector(".list")
|
|
82
90
|
this.chessboard.context.appendChild(this.piecesListContainer)
|
|
91
|
+
if (accessibilityProps.visuallyHidden) {
|
|
92
|
+
this.piecesListContainer.classList.add("visually-hidden")
|
|
93
|
+
}
|
|
83
94
|
}
|
|
84
95
|
this.updateFormInputs()
|
|
85
96
|
}
|
|
@@ -106,10 +117,10 @@ export class ViewAccessible extends View {
|
|
|
106
117
|
redrawPieces(squares = this.chessboard.state.position.squares) {
|
|
107
118
|
super.redrawPieces(squares)
|
|
108
119
|
setTimeout(() => {
|
|
109
|
-
if(this.chessboard.props.accessibility.boardAsTable) {
|
|
120
|
+
if (this.chessboard.props.accessibility.boardAsTable) {
|
|
110
121
|
this.redrawBoardAsTable()
|
|
111
122
|
}
|
|
112
|
-
if(this.chessboard.props.accessibility.piecesAsList) {
|
|
123
|
+
if (this.chessboard.props.accessibility.piecesAsList) {
|
|
113
124
|
this.redrawPiecesLists()
|
|
114
125
|
}
|
|
115
126
|
})
|