cm-chessboard 4.1.12 → 4.3.1

package/README.md

@@ -16,7 +16,8 @@ aspects of chess games.
 - [Can handle moves input via click or drag](https://shaack.com/projekte/cm-chessboard/examples/validate-moves.html)
 - [Styleable via css](https://shaack.com/projekte/cm-chessboard/examples/different-styles.html)
 - [Supports multiple piece sets](https://shaack.com/projekte/cm-chessboard/examples/different-styles.html)
-- [Supports an optimized usage for visually impaired people](https://shaack.com/projekte/cm-chessboard/examples/accessible-chessboard.html) 🆕
+- [Supports an optimized usage for visually impaired people](https://shaack.com/projekte/cm-chessboard/examples/accessible-chessboard.html)
+  🆕
 - Uses SVG for rendering
 - Vanilla JavaScript modules in ECMAScript 6 syntax
 - **No dependencies**
@@ -48,7 +49,7 @@ dependencies.
 
 > With the new version 4 of cm-chessboard I completely redesigned the animation of positions with
 > the use of promises.
- 
+
 The pieces animations are now smoother and less error-prone for race conditions.
 
 As of version 4.x, the API functions `setPosition()`, `setPiece()` and `movePiece()` are **not animated** as default.
@@ -84,24 +85,24 @@ Below is the default configuration
 
 ```javascript
 let defaultProps = {
-  position: "empty", // set as fen, "start" or "empty"
-  orientation: COLOR.white, // white on bottom
-  responsive: true, // resize the board automatically to the size of the context element
-  animationDuration: 300, // pieces animation duration in milliseconds. Disable all animation with `0`.
-  language: navigator.language.substring(0,2).toLowerCase(), // supports "de" and "en" for now, used for pieces naming
-  style: {
-    cssClass: "default", // set the css theme of the board, try "green", "blue" or "chess-club"
-    showCoordinates: true, // show ranks and files
-    borderType: BORDER_TYPE.none, // "thin" thin border, "frame" wide border with coordinates in it, "none" no border
-    aspectRatio: 1, // height/width of the board
-    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
-  },
-  sprite: {
-    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
-  }
+    position: "empty", // set as fen, "start" or "empty"
+    orientation: COLOR.white, // white on bottom
+    responsive: true, // resize the board automatically to the size of the context element
+    animationDuration: 300, // pieces animation duration in milliseconds. Disable all animation with `0`.
+    language: navigator.language.substring(0, 2).toLowerCase(), // supports "de" and "en" for now, used for pieces naming
+    style: {
+        cssClass: "default", // set the css theme of the board, try "green", "blue" or "chess-club"
+        showCoordinates: true, // show ranks and files
+        borderType: BORDER_TYPE.none, // "thin" thin border, "frame" wide border with coordinates in it, "none" no border
+        aspectRatio: 1, // height/width of the board
+        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
+    },
+    sprite: {
+        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
+    }
 }
 ```
 
@@ -330,7 +331,64 @@ chessboard.removeMarkers(undefined, myMarkerType)
 
 ## Extensions
 
-cm-chessboard provides the ability to extend its functionality with extensions. 
+cm-chessboard provides the ability to extend its functionality with extensions. Extensions extend the class `Extension`
+and have access to the chessboard and can register extension points.
+
+```js
+this.registerExtensionPoint(EXTENSION_POINT.moveInputStateChanged, (data) => {
+    // do something on move [start | cancel | done]
+    console.log(data)
+})
+```
+
+Enable extension via the chessboard props.
+
+```js
+const chessboard = new Chessboard(document.getElementById("board"), {
+    position: "start",
+    extensions: // list of used extensions
+        [{
+            class: ExtensionName, // this class of the extionsion
+            props: {
+                // configure your extions via its properties
+            }
+
+        }]
+})
+```
+
+### Extension `Accessibility`
+
+This extension ensures that visual impaired people can better use the chessboard. It displays the braille notation
+of the current position in the alt tag of the board image and enables a form to move the pieces via text input. It
+can also display the board as HTML table and the pieces as list.
+
+See example [Accessibility extension](https://shaack.com/projekte/cm-chessboard/examples/accessible-chessboard.html)
+
+#### Usage
+
+```js
+const chessboard = new Chessboard(document.getElementById("board"), {
+    position: "start",
+    sprite: {url: "../assets/images/chessboard-sprite.svg"},
+    // animationDuration: 0, // optional, set to 0 to disable animations
+    style: {
+        cssClass: "default-contrast" // make the coordinates better visible with the "default-contrast" theme
+    },
+    extensions:
+        [{
+            class: Accessibility,
+            props: {
+                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
+            }
+
+        }]
+})
+```
 
 ## Usage with React
 

package/examples/accessible-chessboard.html

@@ -9,13 +9,21 @@
 </head>
 <body>
 <h1><a href="../">cm-chessboard</a></h1>
-<h2>Example: Accessibility features enabled</h2>
+<h2>Example: Accessibility extension</h2>
 <p>
-    This example shows, how the accessibility features from cm-chessboard work.
-    They allow a better usage of the board for visually impaired
-    people. You can enable these features via configuration.
+    This example shows, how the accessibility extension from cm-chessboard works.
+    It allows a better usage of the board for visually impaired
+    people.
 </p>
-
+<h3>Features of the Accessibility extension</h3>
+<ul>
+    <li>Enable Braille notation in the alt text of the chessboard image</li>
+    <li>Display the chessboard additionally as HTML table</li>
+    <li>Display a form to move a piece (from, to, move)</li>
+    <li>Display the pieces additionally as List</li>
+    <li>Display these features visually hidden or not</li>
+</ul>
+<h3>The chessboard</h3>
 <div class="board green" id="board"></div>
 <button style="margin-bottom: 10px"
         onclick="window.setOrientation()">Switch Orientation
@@ -27,21 +35,26 @@
     const chessboard = new Chessboard(document.getElementById("board"), {
         position: "start",
         sprite: {url: "../assets/images/chessboard-sprite.svg"},
+        // animationDuration: 0, // optional, set to 0 to disable animations
         style: {
-            cssClass: "default-contrast"
-        }
+            cssClass: "default-contrast" // make the coordinates better visible with the "default-contrast" theme
+        },
+        extensions:
+            [{
+                class: Accessibility,
+                props: {
+                    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.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
-    })
 
     chessboard.enableMoveInput(inputHandler)
 

package/package.json

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

package/src/cm-chessboard/Chessboard.js

@@ -53,7 +53,7 @@ export class Chessboard {
             orientation: COLOR.white, // white on bottom
             responsive: true, // resize the board automatically to the size of the context element
             animationDuration: 300, // pieces animation duration in milliseconds. Disable all animation with `0`.
-            language: navigator.language.substring(0,2).toLowerCase(), // supports "de" and "en" for now, used for pieces naming
+            language: navigator.language.substring(0, 2).toLowerCase(), // supports "de" and "en" for now, used for pieces naming
             style: {
                 cssClass: "default", // set the css theme of the board, try "green", "blue" or "chess-club"
                 showCoordinates: true, // show ranks and files
@@ -67,27 +67,21 @@ export class Chessboard {
                 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
-            }
+            extensions: [ /* {class: ExtensionClass, props: { ... }} */ ] // add extensions here like this
         }
         this.props = {}
         Object.assign(this.props, defaultProps)
         Object.assign(this.props, props)
         this.props.sprite = defaultProps.sprite
         this.props.style = defaultProps.style
-        this.props.accessibility = defaultProps.accessibility
         if (props.sprite) {
             Object.assign(this.props.sprite, props.sprite)
         }
         if (props.style) {
             Object.assign(this.props.style, props.style)
         }
-        if (props.accessibility) {
-            Object.assign(this.props.accessibility, props.accessibility)
+        if (props.extensions) {
+            this.props.extensions = props.extensions
         }
         if (this.props.language !== "de" && this.props.language !== "en") {
             this.props.language = "en"
@@ -95,12 +89,15 @@ export class Chessboard {
 
         this.state = new ChessboardState()
         this.view = new ChessboardView(this)
-        // callback Extension
         this.positionAnimationsQueue = new PositionAnimationsQueue(this)
         this.state.orientation = this.props.orientation
         this.view.redrawBoard()
         this.state.position = new Position(this.props.position)
         this.view.redrawPieces()
+        // instantiate extensions
+        for (const extensionData of this.props.extensions) {
+            new extensionData.class(this, extensionData.props)
+        }
     }
 
     // API //
@@ -128,7 +125,7 @@ export class Chessboard {
 
     async setOrientation(color, animated = false) {
         const position = this.state.position.clone()
-        if(this.boardTurning) {
+        if (this.boardTurning) {
             console.log("setOrientation is only once in queue allowed")
             return
         }

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

@@ -98,7 +98,7 @@ export class Accessibility extends Extension {
             this.updateFormInputs()
         })
         this.registerExtensionPoint(EXTENSION_POINT.positionChanged, () => {
-            if(!this.chessboard.state.destroyed) {
+            if(this.chessboard.state) { // not destroyed
                 this.redrawPositionInAltAttribute()
                 if (this.props.boardAsTable) {
                     this.redrawBoardAsTable()
@@ -108,7 +108,7 @@ export class Accessibility extends Extension {
                 }
             }
         })
-        setTimeout(() => {
+        setTimeout(() => { // todo replace with something like this.chessboard.initialized.then(() => { ... })
             this.updateFormInputs()
             this.redrawPositionInAltAttribute()
             if (this.props.boardAsTable) {

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

@@ -66,12 +66,14 @@ export class ChessboardState {
         }
     }
 
-    invokeExtensionPoints(name, data = undefined) {
+    invokeExtensionPoints(name, data = {}) {
         const extensionPoints = this.extensionPoints[name]
+        const dataCloned = Object.assign({}, data);
+        dataCloned.extensionPoint = name
         if(extensionPoints) {
             for (const extensionPoint of extensionPoints) {
                 setTimeout(() => {
-                    extensionPoint(data)
+                    extensionPoint(dataCloned)
                 })
             }
         }