Let's use a visibility property instead of changing a display option.
This commit is contained in:
parent
4d49da01cd
commit
ba3033c0b5
@ -104,7 +104,8 @@ section { margin-top: 1rem; }
|
|||||||
#view {
|
#view {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: var(--view-background-color);
|
background-color: var(--view-background-color);
|
||||||
display: none;
|
display: flex;
|
||||||
|
visibility: hidden;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
const video_formats = ["webm", "mp4"];
|
const video_formats = ["webm", "mp4"];
|
||||||
const audio_formats = ["mp3", "flac", "opus", "ogg", "m4a"];
|
const audio_formats = ["mp3", "flac", "opus", "ogg", "m4a"];
|
||||||
const image_formats = ["jpg", "jpeg", "gif", "png", "bmp", "webp"];
|
const image_formats = ["jpg", "jpeg", "gif", "png", "bmp", "webp"];
|
||||||
const view_display_style = "flex";
|
|
||||||
|
|
||||||
let scale = 1;
|
let scale = 1;
|
||||||
|
|
||||||
@ -14,7 +13,7 @@ function mousescroll(e) {
|
|||||||
|
|
||||||
document.getElementById("view").addEventListener("click", e => {
|
document.getElementById("view").addEventListener("click", e => {
|
||||||
e.target.firstChild.remove();
|
e.target.firstChild.remove();
|
||||||
e.target.style.display = "none";
|
e.target.style.visibility = "hidden";
|
||||||
});
|
});
|
||||||
|
|
||||||
const file_links = Array.from(document.getElementsByTagName('tr')).slice(2).filter((e) => e.lastChild.innerHTML != "DIR").map(v => v.firstChild.firstChild);
|
const file_links = Array.from(document.getElementsByTagName('tr')).slice(2).filter((e) => e.lastChild.innerHTML != "DIR").map(v => v.firstChild.firstChild);
|
||||||
@ -28,7 +27,7 @@ file_links.forEach(f => f.addEventListener('click', e => {
|
|||||||
video.controls = true;
|
video.controls = true;
|
||||||
video.src = e.target.pathname;
|
video.src = e.target.pathname;
|
||||||
document.getElementById("view").appendChild(video);
|
document.getElementById("view").appendChild(video);
|
||||||
document.getElementById("view").style.display = view_display_style;
|
document.getElementById("view").style.visibility = "visible";
|
||||||
} else if (audio_formats.some(ext => e.target.pathname.endsWith(ext))) {
|
} else if (audio_formats.some(ext => e.target.pathname.endsWith(ext))) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const audio = document.createElement("audio");
|
const audio = document.createElement("audio");
|
||||||
@ -36,14 +35,14 @@ file_links.forEach(f => f.addEventListener('click', e => {
|
|||||||
audio.controls = true;
|
audio.controls = true;
|
||||||
audio.src = e.target.pathname;
|
audio.src = e.target.pathname;
|
||||||
document.getElementById("view").appendChild(audio);
|
document.getElementById("view").appendChild(audio);
|
||||||
document.getElementById("view").style.display = view_display_style;
|
document.getElementById("view").style.visibility = "visible";
|
||||||
} else if (image_formats.some(ext => e.target.pathname.endsWith(ext))) {
|
} else if (image_formats.some(ext => e.target.pathname.endsWith(ext))) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const image = document.createElement("img");
|
const image = document.createElement("img");
|
||||||
image.addEventListener('wheel', mousescroll);
|
image.addEventListener('wheel', mousescroll);
|
||||||
image.src = e.target.pathname;
|
image.src = e.target.pathname;
|
||||||
document.getElementById("view").appendChild(image);
|
document.getElementById("view").appendChild(image);
|
||||||
document.getElementById("view").style.display = view_display_style;
|
document.getElementById("view").style.visibility = "visible";
|
||||||
}
|
}
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user