cm-chessboard 4.3.9 → 4.4.0

package/README.md

@@ -337,7 +337,7 @@ and have access to the chessboard and can register extension points.
 class MyCoolChessboardExtension extends Extension {
     constructor(chessboard, props) {
         super(chessboard, props)
-        this.registerExtensionPoint(EXTENSION_POINT.moveInputStateChanged, (data) => {
+        this.registerExtensionPoint(EXTENSION_POINT.moveInput, (data) => {
             // do something on move [start | cancel | done]
             console.log(data)
         })
@@ -349,10 +349,11 @@ Currently possible extension points are defined in `Extension.js`.
 
 ```js
 export const EXTENSION_POINT = {
-    positionChanged: "positionChanged",
-    boardChanged: "boardChanged",
-    moveInputStateChanged: "moveInputStateChanged",
-    destroy: "destroy"
+  positionChanged: "positionChanged", // the positions of the pieces was changed
+  boardChanged: "boardChanged", // the board (orientation) was changed
+  moveInputToggled: "moveInputToggled", // move input was enabled or disabled
+  moveInput: "moveInput", // move started, cancelled or done
+  destroy: "destroy" // called, before the board is destroyed
 }
 ```
 

package/examples/accessible-chessboard.html

@@ -33,7 +33,7 @@
     import {Accessibility} from "../src/cm-chessboard/extensions/Accessibility.js"
 
     const chessboard = new Chessboard(document.getElementById("board"), {
-        position: "start",
+        position: "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR w Gkq - 4 11",
         sprite: {url: "../assets/images/chessboard-sprite.svg"},
         // animationDuration: 0, // optional, set to 0 to disable animations
         style: {

package/index.html

@@ -19,7 +19,6 @@ It works, it is cool and it is easy to use. 👍</p>
     <ul>
         <li><a href="examples/simple-boards.html">Simple chessboards, view only</a></li>
         <li><a href="examples/responsive-board.html">Responsive chessboard</a></li>
-        <li><a href="examples/accessible-chessboard.html">All accessibility features turned on</a> 🆕</li>
         <li><a href="examples/enable-input.html">Input enabled without validation</a></li>
         <li><a href="examples/validate-moves.html">Input enabled, move validation with chess.js</a> 🥸</li>
         <li><a href="examples/pieces-animation.html">Set different positions, with animation</a></li>
@@ -28,6 +27,10 @@ It works, it is cool and it is easy to use. 👍</p>
         <li><a href="examples/many-boards.html">100 boards, in one page</a></li>
         <li><a href="examples/destroy-many-boards.html">Stress test, 5000 boards created and destroyed</a> 🤓 👍</li>
     </ul>
+    <h3>Examples of extensions</h3>
+    <ul>
+        <li><a href="examples/accessible-chessboard.html">Accessibility extension</a> 🆕</li>
+    </ul>
 </div>
 <h2>Chessboard</h2>
 <div class="board" id="board"></div>
@@ -53,7 +56,7 @@ It works, it is cool and it is easy to use. 👍</p>
     }
 </script>
 <div class="clearfix"></div>
-<h2>Test</h2>
+<h2>Tests</h2>
 <ul>
     <li><a href="test/">Run the unit tests</a></li>
 </ul>

package/package.json

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

package/src/cm-chessboard/Chessboard.js

@@ -131,9 +131,9 @@ export class Chessboard {
             return
         }
         this.boardTurning = true
-        this.state.invokeExtensionPoints(EXTENSION_POINT.boardChanged)
         return this.positionAnimationsQueue.enqueueTurnBoard(position, color, animated).then(() => {
             this.boardTurning = false
+            this.state.invokeExtensionPoints(EXTENSION_POINT.boardChanged)
         })
     }
 

package/src/cm-chessboard/extensions/Accessibility.js

@@ -94,7 +94,10 @@ export class Accessibility extends Extension {
                 this.piecesListContainer.classList.add("visually-hidden")
             }
         }
-        this.registerExtensionPoint(EXTENSION_POINT.moveInputStateChanged, () => {
+        this.registerExtensionPoint(EXTENSION_POINT.moveInput, () => {
+            this.updateFormInputs()
+        })
+        this.registerExtensionPoint(EXTENSION_POINT.moveInputToggled, () => {
             this.updateFormInputs()
         })
         this.registerExtensionPoint(EXTENSION_POINT.positionChanged, () => {
@@ -108,17 +111,19 @@ export class Accessibility extends Extension {
                 }
             }
         })
-        setTimeout(() => { // todo replace with something like this.chessboard.initialized.then(() => { ... })
-            this.updateFormInputs()
-            this.redrawPositionInAltAttribute()
+        this.registerExtensionPoint(EXTENSION_POINT.boardChanged, () => {
+            console.log("EXTENSION_POINT.boardChanged")
             if (this.props.boardAsTable) {
                 this.redrawBoardAsTable()
             }
-            if (this.props.piecesAsList) {
-                this.redrawPiecesLists()
-            }
-
         })
+        this.redrawPositionInAltAttribute()
+        if (this.props.boardAsTable) {
+            this.redrawBoardAsTable()
+        }
+        if (this.props.piecesAsList) {
+            this.redrawPiecesLists()
+        }
     }
 
     updateFormInputs() {
@@ -173,7 +178,7 @@ ${listB}`
     redrawBoardAsTable() {
         const squares = this.chessboard.state.position.squares.slice()
         const ranks = ["a", "b", "c", "d", "e", "f", "g", "h"]
-        const files = ["1", "2", "3", "4", "5", "6", "7", "8"]
+        const files = ["8", "7", "6", "5", "4", "3", "2", "1"]
         if (this.chessboard.state.orientation === COLOR.black) {
             ranks.reverse()
             files.reverse()

package/src/cm-chessboard/model/Extension.js

@@ -5,10 +5,12 @@
  */
 
 export const EXTENSION_POINT = {
-    positionChanged: "positionChanged",
-    boardChanged: "boardChanged",
-    moveInputStateChanged: "moveInputStateChanged",
-    destroy: "destroy"
+    positionChanged: "positionChanged", // the positions of the pieces was changed
+    boardChanged: "boardChanged", // the board (orientation) was changed
+    moveInputToggled: "moveInputToggled", // move input was enabled or disabled
+    moveInput: "moveInput", // move started, cancelled or done
+    moveInputStateChanged: "moveInput", // TODO deprecated, use `moveInput`
+    destroy: "destroy" // called, before the board is destroyed
 }
 
 export class Extension {

package/src/cm-chessboard/view/ChessboardView.js

@@ -370,6 +370,7 @@ export class ChessboardView {
         }
         this.chessboard.state.inputEnabled = true
         this.moveInputCallback = eventHandler
+        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInputToggled, {enabled: true, color: color})
         this.visualizeInputState()
     }
 
@@ -378,6 +379,7 @@ export class ChessboardView {
         this.chessboard.state.inputBlackEnabled = false
         this.chessboard.state.inputEnabled = false
         this.moveInputCallback = undefined
+        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInputToggled, {enabled: false})
         this.visualizeInputState()
     }
 
@@ -389,7 +391,7 @@ export class ChessboardView {
             type: INPUT_EVENT_TYPE.moveStart,
             square: square
         }
-        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInputStateChanged, data)
+        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
         if (this.moveInputCallback) {
             return this.moveInputCallback(data)
         } else {
@@ -404,7 +406,7 @@ export class ChessboardView {
             squareFrom: squareFrom,
             squareTo: squareTo
         }
-        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInputStateChanged, data)
+        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
         if (this.moveInputCallback) {
             return this.moveInputCallback(data)
         } else {
@@ -420,7 +422,7 @@ export class ChessboardView {
             squareFrom: squareFrom,
             squareTo: squareTo
         }
-        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInputStateChanged, data)
+        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
         if (this.moveInputCallback) {
             this.moveInputCallback(data)
         }

package/src/cm-chessboard/view/VisualMoveInput.js

@@ -26,41 +26,19 @@ export const MOVE_CANCELED_REASON = {
 
 const DRAG_THRESHOLD = 4
 
-function createTask() {
-    let resolve, reject
-    const promise = new Promise(function (_resolve, _reject) {
-        resolve = _resolve
-        reject = _reject
-    })
-    promise.resolve = resolve
-    promise.reject = reject
-    return promise
-}
-
 export class VisualMoveInput {
 
     constructor(view, moveStartCallback, moveDoneCallback, moveCanceledCallback) {
         this.view = view
         this.chessboard = view.chessboard
         this.moveStartCallback = (square) => {
-            const result = moveStartCallback(square)
-            if (result) {
-                this.chessboard.moveTask = createTask()
-            }
-            return result
+            return moveStartCallback(square)
         }
         this.moveDoneCallback = (fromSquare, toSquare) => {
-            const result = moveDoneCallback(fromSquare, toSquare)
-            if (result) {
-                this.chessboard.moveTask.resolve()
-            } else {
-                this.chessboard.moveTask.reject()
-            }
-            return result
+            return moveDoneCallback(fromSquare, toSquare)
         }
         this.moveCanceledCallback = (reason, fromSquare, toSquare) => {
             moveCanceledCallback(reason, fromSquare, toSquare)
-            this.chessboard.moveTask.reject()
         }
         this.setMoveInputState(STATE.waitForInputStart)
     }