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

add fullscreen functionality

Browse source
This commit is contained in:
xenofem 2026-03-18 19:15:25 -04:00
parent 90756917aa
commit 8638a17a76
3 changed files with 27 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

12
dlibrary/static/viewer.css
View file

@ -42,9 +42,12 @@ html, body {
right: 0px;
}
#tap-back, #tap-restart {
#tap-back, #tap-restart, #tap-fullscreen {
left: 30vw;
width: 40vw;
}
#tap-back, #tap-restart {
height: 20vh;
}
@ -52,7 +55,7 @@ html, body {
height: min(51%, 100px);
}
#tap-restart svg {
#tap-restart svg, #tap-fullscreen svg {
height: min(90%, 175px);
}
@ -64,6 +67,11 @@ html, body {
bottom: 0px;
}
#tap-fullscreen {
height: 60vh;
top: 20vh;
}
.image-container img {
position: fixed;
left: 0;

9
dlibrary/static/viewer.js
View file

@ -193,6 +193,14 @@ document.addEventListener('DOMContentLoaded', () => {
window.location.href = `../${INDEX}`;
}
function fullscreen() {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
document.body.requestFullscreen();
}
}
function hideTapZones() {
document.getElementById('controls').style.opacity = 0;
}
@ -252,4 +260,5 @@ document.addEventListener('DOMContentLoaded', () => {
document.getElementById("tap-right").onclick = right;
document.getElementById("tap-restart").onclick = restart;
document.getElementById("tap-back").onclick = exitToWork;
document.getElementById("tap-fullscreen").onclick = fullscreen;
});

8
dlibrary/templates/viewer.html
View file

@ -46,6 +46,14 @@
<path d='M 54.16 -9.55 l -17.66 -9.39' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
</svg>
</div>
<div id="tap-fullscreen" class="tap">
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='140' height='140' viewBox='-70 -70 140 140'>
<path d='M 60 20 L 60 60 L 20 60' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
<path d='M -60 20 L -60 60 L -20 60' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
<path d='M -60 -20 L -60 -60 L -20 -60' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
<path d='M 60 -20 L 60 -60 L 20 -60' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
</svg>
</div>
</div>
<div class="image-container" id="current-image"></div>
<div class="image-container" id="preload-images"></div>