Make scaling happen on doubletap, and be more persistent

This commit is contained in:
Adam Goldsmith 2017-09-21 12:03:43 -04:00
parent 179a67e5fa
commit c750096044

View File

@ -42,19 +42,10 @@ let cardInteract = interact('.card', {ignoreFrom: '.in-list'})
onmove: dragMoveListener onmove: dragMoveListener
}) })
.on('hold', event => { .on('doubletap', event => {
let target = event.target, let scale = parseFloat(event.target.getAttribute('data-scale')) === 2 ? 1 : 2;
transform = target.style.transform; event.target.setAttribute('data-scale', scale);
// Scale up for visibility dragMoveListener({target: event.target, dx: 0, dy: 0});
if (transform.includes("scale(2)")) {
// translate the element
target.style.webkitTransform =
target.style.transform = transform.replace(" scale(2)", "");
}
else {
target.style.webkitTransform =
target.style.transform = transform + ' scale(2)';
}
}); });
interact('.card-pile') interact('.card-pile')
@ -188,11 +179,12 @@ function dragMoveListener (event) {
// keep the dragged position in the data-x/data-y attributes // keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx, x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
scale = (parseFloat(target.getAttribute('data-scale')) || 1);
// translate the element // translate and scale the element
target.style.webkitTransform = target.style.webkitTransform =
target.style.transform = target.style.transform =
'translate(' + x + 'px, ' + y + 'px)'; 'translate(' + x + 'px, ' + y + 'px) scale(' + scale + ')';
// raise to top // raise to top
target.parentElement.removeChild(target); target.parentElement.removeChild(target);