add fullscreen button
This commit is contained in:
@@ -18,6 +18,7 @@ const recents_list = document.getElementById("recents_list");
|
||||
const img_track = document.getElementById("img_track");
|
||||
const img_counter = document.getElementById("img_counter");
|
||||
const back_btn = document.getElementById("back_btn");
|
||||
const fs_btn = document.getElementById("fs_btn");
|
||||
const arrow_left = document.getElementById("arrow_left");
|
||||
const arrow_right = document.getElementById("arrow_right");
|
||||
const loading_bar = document.getElementById("loading_bar");
|
||||
@@ -260,6 +261,20 @@ back_btn.addEventListener("click", close_gallery);
|
||||
arrow_left.addEventListener("click", prev_image);
|
||||
arrow_right.addEventListener("click", next_image);
|
||||
|
||||
fs_btn.addEventListener("click", toggle_fullscreen);
|
||||
|
||||
function toggle_fullscreen() {
|
||||
if (!document.fullscreenElement) {
|
||||
document.documentElement.requestFullscreen().catch(() => {});
|
||||
} else {
|
||||
document.exitFullscreen().catch(() => {});
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("fullscreenchange", () => {
|
||||
fs_btn.innerHTML = document.fullscreenElement ? "✕" : "⛶";
|
||||
});
|
||||
|
||||
recents_list.addEventListener("click", e => {
|
||||
const chip = e.target.closest(".recent_chip");
|
||||
if (!chip) return;
|
||||
|
||||
@@ -45,6 +45,7 @@
|
||||
<div id="gallery_top">
|
||||
<button id="back_btn">←</button>
|
||||
<span id="img_counter"></span>
|
||||
<button id="fs_btn" title="Fullscreen">⛶</button>
|
||||
</div>
|
||||
<button id="arrow_left">‹</button>
|
||||
<button id="arrow_right">›</button>
|
||||
|
||||
@@ -221,6 +221,25 @@ html, body {
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
#fs_btn {
|
||||
background: rgba(0,0,0,0.5);
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
#fs_btn:active {
|
||||
background: rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
/* desktop nav arrows */
|
||||
#arrow_left, #arrow_right {
|
||||
position: absolute;
|
||||
|
||||
Reference in New Issue
Block a user