cm-chessboard 3.17.6 → 3.17.9

package/examples/enable-input.html

@@ -44,6 +44,7 @@ function inputHandler(event) {
         position: "start",
         sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"}
     })
+
     window.board.enableMoveInput(inputHandler)
     function inputHandler(event) {
         console.log(event)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cm-chessboard",
-  "version": "3.17.6",
+  "version": "3.17.9",
   "description": "A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.",
   "keywords": [
     "chess",

package/src/cm-chessboard/Chessboard.js

@@ -41,11 +41,12 @@ export const FEN_EMPTY_POSITION = "8/8/8/8/8/8/8/8"
 
 export class Chessboard {
 
-    constructor(element, props = {}) { // TODO rename element to context
-        if (!element) {
-            throw new Error("container element is " + element)
+    constructor(context, props = {}) {
+        if (!context) {
+            throw new Error("container element is " + context)
         }
-        this.element = element
+        this.element = context
+        this.id = (Math.random() + 1).toString(36).substr(2, 6)
         let defaultProps = {
             position: "empty", // set as fen, "start" or "empty"
             orientation: COLOR.white, // white on bottom
@@ -57,8 +58,6 @@ export class Chessboard {
                 aspectRatio: 1, // height/width. Set to `undefined`, if you want to define it only in the css.
                 moveFromMarker: MARKER_TYPE.frame, // the marker used to mark the start square
                 moveToMarker: MARKER_TYPE.frame, // the marker used to mark the square where the figure is moving to
-                moveMarker: MARKER_TYPE.frame, // deprecated => moveFromMarker // TODO remove in future
-                hoverMarker: MARKER_TYPE.frame // deprecated => moveToMarker // TODO remove in future
             },
             responsive: true, // resizes the board based on element size
             animationDuration: 300, // pieces animation duration in milliseconds
@@ -79,31 +78,20 @@ export class Chessboard {
         if (props.style) {
             Object.assign(this.props.style, props.style)
         }
-        if(this.props.style.moveMarker !== MARKER_TYPE.frame) { // TODO remove in future
-            console.warn("this.props.style.moveMarker is deprecated, use this.props.style.moveFromMarker")
-            this.props.style.moveFromMarker = this.props.style.moveMarker
-        }
-        if(this.props.style.hoverMarker !== MARKER_TYPE.frame) { // TODO remove in future
-            console.warn("this.props.style.hoverMarker is deprecated, use this.props.style.moveToMarker")
-            this.props.style.moveToMarker = this.props.style.hoverMarker
-        }
         if (this.props.style.aspectRatio) {
             this.element.style.height = (this.element.offsetWidth * this.props.style.aspectRatio) + "px"
         }
         this.state = new ChessboardState()
+        if (this.props.position === "start") {
+            this.state.setPosition(FEN_START_POSITION)
+        } else if (this.props.position === "empty" || this.props.position === undefined) {
+            this.state.setPosition(FEN_EMPTY_POSITION)
+        } else {
+            this.state.setPosition(this.props.position)
+        }
         this.state.orientation = this.props.orientation
-
         const viewType = this.props.accessible ? ChessboardViewAccessible : ChessboardView
-        this.view = new viewType(this, (view) => {
-            if (this.props.position === "start") {
-                this.state.setPosition(FEN_START_POSITION)
-            } else if (this.props.position === "empty" || this.props.position === undefined) {
-                this.state.setPosition(FEN_EMPTY_POSITION)
-            } else {
-                this.state.setPosition(this.props.position)
-            }
-            view.redraw()
-        })
+        this.view = new viewType(this)
     }
 
     // API //
@@ -264,7 +252,7 @@ export class Chessboard {
         this.element.addEventListener("mouseup", this.squareSelectListener)
         this.element.addEventListener("touchend", this.squareSelectListener)
         this.state.squareSelectEnabled = true
-        this.view.setCursor()
+        this.view.visualizeInputState()
     }
 
     disableSquareSelect() {
@@ -273,7 +261,7 @@ export class Chessboard {
         this.element.removeEventListener("touchend", this.squareSelectListener)
         this.squareSelectListener = undefined
         this.state.squareSelectEnabled = false
-        this.view.setCursor()
+        this.view.visualizeInputState()
     }
 
 }

package/src/cm-chessboard/ChessboardView.js

@@ -60,7 +60,7 @@ export const SQUARE_COORDINATES = [
 
 export class ChessboardView {
 
-    constructor(chessboard, callbackAfterCreation) {
+    constructor(chessboard) {
         this.animationRunning = false
         this.currentAnimation = undefined
         this.chessboard = chessboard
@@ -93,10 +93,10 @@ export class ChessboardView {
 
         this.createSvgAndGroups()
         this.updateMetrics()
-        callbackAfterCreation(this)
         if (chessboard.props.responsive) {
             this.handleResize()
         }
+        this.redraw()
     }
 
     pointerDownHandler(e) {
@@ -194,7 +194,7 @@ export class ChessboardView {
         this.drawBoard()
         this.drawCoordinates()
         this.drawMarkers()
-        this.setCursor()
+        this.visualizeInputState()
         this.drawPieces(this.chessboard.state.squares)
     }
 
@@ -413,7 +413,7 @@ export class ChessboardView {
         }
         this.chessboard.state.inputEnabled = true
         this.moveInputCallback = eventHandler
-        this.setCursor()
+        this.visualizeInputState()
     }
 
     disableMoveInput() {
@@ -421,7 +421,7 @@ export class ChessboardView {
         this.chessboard.state.inputBlackEnabled = false
         this.chessboard.state.inputEnabled = false
         this.moveInputCallback = undefined
-        this.setCursor()
+        this.visualizeInputState()
     }
 
     // callbacks //
@@ -465,7 +465,7 @@ export class ChessboardView {
 
     // Helpers //
 
-    setCursor() {
+    visualizeInputState() {
         if (this.chessboard.state) { // fix https://github.com/shaack/cm-chessboard/issues/47
             if (this.chessboard.state.inputWhiteEnabled || this.chessboard.state.inputBlackEnabled || this.chessboard.state.squareSelectEnabled) {
                 this.boardGroup.setAttribute("class", "board input-enabled")

package/src/cm-chessboard/ChessboardViewAccessible.js

@@ -7,17 +7,28 @@ import {ChessboardView, renderPieceTitle} from "./ChessboardView.js"
 import {COLOR} from "./Chessboard.js"
 import {piecesTranslations} from "./ChessboardView.js"
 
-let count = 0
-
-
 const hlTranslations = {
-    en: {
-        pieces_lists: "Pieces lists",
-        board_as_table: "Chessboard as table"
-    },
     de: {
         pieces_lists: "Figurenlisten",
-        board_as_table: "Schachbrett als Tabelle"
+        board_as_table: "Schachbrett als Tabelle",
+        move_piece: "Figur bewegen",
+        from: "von",
+        to: "nach",
+        move: "bewegen",
+        input_white_enabled: "Eingabe Weiß aktiviert",
+        input_black_enabled: "Eingabe Schwarz aktiviert",
+        input_disabled: "Eingabe deaktiviert"
+    },
+    en: {
+        pieces_lists: "Pieces lists",
+        board_as_table: "Chessboard as table",
+        move_piece: "Move piece",
+        from: "from",
+        to: "to",
+        move: "move",
+        input_white_enabled: "Input white enabled",
+        input_black_enabled: "Input black enabled",
+        input_disabled: "Input disabled"
     }
 }
 
@@ -32,12 +43,50 @@ export class ChessboardViewAccessible extends ChessboardView {
         this.translations = piecesTranslations
         this.t = this.translations[this.lang]
         this.th = hlTranslations[this.lang]
-        this.piecesListContainer = this.createElement(`<div class="cm-chessboard-content visually-hidden"><h3>${this.th.pieces_lists}</h3><div class="list"></div></div>`)
+
+        this.accessibleContainer = this.createElement(`<div class="cm-chessboard-content visually-hidden"></div>`)
+
+        this.movePieceFormContainer = this.createElement(`<div><h3>${this.th.move_piece}</h3><form>
+            <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}"/>
+            <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}"/>
+            <button type="button" class="button-move">${this.th.move}</button>
+            </form><div class="input-status" aria-live="polite"></div></div>`)
+        this.inputFrom = this.movePieceFormContainer.querySelector(".input-from")
+        this.inputTo = this.movePieceFormContainer.querySelector(".input-to")
+        this.moveButton = this.movePieceFormContainer.querySelector(".button-move")
+        this.moveButton.addEventListener("click", () => {
+            this.chessboard.movePiece(this.inputFrom.value, this.inputTo.value, true)
+        })
+        this.accessibleContainer.appendChild(this.movePieceFormContainer)
+
+        this.piecesListContainer = this.createElement(`<div><h3>${this.th.pieces_lists}</h3><div class="list"></div></div>`)
         this.piecesList = this.piecesListContainer.querySelector(".list")
-        this.chessboard.element.appendChild(this.piecesListContainer)
-        this.boardAsTableContainer = this.createElement(`<div class="cm-chessboard-content visually-hidden"><h3>${this.th.board_as_table}</h3><div class="table"></div></div>`)
+        this.accessibleContainer.appendChild(this.piecesListContainer)
+
+        this.boardAsTableContainer = this.createElement(`<div><h3>${this.th.board_as_table}</h3><div class="table"></div></div>`)
         this.boardAsTable = this.boardAsTableContainer.querySelector(".table")
-        this.chessboard.element.appendChild(this.boardAsTableContainer)
+        this.accessibleContainer.appendChild(this.boardAsTableContainer)
+        this.chessboard.element.appendChild(this.accessibleContainer)
+        this.updateFormInputs()
+    }
+
+    visualizeInputState() {
+        super.visualizeInputState()
+        this.updateFormInputs()
+    }
+
+    updateFormInputs() {
+        if (this.inputFrom) {
+            if (this.chessboard.state.inputWhiteEnabled || this.chessboard.state.inputBlackEnabled) {
+                this.inputFrom.disabled = false
+                this.inputTo.disabled = false
+                this.moveButton.disabled = false
+            } else {
+                this.inputFrom.disabled = true
+                this.inputTo.disabled = true
+                this.moveButton.disabled = true
+            }
+        }
     }
 
     drawPieces(squares = this.chessboard.state.squares) {
@@ -59,12 +108,11 @@ export class ChessboardViewAccessible extends ChessboardView {
                 listB += `<li class="list-inline-item">${renderPieceTitle(this.lang, piece.name)} ${piece.position}</li>`
             }
         }
-        count++
         this.piecesList.innerHTML = `
-        <h4 id="white-${count}">${this.t.colors_long.w}</h4>
-        <ul aria-labelledby="white-${count}" class="list-inline">${listW}</ul>
-        <h4 id="black-${count}">${this.t.colors_long.b}</h4>
-        <ul aria-labelledby="black-${count}" class="list-inline">${listB}</ul>`
+        <h4 id="white_${this.chessboard.id}">${this.t.colors_long.w}</h4>
+        <ul aria-labelledby="white_${this.chessboard.id}" class="list-inline">${listW}</ul>
+        <h4 id="black_${this.chessboard.id}">${this.t.colors_long.b}</h4>
+        <ul aria-labelledby="black_${this.chessboard.id}" class="list-inline">${listB}</ul>`
     }
 
     redrawBoardAsTable() {
@@ -76,7 +124,7 @@ export class ChessboardViewAccessible extends ChessboardView {
             files.reverse()
             squares.reverse()
         }
-        let html = `<table><caption>${this.t.board_as_table}</caption><tr><th></th>`
+        let html = `<table><caption>${this.th.board_as_table}</caption><tr><th></th>`
         for (const rank of ranks) {
             html += `<th scope='col'>${rank}</th>`
         }