diff --git a/frontend/css/components/reader/manga-reader.css b/frontend/css/components/reader/manga-reader.css index da100779..e3226067 100644 --- a/frontend/css/components/reader/manga-reader.css +++ b/frontend/css/components/reader/manga-reader.css @@ -71,10 +71,12 @@ max-width: 100% !important; } -#homeBtn { - position: absolute; - top: 1rem; - left: 1rem; +.manga-reader .navigation-buttons { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + gap: 1rem; } .chapter-select { diff --git a/src/main/java/online/hatsunemiku/tachideskvaadinui/component/reader/MangaReader.java b/src/main/java/online/hatsunemiku/tachideskvaadinui/component/reader/MangaReader.java index 771ced49..a6258767 100644 --- a/src/main/java/online/hatsunemiku/tachideskvaadinui/component/reader/MangaReader.java +++ b/src/main/java/online/hatsunemiku/tachideskvaadinui/component/reader/MangaReader.java @@ -36,6 +36,7 @@ import online.hatsunemiku.tachideskvaadinui.services.SettingsService; import online.hatsunemiku.tachideskvaadinui.services.TrackingCommunicationService; import online.hatsunemiku.tachideskvaadinui.services.TrackingDataService; +import online.hatsunemiku.tachideskvaadinui.utils.NavigationUtils; import online.hatsunemiku.tachideskvaadinui.view.RootView; import org.jetbrains.annotations.NotNull; import org.vaadin.addons.online.hatsunemiku.diamond.swiper.Swiper; @@ -84,7 +85,7 @@ private class Sidebar extends Div { public Sidebar(MangaService mangaService, Chapter chapter, Swiper swiper) { addClassName("sidebar"); - Button home = getHomeButton(); + Div navigationButtons = getNavigationButtons(chapter); List chapters = mangaService.getChapterList(chapter.getMangaId()); @@ -113,7 +114,35 @@ public Sidebar(MangaService mangaService, Chapter chapter, Swiper swiper) { dialog.open(); }); - add(home, chapterSelect, settingsBtn); + add(navigationButtons, chapterSelect, settingsBtn); + } + + @NotNull + private Div getNavigationButtons(Chapter chapter) { + Div navigationButtons = new Div(); + navigationButtons.addClassName("navigation-buttons"); + + Button home = getHomeButton(); + Button backToManga = getBackToMangaButton(chapter); + + navigationButtons.add(home, backToManga); + return navigationButtons; + } + + @NotNull + private Button getBackToMangaButton(Chapter chapter) { + Button backToManga = new Button(VaadinIcon.BOOK.create()); + + int mangaId = chapter.getMangaId(); + var ui = getUI().orElseGet(UI::getCurrent); + + if (ui == null) { + log.error("UI could not be accessed."); + throw new IllegalStateException("UI could not be accessed."); + } + + backToManga.addClickListener(e -> NavigationUtils.navigateToManga(mangaId, ui)); + return backToManga; } @NotNull @@ -283,26 +312,33 @@ public Reader( .getElement() .executeJs( """ - addEventListener('wheel', function (e) { - - var zoom = $0.swiper.zoom.scale; - if (e.deltaY < 0) { - zoom += 0.5; - } else { - zoom -= 0.5; - } - - if (zoom < 1) { - zoom = 1; - } - - if (zoom > 3) { - zoom = 3; - } - - $0.swiper.zoom.in(zoom); - }); - """, + var zoomListener = function (e) { + if ($0.swiper.zoom === undefined) { + console.info("Removing zoom listener."); + removeEventListener('wheel', zoomListener); + return; + } + + var zoom = $0.swiper.zoom.scale; + if (e.deltaY < 0) { + zoom += 0.5; + } else { + zoom -= 0.5; + } + + if (zoom < 1) { + zoom = 1; + } + + if (zoom > 3) { + zoom = 3; + } + + $0.swiper.zoom.in(zoom); + }; + + addEventListener('wheel', zoomListener); + """, swiper.getElement()); loadChapter(); diff --git a/src/main/java/online/hatsunemiku/tachideskvaadinui/utils/NavigationUtils.java b/src/main/java/online/hatsunemiku/tachideskvaadinui/utils/NavigationUtils.java index 6242f42a..a33574f8 100644 --- a/src/main/java/online/hatsunemiku/tachideskvaadinui/utils/NavigationUtils.java +++ b/src/main/java/online/hatsunemiku/tachideskvaadinui/utils/NavigationUtils.java @@ -10,20 +10,15 @@ import com.vaadin.flow.router.RouteParam; import com.vaadin.flow.router.RouteParameters; import lombok.experimental.UtilityClass; -import online.hatsunemiku.tachideskvaadinui.view.ReadingView; +import online.hatsunemiku.tachideskvaadinui.view.MangaView; @UtilityClass public class NavigationUtils { - public void navigateToReader(int mangaId, int chapterId, UI ui) { + public static void navigateToManga(int mangaId, UI ui) { String mangaIdStr = Integer.toString(mangaId); - String chapterIdString = Integer.toString(chapterId); - - RouteParam mangaIdParam = new RouteParam("mangaId", mangaIdStr); - RouteParam chapterIdParam = new RouteParam("chapterId", chapterIdString); - - RouteParameters params = new RouteParameters(mangaIdParam, chapterIdParam); - - ui.navigate(ReadingView.class, params); + RouteParam mangaIdParam = new RouteParam("id", mangaIdStr); + RouteParameters params = new RouteParameters(mangaIdParam); + ui.navigate(MangaView.class, params); } }