store webapp
This commit is contained in:
parent
81f421b9c0
commit
38f4fa9774
4 changed files with 509 additions and 1 deletions
|
|
@ -5,6 +5,10 @@
|
||||||
<meta content="width=device-width,initial-scale=1.0" name="viewport">
|
<meta content="width=device-width,initial-scale=1.0" name="viewport">
|
||||||
</head>
|
</head>
|
||||||
<style>
|
<style>
|
||||||
|
:root {
|
||||||
|
touch-action: pan-x pan-y;
|
||||||
|
height: 100%
|
||||||
|
}
|
||||||
@keyframes wobble {
|
@keyframes wobble {
|
||||||
0% {
|
0% {
|
||||||
transform: scale(0.1);
|
transform: scale(0.1);
|
||||||
|
|
@ -15,9 +19,35 @@
|
||||||
opacity:1.0
|
opacity:1.0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
body{
|
||||||
|
background-color:#ffa;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
margin: 0em;
|
||||||
|
padding: 2em;
|
||||||
|
}
|
||||||
|
#target {
|
||||||
|
background: white;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<body>
|
<!--<body onload="init();" style="touch-action:none">-->
|
||||||
|
<body onload="init();">
|
||||||
|
<h1> PINCHYYYY</h1>
|
||||||
|
<div id="target">
|
||||||
|
Touch and Hold with 2 pointers, then pinch in or out.<br />
|
||||||
|
The background color will change to pink if the pinch is opening (Zoom In)
|
||||||
|
or changes to lightblue if the pinch is closing (Zoom out).
|
||||||
|
</div>
|
||||||
|
<!-- UI for logging/debugging -->
|
||||||
|
<button id="log" onclick="enableLog(event);">Start/Stop event logging</button>
|
||||||
|
<button id="clearlog" onclick="clearLog(event);">Clear the log</button>
|
||||||
|
<p></p>
|
||||||
|
<output></output>
|
||||||
|
|
||||||
|
<a href="https://server.alexmahr.de/calender">calender</a>
|
||||||
<h1>Webview</h1>
|
<h1>Webview</h1>
|
||||||
|
<pre id="output">output</pre>
|
||||||
<script>
|
<script>
|
||||||
window.addEventListener("error",(error)=>{
|
window.addEventListener("error",(error)=>{
|
||||||
document.body.innerHTML = "<h1>error</h1><pre>" +
|
document.body.innerHTML = "<h1>error</h1><pre>" +
|
||||||
|
|
@ -26,6 +56,12 @@ window.addEventListener("error",(error)=>{
|
||||||
"\n"+error.message +"</pre>";
|
"\n"+error.message +"</pre>";
|
||||||
},false);
|
},false);
|
||||||
|
|
||||||
|
['touchstart','touchmove','touchend'].forEach((evname)=>{
|
||||||
|
window.addEventListener(evname,(ev)=>{
|
||||||
|
output.textContent+=evname+"\n" ;
|
||||||
|
ev.preventDefault();
|
||||||
|
},false);
|
||||||
|
});
|
||||||
window.addEventListener("load",()=>{
|
window.addEventListener("load",()=>{
|
||||||
var count = localStorage.getItem("app-opened-count")|| 0;
|
var count = localStorage.getItem("app-opened-count")|| 0;
|
||||||
count++;
|
count++;
|
||||||
|
|
@ -35,6 +71,9 @@ window.addEventListener("error",(error)=>{
|
||||||
h2.style.animation="wobble 1s ease-in-out 0s 1 forwards normal running"
|
h2.style.animation="wobble 1s ease-in-out 0s 1 forwards normal running"
|
||||||
document.body.appendChild(h2);
|
document.body.appendChild(h2);
|
||||||
},false);
|
},false);
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
<script src='pinch.js'></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
182
app/assets/index.html.1
Normal file
182
app/assets/index.html.1
Normal file
|
|
@ -0,0 +1,182 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta content="width=device-width,initial-scale=1.0" name="viewport">
|
||||||
|
</head>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
touch-action: pan-x pan-y;
|
||||||
|
height: 100%
|
||||||
|
}
|
||||||
|
@keyframes wobble {
|
||||||
|
0% {
|
||||||
|
transform: scale(0.1);
|
||||||
|
opacity:0.0
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1.0);
|
||||||
|
opacity:1.0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
background-color:#ffa;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
margin: 0em;
|
||||||
|
padding: 2em;
|
||||||
|
}
|
||||||
|
#target {
|
||||||
|
background: white;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<!--<body onload="init();" style="touch-action:none">-->
|
||||||
|
<body onload="init();">
|
||||||
|
<div id="target">
|
||||||
|
Touch and Hold with 2 pointers, then pinch in or out.<br />
|
||||||
|
The background color will change to pink if the pinch is opening (Zoom In)
|
||||||
|
or changes to lightblue if the pinch is closing (Zoom out).
|
||||||
|
</div>
|
||||||
|
<!-- UI for logging/debugging -->
|
||||||
|
<button id="log" onclick="enableLog(event);">Start/Stop event logging</button>
|
||||||
|
<button id="clearlog" onclick="clearLog(event);">Clear the log</button>
|
||||||
|
<p></p>
|
||||||
|
<output></output>
|
||||||
|
|
||||||
|
<a href="https://server.alexmahr.de/calender">calender</a>
|
||||||
|
<h1>Webview</h1>
|
||||||
|
<pre id="output">output</pre>
|
||||||
|
<script>
|
||||||
|
window.addEventListener("error",(error)=>{
|
||||||
|
document.body.innerHTML = "<h1>error</h1><pre>" +
|
||||||
|
error.filename +
|
||||||
|
"\nline:" + error.lineno +
|
||||||
|
"\n"+error.message +"</pre>";
|
||||||
|
},false);
|
||||||
|
|
||||||
|
['touchstart','touchmove','touchend'].forEach((evname)=>{
|
||||||
|
window.addEventListener(evname,(ev)=>{
|
||||||
|
output.textContent+=evname+"\n" ;
|
||||||
|
ev.preventDefault();
|
||||||
|
},false);
|
||||||
|
});
|
||||||
|
window.addEventListener("load",()=>{
|
||||||
|
var count = localStorage.getItem("app-opened-count")|| 0;
|
||||||
|
count++;
|
||||||
|
localStorage.setItem("app-opened-count",count);
|
||||||
|
var h2 = document.createElement("h2");
|
||||||
|
h2.textContent = "Javascript works! (app was opened " + count + " times)";
|
||||||
|
h2.style.animation="wobble 1s ease-in-out 0s 1 forwards normal running"
|
||||||
|
document.body.appendChild(h2);
|
||||||
|
},false);
|
||||||
|
|
||||||
|
// Global vars to cache event state
|
||||||
|
const evCache = [];
|
||||||
|
let prevDiff = -1;
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
// Install event handlers for the pointer target
|
||||||
|
const el = document.getElementById("target");
|
||||||
|
el.onpointerdown = pointerdownHandler;
|
||||||
|
el.onpointermove = pointermoveHandler;
|
||||||
|
|
||||||
|
// Use same handler for pointer{up,cancel,out,leave} events since
|
||||||
|
// the semantics for these events - in this app - are the same.
|
||||||
|
el.onpointerup = pointerupHandler;
|
||||||
|
el.onpointercancel = pointerupHandler;
|
||||||
|
el.onpointerout = pointerupHandler;
|
||||||
|
el.onpointerleave = pointerupHandler;
|
||||||
|
}
|
||||||
|
function pointerdownHandler(ev) {
|
||||||
|
// The pointerdown event signals the start of a touch interaction.
|
||||||
|
// This event is cached to support 2-finger gestures
|
||||||
|
evCache.push(ev);
|
||||||
|
log("pointerDown", ev);
|
||||||
|
}
|
||||||
|
function pointermoveHandler(ev) {
|
||||||
|
// This function implements a 2-pointer horizontal pinch/zoom gesture.
|
||||||
|
//
|
||||||
|
// If the distance between the two pointers has increased (zoom in),
|
||||||
|
// the target element's background is changed to "pink" and if the
|
||||||
|
// distance is decreasing (zoom out), the color is changed to "lightblue".
|
||||||
|
//
|
||||||
|
// This function sets the target element's border to "dashed" to visually
|
||||||
|
// indicate the pointer's target received a move event.
|
||||||
|
log("pointerMove", ev);
|
||||||
|
ev.target.style.border = "dashed";
|
||||||
|
|
||||||
|
// Find this event in the cache and update its record with this event
|
||||||
|
const index = evCache.findIndex(
|
||||||
|
(cachedEv) => cachedEv.pointerId === ev.pointerId,
|
||||||
|
);
|
||||||
|
evCache[index] = ev;
|
||||||
|
|
||||||
|
// If two pointers are down, check for pinch gestures
|
||||||
|
if (evCache.length === 2) {
|
||||||
|
// Calculate the distance between the two pointers
|
||||||
|
const curDiff = Math.abs(evCache[0].clientX - evCache[1].clientX);
|
||||||
|
|
||||||
|
if (prevDiff > 0) {
|
||||||
|
if (curDiff > prevDiff) {
|
||||||
|
// The distance between the two pointers has increased
|
||||||
|
log("Pinch moving OUT -> Zoom in", ev);
|
||||||
|
ev.target.style.background = "pink";
|
||||||
|
}
|
||||||
|
if (curDiff < prevDiff) {
|
||||||
|
// The distance between the two pointers has decreased
|
||||||
|
log("Pinch moving IN -> Zoom out", ev);
|
||||||
|
ev.target.style.background = "lightblue";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cache the distance for the next move event
|
||||||
|
prevDiff = curDiff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function pointerupHandler(ev) {
|
||||||
|
log(ev.type, ev);
|
||||||
|
// Remove this pointer from the cache and reset the target's
|
||||||
|
// background and border
|
||||||
|
removeEvent(ev);
|
||||||
|
ev.target.style.background = "white";
|
||||||
|
ev.target.style.border = "1px solid black";
|
||||||
|
|
||||||
|
// If the number of pointers down is less than two then reset diff tracker
|
||||||
|
if (evCache.length < 2) {
|
||||||
|
prevDiff = -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function removeEvent(ev) {
|
||||||
|
// Remove this event from the target's cache
|
||||||
|
const index = evCache.findIndex(
|
||||||
|
(cachedEv) => cachedEv.pointerId === ev.pointerId,
|
||||||
|
);
|
||||||
|
evCache.splice(index, 1);
|
||||||
|
}
|
||||||
|
// Log events flag
|
||||||
|
let logEvents = false;
|
||||||
|
|
||||||
|
// Logging/debugging functions
|
||||||
|
function enableLog(ev) {
|
||||||
|
logEvents = !logEvents;
|
||||||
|
}
|
||||||
|
|
||||||
|
function log(prefix, ev) {
|
||||||
|
if (!logEvents) return;
|
||||||
|
const o = document.getElementsByTagName("output")[0];
|
||||||
|
o.innerText += `${prefix}:
|
||||||
|
pointerID = ${ev.pointerId}
|
||||||
|
pointerType = ${ev.pointerType}
|
||||||
|
isPrimary = ${ev.isPrimary}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearLog(event) {
|
||||||
|
const o = document.getElementsByTagName("output")[0];
|
||||||
|
o.textContent = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
182
app/assets/index.html.1.html
Normal file
182
app/assets/index.html.1.html
Normal file
|
|
@ -0,0 +1,182 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta content="width=device-width,initial-scale=1.0" name="viewport">
|
||||||
|
</head>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
touch-action: pan-x pan-y;
|
||||||
|
height: 100%
|
||||||
|
}
|
||||||
|
@keyframes wobble {
|
||||||
|
0% {
|
||||||
|
transform: scale(0.1);
|
||||||
|
opacity:0.0
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1.0);
|
||||||
|
opacity:1.0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
background-color:#ffa;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
margin: 0em;
|
||||||
|
padding: 2em;
|
||||||
|
}
|
||||||
|
#target {
|
||||||
|
background: white;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<!--<body onload="init();" style="touch-action:none">-->
|
||||||
|
<body onload="init();">
|
||||||
|
<div id="target">
|
||||||
|
Touch and Hold with 2 pointers, then pinch in or out.<br />
|
||||||
|
The background color will change to pink if the pinch is opening (Zoom In)
|
||||||
|
or changes to lightblue if the pinch is closing (Zoom out).
|
||||||
|
</div>
|
||||||
|
<!-- UI for logging/debugging -->
|
||||||
|
<button id="log" onclick="enableLog(event);">Start/Stop event logging</button>
|
||||||
|
<button id="clearlog" onclick="clearLog(event);">Clear the log</button>
|
||||||
|
<p></p>
|
||||||
|
<output></output>
|
||||||
|
|
||||||
|
<a href="https://server.alexmahr.de/calender">calender</a>
|
||||||
|
<h1>Webview</h1>
|
||||||
|
<pre id="output">output</pre>
|
||||||
|
<script>
|
||||||
|
window.addEventListener("error",(error)=>{
|
||||||
|
document.body.innerHTML = "<h1>error</h1><pre>" +
|
||||||
|
error.filename +
|
||||||
|
"\nline:" + error.lineno +
|
||||||
|
"\n"+error.message +"</pre>";
|
||||||
|
},false);
|
||||||
|
|
||||||
|
['touchstart','touchmove','touchend'].forEach((evname)=>{
|
||||||
|
window.addEventListener(evname,(ev)=>{
|
||||||
|
output.textContent+=evname+"\n" ;
|
||||||
|
ev.preventDefault();
|
||||||
|
},false);
|
||||||
|
});
|
||||||
|
window.addEventListener("load",()=>{
|
||||||
|
var count = localStorage.getItem("app-opened-count")|| 0;
|
||||||
|
count++;
|
||||||
|
localStorage.setItem("app-opened-count",count);
|
||||||
|
var h2 = document.createElement("h2");
|
||||||
|
h2.textContent = "Javascript works! (app was opened " + count + " times)";
|
||||||
|
h2.style.animation="wobble 1s ease-in-out 0s 1 forwards normal running"
|
||||||
|
document.body.appendChild(h2);
|
||||||
|
},false);
|
||||||
|
|
||||||
|
// Global vars to cache event state
|
||||||
|
const evCache = [];
|
||||||
|
let prevDiff = -1;
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
// Install event handlers for the pointer target
|
||||||
|
const el = document.getElementById("target");
|
||||||
|
el.onpointerdown = pointerdownHandler;
|
||||||
|
el.onpointermove = pointermoveHandler;
|
||||||
|
|
||||||
|
// Use same handler for pointer{up,cancel,out,leave} events since
|
||||||
|
// the semantics for these events - in this app - are the same.
|
||||||
|
el.onpointerup = pointerupHandler;
|
||||||
|
el.onpointercancel = pointerupHandler;
|
||||||
|
el.onpointerout = pointerupHandler;
|
||||||
|
el.onpointerleave = pointerupHandler;
|
||||||
|
}
|
||||||
|
function pointerdownHandler(ev) {
|
||||||
|
// The pointerdown event signals the start of a touch interaction.
|
||||||
|
// This event is cached to support 2-finger gestures
|
||||||
|
evCache.push(ev);
|
||||||
|
log("pointerDown", ev);
|
||||||
|
}
|
||||||
|
function pointermoveHandler(ev) {
|
||||||
|
// This function implements a 2-pointer horizontal pinch/zoom gesture.
|
||||||
|
//
|
||||||
|
// If the distance between the two pointers has increased (zoom in),
|
||||||
|
// the target element's background is changed to "pink" and if the
|
||||||
|
// distance is decreasing (zoom out), the color is changed to "lightblue".
|
||||||
|
//
|
||||||
|
// This function sets the target element's border to "dashed" to visually
|
||||||
|
// indicate the pointer's target received a move event.
|
||||||
|
log("pointerMove", ev);
|
||||||
|
ev.target.style.border = "dashed";
|
||||||
|
|
||||||
|
// Find this event in the cache and update its record with this event
|
||||||
|
const index = evCache.findIndex(
|
||||||
|
(cachedEv) => cachedEv.pointerId === ev.pointerId,
|
||||||
|
);
|
||||||
|
evCache[index] = ev;
|
||||||
|
|
||||||
|
// If two pointers are down, check for pinch gestures
|
||||||
|
if (evCache.length === 2) {
|
||||||
|
// Calculate the distance between the two pointers
|
||||||
|
const curDiff = Math.abs(evCache[0].clientX - evCache[1].clientX);
|
||||||
|
|
||||||
|
if (prevDiff > 0) {
|
||||||
|
if (curDiff > prevDiff) {
|
||||||
|
// The distance between the two pointers has increased
|
||||||
|
log("Pinch moving OUT -> Zoom in", ev);
|
||||||
|
ev.target.style.background = "pink";
|
||||||
|
}
|
||||||
|
if (curDiff < prevDiff) {
|
||||||
|
// The distance between the two pointers has decreased
|
||||||
|
log("Pinch moving IN -> Zoom out", ev);
|
||||||
|
ev.target.style.background = "lightblue";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cache the distance for the next move event
|
||||||
|
prevDiff = curDiff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function pointerupHandler(ev) {
|
||||||
|
log(ev.type, ev);
|
||||||
|
// Remove this pointer from the cache and reset the target's
|
||||||
|
// background and border
|
||||||
|
removeEvent(ev);
|
||||||
|
ev.target.style.background = "white";
|
||||||
|
ev.target.style.border = "1px solid black";
|
||||||
|
|
||||||
|
// If the number of pointers down is less than two then reset diff tracker
|
||||||
|
if (evCache.length < 2) {
|
||||||
|
prevDiff = -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function removeEvent(ev) {
|
||||||
|
// Remove this event from the target's cache
|
||||||
|
const index = evCache.findIndex(
|
||||||
|
(cachedEv) => cachedEv.pointerId === ev.pointerId,
|
||||||
|
);
|
||||||
|
evCache.splice(index, 1);
|
||||||
|
}
|
||||||
|
// Log events flag
|
||||||
|
let logEvents = false;
|
||||||
|
|
||||||
|
// Logging/debugging functions
|
||||||
|
function enableLog(ev) {
|
||||||
|
logEvents = !logEvents;
|
||||||
|
}
|
||||||
|
|
||||||
|
function log(prefix, ev) {
|
||||||
|
if (!logEvents) return;
|
||||||
|
const o = document.getElementsByTagName("output")[0];
|
||||||
|
o.innerText += `${prefix}:
|
||||||
|
pointerID = ${ev.pointerId}
|
||||||
|
pointerType = ${ev.pointerType}
|
||||||
|
isPrimary = ${ev.isPrimary}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearLog(event) {
|
||||||
|
const o = document.getElementsByTagName("output")[0];
|
||||||
|
o.textContent = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
105
app/assets/pinch.js
Normal file
105
app/assets/pinch.js
Normal file
|
|
@ -0,0 +1,105 @@
|
||||||
|
// Global vars to cache event state
|
||||||
|
const evCache = [];
|
||||||
|
let prevDiff = -1;
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
// Install event handlers for the pointer target
|
||||||
|
const el = document.getElementById("target");
|
||||||
|
el.onpointerdown = pointerdownHandler;
|
||||||
|
el.onpointermove = pointermoveHandler;
|
||||||
|
|
||||||
|
// Use same handler for pointer{up,cancel,out,leave} events since
|
||||||
|
// the semantics for these events - in this app - are the same.
|
||||||
|
el.onpointerup = pointerupHandler;
|
||||||
|
el.onpointercancel = pointerupHandler;
|
||||||
|
el.onpointerout = pointerupHandler;
|
||||||
|
el.onpointerleave = pointerupHandler;
|
||||||
|
}
|
||||||
|
function pointerdownHandler(ev) {
|
||||||
|
// The pointerdown event signals the start of a touch interaction.
|
||||||
|
// This event is cached to support 2-finger gestures
|
||||||
|
evCache.push(ev);
|
||||||
|
log("pointerDown", ev);
|
||||||
|
}
|
||||||
|
function pointermoveHandler(ev) {
|
||||||
|
// This function implements a 2-pointer horizontal pinch/zoom gesture.
|
||||||
|
//
|
||||||
|
// If the distance between the two pointers has increased (zoom in),
|
||||||
|
// the target element's background is changed to "pink" and if the
|
||||||
|
// distance is decreasing (zoom out), the color is changed to "lightblue".
|
||||||
|
//
|
||||||
|
// This function sets the target element's border to "dashed" to visually
|
||||||
|
// indicate the pointer's target received a move event.
|
||||||
|
log("pointerMove", ev);
|
||||||
|
ev.target.style.border = "dashed";
|
||||||
|
|
||||||
|
// Find this event in the cache and update its record with this event
|
||||||
|
const index = evCache.findIndex(
|
||||||
|
(cachedEv) => cachedEv.pointerId === ev.pointerId,
|
||||||
|
);
|
||||||
|
evCache[index] = ev;
|
||||||
|
|
||||||
|
// If two pointers are down, check for pinch gestures
|
||||||
|
if (evCache.length === 2) {
|
||||||
|
// Calculate the distance between the two pointers
|
||||||
|
const curDiff = Math.abs(evCache[0].clientX - evCache[1].clientX);
|
||||||
|
|
||||||
|
if (prevDiff > 0) {
|
||||||
|
if (curDiff > prevDiff) {
|
||||||
|
// The distance between the two pointers has increased
|
||||||
|
log("Pinch moving OUT -> Zoom in", ev);
|
||||||
|
ev.target.style.background = "pink";
|
||||||
|
}
|
||||||
|
if (curDiff < prevDiff) {
|
||||||
|
// The distance between the two pointers has decreased
|
||||||
|
log("Pinch moving IN -> Zoom out", ev);
|
||||||
|
ev.target.style.background = "lightblue";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cache the distance for the next move event
|
||||||
|
prevDiff = curDiff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function pointerupHandler(ev) {
|
||||||
|
log(ev.type, ev);
|
||||||
|
// Remove this pointer from the cache and reset the target's
|
||||||
|
// background and border
|
||||||
|
removeEvent(ev);
|
||||||
|
ev.target.style.background = "white";
|
||||||
|
ev.target.style.border = "1px solid black";
|
||||||
|
|
||||||
|
// If the number of pointers down is less than two then reset diff tracker
|
||||||
|
if (evCache.length < 2) {
|
||||||
|
prevDiff = -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function removeEvent(ev) {
|
||||||
|
// Remove this event from the target's cache
|
||||||
|
const index = evCache.findIndex(
|
||||||
|
(cachedEv) => cachedEv.pointerId === ev.pointerId,
|
||||||
|
);
|
||||||
|
evCache.splice(index, 1);
|
||||||
|
}
|
||||||
|
// Log events flag
|
||||||
|
let logEvents = false;
|
||||||
|
|
||||||
|
// Logging/debugging functions
|
||||||
|
function enableLog(ev) {
|
||||||
|
logEvents = !logEvents;
|
||||||
|
}
|
||||||
|
|
||||||
|
function log(prefix, ev) {
|
||||||
|
if (!logEvents) return;
|
||||||
|
const o = document.getElementsByTagName("output")[0];
|
||||||
|
o.innerText += `${prefix}:
|
||||||
|
pointerID = ${ev.pointerId}
|
||||||
|
pointerType = ${ev.pointerType}
|
||||||
|
isPrimary = ${ev.isPrimary}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearLog(event) {
|
||||||
|
const o = document.getElementsByTagName("output")[0];
|
||||||
|
o.textContent = "";
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue