feat: mobile scrub button navigation

ubiquity · Oct 15, 2024 · 7c635d6 · 7c635d6
1 parent 90617ab
commit 7c635d6
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 5 deletions.
diff --git a/src/home/rendering/setup-keyboard-navigation.ts b/src/home/rendering/setup-keyboard-navigation.ts
@@ -6,6 +6,7 @@ const disableKeyBoardNavigationCurried = disableKeyboardNavigationCurry;
 
 let isKeyDownListenerAdded = false;
 let isMouseOverListenerAdded = false;
+let isScrubButtonsListenerAdded = false;
 
 export function setupKeyboardNavigation(container: HTMLDivElement) {
   if (!isKeyDownListenerAdded) {
@@ -16,6 +17,48 @@ export function setupKeyboardNavigation(container: HTMLDivElement) {
     container.addEventListener("mouseover", disableKeyBoardNavigationCurried);
     isMouseOverListenerAdded = true;
   }
+  if (!isScrubButtonsListenerAdded) {
+    setupScrubButtons();
+    isScrubButtonsListenerAdded = true;
+  }
+}
+
+function setupScrubButtons() {
+  const scrubLeft = document.getElementById("scrub-left");
+  const scrubRight = document.getElementById("scrub-right");
+
+  if (scrubLeft) {
+    scrubLeft.addEventListener("click", () => handleScrub("ArrowUp"));
+    scrubLeft.addEventListener("touchend", handleTouchEnd);
+  }
+  if (scrubRight) {
+    scrubRight.addEventListener("click", () => handleScrub("ArrowDown"));
+    scrubRight.addEventListener("touchend", handleTouchEnd);
+  }
+
+  // Prevent zooming on double tap
+  document.addEventListener("touchmove", preventZoom, { passive: false });
+}
+
+function handleTouchEnd(event: TouchEvent) {
+  event.preventDefault();
+  const target = event.target as HTMLElement;
+  if (target.id === "scrub-left") {
+    handleScrub("ArrowUp");
+  } else if (target.id === "scrub-right") {
+    handleScrub("ArrowDown");
+  }
+}
+
+function preventZoom(event: TouchEvent) {
+  if (event.touches.length > 1) {
+    event.preventDefault();
+  }
+}
+
+function handleScrub(direction: "ArrowUp" | "ArrowDown") {
+  const event = new KeyboardEvent("keydown", { key: direction });
+  keyDownHandlerCurried(event);
 }
 
 function disableKeyboardNavigationCurry() {

diff --git a/static/index.html b/static/index.html
@@ -58,7 +58,7 @@
             ><span class="full">Ubiquity DAO | </span><span class="mid">DevPool<input type="checkbox" id="view-toggle" /></span></span></div></label
       ><div id="filters" class="filters-container"></div><div id="authentication"></div
     ></div>
-    <div id="bottom-bar" class="toolbar"><div id="filters-bottom" class="filters-container"></div></div>
+    <div id="bottom-bar" class="toolbar"><div id="mobile-modal-scrub"><button id="scrub-left">&lsaquo;</button><button id="scrub-right">&rsaquo;</button></div><div id="filters-bottom" class="filters-container"></div></div>
     <div id="bottom-right">
       <a href="#" id="git-revision" target="_blank"></a>
       <a id="faq-link" href="https://dao.ubq.fi/devpool-flow" target="_blank"

diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css
@@ -818,14 +818,37 @@
   }
   @keyframes fadeOut {
     0% {
-      filter:opacity(1);
+      filter: opacity(1);
     }
     100% {
-      filter:opacity(0);
+      filter: opacity(0);
+      border-color: transparent;
     }
   }
   #faq-link > button {
     background: unset;
     border: unset;
   }
+
+  div#mobile-modal-scrub {
+    position: fixed;
+    right: 0;
+    display: none;
+  }
+
+  div#mobile-modal-scrub > button {
+    margin-right: 6px;
+    font-size: 24px;
+    padding: 0px 48px;
+    border: unset;
+  }
+  #bottom-bar {
+    overflow: visible;
+  }
+  .preview-active #filters-bottom {
+    display: none;
+  }
+  .preview-active div#mobile-modal-scrub {
+    display: unset;
+  }
 }
diff --git a/static/style/style.css b/static/style/style.css
@@ -818,14 +818,37 @@
   }
   @keyframes fadeOut {
     0% {
-      filter:opacity(1);
+      filter: opacity(1);
     }
     100% {
-      filter:opacity(0);
+      filter: opacity(0);
+      border-color: transparent;
     }
   }
   #faq-link > button {
     background: unset;
     border: unset;
   }
+
+  div#mobile-modal-scrub {
+    position: fixed;
+    right: 0;
+    display: none;
+  }
+
+  div#mobile-modal-scrub > button {
+    margin-right: 6px;
+    font-size: 24px;
+    padding: 0px 48px;
+    border: unset;
+  }
+  #bottom-bar {
+    overflow: visible;
+  }
+  .preview-active #filters-bottom {
+    display: none;
+  }
+  .preview-active div#mobile-modal-scrub {
+    display: unset;
+  }
 }