Arav/dwelling-files
1
0
Fork 0
Code Releases 9 Activity

Updated overlay.

Browse Source
This commit is contained in:
Alexander Andreev 2024-12-10 01:17:09 +04:00
parent 2e861a9fb9
commit bbe619ccce
Signed by: Arav
GPG Key ID: 25969B23DCB5CA34
3 changed files with 56 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/assets/css/main.css
View File

@ -175,13 +175,11 @@ thead tr th.clickable.sort-down::after { content: '↓'; }
#overlay div {
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
width: 100%; }
#overlay :is(video, audio, img) {
margin: auto;
max-height: 100%;
max-width: 86%; }
max-width: 100%;
width: auto; }
#overlay span {
bottom: 0;
@ -191,6 +189,12 @@ thead tr th.clickable.sort-down::after { content: '↓'; }
text-shadow: 0 0 .3rem var(--secondary-color);
z-index: 999; }
#overlay :is(video, audio, img) {
margin: auto;
max-height: 100%;
max-width: 100%;
width: auto; }
#overlay button {
background: none;
border: none;

90
web/assets/js/main.js
View File

@ -5,8 +5,8 @@ const audio_formats = ["mp3", "flac", "opus", "ogg", "m4a"];
const image_formats = ["jpg", "jpeg", "gif", "png", "bmp", "webp"];
const overlay = document.getElementById("overlay");
const overlay_content = overlay.children[1].firstChild;
const overlay_label = overlay.children[1].lastChild;
const overlay_content = overlay.children[1];
const overlay_label = overlay.children[2];
const g_tbody = document.getElementsByTagName('tbody')[0];
let g_first_row = g_tbody.firstChild;
@ -14,25 +14,44 @@ let g_last_row = g_tbody.lastChild;
const g_back_row = document.getElementsByTagName("tr")[1];
let g_scale = 1;
let g_oc_offset = [0, 0];
let g_oc_translate = [0, 0];
let g_current_row = g_back_row;
const file_links = Array.from(g_tbody.children)
.filter(e => e.lastChild.innerHTML != "DIR").map(l => l.firstChild.firstChild);
if (localStorage.getItem('audio_volume') == null)
localStorage['audio_volume'] = 0.5;
function overlay_close() {
overlay_content.children[0].remove();
overlay_content.firstChild.remove();
overlay.style.visibility = "hidden";
g_scale = 1;
g_oc_offset = g_oc_translate = [0, 0];
}
overlay_content.addEventListener("wheel", e => {
e.preventDefault();
g_scale = Math.min(Math.max(0.25, g_scale + (e.deltaY * -0.001)), 4);
e.target.style.transform =
`translate(${g_oc_translate[0]}px, ${g_oc_translate[1]}px) scale(${g_scale})`;
});
overlay.addEventListener("mouseup", e => {
if (e.target.tagName !== "DIV") return;
if (e.button === 0) overlay_close(); });
if (e.target.tagName === "DIV" && e.button === 0) overlay_close(); });
overlay_content.addEventListener("mousedown", e => {
if (e.buttons !== 1) return;
e.preventDefault();
g_oc_offset = [e.offsetX, e.offsetY];
});
overlay_content.addEventListener("mousemove", e => {
if (e.buttons !== 1) return;
e.preventDefault();
g_oc_translate[0] = e.clientX - e.target.x - g_oc_offset[0];
g_oc_translate[1] = e.clientY - e.target.y - g_oc_offset[1];
e.target.style.transform = `translate(${g_oc_translate[0]}px, ${g_oc_translate[1]}px) scale(${g_scale})`;
});
function determine_media_element(path) {
@ -49,40 +68,14 @@ function determine_media_element(path) {
function send_to_overlay(pathname, media_type_element) {
if (media_type_element === undefined)
return false;
if (overlay_content.children.length != 0)
overlay_content.children[0].remove();
if (overlay_content.children.length != 0) {
g_oc_offset = g_oc_translate = [0, 0];
g_scale = 1;
}
const media_element = document.createElement(media_type_element);
media_element.src = pathname;
overlay_label.textContent = decodeURI(pathname.substr(pathname.lastIndexOf("/") + 1));
if (media_type_element !== "audio") {
offset_x = 0;
offset_y = 0;
translate_x = 0;
translate_y = 0;
media_element.addEventListener("wheel", e => {
e.preventDefault();
g_scale = Math.min(Math.max(0.25, g_scale + (e.deltaY * -0.001)), 4);
media_element.style.transform = `translate(${translate_x}px, ${translate_y}px) scale(${g_scale})`;
});
media_element.addEventListener("mousedown", e => {
if (e.buttons == 1)
e.preventDefault();
offset_x = e.offsetX;
offset_y = e.offsetY;
});
media_element.addEventListener("mousemove", e => {
if (e.buttons !== 1) return;
e.preventDefault();
translate_x = e.clientX - e.target.x - offset_x;
translate_y = e.clientY - e.target.y - offset_y;
media_element.style.transform = `translate(${translate_x}px, ${translate_y}px) scale(${g_scale})`;
});
}
if (media_type_element !== "img") {
media_element.autoplay = media_element.controls = true;
media_element.addEventListener("volumechange", e => {
@ -90,7 +83,10 @@ function send_to_overlay(pathname, media_type_element) {
media_element.volume = localStorage["audio_volume"];
}
overlay_content.appendChild(media_element);
overlay_label.textContent = decodeURI(pathname.substr(pathname.lastIndexOf("/") + 1));
overlay_content.replaceChildren(media_element);
overlay.style.visibility = "visible";
return true;
@ -130,12 +126,14 @@ b_next.addEventListener("click", e => {
e.preventDefault();
});
for (let i = 0; i < file_links.length; ++i)
file_links[i].addEventListener("click", e => {
g_current_row = e.target.parentNode.parentNode;
if (send_to_overlay(e.target.pathname, determine_media_element(e.target.pathname)))
e.preventDefault();
Array.from(g_tbody.children)
.forEach(v => {
if (v.lastChild.innerHTML === "DIR") return;
v.firstChild.firstChild.addEventListener("click", e => {
g_current_row = e.target.parentNode.parentNode;
if (send_to_overlay(e.target.pathname, determine_media_element(e.target.pathname)))
e.preventDefault();
});
});
//// KEYBOARD HANDLING

8
web/index.templ
View File

@ -86,11 +86,9 @@ templ Index(currentPath, progVer string, stat *files.DirStat, entries *[]files.D
</footer>
<div id="overlay">
<button name="prev">&#10096;</button>
<div>
<div></div>
<span></span>
</div>
<button name="prev">&#10097;</button>
<div></div>
<span></span>
<button name="next">&#10097;</button>
</div>
</body>
</html>