joicomponents
Version:
Design patterns to build native web components
99 lines (81 loc) • 2.98 kB
HTML
<html lang="en">
<body>
<!--<script src="https://hammerjs.github.io/dist/hammer.js"></script>-->
<!--<script src="//cdn.rawgit.com/hammerjs/touchemulator/0.0.2/touch-emulator.js"></script>-->
<!--<script> TouchEmulator(); </script>-->
<style>
.ball {
display: block;
position: fixed;
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid red;
}
</style>
<fling-ball class="ball" style="top: 75px; left: 100px;"></fling-ball>
<fling-ball class="ball" style="top: 75px; left: 300px;">
work with the description of selectable text combined with drag..
</fling-ball>
<fling-ball class="ball" style="top: 75px; left: 600px; user-select: none"></fling-ball>
<script type="module">
import {DraggingFling} from "../../src/gestures/DraggingFling.js";
class FlingBallCBE extends DraggingFling(HTMLElement) {
static get draggingEvent() {
return true;
}
draggingstartCallback(detail) {
this.innerText = "draggingstart: " + JSON.stringify(detail);
}
draggingCallback(detail) {
this.innerText = "dragging: " + JSON.stringify(detail);
}
draggingendCallback(detail) {
this.innerText = "draggingend: " + JSON.stringify(detail);
}
draggingcancelCallback(detail) {
this.innerText = "draggingcancel: " + JSON.stringify(detail);
}
flingCallback(detail) {
this.innerText = "fling: " + JSON.stringify(detail);
}
}
customElements.define("fling-ball", FlingBallCBE);
function _onDraggingStart(e) {
const ball = e.currentTarget;
ball.style.transition = undefined;
ball.style.backgroundColor = "green";
}
function _onDragging(e) {
const ball = e.currentTarget;
ball.style.transition = undefined;
ball.style.top = (parseFloat(ball.style.top) + e.detail.distY) + "px";
ball.style.left = (parseFloat(ball.style.left) + e.detail.distX) + "px";
}
function _onDraggingEnd(e) {
const ball = e.currentTarget;
ball.style.backgroundColor = "unset";
}
function _onFling(e) {
const ball = e.currentTarget;
const a = e.detail.e;
const totalTime = e.detail.durationMs;
const addX = e.detail.distX;
const addY = e.detail.distY;
ball.style.transition = "all " + totalTime + "ms cubic-bezier(0.39, 0.58, 0.57, 1)";
ball.style.top = (parseFloat(ball.style.top) + addY) + "px";
ball.style.left = (parseFloat(ball.style.left) + addX) + "px";
}
const balls = document.querySelectorAll("fling-ball");
for (var i = 0; i < balls.length; i++) {
var ball = balls[i];
ball.addEventListener("draggingstart", (e) => _onDraggingStart(e));
ball.addEventListener("dragging", (e) => _onDragging(e));
ball.addEventListener("draggingend", (e) => _onDraggingEnd(e));
// ball.addEventListener("draggingcancel", (e) => _onDraggingCancel(e)); //not implemented, but the code will not break
ball.addEventListener("fling", (e) => _onFling(e));
}
</script>
</body>
</html>