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

9
dlibrary/static/viewer.js
View file

@ -193,6 +193,14 @@ document.addEventListener('DOMContentLoaded', () => {
window.location.href = `../${INDEX}`; window.location.href = `../${INDEX}`;
} }
function fullscreen() {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
document.body.requestFullscreen();
}
}
function hideTapZones() { function hideTapZones() {
document.getElementById('controls').style.opacity = 0; document.getElementById('controls').style.opacity = 0;
} }
@ -252,4 +260,5 @@ document.addEventListener('DOMContentLoaded', () => {
document.getElementById("tap-right").onclick = right; document.getElementById("tap-right").onclick = right;
document.getElementById("tap-restart").onclick = restart; document.getElementById("tap-restart").onclick = restart;
document.getElementById("tap-back").onclick = exitToWork; 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'/> <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> </svg>
</div> </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>
<div class="image-container" id="current-image"></div> <div class="image-container" id="current-image"></div>
<div class="image-container" id="preload-images"></div> <div class="image-container" id="preload-images"></div>