fix scroll button

jason-murray · Sep 4, 2024 · 4898743 · 4898743
1 parent 92a9914
commit 4898743
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 68 deletions.
diff --git a/dist/assets/index-Bx6Ztde0.js b/dist/assets/index-Bx6Ztde0.js
diff --git a/dist/assets/index-DL7Bo29Q.js b/dist/assets/index-DL7Bo29Q.js
diff --git a/dist/assets/index-Dtq0necQ.css b/dist/assets/index-Dtq0necQ.css
diff --git a/dist/assets/index-nj2Y1J0B.css b/dist/assets/index-nj2Y1J0B.css
diff --git a/dist/index.html b/dist/index.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Split Feed for Twitch by Deleter</title>
-    <script type="module" crossorigin src="/split-feed/assets/index-DL7Bo29Q.js"></script>
-    <link rel="stylesheet" crossorigin href="/split-feed/assets/index-Dtq0necQ.css">
+    <script type="module" crossorigin src="/split-feed/assets/index-Bx6Ztde0.js"></script>
+    <link rel="stylesheet" crossorigin href="/split-feed/assets/index-nj2Y1J0B.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/App.vue b/src/App.vue
@@ -5,15 +5,15 @@ import device from "current-device";
 import NotificationFeed from './components/NotificationFeed.vue'
 import ChatFeed from './components/ChatFeed.vue'
 
-onMounted(() => {
+const containerRef = ref(null);
+const topRef = ref(null);
+const resizeRef = ref(null);
 
-  var resize = document.querySelector(".resize");
-  var top = document.querySelector(".top");
-  var container = document.querySelector(".resizeable-container");
+onMounted(() => {
 
-  var drag = false;
+  let drag = false;
 
-  var move = 0;
+  let move = 0;
 
   function interactStart (e) {
     drag = true;
@@ -43,9 +43,9 @@ onMounted(() => {
 
     if (drag) {
         if (device.mobile() && device.landscape()) {
-          top.style.width = move - resize.getBoundingClientRect().width / 2 + "px";
+          topRef.value.style.width = move - resizeRef.value.getBoundingClientRect().width / 2 + "px";
         } else {
-          top.style.height = move - resize.getBoundingClientRect().height / 2 + "px";
+          topRef.value.style.height = move - resizeRef.value.getBoundingClientRect().height / 2 + "px";
         }
         e.preventDefault();
     }
@@ -55,34 +55,38 @@ onMounted(() => {
     drag = false;
   }
 
-  resize.addEventListener("mousedown", interactStart);
-  resize.addEventListener("touchstart", interactStart);
+  resizeRef.value.addEventListener("mousedown", interactStart);
+  resizeRef.value.addEventListener("touchstart", interactStart);
 
-  container.addEventListener("mousemove", interactMove);
-  container.addEventListener("touchmove", interactMove);
+  containerRef.value.addEventListener("mousemove", interactMove);
+  containerRef.value.addEventListener("touchmove", interactMove);
 
-  container.addEventListener("mouseup", interactEnd);
-  container.addEventListener("touchend", interactEnd);
+  containerRef.value.addEventListener("mouseup", interactEnd);
+  containerRef.value.addEventListener("touchend", interactEnd);
 
   if (device.mobile() && device.landscape()) {
-    top.style.width = window.innerWidth / 2 + "px";
+    topRef.value.style.width = window.innerWidth / 2 + "px";
   } else {
-    top.style.height = window.innerHeight / 3 + "px";
+    topRef.value.style.height = window.innerHeight / 3 + "px";
   }
 
+  // scroll chat-scroll-container to bottom
+  let chatScrollContainer = document.querySelector(".chat-scroll-container");
+  chatScrollContainer.scrollTop = chatScrollContainer.scrollHeight;
+
   // Scroll to bottom on orientation change
   device.onChangeOrientation(newOrientation => {
     if(!device.mobile()){
       return;
     }
 
     if (newOrientation === "landscape") {
-      top.scrollTop = top.scrollHeight;
-      top.style.height = '';
-      top.style.width = window.innerHeight / 2 + "px";
+      topRef.value.scrollTop = topRef.value.scrollHeight;
+      topRef.value.style.height = '';
+      topRef.value.style.width = window.innerHeight / 2 + "px";
     } else {
-      top.style.width = '';
-      top.style.height = window.innerWidth / 3 + "px";
+      topRef.value.style.width = '';
+      topRef.value.style.height = window.innerWidth / 3 + "px";
     }
   });
 
@@ -92,11 +96,11 @@ onMounted(() => {
 
 <template>
   <main class="h-dvh">
-    <div class="resizeable-container">
-      <div class="top">
+    <div class="resizeable-container" ref="containerRef">
+      <div class="top flex-shrink-0 overflow-y-auto px-3" ref="topRef">
         <NotificationFeed />
       </div>
-      <div class="resize"></div>
+      <div class="resize" ref="resizeRef"></div>
       <div class="bottom">
         <ChatFeed />
       </div>

diff --git a/src/components/ChatFeed.vue b/src/components/ChatFeed.vue
@@ -2,41 +2,49 @@
 import { ref, onMounted } from 'vue'
 
 const iframeSrc = ref("");
-
 const chatScrollContainer = ref(null);
 
+const scrolled = ref(false);
+
 const url = new URL(window.location.href);
 const channel = url.searchParams.get("channel") ?? 'pablogz205';
 const size = url.searchParams.get("size") ?? 1;
 const font = url.searchParams.get("font") ?? 1;
 iframeSrc.value = `https://www.giambaj.it/twitch/jchat/v2/?channel=${channel}&size=${size}&font=${font}`;
 
 onMounted( () => {
-    // scroll chat-scroll-container to bottom
-    var chatScrollContainer = document.querySelector(".chat-scroll-container");
-    chatScrollContainer.scrollTop = chatScrollContainer.scrollHeight;
-
     // on scroll up chat-scroll-container display scroll to bottom button
-    chatScrollContainer.addEventListener("scroll", function() {
-        var scrollToBottomButton = document.querySelector(".scroll-to-bottom-button");
-        if (chatScrollContainer.scrollTop + chatScrollContainer.clientHeight < chatScrollContainer.scrollHeight) {
-            scrollToBottomButton.style.opacity = "1";
+    setInterval(() => {
+        if (Math.ceil(chatScrollContainer.value.scrollTop) + chatScrollContainer.value.clientHeight < chatScrollContainer.value.scrollHeight) {
+            scrolled.value = true;
         } else {
-            scrollToBottomButton.style.opacity = "0";
+            scrolled.value = false;
         }
-    });
+    }, 500);
 });
 
 
 function scrollToBottom() {
-    chatScrollContainer.value.scrollTop = chatScrollContainer.value.scrollHeight;
+    // smooth scroll
+    chatScrollContainer.value.scrollTo({
+        top: chatScrollContainer.value.scrollHeight,
+        behavior: 'smooth'
+    });
+
+    setTimeout(() => {
+        scrolled.value = false;
+    }, 1000);
 }
 
 </script>
 
 <template>
     <div class="chat-scroll-container" ref="chatScrollContainer">
         <iframe class="chat-frame" :src="iframeSrc"></iframe>
-        <button class="scroll-to-bottom-button absolute bottom-4 bg-orange-600 rounded p-2 font-bold left-[50%] translate-x-[-50%] transition-all duration-300" @click="scrollToBottom">Scroll to bottom</button>
     </div>
+    <Transition name="slide-fade">
+        <button v-if="scrolled" @click="scrollToBottom" class="svg scroll-to-bottom-button bg-purple-700 hover:bg-purple-800 drop-shadow-lg rounded-full p-1 font-bold">
+            <svg width="30px" height="30px" class="translate-y-[2px]" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"/></svg>
+        </button>
+    </Transition>
 </template>
diff --git a/src/components/NotificationFeed.vue b/src/components/NotificationFeed.vue
@@ -503,13 +503,13 @@ if(debug) {
         <svg v-if="sound" height="30px" width="30px" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><rect fill="none" height="256" width="256"/><path d="M155.5,24.8a8,8,0,0,0-8.4.9L77.2,80H32A16,16,0,0,0,16,96v64a16,16,0,0,0,16,16H77.2l69.9,54.3A7.9,7.9,0,0,0,152,232a8.5,8.5,0,0,0,3.5-.8A8,8,0,0,0,160,224V32A8,8,0,0,0,155.5,24.8Z"/><path d="M192,96a8,8,0,0,0-8,8v48a8,8,0,0,0,16,0V104A8,8,0,0,0,192,96Z"/><path d="M224,80a8,8,0,0,0-8,8v80a8,8,0,0,0,16,0V88A8,8,0,0,0,224,80Z"/></svg>
         <svg v-else height="30px" width="30px" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><rect fill="none" height="256" width="256"/><path d="M192,160a8,8,0,0,0,8-8V104a8,8,0,0,0-16,0v48A8,8,0,0,0,192,160Z"/><path d="M224,80a8,8,0,0,0-8,8v80a8,8,0,0,0,16,0V88A8,8,0,0,0,224,80Z"/><path d="M53.9,34.6A8,8,0,0,0,42.1,45.4L73.6,80H32A16,16,0,0,0,16,96v64a16,16,0,0,0,16,16H77.3l69.8,54.3A8.1,8.1,0,0,0,152,232a8.5,8.5,0,0,0,3.5-.8A8,8,0,0,0,160,224V175.1l42.1,46.3A8,8,0,0,0,208,224a8.2,8.2,0,0,0,5.4-2.1,7.9,7.9,0,0,0,.5-11.3Z"/><path d="M146.1,112.2a7.9,7.9,0,0,0,5.9,2.6,7.4,7.4,0,0,0,2.9-.5,8,8,0,0,0,5.1-7.5V32a8,8,0,0,0-12.9-6.3l-39.9,31a8.1,8.1,0,0,0-1,11.7Z"/></svg>
     </button>
-    <button @click="goFullscreen" class="svg bg-purple-700 hover:bg-purple-800 text-white font-bold p-2 rounded-full absolute top-[10px] right-[2px] p-2 cursor-pointer z-40">
+    <button @click="goFullscreen" class="svg bg-purple-700 hover:bg-purple-800 text-white font-bold rounded-full absolute top-[10px] right-[2px] p-2 cursor-pointer z-40">
         <svg v-if="fullscreen" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 16 16" fill="none"><g clip-path="url(#clip0_1450_2221)"><path d="M5.5 1.49909L4.19671 2.8L1.41658 0L0 1.41657L2.80003 4.2L1.5 5.5L2 6H6L6 2L5.5 1.49909Z"/><path d="M14.5009 5.5L13.2 4.19671L16 1.41658L14.5834 0L11.8 2.80003L10.5 1.5L10 2V6L14 6L14.5009 5.5Z"/><path d="M2.8 11.8033L1.49909 10.5L2 10L6 10L6 14L5.5 14.5L4.2 13.2L1.41657 16L0 14.5834L2.8 11.8033Z"/><path d="M10.5 14.5009L11.8033 13.2L14.5834 16L16 14.5834L13.2 11.8L14.5 10.5L14 10H10L10 14L10.5 14.5009Z"/></g><defs><clipPath id="clip0_1450_2221"><rect width="16" height="16"/></clipPath></defs></svg>
         <svg v-else height="30px" width="30px" version="1.1" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><desc/><defs/><g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1"><g fill="#FFFFFF" id="Core" transform="translate(-215.000000, -257.000000)"><g id="fullscreen" transform="translate(215.000000, 257.000000)"><path d="M2,9 L0,9 L0,14 L5,14 L5,12 L2,12 L2,9 L2,9 Z M0,5 L2,5 L2,2 L5,2 L5,0 L0,0 L0,5 L0,5 Z M12,12 L9,12 L9,14 L14,14 L14,9 L12,9 L12,12 L12,12 Z M9,0 L9,2 L12,2 L12,5 L14,5 L14,0 L9,0 L9,0 Z" id="Shape"/></g></g></g></svg>
     </button>
     <div class="notifications h-full flex flex-col justify-end">
         <TransitionGroup name="notification" tag="div">
-        <div v-for="notification in notifications" :key="notification.id" :class="notification.type + ' border' + notification.color" class="bg-slate-800 rounded-lg p-2 mb-3 w-full border-2">
+        <div v-for="notification in notifications" :key="notification.id" :class="'border' + notification.color" class="bg-slate-800 rounded-lg p-2 mb-3 w-full border-2">
             <!-- create pills for all possible notification properties -->
             <div class="flex justify-between">
                 <div class="flex items-center">

diff --git a/src/index.css b/src/index.css
@@ -12,15 +12,15 @@
 
 .top,
 .bottom {
-    overflow: hidden;
     display: grid;
     align-items: center;
 }
 
-.top {
-    flex-shrink: 0;
-    padding: 12px;
-    overflow-y: auto;
+.bottom {
+    overflow: hidden;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
 }
 
 .resize {
@@ -46,10 +46,6 @@
     border-bottom: 1px solid #fff;
 }
 
-.bottom {
-    flex-grow: 1;
-}
-
 .svg svg {
     fill: #fff;
 }
@@ -62,7 +58,9 @@
 
 .chat-scroll-container {
     max-height: 100%;
+    width: 100%;
     overflow-y: auto;
+    flex-shrink: 0;
 }
 
 .notifications > div > div {
@@ -85,6 +83,29 @@
   transform: translateX(-60px);
 }
 
+.scroll-to-bottom-button {
+    position: relative;
+    text-align: center;
+    overflow: visible;
+    width: 80px;
+    bottom: 60px;
+}
+
+.scroll-to-bottom-button svg {
+    display: inline-block;
+}
+
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+    transition: all 0.5s ease;
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+    opacity: 0;
+    transform: translateY(20px);
+}
+
 .notify-pill-nobg {
     @apply mr-2 rounded-full px-2 py-1 text-white font-bold text-center leading-none;
 }