// Graphical (can use variables defined above)
this.containerId = o.element;
+ this.isDiagram = o.diagram;
this.graphicalInit();
}
graphicalInit() {
// NOTE: not window.onresize = this.re_drawBoardElts because scope (this)
window.onresize = () => this.re_drawBoardElements();
- this.re_drawBoardElements();
- this.initMouseEvents();
- const chessboard =
- document.getElementById(this.containerId).querySelector(".chessboard");
+ const g_init = () => {
+ this.re_drawBoardElements();
+ if (!this.isDiagram)
+ this.initMouseEvents();
+ };
+ let container = document.getElementById(this.containerId);
+ if (container.getBoundingClientRect().width == 0) {
+ // Element not ready yet
+ let ro = new ResizeObserver(() => {
+ ro.unobserve(container);
+ g_init();
+ });
+ ro.observe(container);
+ }
+ else
+ g_init();
}
re_drawBoardElements() {
const board = this.getSvgChessboard();
const oppCol = C.GetOppCol(this.playerColor);
- let chessboard =
- document.getElementById(this.containerId).querySelector(".chessboard");
+ const container = document.getElementById(this.containerId);
+ const rc = container.getBoundingClientRect();
+ let chessboard = container.querySelector(".chessboard");
chessboard.innerHTML = "";
chessboard.insertAdjacentHTML('beforeend', board);
// Compare window ratio width / height to aspectRatio:
- const windowRatio = window.innerWidth / window.innerHeight;
+ const windowRatio = rc.width / rc.height;
let cbWidth, cbHeight;
const vRatio = this.size.ratio || 1;
if (windowRatio <= vRatio) {
// Limiting dimension is width:
- cbWidth = Math.min(window.innerWidth, 767);
+ cbWidth = Math.min(rc.width, 767);
cbHeight = cbWidth / vRatio;
}
else {
// Limiting dimension is height:
- cbHeight = Math.min(window.innerHeight, 767);
+ cbHeight = Math.min(rc.height, 767);
cbWidth = cbHeight * vRatio;
}
if (this.hasReserve) {
const sqSize = cbWidth / this.size.y;
// NOTE: allocate space for reserves (up/down) even if they are empty
// Cannot use getReserveSquareSize() here, but sqSize is an upper bound.
- if ((window.innerHeight - cbHeight) / 2 < sqSize + 5) {
- cbHeight = window.innerHeight - 2 * (sqSize + 5);
+ if ((rc.height - cbHeight) / 2 < sqSize + 5) {
+ cbHeight = rc.height - 2 * (sqSize + 5);
cbWidth = cbHeight * vRatio;
}
}
chessboard.style.width = cbWidth + "px";
chessboard.style.height = cbHeight + "px";
// Center chessboard:
- const spaceLeft = (window.innerWidth - cbWidth) / 2,
- spaceTop = (window.innerHeight - cbHeight) / 2;
+ const spaceLeft = (rc.width - cbWidth) / 2,
+ spaceTop = (rc.height - cbHeight) / 2;
chessboard.style.left = spaceLeft + "px";
chessboard.style.top = spaceTop + "px";
// Give sizes instead of recomputing them,
}
setupPieces(r) {
+ // TODO: d_pieces : only markers (for diagrams) / also in rescale()
if (this.g_pieces) {
// Refreshing: delete old pieces first
for (let i=0; i<this.size.x; i++) {
// Resize board: no need to destroy/recreate pieces
rescale(mode) {
- let chessboard =
- document.getElementById(this.containerId).querySelector(".chessboard");
- const r = chessboard.getBoundingClientRect();
+ const container = document.getElementById(this.containerId);
+ let chessboard = container.querySelector(".chessboard");
+ const rc = container.getBoundingClientRect(),
+ r = chessboard.getBoundingClientRect();
const multFact = (mode == "up" ? 1.05 : 0.95);
let [newWidth, newHeight] = [multFact * r.width, multFact * r.height];
// Stay in window:
const vRatio = this.size.ratio || 1;
- if (newWidth > window.innerWidth) {
- newWidth = window.innerWidth;
+ if (newWidth > rc.width) {
+ newWidth = rc.width;
newHeight = newWidth / vRatio;
}
- if (newHeight > window.innerHeight) {
- newHeight = window.innerHeight;
+ if (newHeight > rc.height) {
+ newHeight = rc.height;
newWidth = newHeight * vRatio;
}
chessboard.style.width = newWidth + "px";
chessboard.style.height = newHeight + "px";
- const newX = (window.innerWidth - newWidth) / 2;
+ const newX = (rc.width - newWidth) / 2;
chessboard.style.left = newX + "px";
- const newY = (window.innerHeight - newHeight) / 2;
+ const newY = (rc.height - newHeight) / 2;
chessboard.style.top = newY + "px";
const newR = {x: newX, y: newY, width: newWidth, height: newHeight};
const pieceWidth = this.getPieceWidth(newWidth);
curPiece.remove();
};
+ const resize = (e) => this.rescale(e.deltaY < 0 ? "up" : "down");
+
if ('onmousedown' in window) {
- document.addEventListener("mousedown", mousedown);
- document.addEventListener("mousemove", mousemove);
- document.addEventListener("mouseup", mouseup);
- document.addEventListener("wheel",
- (e) => this.rescale(e.deltaY < 0 ? "up" : "down"));
+ this.mouseListeners = [
+ {type: "mousedown", listener: mousedown},
+ {type: "mousemove", listener: mousemove},
+ {type: "mouseup", listener: mouseup},
+ {type: "wheel", listener: resize}
+ ];
+ this.mouseListeners.forEach(ml => {
+ document.addEventListener(ml.type, ml.listener);
+ });
}
if ('ontouchstart' in window) {
- // https://stackoverflow.com/a/42509310/12660887
- document.addEventListener("touchstart", mousedown, {passive: false});
- document.addEventListener("touchmove", mousemove, {passive: false});
- document.addEventListener("touchend", mouseup, {passive: false});
+ this.touchListeners = [
+ {type: "touchstart", listener: mousedown},
+ {type: "touchmove", listener: mousemove},
+ {type: "touchend", listener: mouseup}
+ ];
+ this.touchListeners.forEach(tl => {
+ // https://stackoverflow.com/a/42509310/12660887
+ document.addEventListener(tl.type, tl.listener, {passive: false});
+ });
}
// TODO: onpointerdown/move/up ? See reveal.js /controllers/touch.js
}
+ removeListeners() {
+ if (this.isDiagram)
+ return; //no listeners in this case
+ if ('onmousedown' in window) {
+ this.mouseListeners.forEach(ml => {
+ document.removeEventListener(ml.type, ml.listener);
+ });
+ }
+ if ('ontouchstart' in window) {
+ this.touchListeners.forEach(tl => {
+ // https://stackoverflow.com/a/42509310/12660887
+ document.removeEventListener(tl.type, tl.listener);
+ });
+ }
+ }
+
showChoices(moves, r) {
let container = document.getElementById(this.containerId);
let chessboard = container.querySelector(".chessboard");