};
}
-function animateSquareToSquare(move_pieces, complete) {
- for (const [piece, destination] of move_pieces) {
- // Move it to the end of the stack, which changes the implicit z-index
- // so that it will go on top of any pieces it's replacing.
- piece.remove();
- boardEl.appendChild(piece);
-
- // animate the piece to the destination square
- piece.addEventListener('transitionend', complete, {once: true});
- }
- requestAnimationFrame(() => {
- for (const [piece, destination] of move_pieces) {
- let destSquarePosition = findSquarePosition(destination);
- piece.style.transitionProperty = 'top, left';
- piece.style.transitionDuration = cfg.moveSpeed + 'ms';
- piece.style.top = destSquarePosition.top;
- piece.style.left = destSquarePosition.left;
- }
- });
-}
-
-function fadeIn(pieces, onFinish) {
- pieces.forEach((piece) => {
- piece.style.opacity = 0;
- piece.style.display = null;
- piece.addEventListener('transitionend', onFinish, {once: true});
- });
- requestAnimationFrame(() => {
- pieces.forEach((piece) => {
- piece.style.transitionProperty = 'opacity';
- piece.style.transitionDuration = cfg.appearSpeed + 'ms';
- piece.style.opacity = 1;
- });
- });
-}
-
-function fadeOut(pieces, onFinish) {
- pieces.forEach((piece) => {
- piece.style.opacity = 1;
- piece.style.display = null;
- piece.addEventListener('transitionend', onFinish, {once: true});
- });
- requestAnimationFrame(() => {
- pieces.forEach((piece) => {
- piece.style.transitionProperty = 'opacity';
- piece.style.transitionDuration = cfg.trashSpeed + 'ms';
- piece.style.opacity = 0;
- });
- });
-}
-
// execute an array of animations
function doAnimations(a, oldPos, newPos) {
let fadeout_pieces = [];
}
var numFinished = 0;
- function onFinish(e) {
- if (e && e.target) {
- e.target.transitionProperty = null;
- e.target.transitionDuration = null;
- }
-
- numFinished++;
-
- // exit if all the animations aren't finished
- if (numFinished !== a.length) return;
-
- for (let piece of removed_pieces) {
- piece.remove();
- }
+ function onFinish(e, opt_force) {
+ if (++numFinished === a.length) {
+ for (let piece of removed_pieces) {
+ piece.remove();
+ }
- // run their onMoveEnd function
- if (cfg.hasOwnProperty('onMoveEnd') &&
- typeof cfg.onMoveEnd === 'function') {
- cfg.onMoveEnd(deepCopy(oldPos), deepCopy(newPos));
+ // run their onMoveEnd function
+ if (cfg.hasOwnProperty('onMoveEnd') &&
+ typeof cfg.onMoveEnd === 'function') {
+ cfg.onMoveEnd(deepCopy(oldPos), deepCopy(newPos));
+ }
}
}
- requestAnimationFrame(() => { // Firefox workaround.
- if (fadeout_pieces.length > 0) {
- fadeOut(fadeout_pieces, onFinish);
- }
- if (fadein_pieces.length > 0) {
- fadeIn(fadein_pieces, onFinish);
- }
- if (move_pieces.length > 0) {
- animateSquareToSquare(move_pieces, onFinish);
- }
+ fadein_pieces.forEach((piece) => {
+ piece.style.display = null;
+ piece.style.opacity = 1;
+ piece.animate(
+ [ { opacity: 0 }, { opacity: 1 } ],
+ { duration: cfg.appearSpeed }
+ ).addEventListener('finish', onFinish);
+ });
+ fadeout_pieces.forEach((piece) => {
+ piece.style.display = null;
+ piece.style.opacity = 0;
+ piece.animate(
+ [ { opacity: 1 }, { opacity: 0 } ],
+ { duration: cfg.trashSpeed }
+ ).addEventListener('finish', onFinish);
});
+ for (const [piece, destination] of move_pieces) {
+ // Move it to the end of the stack, which changes the implicit z-index
+ // so that it will go on top of any pieces it's replacing.
+ piece.remove();
+ boardEl.appendChild(piece);
+
+ let destSquarePosition = findSquarePosition(destination);
+ piece.animate(
+ [
+ { top: piece.style.top, left: piece.style.left },
+ { top: destSquarePosition.top, left: destSquarePosition.left }
+ ],
+ { duration: cfg.moveSpeed }
+ ).addEventListener('finish', onFinish);
+ piece.style.top = destSquarePosition.top;
+ piece.style.left = destSquarePosition.left;
+ }
}
// returns the distance between two squares
var sourceSquarePosition = findSquarePosition(DRAGGED_PIECE_SOURCE);
// animate the piece to the target square
- DRAGGED_PIECE.addEventListener('transitionend', complete, {once: true});
- requestAnimationFrame(() => {
- DRAGGED_PIECE.style.transitionProperty = 'top, left';
- DRAGGED_PIECE.style.transitionDuration = cfg.snapbackSpeed + 'ms';
- DRAGGED_PIECE.style.top = sourceSquarePosition.top;
- DRAGGED_PIECE.style.left = sourceSquarePosition.left;
- });
+ DRAGGED_PIECE.animate(
+ [
+ { top: DRAGGED_PIECE.style.top, left: DRAGGED_PIECE.style.left },
+ { top: sourceSquarePosition.top, left: sourceSquarePosition.left }
+ ],
+ { duration: cfg.snapbackSpeed }
+ ).addEventListener('finish', complete);
+ DRAGGED_PIECE.style.top = sourceSquarePosition.top;
+ DRAGGED_PIECE.style.left = sourceSquarePosition.left;
// set state
DRAGGING_A_PIECE = false;
};
// snap the piece to the target square
- DRAGGED_PIECE.addEventListener('transitionend', complete, {once: true});
- requestAnimationFrame(() => {
- DRAGGED_PIECE.style.transitionProperty = 'top, left';
- DRAGGED_PIECE.style.transitionDuration = cfg.snapSpeed + 'ms';
- DRAGGED_PIECE.style.top = targetSquarePosition.top;
- DRAGGED_PIECE.style.left = targetSquarePosition.left;
- });
+ DRAGGED_PIECE.animate(
+ [
+ { top: DRAGGED_PIECE.style.top, left: DRAGGED_PIECE.style.left },
+ { top: targetSquarePosition.top, left: targetSquarePosition.left }
+ ],
+ { duration: cfg.snapSpeed }
+ ).addEventListener('finish', complete);
+ DRAGGED_PIECE.style.top = targetSquarePosition.top;
+ DRAGGED_PIECE.style.left = targetSquarePosition.left;
}
function beginDraggingPiece(source, piece, x, y) {
DRAGGED_PIECE = PIECE_ON_SQUARE[source];
DRAGGED_PIECE_SOURCE = source;
DRAGGED_PIECE_LOCATION = source;
- DRAGGED_PIECE.style.transitionProperty = null;
- DRAGGED_PIECE.style.transitionDuration = null;
// Move it to the end of the stack, which changes the implicit z-index
// so that it will go on top of any pieces it's replacing.
}
// do nothing if we're not draggable
- if (cfg.draggable) return;
+ if (!cfg.draggable) return;
beginDraggingPiece(square, CURRENT_POSITION[square], e.pageX, e.pageY);
}
}
// do nothing if we're not draggable
- if (cfg.draggable) return;
+ if (!cfg.draggable) return;
var square = target.getAttribute('data-square');
// do nothing if we are not dragging a piece
if (!DRAGGING_A_PIECE) return;
- // get the location
- var location = isXYOnSquare(e.changedTouches[0].pageX,
- e.changedTouches[0].pageY);
-
stopDraggedPiece(findSquareFromEvent(e.changedTouches[0].pageX,
e.changedTouches[0].pageY));
}