Let's use a visibility property instead of changing a display option.

This commit is contained in:
Alexander Andreev 2021-09-09 20:46:21 +04:00
parent 4d49da01cd
commit ba3033c0b5
Signed by: Arav
GPG Key ID: 610DF2574456329F
2 changed files with 6 additions and 6 deletions

View File

@ -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;

View File

@ -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";
} }
})); }));