Allow re-arranging cards in piles and properly draw things in that view
This commit is contained in:
parent
9d07b4f0c5
commit
4a90b4f9f1
@ -40,7 +40,12 @@ let cardInteract = interact('.card', {ignoreFrom: '.in-list'})
|
|||||||
relativePoints: [{x: 0.5 , y: 1}]
|
relativePoints: [{x: 0.5 , y: 1}]
|
||||||
},
|
},
|
||||||
|
|
||||||
onmove: dragMoveListener
|
onmove: event => {
|
||||||
|
dragMoveListener(event);
|
||||||
|
// raise to top
|
||||||
|
event.target.parentElement.removeChild(event.target);
|
||||||
|
document.querySelector("#card-container").appendChild(event.target);
|
||||||
|
}
|
||||||
})
|
})
|
||||||
.on('doubletap', event => {
|
.on('doubletap', event => {
|
||||||
let scale = parseFloat(event.target.getAttribute('data-scale')) === 2 ? 1 : 2;
|
let scale = parseFloat(event.target.getAttribute('data-scale')) === 2 ? 1 : 2;
|
||||||
@ -48,12 +53,69 @@ let cardInteract = interact('.card', {ignoreFrom: '.in-list'})
|
|||||||
dragMoveListener({target: event.target, dx: 0, dy: 0});
|
dragMoveListener({target: event.target, dx: 0, dy: 0});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
interact('.card.in-list')
|
||||||
|
.draggable({
|
||||||
|
restrict: {
|
||||||
|
restriction: "parent",
|
||||||
|
endOnly: false,
|
||||||
|
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
|
||||||
|
},
|
||||||
|
autoScroll: false,
|
||||||
|
|
||||||
|
onmove: dragMoveListener,
|
||||||
|
onend: event => {
|
||||||
|
// reset transform and data attributes
|
||||||
|
event.target.style.webkitTransform = event.target.style.transform = '';
|
||||||
|
|
||||||
|
event.target.removeAttribute('data-x');
|
||||||
|
event.target.removeAttribute('data-y');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.dropzone({
|
||||||
|
accept: '.card',
|
||||||
|
ondragenter: event => {
|
||||||
|
// TODO: drop after if cursor > 50% in card
|
||||||
|
let target = event.target;
|
||||||
|
|
||||||
|
// move the object in the DOM
|
||||||
|
target.parentElement.insertBefore(event.relatedTarget, target);
|
||||||
|
|
||||||
|
// rebuild source pile
|
||||||
|
piles[target.getAttribute('data-pile')] =
|
||||||
|
Array.from(target.parentElement.children).map(
|
||||||
|
c => c.getAttribute('data-num'));
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.on('tap', event => {
|
||||||
|
let target = event.target;
|
||||||
|
console.log(`Drawing ${target.getAttribute('data-num')} from ${target.getAttribute('data-pile')}`);
|
||||||
|
|
||||||
|
let listDiv = target.parentElement;
|
||||||
|
// re-parent
|
||||||
|
target.parentElement.removeChild(target);
|
||||||
|
document.querySelector("#card-container").appendChild(target);
|
||||||
|
|
||||||
|
// rebuild source pile
|
||||||
|
piles[target.getAttribute('data-pile')] =
|
||||||
|
Array.from(listDiv.children).map(c => c.getAttribute('data-num'));
|
||||||
|
|
||||||
|
// remove list class
|
||||||
|
target.classList.remove('in-list');
|
||||||
|
|
||||||
|
// fix position
|
||||||
|
target.style.position = "fixed";
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
interact('.card-pile')
|
interact('.card-pile')
|
||||||
.dropzone({
|
.dropzone({
|
||||||
accept: '.card',
|
accept: '.card',
|
||||||
ondrop: event => {
|
ondrop: event => {
|
||||||
|
// TODO: fix duped zeros
|
||||||
let pileName = event.target.getAttribute('data-pile');
|
let pileName = event.target.getAttribute('data-pile');
|
||||||
piles[pileName].push(event.relatedTarget.getAttribute('data-num'));
|
let cardNum = event.relatedTarget.getAttribute('data-num');
|
||||||
|
console.log(`Adding ${cardNum} to ${pileName}`);
|
||||||
|
piles[pileName].push(cardNum);
|
||||||
event.relatedTarget.parentElement.removeChild(event.relatedTarget);
|
event.relatedTarget.parentElement.removeChild(event.relatedTarget);
|
||||||
|
|
||||||
// update deck text
|
// update deck text
|
||||||
@ -110,24 +172,7 @@ interact('.card-pile')
|
|||||||
pile.forEach(cardNum => {
|
pile.forEach(cardNum => {
|
||||||
let newCard = makeCard(cardNum);
|
let newCard = makeCard(cardNum);
|
||||||
newCard.classList.add('in-list');
|
newCard.classList.add('in-list');
|
||||||
newCard.addEventListener('click', event => {
|
newCard.setAttribute('data-pile', event.target.getAttribute('data-pile'));
|
||||||
// re-parent
|
|
||||||
event.target.parentElement.removeChild(event.target);
|
|
||||||
document.querySelector("#card-container").appendChild(event.target);
|
|
||||||
|
|
||||||
// remove list class
|
|
||||||
event.target.classList.remove('in-list');
|
|
||||||
|
|
||||||
// fix position
|
|
||||||
newCard.style.position = "fixed";
|
|
||||||
|
|
||||||
// remove from source pile
|
|
||||||
let cardNum = parseInt(event.target.getAttribute('data-num'));
|
|
||||||
let index = pile.indexOf(cardNum);
|
|
||||||
if (index > -1) {
|
|
||||||
pile.splice(index, 1);
|
|
||||||
}
|
|
||||||
}, {once: true});
|
|
||||||
cardList.appendChild(newCard);
|
cardList.appendChild(newCard);
|
||||||
});
|
});
|
||||||
container.appendChild(cardList);
|
container.appendChild(cardList);
|
||||||
@ -211,10 +256,6 @@ function dragMoveListener (event) {
|
|||||||
target.style.transform =
|
target.style.transform =
|
||||||
'translate(' + x + 'px, ' + y + 'px) scale(' + scale + ')';
|
'translate(' + x + 'px, ' + y + 'px) scale(' + scale + ')';
|
||||||
|
|
||||||
// raise to top
|
|
||||||
target.parentElement.removeChild(target);
|
|
||||||
document.querySelector("#card-container").appendChild(target);
|
|
||||||
|
|
||||||
// update the posiion attributes
|
// update the posiion attributes
|
||||||
target.setAttribute('data-x', x);
|
target.setAttribute('data-x', x);
|
||||||
target.setAttribute('data-y', y);
|
target.setAttribute('data-y', y);
|
||||||
|
Loading…
Reference in New Issue
Block a user