cm-chessboard 8.1.2 → 8.1.4

package/examples/responsive-board.html

@@ -14,17 +14,30 @@
 <pre>
 new Chessboard(document.getElementById("board"), {
         position: FEN.start,
-        style: {aspectRatio: 0.9}
+        assetsUrl: "../assets/",
+        style: {
+            aspectRatio: 0.9,
+            pieces: {file: "pieces/staunty.svg"},
+            borderType: BORDER_TYPE.frame
+        },
+        extensions: [{class: AutoBorderNone}]
     })
 </pre>
+<p>Also uses the "AutoBorderNone" extension to switch off the frame border below 560px width.</p>
 <script type="module">
-    import {Chessboard} from "../src/Chessboard.js"
+    import {BORDER_TYPE, Chessboard} from "../src/Chessboard.js"
     import {FEN} from "../src/model/Position.js"
+    import {AutoBorderNone} from "../src/extensions/auto-border-none/AutoBorderNone.js"
 
     new Chessboard(document.getElementById("board"), {
         position: FEN.start,
         assetsUrl: "../assets/",
-        style: {aspectRatio: 0.9, pieces: {file: "pieces/staunty.svg"}}
+        style: {
+            aspectRatio: 0.9,
+            pieces: {file: "pieces/staunty.svg"},
+            borderType: BORDER_TYPE.frame
+        },
+        extensions: [{class: AutoBorderNone}]
     })
 </script>
 </body>

package/package.json

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

package/src/extensions/auto-border-none/AutoBorderNone.js

@@ -0,0 +1,25 @@
+/**
+ * Author and copyright: Stefan Haack (https://shaack.com)
+ * Repository: https://github.com/shaack/cm-chessboard
+ * License: MIT, see file 'LICENSE'
+ */
+import {Extension, EXTENSION_POINT} from "../../model/Extension.js"
+
+export class AutoBorderNone extends Extension {
+    constructor(chessboard, props = {}) {
+        super(chessboard)
+        this.props = {
+            chessboardBorderType: chessboard.props.style.borderType,
+            borderNoneBelow: 550 // pixels width of the board, where the border is set to none
+        }
+        Object.assign(this.props, props)
+        this.registerExtensionPoint(EXTENSION_POINT.beforeRedrawBoard, this.extensionPointBeforeRedrawBoard.bind(this))
+    }
+    extensionPointBeforeRedrawBoard() {
+        if(this.chessboard.view.width < this.props.borderNoneBelow){
+            this.chessboard.props.style.borderType = "none"
+        } else {
+            this.chessboard.props.style.borderType = this.props.chessboardBorderType
+        }
+    }
+}

package/src/extensions/html-layer/HtmlLayer.js

@@ -1,9 +1,8 @@
 /**
- * Authors and copyright: Laura Campo Alberca (@lauracampoalberca) and Stefan Haack (@shaack)
+ * Author and copyright: Stefan Haack (https://shaack.com)
  * Repository: https://github.com/shaack/cm-chessboard
  * License: MIT, see file 'LICENSE'
  */
-
 import {Extension} from "../../model/Extension.js"
 
 export class HtmlLayer extends Extension {

package/src/extensions/markers/Markers.js

@@ -1,9 +1,8 @@
 /**
- * Authors and copyright: Laura Campo Alberca (@lauracampoalberca) and Stefan Haack (@shaack)
+ * Author and copyright: Stefan Haack (https://shaack.com)
  * Repository: https://github.com/shaack/cm-chessboard
  * License: MIT, see file 'LICENSE'
  */
-
 import {Extension, EXTENSION_POINT} from "../../model/Extension.js"
 import {Svg} from "../../lib/Svg.js"
 import {INPUT_EVENT_TYPE} from "../../Chessboard.js"