joicomponents
Version:
Design patterns to build native web components
67 lines (52 loc) • 1.65 kB
HTML
<html lang="en">
<body>
<style>
fling-ball {
display: block;
position: fixed;
width: 100px;
height: 100px;
border-radius: 50%;
/*background-color: blue;*/
border: 4px solid red;
}
</style>
<fling-ball style="top: 100px; left: 100px;"></fling-ball>
<fling-ball style="top: 300px; left: 300px;">
fling me with selectable text,
but neither I nor later siblings
can be flung if the text is selected!
</fling-ball>
<fling-ball style="top: 100px; left: 300px; user-select: none">non-selectable text</fling-ball>
<script type="module">
import {DraggingFling} from "../../src/gestures/DraggingFling.js";
class FlingBallCB extends DraggingFling(HTMLElement) {
static get draggingEvent(){
return -1;
}
draggingstartCallback(detail){
this.style.backgroundColor = "blue";
}
draggingCallback(detail){
this.style.transition = undefined;
this.style.left = (parseFloat(this.style.left) + detail.distX) + "px";
this.style.top = (parseFloat(this.style.top) + detail.distY) + "px";
}
draggingendCallback(detail){
this.style.backgroundColor = "unset";
}
flingCallback(detail) {
const e = detail.e;
const totalTime = detail.durationMs;
const addX = detail.distX;
const addY = detail.distY;
this.style.transition = "all " + totalTime + "ms cubic-bezier(0.39, 0.58, 0.57, 1)";
this.style.left = (parseFloat(this.style.left) + addX) + "px";
this.style.top = (parseFloat(this.style.top) + addY) + "px";
}
}
customElements.define("fling-ball", FlingBallCB);
</script>
</body>
</html>