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

Compare commits

base: vilmibm:f9082d4d3eba2f567d9c2019aec5e49180684bb3
Branches Tags
vilmibm:trunk
..
compare: vilmibm:7a2ad274843ccf053cb51819eda1ac4d220d23d7
Branches Tags
vilmibm:trunk

3 Commits
f9082d4d3e ... 7a2ad27484

Author SHA1 Message Date
vilmibm 7a2ad27484 support image download 2023-08-04 01:49:34 +00:00
vilmibm a12b1febe0 make a little nicer on phone viewport 2023-08-04 01:11:41 +00:00
vilmibm 0f341fa482 fix touch events on mobile 2023-08-04 00:59:21 +00:00
1 changed files with 61 additions and 15 deletions
Show Stats Expand all files Collapse all files

68
templates/index.tmpl
View File

@ -3,6 +3,7 @@
<head> <head>
<title>blackout engine</title> <title>blackout engine</title>
<script src="/html2canvas.min.js"></script> <script src="/html2canvas.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head> </head>
<body> <body>
<style> <style>
@ -37,6 +38,10 @@
background-color: black; background-color: black;
} }
.grey {
background-color: grey;
}
.hidden { .hidden {
display: none; display: none;
} }
@ -59,14 +64,30 @@
#paper span { #paper span {
cursor: help; cursor: help;
/* hack for the image download. without this, thin white artifacting at span margins */
margin-left:-1px;
} }
@media (max-width:400px) {
.centering {
display: block;
width: 100%;
margin: 0px;
}
}
@media (hover: hover) {
#paper span:hover { #paper span:hover {
background-color: white; background-color: white;
/* hack for the image download. without this, thin white artifacting at span margins */
margin-left:-1px;
} }
#paper span.black:hover { #paper span.black:hover {
background-color: grey; background-color: grey;
/* hack for the image download. without this, thin white artifacting at span margins */
margin-left:-1px;
}
} }
#aboutToggle { #aboutToggle {
@ -104,9 +125,7 @@
<center> <center>
<p> <p>
<button id="copyText">copy text to clipboard</button> <button id="copyText">copy text to clipboard</button>
</p> <button id="downloadImage">download as image</button>
<p>
<button id="copyImage" class="hidden">copy image to clipboard</button>
</p> </p>
<p> <p>
<a id="aboutToggle" href="">ABOUT</a> <a id="aboutToggle" href="">ABOUT</a>
@ -130,27 +149,54 @@
</div> </div>
</center> </center>
<script> <script>
document.querySelectorAll("#paper span").forEach(span => document.querySelectorAll("#paper span").forEach(span => {
span.onclick = () => span.classList.toggle("black")); 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) => { document.querySelector("#aboutToggle").onclick = (e) => {
e.preventDefault(); e.preventDefault();
document.querySelector("#about").classList.toggle("hidden"); document.querySelector("#about").classList.toggle("hidden");
} }
const copyImgButton = document.querySelector("#copyImage");
copyImgButton.addEventListener("animationend", () => copyImgButton.classList.remove("rainbow"), false); const downloadImgButton = document.querySelector("#downloadImage");
copyImgButton.onclick = () => { downloadImgButton.addEventListener("animationend", () => downloadImgButton.classList.remove("rainbow"), false);
downloadImgButton.addEventListener("click", () => {
html2canvas(document.querySelector("#paper")).then((canvas) => { html2canvas(document.querySelector("#paper")).then((canvas) => {
canvas.toBlob((blob) => { canvas.toBlob((blob) => {
/*
// can't use this because ff doesn't have support by default for clipboard.write()
let data = [new ClipboardItem({ [blob.type]: blob })]; let data = [new ClipboardItem({ [blob.type]: blob })];
navigator.clipboard.write(data).then(() => { navigator.clipboard.write(data).then(() => {
copyImgButton.classList.add("rainbow"); copyImgButton.classList.add("rainbow");
}, console.log); }, console.log);
*/
const downloadUrl = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = downloadUrl;
a.download = "blackout.png";
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(downloadUrl);
}); });
}); });
} });
const copyTextButton = document.querySelector("#copyText"); const copyTextButton = document.querySelector("#copyText");
copyTextButton.addEventListener("animationend", () => copyTextButton.classList.remove("rainbow"), false); copyTextButton.addEventListener("animationend", () => copyTextButton.classList.remove("rainbow"), false);
copyTextButton.onclick = () => { copyTextButton.addEventListener("click", () => {
let toCopy = ""; let toCopy = "";
document.querySelectorAll("#paper span").forEach(span => { document.querySelectorAll("#paper span").forEach(span => {
let guts = span.innerHTML; let guts = span.innerHTML;
@ -187,7 +233,7 @@
}, (err) => { }, (err) => {
console.log(err); console.log(err);
}); });
} });
</script> </script>
</body> </body>
</html> </html>