Updated main.js. A new feature was added that allows to move images and videos. But currently not working for videos.
This commit is contained in:
parent
ce1354c509
commit
470b371503
@ -58,10 +58,30 @@ function send_to_overlay(pathname, media_type_element) {
|
|||||||
overlay_label.textContent = decodeURI(pathname.substr(pathname.lastIndexOf("/") + 1));
|
overlay_label.textContent = decodeURI(pathname.substr(pathname.lastIndexOf("/") + 1));
|
||||||
|
|
||||||
if (media_type_element !== "audio") {
|
if (media_type_element !== "audio") {
|
||||||
|
offset_x = 0;
|
||||||
|
offset_y = 0;
|
||||||
|
translate_x = 0;
|
||||||
|
translate_y = 0;
|
||||||
media_element.addEventListener("wheel", e => {
|
media_element.addEventListener("wheel", e => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
g_scale = Math.min(Math.max(0.25, g_scale + (e.deltaY * -0.001)), 4);
|
g_scale = Math.min(Math.max(0.25, g_scale + (e.deltaY * -0.001)), 4);
|
||||||
e.target.style.transform = `scale(${g_scale})`; });
|
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") {
|
if (media_type_element !== "img") {
|
||||||
media_element.autoplay = media_element.controls = true;
|
media_element.autoplay = media_element.controls = true;
|
||||||
@ -130,11 +150,13 @@ window.addEventListener("keydown", e => {
|
|||||||
case "Home": g_current_row = g_back_row; g_back_row.firstChild.firstChild.focus(); break;
|
case "Home": g_current_row = g_back_row; g_back_row.firstChild.firstChild.focus(); break;
|
||||||
case "End": g_current_row = g_last_row; g_last_row.firstChild.firstChild.focus(); break;
|
case "End": g_current_row = g_last_row; g_last_row.firstChild.firstChild.focus(); break;
|
||||||
case "ArrowUp":
|
case "ArrowUp":
|
||||||
|
case "ArrowLeft":
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
getSibling(false, true);
|
getSibling(false, true);
|
||||||
g_current_row.firstChild.firstChild.focus();
|
g_current_row.firstChild.firstChild.focus();
|
||||||
break;
|
break;
|
||||||
case "ArrowDown":
|
case "ArrowDown":
|
||||||
|
case "ArrowRight":
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
getSibling(true, true);
|
getSibling(true, true);
|
||||||
g_current_row.firstChild.firstChild.focus();
|
g_current_row.firstChild.firstChild.focus();
|
||||||
@ -144,8 +166,16 @@ window.addEventListener("keydown", e => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
switch (e.code) {
|
switch (e.code) {
|
||||||
case "ArrowLeft": b_prev.click(); break;
|
case "ArrowUp":
|
||||||
case "ArrowRight": b_next.click(); break;
|
case "ArrowLeft":
|
||||||
|
e.preventDefault();
|
||||||
|
b_prev.click();
|
||||||
|
break;
|
||||||
|
case "ArrowDown":
|
||||||
|
case "ArrowRight":
|
||||||
|
e.preventDefault();
|
||||||
|
b_next.click();
|
||||||
|
break;
|
||||||
case "Escape": overlay_close(); break;
|
case "Escape": overlay_close(); break;
|
||||||
case "Space":
|
case "Space":
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
Loading…
Reference in New Issue
Block a user