cm-chessboard 4.1.10 → 4.1.13

package/README.md

@@ -101,12 +101,6 @@ let defaultProps = {
     url: "./assets/images/chessboard-sprite.svg", // pieces and markers are stored in a sprite file
     size: 40, // the sprite tiles size, defaults to 40x40px
     cache: true // cache the sprite
-  },
-  accessibility: {
-    movePieceForm: false, // display a form to move a piece (from, to, move)
-    boardAsTable: false, // display the board additionally as HTML table
-    piecesAsList: false, // display the pieces additionally as List
-    visuallyHidden: true // hide all those extra outputs visually but keep them accessible for screen readers and braille displays
   }
 }
 ```
@@ -334,6 +328,10 @@ chessboard.removeMarkers("e4", myMarkerType)
 chessboard.removeMarkers(undefined, myMarkerType)
 ```
 
+## Extensions
+
+cm-chessboard provides the ability to extend its functionality with extensions. 
+
 ## Usage with React
 
 There exists a ticket from someone who is using cm-chessboard with react:

package/examples/accessible-chessboard.html

@@ -18,41 +18,38 @@
 
 <div class="board green" id="board"></div>
 <button style="margin-bottom: 10px"
-        onclick="window.board.setOrientation(window.board.getOrientation() === 'w' ? 'b' : 'w')">Switch Orientation
+        onclick="window.setOrientation()">Switch Orientation
 </button>
 <script type="module">
     import {Chessboard} from "../src/cm-chessboard/Chessboard.js"
+    import {Accessibility} from "../src/cm-chessboard/extensions/Accessibility.js"
 
-    window.board = new Chessboard(document.getElementById("board"), {
+    const chessboard = new Chessboard(document.getElementById("board"), {
         position: "start",
         sprite: {url: "../assets/images/chessboard-sprite.svg"},
         style: {
             cssClass: "default-contrast"
-        },
-        accessibility: {
-            brailleNotationInAlt: true, // show the braille notation of the game in the alt attribute of the svg
-            boardAsTable: true, // display the board additionally as HTML table
-            movePieceForm: true, // display a form to move a piece (from, to, move)
-            piecesAsList: true, // display the pieces additionally as List
-            enableAnimations: true, // set to false to disable all animations
-            visuallyHidden: false // hide all those extra outputs visually but keep them accessible for screen readers and braille displays
         }
     })
+    window.setOrientation = function () {
+        chessboard.setOrientation(chessboard.getOrientation() === 'w' ? 'b' : 'w')
+    }
+    // Extension
+    new Accessibility(chessboard, {
+        brailleNotationInAlt: true, // show the braille notation of the game in the alt attribute of the SVG
+        boardAsTable: true, // display the board additionally as HTML table
+        movePieceForm: true, // display a form to move a piece (from, to, move)
+        piecesAsList: true, // display the pieces additionally as List
+        visuallyHidden: false // hide all those extra outputs visually but keep them accessible for screen readers and braille displays
+    })
 
-    window.board.enableMoveInput(inputHandler)
+    chessboard.enableMoveInput(inputHandler)
 
     function inputHandler(event) {
         console.log(event)
         return true
     }
 
-    const output = document.getElementById("output")
-
-    function log(text) {
-        const log = document.createElement("div")
-        log.innerText = text
-        output.appendChild(log)
-    }
 </script>
 </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cm-chessboard",
-  "version": "4.1.10",
+  "version": "4.1.13",
   "description": "A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.",
   "keywords": [
     "chess",
@@ -27,6 +27,6 @@
   },
   "homepage": "https://github.com/shaack/cm-chessboard#readme",
   "devDependencies": {
-    "teevi": "^2.1.9"
+    "teevi": "^2.2.2"
   }
 }

package/src/cm-chessboard/Chessboard.js

@@ -6,8 +6,9 @@
 
 import {ChessboardState} from "./model/ChessboardState.js"
 import {Position} from "./model/Position.js"
-import {ChessboardViewAccessible} from "./view/ChessboardViewAccessible.js"
 import {PositionAnimationsQueue} from "./view/PositionAnimationsQueue.js"
+import {EXTENSION_POINT} from "./model/Extension.js"
+import {ChessboardView} from "./view/ChessboardView.js"
 
 export const COLOR = {
     white: "w",
@@ -46,6 +47,7 @@ export class Chessboard {
         }
         this.context = context
         this.id = (Math.random() + 1).toString(36).substring(2, 8)
+        this.extensions = []
         let defaultProps = {
             position: "empty", // set as fen, "start" or "empty"
             orientation: COLOR.white, // white on bottom
@@ -92,10 +94,11 @@ export class Chessboard {
         }
 
         this.state = new ChessboardState()
-        this.view = new ChessboardViewAccessible(this)
+        this.view = new ChessboardView(this)
+        // callback Extension
         this.positionAnimationsQueue = new PositionAnimationsQueue(this)
         this.state.orientation = this.props.orientation
-        this.view.redraw()
+        this.view.redrawBoard()
         this.state.position = new Position(this.props.position)
         this.view.redrawPieces()
     }
@@ -105,18 +108,21 @@ export class Chessboard {
     async setPiece(square, piece, animated = false) {
         const positionFrom = this.state.position.clone()
         this.state.position.setPiece(square, piece)
+        this.state.invokeExtensionPoints(EXTENSION_POINT.positionChanged)
         return this.positionAnimationsQueue.enqueuePositionChange(positionFrom, this.state.position.clone(), animated)
     }
 
     async movePiece(squareFrom, squareTo, animated = false) {
         const positionFrom = this.state.position.clone()
         this.state.position.movePiece(squareFrom, squareTo)
+        this.state.invokeExtensionPoints(EXTENSION_POINT.positionChanged)
         return this.positionAnimationsQueue.enqueuePositionChange(positionFrom, this.state.position.clone(), animated)
     }
 
     async setPosition(fen, animated = false) {
         const positionFrom = this.state.position.clone()
         this.state.position.setFen(fen)
+        this.state.invokeExtensionPoints(EXTENSION_POINT.positionChanged)
         return this.positionAnimationsQueue.enqueuePositionChange(positionFrom, this.state.position.clone(), animated)
     }
 
@@ -127,6 +133,7 @@ export class Chessboard {
             return
         }
         this.boardTurning = true
+        this.state.invokeExtensionPoints(EXTENSION_POINT.boardChanged)
         return this.positionAnimationsQueue.enqueueTurnBoard(position, color, animated).then(() => {
             this.boardTurning = false
         })
@@ -213,6 +220,7 @@ export class Chessboard {
     }
 
     destroy() {
+        this.state.invokeExtensionPoints(EXTENSION_POINT.destroy)
         this.positionAnimationsQueue.destroy()
         this.view.destroy()
         this.view = undefined
@@ -222,7 +230,6 @@ export class Chessboard {
             this.context.removeEventListener("mouseup", this.squareSelectListener)
             this.context.removeEventListener("touchend", this.squareSelectListener)
         }
-        this.destroyed = true
     }
 
 }

package/src/cm-chessboard/{view/ChessboardViewAccessible.js → extensions/Accessibility.js}

@@ -3,9 +3,9 @@
  * Repository: https://github.com/shaack/cm-chessboard
  * License: MIT, see file 'LICENSE'
  */
-import {ChessboardView, renderPieceTitle} from "./ChessboardView.js"
+import {Extension, EXTENSION_POINT} from "../model/Extension.js"
+import {piecesTranslations, renderPieceTitle} from "../view/ChessboardView.js"
 import {COLOR, INPUT_EVENT_TYPE} from "../Chessboard.js"
-import {piecesTranslations} from "./ChessboardView.js"
 
 const hlTranslations = {
     de: {
@@ -32,17 +32,23 @@ const hlTranslations = {
     }
 }
 
-export class ChessboardViewAccessible extends ChessboardView {
+export class Accessibility extends Extension {
 
-    constructor(chessboard, callbackAfterCreation) {
-        super(chessboard, callbackAfterCreation)
-        this.lang = this.chessboard.props.language
+    constructor(chessboard, props) {
+        super(chessboard, props)
+        this.props = {
+            brailleNotationInAlt: true, // show the braille notation of the game in the alt attribute of the SVG
+            boardAsTable: false, // display the board additionally as HTML table
+            movePieceForm: false, // display a form to move a piece (from, to, move)
+            piecesAsList: false, // display the pieces additionally as List
+            visuallyHidden: true // hide all those extra outputs visually but keep them accessible for screen readers and braille displays
+        }
+        Object.assign(this.props, props)
+        this.lang = chessboard.props.language
         this.translations = piecesTranslations
         this.t = this.translations[this.lang]
         this.th = hlTranslations[this.lang]
-
-        const accessibilityProps = chessboard.props.accessibility
-        if (accessibilityProps.movePieceForm) {
+        if (this.props.movePieceForm) {
             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}"/>
@@ -52,12 +58,12 @@ export class ChessboardViewAccessible extends ChessboardView {
             this.inputFrom = this.form.querySelector(".input-from")
             this.inputTo = this.form.querySelector(".input-to")
             this.moveButton = this.form.querySelector(".button-move")
-            if (accessibilityProps.visuallyHidden) {
+            if (this.props.visuallyHidden) {
                 this.movePieceFormContainer.classList.add("visually-hidden")
             }
             this.form.addEventListener("submit", (evt) => {
                 evt.preventDefault()
-                if (this.moveInputCallback({
+                if (this.chessboard.view.moveInputCallback({
                     chessboard: this.chessboard,
                     type: INPUT_EVENT_TYPE.moveDone,
                     squareFrom: this.inputFrom.value,
@@ -72,28 +78,47 @@ export class ChessboardViewAccessible extends ChessboardView {
             })
             this.chessboard.context.appendChild(this.movePieceFormContainer)
         }
-        if (accessibilityProps.boardAsTable) {
+        if (this.props.boardAsTable) {
             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.context.appendChild(this.boardAsTableContainer)
-            if (accessibilityProps.visuallyHidden) {
+            if (this.props.visuallyHidden) {
                 this.boardAsTableContainer.classList.add("visually-hidden")
             }
         }
-        if (accessibilityProps.piecesAsList) {
+        if (this.props.piecesAsList) {
             this.piecesListContainer = this.createElement(`<div><h3>${this.th.pieces_lists}</h3><div class="list"></div></div>`)
             this.piecesList = this.piecesListContainer.querySelector(".list")
             this.chessboard.context.appendChild(this.piecesListContainer)
-            if (accessibilityProps.visuallyHidden) {
+            if (this.props.visuallyHidden) {
                 this.piecesListContainer.classList.add("visually-hidden")
             }
         }
-        this.updateFormInputs()
-    }
+        this.registerExtensionPoint(EXTENSION_POINT.moveInputStateChanged, () => {
+            this.updateFormInputs()
+        })
+        this.registerExtensionPoint(EXTENSION_POINT.positionChanged, () => {
+            if(!this.chessboard.state.destroyed) {
+                this.redrawPositionInAltAttribute()
+                if (this.props.boardAsTable) {
+                    this.redrawBoardAsTable()
+                }
+                if (this.props.piecesAsList) {
+                    this.redrawPiecesLists()
+                }
+            }
+        })
+        setTimeout(() => {
+            this.updateFormInputs()
+            this.redrawPositionInAltAttribute()
+            if (this.props.boardAsTable) {
+                this.redrawBoardAsTable()
+            }
+            if (this.props.piecesAsList) {
+                this.redrawPiecesLists()
+            }
 
-    visualizeInputState() {
-        super.visualizeInputState()
-        this.updateFormInputs()
+        })
     }
 
     updateFormInputs() {
@@ -110,21 +135,6 @@ export class ChessboardViewAccessible extends ChessboardView {
         }
     }
 
-    redrawPieces(squares = this.chessboard.state.position.squares) {
-        super.redrawPieces(squares)
-        setTimeout(() => {
-            if(!this.chessboard.destroyed) {
-                this.redrawPositionInAltAttribute()
-                if (this.chessboard.props.accessibility.boardAsTable) {
-                    this.redrawBoardAsTable()
-                }
-                if (this.chessboard.props.accessibility.piecesAsList) {
-                    this.redrawPiecesLists()
-                }
-            }
-        })
-    }
-
     redrawPositionInAltAttribute() {
         const pieces = this.chessboard.state.position.getPieces()
         let listW = piecesTranslations[this.lang].colors.w.toUpperCase() + ":"
@@ -169,7 +179,7 @@ ${listB}`
             files.reverse()
             squares.reverse()
         }
-        let html = `<table><caption>${this.th.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>`
         }

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

@@ -15,6 +15,7 @@ export class ChessboardState {
         this.inputBlackEnabled = false
         this.inputEnabled = false
         this.squareSelectEnabled = false
+        this.extensionPoints = {}
     }
 
     setPosition(fen, animated = false) {
@@ -65,4 +66,15 @@ export class ChessboardState {
         }
     }
 
+    invokeExtensionPoints(name, data = undefined) {
+        const extensionPoints = this.extensionPoints[name]
+        if(extensionPoints) {
+            for (const extensionPoint of extensionPoints) {
+                setTimeout(() => {
+                    extensionPoint(data)
+                })
+            }
+        }
+    }
+
 }

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

@@ -0,0 +1,28 @@
+/**
+ * Author and copyright: Stefan Haack (https://shaack.com)
+ * Repository: https://github.com/shaack/cm-chessboard
+ * License: MIT, see file 'LICENSE'
+ */
+
+export const EXTENSION_POINT = {
+    positionChanged: "positionChanged",
+    boardChanged: "boardChanged",
+    moveInputStateChanged: "moveInputStateChanged",
+    destroy: "destroy"
+}
+
+export class Extension {
+
+    constructor(chessboard, props) {
+        this.chessboard = chessboard
+        this.props = props
+    }
+
+    registerExtensionPoint(name, callback) {
+        if(!this.chessboard.state.extensionPoints[name]) {
+            this.chessboard.state.extensionPoints[name] = []
+        }
+        this.chessboard.state.extensionPoints[name].push(callback)
+    }
+
+}

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

@@ -7,6 +7,7 @@
 import {VisualMoveInput} from "./VisualMoveInput.js"
 import {COLOR, INPUT_EVENT_TYPE, BORDER_TYPE} from "../Chessboard.js"
 import {Position} from "../model/Position.js"
+import {EXTENSION_POINT} from "../model/Extension.js"
 
 export const piecesTranslations = {
     en: {
@@ -81,7 +82,7 @@ export class ChessboardView {
         this.createSvgAndGroups()
         this.updateMetrics()
         this.handleResize()
-        this.redraw()
+        this.redrawBoard()
     }
 
     pointerDownHandler(e) {
@@ -165,15 +166,15 @@ export class ChessboardView {
         if (this.context.clientWidth !== this.width ||
             this.context.clientHeight !== this.height) {
             this.updateMetrics()
-            this.redraw()
+            this.redrawBoard()
             this.redrawPieces()
         }
         this.svg.setAttribute("width", "100%") // safari bugfix
         this.svg.setAttribute("height", "100%")
     }
 
-    redraw() {
-        this.drawBoard()
+    redrawBoard() {
+        this.redrawSquares()
         this.drawCoordinates()
         this.drawMarkers()
         this.visualizeInputState()
@@ -181,7 +182,7 @@ export class ChessboardView {
 
     // Board //
 
-    drawBoard() {
+    redrawSquares() {
         while (this.boardGroup.firstChild) {
             this.boardGroup.removeChild(this.boardGroup.lastChild)
         }
@@ -383,39 +384,45 @@ export class ChessboardView {
     // callbacks //
 
     moveStartCallback(square) {
+        const data = {
+            chessboard: this.chessboard,
+            type: INPUT_EVENT_TYPE.moveStart,
+            square: square
+        }
+        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInputStateChanged, data)
         if (this.moveInputCallback) {
-            return this.moveInputCallback({
-                chessboard: this.chessboard,
-                type: INPUT_EVENT_TYPE.moveStart,
-                square: square
-            })
+            return this.moveInputCallback(data)
         } else {
             return true
         }
     }
 
     moveDoneCallback(squareFrom, squareTo) {
+        const data = {
+            chessboard: this.chessboard,
+            type: INPUT_EVENT_TYPE.moveDone,
+            squareFrom: squareFrom,
+            squareTo: squareTo
+        }
+        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInputStateChanged, data)
         if (this.moveInputCallback) {
-            return this.moveInputCallback({
-                chessboard: this.chessboard,
-                type: INPUT_EVENT_TYPE.moveDone,
-                squareFrom: squareFrom,
-                squareTo: squareTo
-            })
+            return this.moveInputCallback(data)
         } else {
             return true
         }
     }
 
     moveCanceledCallback(reason, squareFrom, squareTo) {
+        const data = {
+            chessboard: this.chessboard,
+            type: INPUT_EVENT_TYPE.moveCanceled,
+            reason: reason,
+            squareFrom: squareFrom,
+            squareTo: squareTo
+        }
+        this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInputStateChanged, data)
         if (this.moveInputCallback) {
-            this.moveInputCallback({
-                chessboard: this.chessboard,
-                type: INPUT_EVENT_TYPE.moveCanceled,
-                reason: reason,
-                squareFrom: squareFrom,
-                squareTo: squareTo
-            })
+            this.moveInputCallback(data)
         }
     }
 

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

@@ -259,7 +259,7 @@ export class PositionAnimationsQueue extends PromiseQueue {
                 position, emptyPosition, animated ? duration : 0,
                 () => {
                     this.chessboard.state.orientation = color
-                    this.chessboard.view.redraw()
+                    this.chessboard.view.redrawBoard()
                     this.chessboard.view.redrawPieces(emptyPosition.squares)
                     new PositionsAnimation(this.chessboard.view,
                         emptyPosition, position, animated ? duration : 0,