xenofem/dlibrary
1
1
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity

make tap zones vaguely discoverable

Browse source
This commit is contained in:
xenofem 2024-01-23 17:35:33 -05:00
parent 323ce158f9
commit 79b946889d
3 changed files with 46 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

23
dlibrary/static/viewer.css
View file

@ -5,23 +5,36 @@ html, body {
margin: 0; margin: 0;
} }
#button-left, #button-right { .tap {
background: #000000;
opacity: 0.8;
position: fixed;
animation: 2s linear forwards fade;
display: flex;
justify-content: center;
align-items: center;
}
@keyframes fade {
to { opacity: 0; }
}
#tap-left, #tap-right {
position: fixed; position: fixed;
bottom: 0px; bottom: 0px;
width: 30vw; width: 30vw;
height: 100vh; height: 100vh;
} }
#button-left { #tap-left {
left: 0px; left: 0px;
} }
#button-right { #tap-right {
right: 0px; right: 0px;
} }
#button-back { #tap-back {
position: fixed;
top: 0px; top: 0px;
left: 30vw; left: 30vw;
width: 40vw; width: 40vw;

17
dlibrary/static/viewer.js
View file

@ -101,10 +101,18 @@ document.addEventListener('DOMContentLoaded', () => {
window.location.href = "../"; window.location.href = "../";
} }
function hideTapZones() {
for (const el of document.getElementsByClassName('tap')) {
el.style.opacity = 0;
}
}
changePage(currentPage); changePage(currentPage);
changeDuration(duration, paused); changeDuration(duration, paused);
document.onkeydown = event =>{ document.onkeydown = event => {
hideTapZones();
switch (event.keyCode) { switch (event.keyCode) {
case 32: //space case 32: //space
changeDuration(duration, !paused); changeDuration(duration, !paused);
@ -139,7 +147,8 @@ document.addEventListener('DOMContentLoaded', () => {
} }
}; };
document.getElementById("button-left").onclick = left; document.onclick = hideTapZones;
document.getElementById("button-right").onclick = right; document.getElementById("tap-left").onclick = left;
document.getElementById("button-back").onclick = exitToWork; document.getElementById("tap-right").onclick = right;
document.getElementById("tap-back").onclick = exitToWork;
}); });

18
dlibrary/templates/viewer.html
View file

@ -17,9 +17,21 @@
<div id="page-num"></div> <div id="page-num"></div>
<div id="duration"></div> <div id="duration"></div>
<div id="controls"> <div id="controls">
<div id="button-left"></div> <div id="tap-left" class="tap">
<div id="button-right"></div> <svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='80' height='140' viewBox='-10 -70 80 140'>
<div id="button-back"></div> <path d='M 60 -60 L 0 0 L 60 60' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
</svg>
</div>
<div id="tap-right" class="tap">
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='80' height='140' viewBox='-10 -70 80 140'>
<path d='M 0 -60 L 60 0 L 0 60' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
</svg>
</div>
<div id="tap-back" class="tap">
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='140' height='80' viewBox='-70 -10 140 80'>
<path d='M -60 60 L 0 0 L 60 60' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
</svg>
</div>
</div> </div>
<div id="image-container"></div> <div id="image-container"></div>
{% endblock %} {% endblock %}