feat(web): adds touch swipe support for header

Author: dvcol

src/components/common/navbar/NavbarComponent.vue

@@ -1,14 +1,17 @@
 <script lang="ts" setup>
 import { NTab, NTabs } from 'naive-ui';
-import { computed, toRefs, useSlots } from 'vue';
+import { computed, ref, toRefs, useSlots } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import NavbarSettingsDropdown from '~/components/common/navbar/NavbarSettingsDopdown.vue';
 
 import { Route } from '~/models/router.model';
+import { Logger } from '~/services/logger.service';
 import { NavbarService } from '~/services/navbar.service';
 import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
+import { Header } from '~/styles/layout.style';
 import { useI18n } from '~/utils/i18n.utils';
+import { handleSwipe, SwipeDirection } from '~/utils/touch.utils';
 
 const props = defineProps({
   disabled: {
@@ -43,6 +46,21 @@ const activeRoute = computed(() => {
   );
 });
 
+const nextRoute = computed(() => {
+  if (!activeRoute.value) return;
+  const index = activableRoutes.value.indexOf(activeRoute.value);
+  return activableRoutes.value[index + 1] ?? activableRoutes.value[0];
+});
+
+const prevRoute = computed(() => {
+  if (!activeRoute.value) return;
+  const index = activableRoutes.value.indexOf(activeRoute.value);
+  return (
+    activableRoutes.value[index - 1] ??
+    activableRoutes.value[activableRoutes.value.length - 1]
+  );
+});
+
 const { isHover, isFocus, ref: navElement } = NavbarService;
 
 const hasDrawer = computed(() => {
@@ -56,16 +74,50 @@ const showDrawer = computed(() => {
   NavbarService.open.value = show;
   return show;
 });
+
+const touchStart = ref<TouchEvent>();
+
+const onTouchStart = (e: TouchEvent) => {
+  touchStart.value = e;
+};
+
+const onTouchEnd = (e: TouchEvent) => {
+  const _touchStart = touchStart.value?.targetTouches?.[0];
+  const _touchEnd = e.changedTouches?.[0];
+  if (!_touchStart) return;
+  touchStart.value = undefined;
+  const swipe = handleSwipe(_touchStart, _touchEnd, {
+    vertical: Header.totalHeight,
+    up: Header.navbarHeight,
+    left: 50,
+    right: 50,
+  });
+  switch (swipe) {
+    case SwipeDirection.Down:
+      isHover.value = true;
+      return swipe;
+    case SwipeDirection.Up:
+      isHover.value = false;
+      return swipe;
+    case SwipeDirection.Right:
+      return nextRoute.value ? navigate(nextRoute.value) : undefined;
+    case SwipeDirection.Left:
+      return prevRoute.value ? navigate(prevRoute.value) : undefined;
+    default:
+      Logger.warn('Unknown swipe direction:', swipe);
+  }
+};
 </script>
 
 <template>
   <nav
     ref="navElement"
     @mouseenter="isHover = true"
     @mouseleave="isHover = false"
-    @touchstart="isHover = true"
     @focusin="isFocus = true"
     @focusout="isFocus = false"
+    @touchstart="onTouchStart"
+    @touchend="onTouchEnd"
   >
     <NTabs
       :key="enabledRoutes.join('-')"

src/styles/layout.style.ts

@@ -1,4 +1,5 @@
 export const Header = {
   navbarHeight: 44,
   drawerHeight: 56,
+  totalHeight: 100,
 } as const;

src/utils/touch.utils.ts

@@ -0,0 +1,75 @@
+export const SwipeDirection = {
+  Up: 'up',
+  Down: 'down',
+  Left: 'left',
+  Right: 'right',
+} as const;
+
+export type SwipeDirections = (typeof SwipeDirection)[keyof typeof SwipeDirection];
+
+export type SwipeTolerances = {
+  horizontal?: number;
+  up?: number;
+  down?: number;
+  vertical?: number;
+  left?: number;
+  right?: number;
+};
+
+/**
+ * Detects swipe up or down from touch events
+ * @param start - The TouchStart event
+ * @param end - The TouchEnd event
+ * @param tolerance - The vertical tolerance for swipe detection
+ * @param tolerance.up - The vertical tolerance for swipe up detection
+ * @param tolerance.down - The vertical tolerance for swipe down detection
+ * @param tolerance.horizontal - The vertical horizontal for swipe detection
+ */
+export const handleSwipeUpDown = (
+  start?: Touch,
+  end?: Touch,
+  { horizontal = 0, up = 0, down = 0 }: Pick<SwipeTolerances, 'horizontal' | 'up' | 'down'> = {},
+): SwipeDirections | undefined => {
+  if (!start || !end) return;
+  // If it is a swipe left/right above the tolerance exit
+  if (horizontal && Math.abs(start.clientX - end.clientX) >= horizontal) return;
+  // If it is a tap or swipe down, make hover true
+  if (start.clientY - end.clientY < down) return SwipeDirection.Down;
+
+  // If it is a swipe up with some left/right tolerance, make hover false
+  if (start.clientY - end.clientY > up) return SwipeDirection.Up;
+};
+
+/**
+ * Detects swipe left or right from touch events
+ * @param start - The TouchStart event
+ * @param end - The TouchEnd event
+ * @param tolerance - The horizontal tolerance for swipe detection
+ * @param tolerance.left - The horizontal tolerance for swipe left detection
+ * @param tolerance.right - The horizontal tolerance for swipe right detection
+ * @param tolerance.vertical - The vertical tolerance for swipe detection
+ */
+export const handleSwipeLeftRight = (
+  start?: Touch,
+  end?: Touch,
+  { vertical = 0, left = 50, right = 50 }: Pick<SwipeTolerances, 'vertical' | 'left' | 'right'> = {},
+): SwipeDirections | undefined => {
+  if (!start || !end) return;
+  // If it is a tap or swipe up/down above the tolerance exit
+  if (vertical && Math.abs(start.clientY - end.clientY) >= vertical) return;
+
+  // if swipe right
+  if (end.clientX - start.clientX > right) return SwipeDirection.Right;
+  // if swipe left
+  if (start.clientX - end.clientX > left) return SwipeDirection.Left;
+};
+
+/**
+ * Detects swipe direction from touch events
+ * @param start - The TouchStart event
+ * @param end - The TouchEnd event
+ * @param tolerances - The tolerances for swipe detection
+ */
+export const handleSwipe = (start?: Touch, end?: Touch, tolerances: SwipeTolerances = {}): SwipeDirections | undefined => {
+  return handleSwipeLeftRight(start, end, tolerances) ?? handleSwipeUpDown(start, end, tolerances);
+};