From 560b255b697b617638255c91c5679c96535ef3bb Mon Sep 17 00:00:00 2001
From: Masahiko AMANO <hiko-19@ya.ru>
Date: Thu, 2 Feb 2023 23:50:11 +0300
Subject: [PATCH] feat(web): add prev/next navigation buttons to file view menu

---
 web/public/css/tfm.css          | 27 ++++++++++++++++++++++++++-
 web/public/js/tfm-files.js      |  2 ++
 web/public/js/tfm-management.js | 32 ++++++++++++++++++++++++++++++++
 web/public/tfm/files.html       |  6 +++++-
 4 files changed, 65 insertions(+), 2 deletions(-)

diff --git a/web/public/css/tfm.css b/web/public/css/tfm.css
index 62b9f9d..f860494 100644
--- a/web/public/css/tfm.css
+++ b/web/public/css/tfm.css
@@ -69,13 +69,38 @@ main {
 	overflow-y: scroll;
 }
 
+.preview {
+	position: relative;
+	width: 100%;
+}
+
 #preview {
-	max-width: 100%;
+	width: 100%;
 	max-height: 90vh;
 	object-fit: contain;
 	object-position: center;
 }
 
+.file-nav-btn {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+
+.file-nav-btn:hover {
+	background-color: #0001;
+}
+
+#file-prev {
+	right: 50%;
+}
+
+#file-next {
+	left: 50%;
+}
+
 form {
 	flex: 1 1 auto;
 	padding: 2vw 2vw;
diff --git a/web/public/js/tfm-files.js b/web/public/js/tfm-files.js
index 71a74d4..8ab3f09 100644
--- a/web/public/js/tfm-files.js
+++ b/web/public/js/tfm-files.js
@@ -20,11 +20,13 @@ $(window).on("load", function () {
 $(document).on("dblclick", ".item", function (e) {
 	e.preventDefault();
 	let id = parseInt($(this).attr("id").slice(1));
+	current_sasa_index = 0;
 	sasahyou.every(sasa => {
 		if (sasa.id === id) {
 			current_sasa = sasa;
 			return false;
 		}
+		current_sasa_index++;
 		return true;
 	});
 	menu_view_file_open();
diff --git a/web/public/js/tfm-management.js b/web/public/js/tfm-management.js
index 8904068..05c4898 100644
--- a/web/public/js/tfm-management.js
+++ b/web/public/js/tfm-management.js
@@ -19,6 +19,7 @@ if (localStorage["shoppyou_mts"] != null) {
 	shoppyou_mts = parseInt(localStorage["shoppyou_mts"]);
 }
 var current_sasa = null, current_tanzaku = null;
+var current_sasa_index = 0;
 
 function sasahyou_load() {
 	let db_info = tdb_query("$TFM", 0, "");
@@ -135,6 +136,7 @@ function menu_view_close() {
 	$(".list-item").removeClass("selected").css("display", "");
 	$("#name").val("");
 	$(".menu #text-filter").val("");
+	current_sasa_index = -1;
 }
 
 function menu_add_open() {
@@ -149,6 +151,26 @@ function menu_add_close() {
 	$("#new-description").val("");
 }
 
+function file_next() {
+	if (current_sasa_index === sasahyou.length - 1) {
+		menu_view_close();
+		return;
+	}
+	current_sasa_index++;
+	current_sasa = sasahyou[current_sasa_index];
+	menu_view_file_open();
+}
+
+function file_prev() {
+	if (current_sasa_index === 0) {
+		menu_view_close();
+		return;
+	}
+	current_sasa_index--;
+	current_sasa = sasahyou[current_sasa_index];
+	menu_view_file_open();
+}
+
 $(document).keyup(function (e) {
 	if (e.key === "Escape") {
 		$(".selected").removeClass("selected");
@@ -201,3 +223,13 @@ $(document).on("click", "#btn-reset", function (e) {
 	e.preventDefault();
 	menu_add_close();
 });
+
+$(document).on("click", "#file-next", function (e) {
+	e.preventDefault();
+	file_next();
+});
+
+$(document).on("click", "#file-prev", function (e) {
+	e.preventDefault();
+	file_prev();
+});
diff --git a/web/public/tfm/files.html b/web/public/tfm/files.html
index 63f6c07..b5805b6 100644
--- a/web/public/tfm/files.html
+++ b/web/public/tfm/files.html
@@ -38,7 +38,11 @@
 </main>
 <div class="menu-wrapper">
 	<div class="menu" id="menu-file-view">
-		<img id="preview">
+		<div class="preview">
+			<img id="preview">
+			<div class="file-nav-btn" id="file-prev"></div>
+			<div class="file-nav-btn" id="file-next"></div>
+		</div>
 		<form>
 			<div class="form-group row">
 				<label class="col-sm-2 col-form-label" for="name">File name</label>