Make scaling happen on doubletap, and be more persistent
This commit is contained in:
parent
07648ce1c5
commit
3b62ed0244
22
script.js
22
script.js
@ -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);
|
||||||
|
Loading…
Reference in New Issue
Block a user