cm-chessboard 3.17.9 → 3.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cm-chessboard",
-  "version": "3.17.9",
+  "version": "3.18.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

@@ -45,7 +45,7 @@ export class Chessboard {
         if (!context) {
             throw new Error("container element is " + context)
         }
-        this.element = context
+        this.context = context
         this.id = (Math.random() + 1).toString(36).substr(2, 6)
         let defaultProps = {
             position: "empty", // set as fen, "start" or "empty"
@@ -79,7 +79,7 @@ export class Chessboard {
             Object.assign(this.props.style, props.style)
         }
         if (this.props.style.aspectRatio) {
-            this.element.style.height = (this.element.offsetWidth * this.props.style.aspectRatio) + "px"
+            this.context.style.height = (this.context.offsetWidth * this.props.style.aspectRatio) + "px"
         }
         this.state = new ChessboardState()
         if (this.props.position === "start") {
@@ -199,9 +199,9 @@ export class Chessboard {
         this.view = undefined
         this.state = undefined
         if (this.squareSelectListener) {
-            this.element.removeEventListener("contextmenu", this.squareSelectListener)
-            this.element.removeEventListener("mouseup", this.squareSelectListener)
-            this.element.removeEventListener("touchend", this.squareSelectListener)
+            this.context.removeEventListener("contextmenu", this.squareSelectListener)
+            this.context.removeEventListener("mouseup", this.squareSelectListener)
+            this.context.removeEventListener("touchend", this.squareSelectListener)
         }
     }
 
@@ -248,17 +248,17 @@ export class Chessboard {
                 square: SQUARE_COORDINATES[index]
             })
         }
-        this.element.addEventListener("contextmenu", this.squareSelectListener)
-        this.element.addEventListener("mouseup", this.squareSelectListener)
-        this.element.addEventListener("touchend", this.squareSelectListener)
+        this.context.addEventListener("contextmenu", this.squareSelectListener)
+        this.context.addEventListener("mouseup", this.squareSelectListener)
+        this.context.addEventListener("touchend", this.squareSelectListener)
         this.state.squareSelectEnabled = true
         this.view.visualizeInputState()
     }
 
     disableSquareSelect() {
-        this.element.removeEventListener("contextmenu", this.squareSelectListener)
-        this.element.removeEventListener("mouseup", this.squareSelectListener)
-        this.element.removeEventListener("touchend", this.squareSelectListener)
+        this.context.removeEventListener("contextmenu", this.squareSelectListener)
+        this.context.removeEventListener("mouseup", this.squareSelectListener)
+        this.context.removeEventListener("touchend", this.squareSelectListener)
         this.squareSelectListener = undefined
         this.state.squareSelectEnabled = false
         this.view.visualizeInputState()

package/src/cm-chessboard/ChessboardView.js

@@ -80,7 +80,7 @@ export class ChessboardView {
                 this.resizeObserver = new ResizeObserver(() => {
                     this.handleResize()
                 })
-                this.resizeObserver.observe(this.chessboard.element)
+                this.resizeObserver.observe(this.chessboard.context)
             } else {
                 this.resizeListener = this.handleResize.bind(this)
                 window.addEventListener("resize", this.resizeListener)
@@ -88,8 +88,8 @@ export class ChessboardView {
         }
 
         this.pointerDownListener = this.pointerDownHandler.bind(this)
-        this.chessboard.element.addEventListener("mousedown", this.pointerDownListener)
-        this.chessboard.element.addEventListener("touchstart", this.pointerDownListener)
+        this.chessboard.context.addEventListener("mousedown", this.pointerDownListener)
+        this.chessboard.context.addEventListener("touchstart", this.pointerDownListener)
 
         this.createSvgAndGroups()
         this.updateMetrics()
@@ -106,13 +106,13 @@ export class ChessboardView {
     destroy() {
         this.moveInput.destroy()
         if (this.resizeObserver) {
-            this.resizeObserver.unobserve(this.chessboard.element)
+            this.resizeObserver.unobserve(this.chessboard.context)
         }
         if (this.resizeListener) {
             window.removeEventListener("resize", this.resizeListener)
         }
-        this.chessboard.element.removeEventListener("mousedown", this.pointerDownListener)
-        this.chessboard.element.removeEventListener("touchstart", this.pointerDownListener)
+        this.chessboard.context.removeEventListener("mousedown", this.pointerDownListener)
+        this.chessboard.context.removeEventListener("touchstart", this.pointerDownListener)
         Svg.removeElement(this.svg)
         this.animationQueue = []
         if (this.currentAnimation) {
@@ -142,7 +142,7 @@ export class ChessboardView {
         if (this.svg) {
             Svg.removeElement(this.svg)
         }
-        this.svg = Svg.createSvg(this.chessboard.element)
+        this.svg = Svg.createSvg(this.chessboard.context)
         let description = document.createElement("description")
         description.innerText = "Chessboard"
         description.id = "svg-description"
@@ -159,8 +159,8 @@ export class ChessboardView {
     }
 
     updateMetrics() {
-        this.width = this.chessboard.element.clientWidth
-        this.height = this.chessboard.element.clientHeight
+        this.width = this.chessboard.context.clientWidth
+        this.height = this.chessboard.context.clientHeight
         if (this.chessboard.props.style.borderType === BORDER_TYPE.frame) {
             this.borderSize = this.width / 25
         } else if (this.chessboard.props.style.borderType === BORDER_TYPE.thin) {
@@ -179,10 +179,10 @@ export class ChessboardView {
 
     handleResize() {
         if (this.chessboard.props.style.aspectRatio) {
-            this.chessboard.element.style.height = (this.chessboard.element.clientWidth * this.chessboard.props.style.aspectRatio) + "px"
+            this.chessboard.context.style.height = (this.chessboard.context.clientWidth * this.chessboard.props.style.aspectRatio) + "px"
         }
-        if (this.chessboard.element.clientWidth !== this.width ||
-            this.chessboard.element.clientHeight !== this.height) {
+        if (this.chessboard.context.clientWidth !== this.width ||
+            this.chessboard.context.clientHeight !== this.height) {
             this.updateMetrics()
             this.redraw()
         }

package/src/cm-chessboard/ChessboardViewAccessible.js

@@ -66,7 +66,7 @@ export class ChessboardViewAccessible extends ChessboardView {
         this.boardAsTableContainer = this.createElement(`<div><h3>${this.th.board_as_table}</h3><div class="table"></div></div>`)
         this.boardAsTable = this.boardAsTableContainer.querySelector(".table")
         this.accessibleContainer.appendChild(this.boardAsTableContainer)
-        this.chessboard.element.appendChild(this.accessibleContainer)
+        this.chessboard.context.appendChild(this.accessibleContainer)
         this.updateFormInputs()
     }
 

package/test/TestBoard.js

@@ -23,7 +23,7 @@ describe("TestBoard", () => {
             sprite: {url: "../assets/images/chessboard-sprite.svg"},
             position: "start"
         })
-        assert.equals(chessboard.element.childNodes.length, 1)
+        assert.equals(chessboard.context.childNodes.length, 1)
         chessboard.destroy()
         assert.equals(chessboard.state, undefined)
     })