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_track = document.getElementById("img_track");
|
||||||
const img_counter = document.getElementById("img_counter");
|
const img_counter = document.getElementById("img_counter");
|
||||||
const back_btn = document.getElementById("back_btn");
|
const back_btn = document.getElementById("back_btn");
|
||||||
|
const fs_btn = document.getElementById("fs_btn");
|
||||||
const arrow_left = document.getElementById("arrow_left");
|
const arrow_left = document.getElementById("arrow_left");
|
||||||
const arrow_right = document.getElementById("arrow_right");
|
const arrow_right = document.getElementById("arrow_right");
|
||||||
const loading_bar = document.getElementById("loading_bar");
|
const loading_bar = document.getElementById("loading_bar");
|
||||||
@@ -260,6 +261,20 @@ back_btn.addEventListener("click", close_gallery);
|
|||||||
arrow_left.addEventListener("click", prev_image);
|
arrow_left.addEventListener("click", prev_image);
|
||||||
arrow_right.addEventListener("click", next_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 => {
|
recents_list.addEventListener("click", e => {
|
||||||
const chip = e.target.closest(".recent_chip");
|
const chip = e.target.closest(".recent_chip");
|
||||||
if (!chip) return;
|
if (!chip) return;
|
||||||
|
|||||||
@@ -45,6 +45,7 @@
|
|||||||
<div id="gallery_top">
|
<div id="gallery_top">
|
||||||
<button id="back_btn">←</button>
|
<button id="back_btn">←</button>
|
||||||
<span id="img_counter"></span>
|
<span id="img_counter"></span>
|
||||||
|
<button id="fs_btn" title="Fullscreen">⛶</button>
|
||||||
</div>
|
</div>
|
||||||
<button id="arrow_left">‹</button>
|
<button id="arrow_left">‹</button>
|
||||||
<button id="arrow_right">›</button>
|
<button id="arrow_right">›</button>
|
||||||
|
|||||||
@@ -221,6 +221,25 @@ html, body {
|
|||||||
border-radius: 999px;
|
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 */
|
/* desktop nav arrows */
|
||||||
#arrow_left, #arrow_right {
|
#arrow_left, #arrow_right {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
Reference in New Issue
Block a user