Merge pull request #1535 from PR0M3TH3AN/codex/add-scrollable-modifier-class-for-strips

Enable scrollable tag strips for popular tags

css/tailwind.source.css

@@ -2419,6 +2419,34 @@
     overflow: hidden;
   }
 
+  .video-tag-strip--scroll {
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    padding-bottom: var(--space-xs);
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb) transparent;
+  }
+
+  .video-tag-strip--scroll::-webkit-scrollbar {
+    height: 4px;
+  }
+
+  .video-tag-strip--scroll::-webkit-scrollbar-track {
+    background:
+      linear-gradient(
+        to bottom,
+        transparent calc(50% - 0.5px),
+        var(--scrollbar-track) calc(50% - 0.5px) calc(50% + 0.5px),
+        transparent calc(50% + 0.5px)
+      );
+  }
+
+  .video-tag-strip--scroll::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb);
+    border-radius: var(--radius-pill);
+  }
+
   .video-tag-pill {
     @apply inline-flex items-center gap-2 rounded-full border border-status-neutral-border bg-status-neutral-surface px-3 py-1 text-2xs font-medium text-status-neutral-on;
     @apply relative justify-center whitespace-nowrap transition;

js/ui/components/hashtagStripHelper.js

@@ -12,12 +12,14 @@ export class HashtagStripHelper {
     window: win = null,
     logger,
     context = "",
+    scrollable = false,
   } = {}) {
     this.document = doc || (typeof document !== "undefined" ? document : null);
     this.window = win || this.document?.defaultView ||
       (typeof window !== "undefined" ? window : null);
     this.logger = logger || userLogger;
     this.context = typeof context === "string" ? context : "";
+    this.scrollable = scrollable === true;
 
     this.container = null;
     this._tagStrip = null;
@@ -191,11 +193,14 @@ export class HashtagStripHelper {
         onTagActivate: (tag, detail = {}) =>
           this._handleTagActivate(tag, detail),
         getTagState: (tag) => this._resolveTagState(tag),
+        scrollable: this.scrollable,
       });
 
       root.appendChild(strip);
       this._tagStrip = strip;
-      trimTagPillStripToFit({ strip, container: root });
+      if (!this.scrollable) {
+        trimTagPillStripToFit({ strip, container: root });
+      }
       root.hidden = strip.childElementCount === 0;
     } finally {
       this._isApplyingTrim = false;
@@ -238,9 +243,16 @@ export class HashtagStripHelper {
     }
 
     try {
+      const trigger =
+        detail?.button ||
+        detail?.event?.currentTarget ||
+        detail?.event?.target?.closest?.("button[data-tag]") ||
+        null;
       this.activateHandler({
         tag,
-        trigger: detail?.button || null,
+        event: detail?.event || null,
+        trigger,
+        button: trigger,
         context: this.context,
       });
     } catch (error) {

js/ui/components/tagPillList.js

@@ -213,12 +213,16 @@ export function renderTagPillStrip({
   tags = [],
   onTagActivate,
   getTagState,
+  scrollable = false,
 } = {}) {
   const resolvedDocument = resolveDocument(doc);
   assertDocument(resolvedDocument);
 
   const root = resolvedDocument.createElement("div");
   root.classList.add("video-tag-strip");
+  if (scrollable) {
+    root.classList.add("video-tag-strip--scroll");
+  }
 
   const buttons = tags.map((tag) =>
     createTagButton({

js/ui/views/VideoListView.js

@@ -180,6 +180,7 @@ export class VideoListView {
       document: this.document,
       window: this.window,
       logger: userLogger,
+      scrollable: true,
     });
     this.popularTagHelper.setContext("popular-tags");
     this.popularTagHelper.setActivateHandler((detail) =>
@@ -1288,8 +1289,13 @@ export class VideoListView {
       detail && typeof detail === "object" ? detail : { tag: detail };
     const tag = candidate.tag;
     const event = candidate.event || options.event || null;
-    const trigger =
-      candidate.trigger || candidate.button || options.button || null;
+    let trigger = candidate.trigger || candidate.button || options.button || null;
+    if (!trigger && event && event.target) {
+      trigger =
+        event.target.closest?.("button[data-tag]") ||
+        event.currentTarget ||
+        null;
+    }
     const context =
       typeof candidate.context === "string" && candidate.context
         ? candidate.context