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">
|
||||
</head>
|
||||
<style>
|
||||
:root {
|
||||
touch-action: pan-x pan-y;
|
||||
height: 100%
|
||||
}
|
||||
@keyframes wobble {
|
||||
0% {
|
||||
transform: scale(0.1);
|
||||
|
|
@ -15,9 +19,35 @@
|
|||
opacity:1.0
|
||||
}
|
||||
}
|
||||
body{
|
||||
background-color:#ffa;
|
||||
}
|
||||
div {
|
||||
margin: 0em;
|
||||
padding: 2em;
|
||||
}
|
||||
#target {
|
||||
background: white;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</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>
|
||||
<pre id="output">output</pre>
|
||||
<script>
|
||||
window.addEventListener("error",(error)=>{
|
||||
document.body.innerHTML = "<h1>error</h1><pre>" +
|
||||
|
|
@ -26,6 +56,12 @@ window.addEventListener("error",(error)=>{
|
|||
"\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++;
|
||||
|
|
@ -35,6 +71,9 @@ window.addEventListener("error",(error)=>{
|
|||
h2.style.animation="wobble 1s ease-in-out 0s 1 forwards normal running"
|
||||
document.body.appendChild(h2);
|
||||
},false);
|
||||
|
||||
|
||||
</script>
|
||||
<script src='pinch.js'></script>
|
||||
</body>
|
||||
</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