cm-chessboard 7.7.11 → 7.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>cm-chessboard</title>
|
|
6
|
+
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
|
|
7
|
+
<link rel="stylesheet" href="../styles/examples.css"/>
|
|
8
|
+
<link rel="stylesheet" href="../../assets/chessboard.css"/>
|
|
9
|
+
<style>
|
|
10
|
+
.html-layer {
|
|
11
|
+
position: absolute;
|
|
12
|
+
top: 30%;
|
|
13
|
+
left: 1rem;
|
|
14
|
+
right: 1rem;
|
|
15
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
16
|
+
padding: 1rem;
|
|
17
|
+
font-size: 30px;
|
|
18
|
+
border-radius: 0.5rem;
|
|
19
|
+
text-align: center;
|
|
20
|
+
}
|
|
21
|
+
</style>
|
|
22
|
+
</head>
|
|
23
|
+
<body>
|
|
24
|
+
<h1><a href="../../">cm-chessboard</a></h1>
|
|
25
|
+
<h2>Example: Persistence Extension</h2>
|
|
26
|
+
<p>This extension stores the board position in localStorage and automatically loads the board on creation.</p>
|
|
27
|
+
<div class="board" id="board"></div>
|
|
28
|
+
<div>
|
|
29
|
+
<button onclick="window.addLayer()">Add HTML Layer</button>
|
|
30
|
+
<button onclick="removeLayer()">Remove HTML Layer</button>
|
|
31
|
+
</div>
|
|
32
|
+
<script type="module">
|
|
33
|
+
import {Chessboard, FEN} from "../../src/Chessboard.js"
|
|
34
|
+
import {HtmlLayer} from "../../src/extensions/html-layer/HtmlLayer.js"
|
|
35
|
+
|
|
36
|
+
const board = new Chessboard(document.getElementById("board"), {
|
|
37
|
+
position: FEN.start,
|
|
38
|
+
assetsUrl: "../../assets/",
|
|
39
|
+
extensions: [{class: HtmlLayer}]
|
|
40
|
+
})
|
|
41
|
+
board.enableMoveInput(() => true)
|
|
42
|
+
let layer = null
|
|
43
|
+
window.addLayer = () => {
|
|
44
|
+
if(!layer) {
|
|
45
|
+
layer = board.addHtmlLayer("<div class='html-layer'>Welcome to cm-chessboard!</div>")
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
window.removeLayer = () => {
|
|
49
|
+
if(layer) {
|
|
50
|
+
board.removeHtmlLayer(layer)
|
|
51
|
+
layer = null
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
</script>
|
|
55
|
+
</body>
|
|
56
|
+
</html>
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
<h1><a href="../../">cm-chessboard</a></h1>
|
|
13
13
|
<h2>Example: Persistence Extension</h2>
|
|
14
14
|
<p>This extension stores the board position in localStorage and automatically loads the board on creation.</p>
|
|
15
|
+
<p>Alpha version, do not use in production.</p>
|
|
15
16
|
<div class="board" id="board"></div>
|
|
16
17
|
<script type="module">
|
|
17
18
|
import {Chessboard, FEN} from "../../src/Chessboard.js"
|
|
@@ -19,9 +20,10 @@
|
|
|
19
20
|
|
|
20
21
|
const board = new Chessboard(document.getElementById("board"), {
|
|
21
22
|
assetsUrl: "../../assets/",
|
|
23
|
+
// todo initialPosition should be a property of cm-chessboard
|
|
22
24
|
extensions: [{class: Persistence, props: {initialPosition: FEN.start}}]
|
|
23
25
|
})
|
|
24
26
|
board.enableMoveInput(() => true)
|
|
25
27
|
</script>
|
|
26
28
|
</body>
|
|
27
|
-
</html>
|
|
29
|
+
</html>
|
package/index.html
CHANGED
|
@@ -29,9 +29,10 @@ It works, it is cool and it is easy to use. 👍</p>
|
|
|
29
29
|
<ul>
|
|
30
30
|
<li><a href="examples/extensions/accessibility-extension.html">Accessibility extension</a></li>
|
|
31
31
|
<li><a href="examples/extensions/arrows-extension.html">Arrows extension</a></li>
|
|
32
|
-
<li><a href="examples/extensions/
|
|
33
|
-
<li><a href="examples/extensions/
|
|
34
|
-
<li><a href="examples/extensions/
|
|
32
|
+
<li><a href="examples/extensions/html-layer-extension.html">HTML Layer extension</a> 🆕</li>
|
|
33
|
+
<li><a href="examples/extensions/markers-extension.html">Markers extension</a></li>
|
|
34
|
+
<li><a href="examples/extensions/promotion-dialog-extension.html">PromotionDialog extension</a></li>
|
|
35
|
+
<li><a href="examples/extensions/render-video-extension.html">RenderVideo extension</a></li>
|
|
35
36
|
</ul>
|
|
36
37
|
</div>
|
|
37
38
|
<h2>Chessboard</h2>
|
package/package.json
CHANGED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Authors and copyright: Laura Campo Alberca (@lauracampoalberca) and Stefan Haack (@shaack)
|
|
3
|
+
* Repository: https://github.com/shaack/cm-chessboard
|
|
4
|
+
* License: MIT, see file 'LICENSE'
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
import {Extension} from "../../model/Extension.js"
|
|
8
|
+
|
|
9
|
+
export class HtmlLayer extends Extension {
|
|
10
|
+
/** @constructor */
|
|
11
|
+
constructor(chessboard) {
|
|
12
|
+
super(chessboard)
|
|
13
|
+
chessboard.addHtmlLayer = this.addHtmlLayer.bind(this)
|
|
14
|
+
chessboard.removeHtmlLayer = this.removeHtmlLayer.bind(this)
|
|
15
|
+
}
|
|
16
|
+
addHtmlLayer(html) {
|
|
17
|
+
const layer = document.createElement("div")
|
|
18
|
+
this.chessboard.context.appendChild(layer)
|
|
19
|
+
this.chessboard.context.style.position = "relative"
|
|
20
|
+
layer.style.position = "absolute"
|
|
21
|
+
layer.style.top = "0"
|
|
22
|
+
layer.style.left = "0"
|
|
23
|
+
layer.style.bottom = "0"
|
|
24
|
+
layer.style.right = "0"
|
|
25
|
+
layer.innerHTML = html
|
|
26
|
+
return layer
|
|
27
|
+
}
|
|
28
|
+
removeHtmlLayer(layer) {
|
|
29
|
+
this.chessboard.context.removeChild(layer)
|
|
30
|
+
}
|
|
31
|
+
}
|