Fix button UX

- The past is now on the left
- When you can't scroll further in one direction,
  the button is disabled

Author: haglobah

main.js

@@ -4,25 +4,85 @@ document.addEventListener('DOMContentLoaded', function() {
   const scrollRightBtn = document.getElementById('meetups-scroll-right');
 
   if (scrollLeftBtn && scrollRightBtn && meetupContainer) {
-      scrollLeftBtn.addEventListener('click', () => {
-          const containerWidth = meetupContainer.clientWidth;
-          const scrollAmount = containerWidth * 1.0;
-          meetupContainer.scrollBy({
-              left: -scrollAmount,
-              behavior: 'smooth'
-          });
+    const leftmostElemIsShown = () => {
+      let { clientWidth, scrollLeft, scrollWidth } = meetupContainer
+      scrollLeft = Math.abs(scrollLeft)
+      errorMargin = scrollWidth * 0.1
+
+      res = (scrollLeft > scrollWidth - clientWidth - errorMargin)
+      return res
+    }
+    const rightmostElemIsShown = () => {
+      let { scrollLeft, scrollWidth } = meetupContainer
+      scrollLeft = Math.abs(scrollLeft)
+      errorMargin = scrollWidth * 0.1
+
+      res = (scrollLeft < errorMargin)
+      return res
+    }
+
+    const deactivate = (button) => {
+      button.classList.add('opacity-0');
+      button.classList.remove('opacity-100', 'hover:cursor-pointer', 'hover:scale-125');
+      button.disabled = true;
+    }
+
+    const activate = (button) => {
+      button.classList.add('opacity-100', 'hover:cursor-pointer', 'hover:scale-125');
+      button.classList.remove('opacity-0');
+      button.disabled = false;
+    }
+
+    // Function to update button visibility
+    const updateButtonVisibility = () => {
+      // Check if the container is scrolled to the left
+      if (leftmostElemIsShown()) {
+        deactivate(scrollLeftBtn)
+      } else {
+        activate(scrollLeftBtn)
+      }
+      
+      // Check if the container is scrolled to the right
+      if (rightmostElemIsShown()) {
+        deactivate(scrollRightBtn)
+      } else {
+        activate(scrollRightBtn)
+      }
+    };
+
+    // Initial check on page load
+    updateButtonVisibility();
+
+    // Scroll Left Button
+    scrollLeftBtn.addEventListener('click', () => {
+      const containerWidth = meetupContainer.clientWidth;
+      meetupContainer.scrollBy({
+        left: -containerWidth,
+        behavior: 'smooth'
       });
+    });
 
-      scrollRightBtn.addEventListener('click', () => {
-          const containerWidth = meetupContainer.clientWidth;
-          const scrollAmount = containerWidth * 1.0;
-          meetupContainer.scrollBy({
-              left: scrollAmount,
-              behavior: 'smooth'
-          });
+    // Scroll Right Button
+    scrollRightBtn.addEventListener('click', () => {
+      const containerWidth = meetupContainer.clientWidth;
+      meetupContainer.scrollBy({
+        left: containerWidth,
+        behavior: 'smooth'
       });
+    });
+
+    // Update buttons after scrolling
+    meetupContainer.addEventListener('scroll', () => {
+      // Throttle the updates to improve performance
+      clearTimeout(meetupContainer.updateTimer);
+      meetupContainer.updateTimer = setTimeout(updateButtonVisibility, 100);
+    });
+
+    // Also update on window resize in case the container size changes
+    window.addEventListener('resize', updateButtonVisibility);
+    
   } else {
-      console.error('One or more required elements are missing from the DOM');
+    console.error('One or more required elements are missing from the DOM');
   }
 });
 

pollen.rkt

@@ -67,23 +67,21 @@
   `(div ([class "scroll-container mb-4 -mx-6 md:-mx-12 lg:-mx-24 md:gap-4 lg:gap-8 relative"])
     (div ([class "flex justify-between"])
       (button ([id "meetups-scroll-left"] [class "
-              sticky -mr-6 sm:-mr-2 md:mr-0 left-0 top-0 transform 
-        text-zinc-500 bg-gradient-to-r from-white md:bg-white h-auto 
-        hover:cursor-pointer hover:scale-125 
-        duration-200 ease-out transition 
+        sticky -mr-6 sm:-mr-2 md:mr-0 left-0 top-0 transform 
+        text-zinc-500 bg-gradient-to-r from-white md:bg-white h-auto  
+        duration-200 ease-out transition
         z-10"])
         (svg ([xmlns "http://www.w3.org/2000/svg"] [fill "none"] [viewBox "0 0 24 24"] [stroke-width "1.5"] [stroke "currentColor"] [class "size-10"])
             (path ([stroke-linecap "round"] [stroke-linejoin "round"] [d "M15.75 19.5 8.25 12l7.5-7.5"]))
         )
       )
-      (div ([id "meetups-container"] [class "relative flex items-center flex-grow snap-x overflow-x-auto"])
+      (div ([id "meetups-container"] [class "relative flex flex-row-reverse items-center flex-grow snap-x overflow-x-auto"])
         ,@body
       )
       (button ([id "meetups-scroll-right"] [class "
-              sticky -ml-6 sm:-ml-2 md:ml-0 right-0 top-0 transform  
+        sticky -ml-6 sm:-ml-2 md:ml-0 right-0 top-0 transform  
         text-zinc-500 bg-gradient-to-l from-white sm:bg-white h-auto 
-        hover:cursor-pointer hover:scale-125 
-        duration-200 ease-out transition 
+        duration-200 ease-out transition
         z-10"]) 
         (svg ([xmlns "http://www.w3.org/2000/svg"] [fill "none"] [viewBox "0 0 24 24"] [stroke-width "1.5"] [stroke "currentColor"] [class "size-10"])
             (path ([stroke-linecap "round"] [stroke-linejoin "round"] [d "m8.25 4.5 7.5 7.5-7.5 7.5"]))