Enabled vertical scroll for horizontal movement in AI Tools (#495)

* Update ai-tools.js * Update script.js minor color fix * Update ai-tools.js fix warning
XengShi · Jan 26, 2025 · 1b64dfd · 1b64dfd
1 parent c405b72
commit 1b64dfd
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 21 deletions.
diff --git a/scripts/ai-tools.js b/scripts/ai-tools.js
@@ -7,63 +7,77 @@
  */
 
 // When User click on "AI-Tools"
-const element = document.getElementById("toolsCont");
+const aiToolName = document.getElementById("toolsCont");
 const shortcuts = document.getElementById("shortcutsContainer");
 
 function toggleShortcuts(event) {
     const shortcutsCheckbox = document.getElementById("shortcutsCheckbox");
 
     if (shortcutsCheckbox.checked) {
-        if (element.style.display === "flex") {
+        if (aiToolName.style.display === "flex") {
             shortcuts.style.display = "flex";
-            element.style.opacity = "0";
-            element.style.gap = "0";
-            element.style.transform = "translateX(-100%)";
+            aiToolName.style.opacity = "0";
+            aiToolName.style.gap = "0";
+            aiToolName.style.transform = "translateX(-100%)";
 
             setTimeout(() => {
-                element.style.display = "none";
+                aiToolName.style.display = "none";
                 shortcuts.style.display = "flex";
             }, 500);
         } else {
             shortcuts.style.display = "none";
-            element.style.display = "flex";
+            aiToolName.style.display = "flex";
             setTimeout(() => {
-                element.style.opacity = "1";
-                element.style.transform = "translateX(0)";
+                aiToolName.style.opacity = "1";
+                aiToolName.style.transform = "translateX(0)";
             }, 1);
             setTimeout(() => {
-                element.style.gap = "12px";
+                aiToolName.style.gap = "12px";
             }, 300);
         }
     } else {
-        if (element.style.display === "flex") {
+        if (aiToolName.style.display === "flex") {
             shortcuts.style.display = "none";
-            element.style.opacity = "0";
-            element.style.gap = "0";
-            element.style.transform = "translateX(-100%)";
+            aiToolName.style.opacity = "0";
+            aiToolName.style.gap = "0";
+            aiToolName.style.transform = "translateX(-100%)";
             setTimeout(() => {
-                element.style.display = "none";
+                aiToolName.style.display = "none";
             }, 500);
         } else {
             shortcuts.style.display = "none";
-            element.style.display = "flex";
+            aiToolName.style.display = "flex";
             setTimeout(() => {
-                element.style.opacity = "1";
-                element.style.transform = "translateX(0)";
+                aiToolName.style.opacity = "1";
+                aiToolName.style.transform = "translateX(0)";
             }, 1);
             setTimeout(() => {
-                element.style.gap = "12px";
+                aiToolName.style.gap = "12px";
             }, 300);
         }
     }
     // Prevent outside click handler from triggering
     if (event) event.stopPropagation();
 }
 
+// Allow horizontal scrolling with the mouse wheel
+const scrollContainer = document.getElementById('aiToolsCont');
+
+// Add a listener for the wheel event
+scrollContainer.addEventListener('wheel', (event) => {
+    // Check if the container is scrollable in x-axis
+    if (scrollContainer.scrollWidth > scrollContainer.clientWidth) {
+        if (event.deltaY !== 0) {
+            event.preventDefault(); // Prevent vertical scrolling
+            // Apply the deltaY from the wheel event to horizontal scroll
+            scrollContainer.scrollLeft += event.deltaY;
+        }
+    }
+}, { passive: false });
 
 // Collapse when clicking outside toolsCont
 document.addEventListener("click", (event) => {
-    if (!element.contains(event.target) && element.style.display === "flex") {
+    if (!aiToolName.contains(event.target) && aiToolName.style.display === "flex") {
         toggleShortcuts();
     }
 });

diff --git a/scripts/script.js b/scripts/script.js
@@ -556,10 +556,11 @@ const applySelectedTheme = (colorValue) => {
 
             .dark-theme .clearButton:hover {
                 background-color: var(--whitishColor-dark);
+		color: var(--darkColor-dark);
             }
 
             .dark-theme .clearButton:active {
-                color: #0e0e0e;
+                color: #000000;
             }
 
             .dark-theme .backupRestoreBtn {