cm-chessboard 7.11.0 → 8.0.1

package/README.md

@@ -88,26 +88,25 @@ Below is the default configuration
 
 ```javascript
 this.props = {
-  position: FEN.empty, // set position as fen, use FEN.start or FEN.empty as shortcuts
-  orientation: COLOR.white, // white on bottom
-  responsive: true, // resize the board automatically to the size of the context element
-  language: navigator.language.substring(0, 2).toLowerCase(), // supports "de" and "en" for now, used for pieces naming
-  assetsUrl: "./assets/", // put all css and sprites in this folder, will be ignored for absolute urls of assets files
-  assetsCache: true, // cache sprites
-  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
-    pieces: {
-      type: PIECES_FILE_TYPE.svgSprite, // pieces are in an SVG sprite, no other type supported for now
-      file: "pieces/standard.svg", // the filename of the sprite in `assets/pieces/` or an absolute url like `https://…` or `/…`
-      tileSize: 40 // the tile size in the sprite
+    position: FEN.empty, // set position as fen, use FEN.start or FEN.empty as shortcuts
+    orientation: COLOR.white, // white on bottom
+    responsive: true, // resize the board automatically to the size of the context element
+    language: navigator.language.substring(0, 2).toLowerCase(), // supports "de" and "en" for now, used for pieces naming
+    assetsUrl: "./assets/", // put all css and sprites in this folder, will be ignored for absolute urls of assets files
+    assetsCache: true, // cache sprites
+    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
+        pieces: {
+            type: PIECES_FILE_TYPE.svgSprite, // pieces are in an SVG sprite, no other type supported for now
+            file: "pieces/standard.svg", // the filename of the sprite in `assets/pieces/` or an absolute url like `https://…` or `/…`
+            tileSize: 40 // the tile size in the sprite
+        },
+        animationDuration: 300 // pieces animation duration in milliseconds. Disable all animations with `0`
     },
-    // pieces animation duration in milliseconds. Disable all animations with `0`. Respects the operating system settings for reduced motion.
-    animationDuration: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 300
-  },
-  extensions: [ /* {class: ExtensionClass, props: { ... }} */] // add extensions here
+    extensions: [ /* {class: ExtensionClass, props: { ... }} */] // add extensions here
 }
 ```
 
@@ -246,32 +245,6 @@ chessboard.enableMoveInput((event) => {
 
 Disables moves via user input.
 
-### enableSquareSelect(eventHandler)
-
-> `enableSquareSelect` is deprecated and will be removed in future versions, because you can directly add events to the `chessboard.context` and then read the square from `event.target.getAttribute("data-square")`.
-
-Enables primary and secondary pointer events on squares.
-On desktop devices this means left and right click on squares.
-
-```javascript
-board.enableSquareSelect((event) => {
-    switch (event.type) {
-        case SQUARE_SELECT_TYPE.primary:
-        // left click
-        case SQUARE_SELECT_TYPE.secondary:
-        // right click
-    }
-})
-```
-
-[Example for pointer events handling](https://shaack.com/projekte/cm-chessboard/examples/extensions/markers-extension.html)
-
-**`event.square`** contains the coordinates of the user input.
-
-### disableSquareSelect()
-
-Disables the square select.
-
 ## Piece sets
 
 cm-chessboard supports alternative piece sets. A piece set is defined in an SVG sprite. cm-chessboard is shipped with

package/examples/validate-moves.html

@@ -61,8 +61,8 @@
             const move = {from: event.squareFrom, to: event.squareTo, promotion: event.promotion}
             const result = chess.move(move)
             if (result) {
-                this.chessboard.state.moveInputProcess.then(() => { // wait for the move input process has finished
-                    this.chessboard.setPosition(chess.fen(), true).then(() => { // update position, maybe castled and wait for animation has finished
+                event.chessboard.state.moveInputProcess.then(() => { // wait for the move input process has finished
+                    event.chessboard.setPosition(chess.fen(), true).then(() => { // update position, maybe castled and wait for animation has finished
                         makeEngineMove(event.chessboard)
                     })
                 })

package/package.json

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

package/src/Chessboard.js

@@ -70,8 +70,7 @@ export class Chessboard {
                     file: "pieces/standard.svg", // the filename of the sprite in `assets/pieces/` or an absolute url like `https://…` or `/…`
                     tileSize: 40 // the tile size in the sprite
                 },
-                // pieces animation duration in milliseconds. Disable all animations with `0`. Respects the operating system settings for reduced motion.
-                animationDuration: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 300
+                animationDuration: 300 // pieces animation duration in milliseconds. Disable all animations with `0`
             },
             extensions: [ /* {class: ExtensionClass, props: { ... }} */] // add extensions here
         }
@@ -153,54 +152,6 @@ export class Chessboard {
         this.view.disableMoveInput()
     }
 
-    /**
-     * This will be removed in the future, because you can directly assign events
-     * to the `chessboard.context` and then read the square from the `event.target`
-     * @deprecated
-     */
-    enableSquareSelect(eventHandler) {
-        console.warn("chessboard.enableSquareSelect() is deprecated will be removed in future versions");
-        if (this.squareSelectListener) {
-            console.warn("squareSelectListener already existing")
-            return
-        }
-        this.squareSelectListener = function (e) {
-            const square = e.target.getAttribute("data-square")
-            if (e.type === "contextmenu") {
-                // disable context menu
-                e.preventDefault()
-                return
-            }
-            eventHandler({
-                mouseEvent: e,
-                chessboard: this,
-                type: e.button === 2 ? SQUARE_SELECT_TYPE.secondary : SQUARE_SELECT_TYPE.primary,
-                square: square
-            })
-        }
-        this.context.addEventListener("contextmenu", this.squareSelectListener)
-        this.context.addEventListener("mousedown", this.squareSelectListener)
-        this.context.addEventListener("mouseup", this.squareSelectListener)
-        this.context.addEventListener("touchstart", this.squareSelectListener, {passive: false})
-        this.context.addEventListener("touchend", this.squareSelectListener)
-        this.state.squareSelectEnabled = true
-        this.view.visualizeInputState()
-    }
-
-    /**
-     * @deprecated
-     */
-    disableSquareSelect() {
-        this.context.removeEventListener("contextmenu", this.squareSelectListener)
-        this.context.removeEventListener("mousedown", this.squareSelectListener)
-        this.context.removeEventListener("mouseup", this.squareSelectListener)
-        this.context.removeEventListener("touchstart", this.squareSelectListener)
-        this.context.removeEventListener("touchend", this.squareSelectListener)
-        this.squareSelectListener = undefined
-        this.state.squareSelectEnabled = false
-        this.view.visualizeInputState()
-    }
-
     addExtension(extensionClass, props) {
         if(this.getExtension(extensionClass)) {
             throw Error("extension \"" + extensionClass.name + "\" already added")
@@ -219,9 +170,6 @@ export class Chessboard {
 
     destroy() {
         this.state.invokeExtensionPoints(EXTENSION_POINT.destroy)
-        if (this.state.squareSelectEnabled) {
-            this.disableSquareSelect()
-        }
         this.positionAnimationsQueue.destroy()
         this.view.destroy()
         this.view = undefined

package/src/extensions/accessibility/Accessibility.js

@@ -121,7 +121,7 @@ class MovePieceForm {
         this.moveButton = this.form.querySelector(".button-move")
         this.form.addEventListener("submit", (evt) => {
             evt.preventDefault()
-            if (this.chessboard.view.moveInputCallback({
+            if (this.chessboard.state.moveInputCallback({
                 chessboard: this.chessboard,
                 type: INPUT_EVENT_TYPE.validateMoveInput,
                 squareFrom: this.inputFrom.value,

package/src/model/ChessboardState.js

@@ -12,12 +12,15 @@ export class ChessboardState {
         this.orientation = undefined
         this.inputWhiteEnabled = false
         this.inputBlackEnabled = false
-        this.inputEnabled = false
-        this.squareSelectEnabled = false
+        this.moveInputCallback = null
         this.extensionPoints = {}
         this.moveInputProcess = Promise.resolve()
     }
 
+    inputEnabled() {
+        return this.inputWhiteEnabled || this.inputBlackEnabled
+    }
+
     invokeExtensionPoints(name, data = {}) {
         const extensionPoints = this.extensionPoints[name]
         const dataCloned = Object.assign({}, data)

package/src/view/ChessboardView.js

@@ -127,7 +127,7 @@ export class ChessboardView {
             this.redrawBoard()
             this.redrawPieces()
         }
-        this.svg.setAttribute("width", "100%") // safari bugfix
+        this.svg.setAttribute("width", "100%")
         this.svg.setAttribute("height", "100%")
     }
 
@@ -306,7 +306,7 @@ export class ChessboardView {
     // enable and disable move input //
 
     enableMoveInput(eventHandler, color = null) {
-        if (this.moveInputCallback) {
+        if (this.chessboard.state.moveInputCallback) {
             throw Error("moveInput already enabled")
         }
         if (color === COLOR.white) {
@@ -317,8 +317,7 @@ export class ChessboardView {
             this.chessboard.state.inputWhiteEnabled = true
             this.chessboard.state.inputBlackEnabled = true
         }
-        this.chessboard.state.inputEnabled = true
-        this.moveInputCallback = eventHandler
+        this.chessboard.state.moveInputCallback = eventHandler
         this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInputToggled, {enabled: true, color: color})
         this.visualizeInputState()
     }
@@ -326,8 +325,7 @@ export class ChessboardView {
     disableMoveInput() {
         this.chessboard.state.inputWhiteEnabled = false
         this.chessboard.state.inputBlackEnabled = false
-        this.chessboard.state.inputEnabled = false
-        this.moveInputCallback = null
+        this.chessboard.state.moveInputCallback = null
         this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInputToggled, {enabled: false})
         this.visualizeInputState()
     }
@@ -342,8 +340,8 @@ export class ChessboardView {
             squareFrom: square,
             piece: this.chessboard.getPiece(square)
         }
-        if (this.moveInputCallback) {
-            data.moveInputCallbackResult = this.moveInputCallback(data)
+        if (this.chessboard.state.moveInputCallback) {
+            data.moveInputCallbackResult = this.chessboard.state.moveInputCallback(data)
         }
         this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
         return data.moveInputCallbackResult
@@ -368,8 +366,8 @@ export class ChessboardView {
             squareTo: squareTo,
             piece: this.chessboard.getPiece(squareFrom)
         }
-        if (this.moveInputCallback) {
-            data.moveInputCallbackResult = this.moveInputCallback(data)
+        if (this.chessboard.state.moveInputCallback) {
+            data.moveInputCallbackResult = this.chessboard.state.moveInputCallback(data)
         }
         this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
         return data.moveInputCallbackResult
@@ -383,8 +381,8 @@ export class ChessboardView {
             squareFrom: squareFrom,
             squareTo: squareTo
         }
-        if (this.moveInputCallback) {
-            this.moveInputCallback(data)
+        if (this.chessboard.state.moveInputCallback) {
+            this.chessboard.state.moveInputCallback(data)
         }
         this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
     }
@@ -397,8 +395,8 @@ export class ChessboardView {
             squareTo: squareTo,
             legalMove: legalMove
         }
-        if (this.moveInputCallback) {
-            this.moveInputCallback(data)
+        if (this.chessboard.state.moveInputCallback) {
+            this.chessboard.state.moveInputCallback(data)
         }
         this.chessboard.state.invokeExtensionPoints(EXTENSION_POINT.moveInput, data)
     }
@@ -407,7 +405,7 @@ export class ChessboardView {
 
     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) {
+            if (this.chessboard.state.inputWhiteEnabled || this.chessboard.state.inputBlackEnabled) {
                 this.boardGroup.setAttribute("class", "board input-enabled")
             } else {
                 this.boardGroup.setAttribute("class", "board")

package/src/view/VisualMoveInput.js

@@ -142,7 +142,7 @@ export class VisualMoveInput {
                 if (MOVE_INPUT_STATE.pieceClickedThreshold !== prevState) {
                     throw new Error("moveInputState")
                 }
-                if (this.view.chessboard.state.inputEnabled) {
+                if (this.view.chessboard.state.inputEnabled()) {
                     this.view.setPieceVisibility(params.square, false)
                     this.createDraggablePiece(params.piece)
                 }
@@ -152,7 +152,7 @@ export class VisualMoveInput {
                 if (MOVE_INPUT_STATE.secondClickThreshold !== prevState) {
                     throw new Error("moveInputState")
                 }
-                if (this.view.chessboard.state.inputEnabled) {
+                if (this.view.chessboard.state.inputEnabled()) {
                     this.view.setPieceVisibility(params.square, false)
                     this.createDraggablePiece(params.piece)
                 }
@@ -244,6 +244,7 @@ export class VisualMoveInput {
         }
         if(e.type === "mousedown") { // another try to prevent strange safari desktop select all bug
             e.preventDefault()
+            e.stopPropagation()
         }
         const square = e.target.getAttribute("data-square")
         if (!square) { // pointer on square
@@ -317,6 +318,7 @@ export class VisualMoveInput {
             pageY = e.pageY
             target = e.target
             e.preventDefault() // trying to prevent strange safari desktop bug, selecting the whole page on drag
+            e.stopPropagation()
         } else if (e.type === "touchmove") {
             clientX = e.touches[0].clientX
             clientY = e.touches[0].clientY
@@ -334,7 +336,7 @@ export class VisualMoveInput {
                 } else {
                     this.setMoveInputState(MOVE_INPUT_STATE.dragTo, {square: this.fromSquare, piece: this.movedPiece})
                 }
-                if (this.view.chessboard.state.inputEnabled) {
+                if (this.view.chessboard.state.inputEnabled()) {
                     this.moveDraggablePiece(pageX, pageY)
                 }
             }
@@ -353,7 +355,7 @@ export class VisualMoveInput {
                 this.movingOverSquareCallback(this.fromSquare, null)
             }
 
-            if (this.view.chessboard.state.inputEnabled && (this.moveInputState === MOVE_INPUT_STATE.dragTo || this.moveInputState === MOVE_INPUT_STATE.clickDragTo)) {
+            if (this.view.chessboard.state.inputEnabled() && (this.moveInputState === MOVE_INPUT_STATE.dragTo || this.moveInputState === MOVE_INPUT_STATE.clickDragTo)) {
                 this.moveDraggablePiece(pageX, pageY)
             }
         }