cm-chessboard 7.6.10 → 7.7.0

package/README.md

@@ -78,12 +78,12 @@ examples.
 Below is the default configuration
 
 ```javascript
-this.props = {
+        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
+  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"
@@ -92,7 +92,7 @@ this.props = {
     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: "standard.svg", // the filename of the sprite in `assets/pieces/`
+      file: "pieces/standard.svg", // the filename of the sprite in `assetsUrl` 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`.
@@ -451,10 +451,12 @@ you can call `chessboard.removeArrows(undefined, "e2")` and so on...
 
 To get all arrows, call `chessboard.getArrows()` without parameters, as with `removeArrows(type, from, to)`.
 
-## Usage with React
+## Usage with JS Frameworks
 
-There exists a ticket from someone who is using cm-chessboard with react:
-https://github.com/shaack/cm-chessboard/issues/20
+- Works with **Vue** out of the box
+- Works with **Svelte** out of the box
+- I don't use **React**, but there exists a ticket from someone who is using cm-chessboard with react: https://github.com/shaack/cm-chessboard/issues/20
+- It should work also with **all other JS frameworks**, because cm-chessboard is written in standard ES6 and has **no dependencies**.
 
 ## Licenses
 

package/examples/destroy-many-boards.html

@@ -40,7 +40,7 @@
     const largeBoard = new Chessboard(boardDiv, {
         position: FEN.start,
         assetsUrl: "../assets/",
-        style: {pieces: {file: "staunty.svg"}}
+        style: {pieces: {file: "pieces/staunty.svg"}}
     })
     const chess = new Chess()
     for (let i = 0; i < 5000; i++) {
@@ -51,7 +51,7 @@
             const board = new Chessboard(boardDiv, {
                 position: chess.fen(),
                 assetsUrl: "../assets/",
-                style: {pieces: {file: "staunty.svg"}}
+                style: {pieces: {file: "pieces/staunty.svg"}}
             })
             makeRandomMove()
             largeBoard.setPosition(chess.fen(), true)

package/examples/different-styles.html

@@ -31,7 +31,7 @@
             cssClass: "green",
             borderType: BORDER_TYPE.frame,
             pieces: {
-                file: "staunty.svg"
+                file: "pieces/staunty.svg"
             }
         }
     })
@@ -51,7 +51,7 @@
         style: {
             cssClass: "chess-club",
             borderType: BORDER_TYPE.frame,
-            pieces: {file: "staunty.svg"}
+            pieces: {file: "pieces/staunty.svg"}
         }
     })
     new Chessboard(document.getElementById("board4"), {
@@ -68,14 +68,14 @@
         position: FEN.start,
         assetsUrl: "../assets/",
         assetsCache: false,
-        style: {borderType: BORDER_TYPE.none, pieces: {file: "staunty.svg"}},
+        style: {borderType: BORDER_TYPE.none, pieces: {file: "pieces/staunty.svg"}},
     })
     new Chessboard(document.getElementById("board6"), {
         position: FEN.start,
         assetsUrl: "../assets/",
         assetsCache: false,
         style: {
-            pieces: {file: "staunty.svg"}, cssClass: "blue",
+            pieces: {file: "pieces/staunty.svg"}, cssClass: "blue",
             borderType: BORDER_TYPE.frame
         },
     })

package/examples/enable-input.html

@@ -20,7 +20,7 @@
 const board = new Chessboard(document.getElementById("board"), {
     position: FEN.start,
     assetsUrl: "../assets/",
-    style: {pieces: {file: "staunty.svg"}},
+    style: {pieces: {file: "pieces/staunty.svg"}},
     extensions: [{class: Markers}]
 })
 
@@ -52,7 +52,7 @@ function inputHandler(event) {
     window.board = new Chessboard(document.getElementById("board"), {
         position: FEN.start,
         assetsUrl: "../assets/",
-        style: {pieces: {file: "staunty.svg"}},
+        style: {pieces: {file: "pieces/staunty.svg"}},
         extensions: [{class: Markers}]
     })
 

package/examples/extensions/markers-extension.html

@@ -50,7 +50,7 @@
         position: "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR",
         assetsCache: false,
         assetsUrl: "../../assets/",
-        style: {pieces: {file: "staunty.svg"}},
+        style: {pieces: {file: "pieces/staunty.svg"}},
         extensions: [{class: Markers, autoMarkers: MARKER_TYPE.frame}]
     })
     board2.enableMoveInput(() => {

package/examples/extensions/promotion-dialog-extension.html

@@ -28,10 +28,7 @@
     const chessboard = new Chessboard(document.getElementById("chessboard"), {
         position: position,
         assetsUrl: "../../assets/",
-        extensions: [
-            {class: PromotionDialog},
-            {class: Markers}
-        ]
+        extensions: [{class: PromotionDialog}, {class: Markers}]
     })
     chessboard.enableMoveInput((event) => {
         if (event.type === INPUT_EVENT_TYPE.validateMoveInput) {

package/examples/many-boards.html

@@ -35,7 +35,7 @@
             responsive: false,
             position: game.fen(),
             assetsUrl: "../assets/",
-            style: {pieces: {file: "staunty.svg"}},
+            style: {pieces: {file: "pieces/staunty.svg"}},
         })
         makeRandomMove()
     }

package/examples/pieces-animation.html

@@ -51,7 +51,7 @@ await board.movePiece("d5", "f4")
         {
             position: FEN.start,
             assetsUrl: "../assets/",
-            style: {pieces: {file: "staunty.svg"}, animationDuration: 500}
+            style: {pieces: {file: "pieces/staunty.svg"}, animationDuration: 500}
         })
     let i = 0
     window.setPosition = (position, animated) => {

package/examples/responsive-board.html

@@ -24,7 +24,7 @@ new Chessboard(document.getElementById("board"), {
     new Chessboard(document.getElementById("board"), {
         position: FEN.start,
         assetsUrl: "../assets/",
-        style: {aspectRatio: 0.9, pieces: {file: "staunty.svg"}}
+        style: {aspectRatio: 0.9, pieces: {file: "pieces/staunty.svg"}}
     })
 </script>
 </body>

package/examples/simple-boards.html

@@ -19,7 +19,7 @@ new Chessboard(document.getElementById("board1"), {
 })
 new Chessboard(document.getElementById("board2"), {
     position: "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR w Gkq - 4 11",
-    style: {pieces: {file: "staunty.svg"},cssClass: "green", borderType: BORDER_TYPE.frame},
+    style: {pieces: {file: "pieces/staunty.svg"},cssClass: "green", borderType: BORDER_TYPE.frame},
     orientation: COLOR.black
 })
 </pre>
@@ -35,7 +35,7 @@ new Chessboard(document.getElementById("board2"), {
         position: "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR w Gkq - 4 11",
         assetsUrl: "../assets/",
         assetsCache: false,
-        style: {pieces: {file: "staunty.svg"},cssClass: "green", borderType: BORDER_TYPE.frame},
+        style: {pieces: {file: "pieces/staunty.svg"},cssClass: "green", borderType: BORDER_TYPE.frame},
         orientation: COLOR.black
     })
 </script>

package/examples/validate-moves.html

@@ -98,7 +98,7 @@
     const board = new Chessboard(document.getElementById("board"), {
         position: chess.fen(),
         assetsUrl: "../assets/",
-        style: {borderType: BORDER_TYPE.none, pieces: {file: "staunty.svg"}, animationDuration: 300},
+        style: {borderType: BORDER_TYPE.none, pieces: {file: "pieces/staunty.svg"}, animationDuration: 300},
         orientation: COLOR.white,
         extensions: [
             {class: Markers, props: {autoMarkers: MARKER_TYPE.square}},

package/package.json

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

package/src/Chessboard.js

@@ -56,7 +56,7 @@ export class Chessboard {
             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
+            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"
@@ -65,7 +65,7 @@ export class Chessboard {
                 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: "standard.svg", // the filename of the sprite in `assets/pieces/`
+                    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`.

package/src/extensions/arrows/Arrows.js

@@ -6,6 +6,7 @@
 
 import {Extension, EXTENSION_POINT} from "../../model/Extension.js"
 import {Svg} from "../../lib/Svg.js"
+import {Utils} from "../../lib/Utils.js"
 
 export const ARROW_TYPE = {
     default: {class: "arrow-default", slice: "arrowDefault", headSize: 7},
@@ -22,12 +23,11 @@ export class Arrows extends Extension {
             this.onRedrawBoard()
         })
         this.props = {
-            sprite: "arrows.svg"
+            sprite: "extensions/arrows/arrows.svg"
         }
         Object.assign(this.props, props)
         if (this.chessboard.props.assetsCache) {
-            this.chessboard.view.cacheSpriteToDiv("cm-chessboard-arrows",
-                this.chessboard.props.assetsUrl + "extensions/arrows/" + this.props.sprite)
+            this.chessboard.view.cacheSpriteToDiv("cm-chessboard-arrows", this.getSpriteUrl())
         }
         chessboard.addArrow = this.addArrow.bind(this)
         chessboard.getArrows = this.getArrows.bind(this)
@@ -52,8 +52,7 @@ export class Arrows extends Extension {
         const view = this.chessboard.view
         const sqfrom = document.querySelectorAll('[data-square="' + arrow.from + '"]')[0]
         const sqto = document.querySelectorAll('[data-square="' + arrow.to + '"]')[0]
-        const spriteUrl = this.chessboard.props.assetsCache ? "" : this.chessboard.props.assetsUrl +
-            "extensions/arrows/" + this.props.sprite
+        const spriteUrl = this.chessboard.props.assetsCache ? "" : this.getSpriteUrl()
         const defs = Svg.addElement(arrowsGroup, "defs")
         const id = "arrow-" + arrow.from + arrow.to
         const marker = Svg.addElement(defs, "marker", {
@@ -109,6 +108,14 @@ export class Arrows extends Extension {
         this.arrows = this.arrows.filter((arrow) => !arrow.matches(from, to, type))
         this.chessboard.view.redrawBoard()
     }
+
+    getSpriteUrl() {
+        if(Utils.isAbsoluteUrl(this.props.sprite)) {
+            return this.props.sprite
+        } else {
+            return this.chessboard.props.assetsUrl + this.props.sprite
+        }
+    }
 }
 
 class Arrow {

package/src/extensions/markers/Markers.js

@@ -7,6 +7,7 @@
 import {Extension, EXTENSION_POINT} from "../../model/Extension.js"
 import {Svg} from "../../lib/Svg.js"
 import {INPUT_EVENT_TYPE} from "../../Chessboard.js"
+import {Utils} from "../../lib/Utils.js"
 
 export const MARKER_TYPE = {
     frame: {class: "marker-frame", slice: "markerFrame"},
@@ -30,12 +31,11 @@ export class Markers extends Extension {
         })
         this.props = {
             autoMarkers: MARKER_TYPE.frame, // set to `null` to disable autoMarkers
-            sprite: "markers.svg" // the sprite file of the markers
+            sprite: "extensions/markers/markers.svg" // the sprite file of the markers
         }
         Object.assign(this.props, props)
         if (chessboard.props.assetsCache) {
-            chessboard.view.cacheSpriteToDiv("cm-chessboard-markers", this.chessboard.props.assetsUrl +
-                "extensions/markers/" + this.props.sprite)
+            chessboard.view.cacheSpriteToDiv("cm-chessboard-markers", this.getSpriteUrl())
         }
         chessboard.addMarker = this.addMarker.bind(this)
         chessboard.getMarkers = this.getMarkers.bind(this)
@@ -95,8 +95,7 @@ export class Markers extends Extension {
         const transform = (this.chessboard.view.svg.createSVGTransform())
         transform.setTranslate(point.x, point.y)
         markerGroup.transform.baseVal.appendItem(transform)
-        const spriteUrl = this.chessboard.props.assetsCache ? "" : this.chessboard.props.assetsUrl +
-            "extensions/markers/" + this.props.sprite
+        const spriteUrl = this.chessboard.props.assetsCache ? "" : this.getSpriteUrl()
         const markerUse = Svg.addElement(markerGroup, "use",
             {href: `${spriteUrl}#${marker.type.slice}`, class: "marker " + marker.type.class})
         const transformScale = (this.chessboard.view.svg.createSVGTransform())
@@ -136,6 +135,14 @@ export class Markers extends Extension {
         this.markers = this.markers.filter((marker) => !marker.matches(square, type))
         this.onRedrawBoard()
     }
+
+    getSpriteUrl() {
+        if(Utils.isAbsoluteUrl(this.props.sprite)) {
+            return this.props.sprite
+        } else {
+            return this.chessboard.props.assetsUrl + this.props.sprite
+        }
+    }
 }
 
 class Marker {

package/src/lib/Utils.js

@@ -55,4 +55,8 @@ export class Utils {
         return promise
     }
 
+    static isAbsoluteUrl(url) {
+        return url.indexOf("://") !== -1 || url.startsWith("/")
+    }
+
 }

package/src/view/ChessboardView.js

@@ -9,6 +9,7 @@ import {BORDER_TYPE, COLOR, INPUT_EVENT_TYPE} from "../Chessboard.js"
 import {Position} from "../model/Position.js"
 import {EXTENSION_POINT} from "../model/Extension.js"
 import {Svg} from "../lib/Svg.js"
+import {Utils} from "../lib/Utils.js"
 
 export class ChessboardView {
     constructor(chessboard) {
@@ -64,7 +65,9 @@ export class ChessboardView {
     cacheSpriteToDiv(wrapperId, url) {
         if (!document.getElementById(wrapperId)) {
             const wrapper = document.createElement("div")
-            wrapper.style.display = "none"
+            wrapper.style.transform = "scale(0)"
+            wrapper.style.position = "absolute"
+            wrapper.setAttribute("aria-hidden", "true")
             wrapper.id = wrapperId
             document.body.appendChild(wrapper)
             const xhr = new XMLHttpRequest()
@@ -435,6 +438,10 @@ export class ChessboardView {
     }
 
     getSpriteUrl() {
-        return this.chessboard.props.assetsUrl + "pieces/" + this.chessboard.props.style.pieces.file
+        if(Utils.isAbsoluteUrl(this.chessboard.props.style.pieces.file)) {
+            return this.chessboard.props.style.pieces.file
+        } else {
+            return this.chessboard.props.assetsUrl + this.chessboard.props.style.pieces.file
+        }
     }
 }