vilmibm
/
blackout
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix touch events on mobile

trunk
vilmibm 2023-08-04 00:59:21 +00:00
parent f9082d4d3e
commit 0f341fa482
1 changed files with 36 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
templates/index.tmpl
View File

@ -3,6 +3,7 @@
<head>
<title>blackout engine</title>
<script src="/html2canvas.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.3" />
</head>
<body>
<style>
@ -37,6 +38,10 @@
background-color: black;
}
.grey {
background-color: grey;
}
.hidden {
display: none;
}
@ -61,6 +66,7 @@
cursor: help;
}
@media (hover: hover) {
#paper span:hover {
background-color: white;
}
@ -68,6 +74,7 @@
#paper span.black:hover {
background-color: grey;
}
}
#aboutToggle {
color: white;
@ -130,15 +137,32 @@
</div>
</center>
<script>
document.querySelectorAll("#paper span").forEach(span =>
span.onclick = () => span.classList.toggle("black"));
document.querySelectorAll("#paper span").forEach(span => {
span.addEventListener("click", () => span.classList.toggle("black"));
span.addEventListener("touchstart", (e) => {
e.preventDefault();
span.classList.add("grey");
});
span.addEventListener("touchend", (e) => {
e.preventDefault();
span.classList.remove("grey");
span.classList.toggle("black");
});
span.addEventListener("touchcancel", (e) => {
e.preventDefault();
span.classList.remove("grey");
});
});
document.querySelector("#aboutToggle").onclick = (e) => {
e.preventDefault();
document.querySelector("#about").classList.toggle("hidden");
}
const copyImgButton = document.querySelector("#copyImage");
copyImgButton.addEventListener("animationend", () => copyImgButton.classList.remove("rainbow"), false);
copyImgButton.onclick = () => {
copyImgButton.addEventListener("click", () => {
html2canvas(document.querySelector("#paper")).then((canvas) => {
canvas.toBlob((blob) => {
let data = [new ClipboardItem({ [blob.type]: blob })];
@ -147,10 +171,11 @@
}, console.log);
});
});
}
});
const copyTextButton = document.querySelector("#copyText");
copyTextButton.addEventListener("animationend", () => copyTextButton.classList.remove("rainbow"), false);
copyTextButton.onclick = () => {
copyTextButton.addEventListener("click", () => {
let toCopy = "";
document.querySelectorAll("#paper span").forEach(span => {
let guts = span.innerHTML;
@ -187,7 +212,7 @@
}, (err) => {
console.log(err);
});
}
});
</script>
</body>
</html>