tabbing and click events for enter and spacebar

This commit is contained in:
trinkey 2024-03-01 07:20:31 -05:00 committed by GitHub
parent 67683868cf
commit 1eb08692e2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -22,28 +22,37 @@
<body> <body>
<h1>Welcome, {{DISPL_NAME}}!</h1> <h1>Welcome, {{DISPL_NAME}}!</h1>
<div onclick="window.location.href = '/editor'" class="home-container"> <div tabindex="1" onclick="window.location.href = '/editor'" class="home-container">
<p>Edit your profile</p> <p>Edit your profile</p>
{{DISPL_NAME}} (@{{USERNAME}})<br> {{DISPL_NAME}} (@{{USERNAME}})<br>
</div> </div>
<br> <br>
<div onclick="toggleVisibility()" class="home-container"> <div tabindex="2" onclick="toggleVisibility()" class="home-container">
<p>Toggle visibility</p> <p>Toggle visibility</p>
Visibility: <span id="public-thing"></span>Public Visibility: <span id="public-thing"></span>Public
</div> </div>
<br> <br>
<div onclick="window.location.href = '/browse'" class="home-container"> <div tabindex="3" onclick="window.location.href = '/browse'" class="home-container">
<p>Browse other profiles</p> <p>Browse other profiles</p>
Total public profiles: <span id="total">{{TOTAL}}</span> Total public profiles: <span id="total">{{TOTAL}}</span>
</div> </div>
<br> <br>
<div onclick="window.location.href = '/u/{{USERNAME}}'" class="home-container"> <div tabindex="4" onclick="window.location.href = '/u/{{USERNAME}}'" class="home-container">
<p>Preview your profile</p> <p>Preview your profile</p>
Shortened url:<br> Shortened url:<br>
https://infopg.web.app/u/{{USERNAME}} https://infopg.web.app/u/{{USERNAME}}
</div> </div>
<script> <script>
[...document.querySelectorAll("[onclick][tabindex]")].forEach(function(val, index) {
val.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13 || event.keyCode === 32) {
val.click();
}
});
})
dom("public-thing").innerText = public ? "" : "Not " dom("public-thing").innerText = public ? "" : "Not "
function toggleVisibility() { function toggleVisibility() {
@ -60,4 +69,4 @@
} }
</script> </script>
</body> </body>
</html> </html>