Merge pull request #175 from agileware-jp/feature-87440-dragscroll

Feature 87440 プロジェクトメニューの横スクロールをドラッグでスクロール可能にする

src/js/index.js

@@ -1,5 +1,5 @@
 import { addDefaultTopMenStyle, initToggleTopMenu } from './topMenu'
-import { addNoScrollClass, saveMainMenuScrollPosition, restoreMainMenuScrollPosition } from './mainMenu'
+import { addNoScrollClass, saveMainMenuScrollPosition, restoreMainMenuScrollPosition, dragScroll } from './mainMenu'
 import { addDefaultSidebarStyle, initToggleSidebar } from './sidebar'
 import { waitForBilling, checkTrial, copyBillingContainer } from './billing'
 
@@ -63,6 +63,8 @@ window.addEventListener('DOMContentLoaded', () => {
   hiddenTabsButtons()
   addFeedbackLink()
 
+  dragScroll()
+
   waitForBilling('lychee-billng-global-message', (el) => {
     checkTrial(el)
     copyBillingContainer(el)

src/js/mainMenu.js

@@ -58,4 +58,61 @@ export function restoreMainMenuScrollPosition() {
   if(scrollPosition) {
     mainMenu.scrollLeft = scrollPosition
   }
+}
+
+export function dragScroll() {
+  if(!isMenuExists()) return
+
+  // スクロールが発生する場合
+  const mainMenu = getMainMenu()
+  if(isScrollable(mainMenu)) {
+    const container = document.querySelector('#main-menu')
+    let isDragging = false
+    let startX
+    let scrollLeft
+    let preventClick = false
+
+    container.addEventListener('mousedown', (e) => {
+      if(e.button !== 0) return // 左クリックのみドラッグスクロールしたい
+      isDragging = true
+      startX = e.pageX - container.offsetLeft
+      scrollLeft = container.scrollLeft
+
+      document.addEventListener('mousemove', mouseMoveHandler)
+      document.addEventListener('mouseup', mouseUpHandler)
+
+      preventClick = false
+
+      e.preventDefault()
+    })
+
+    function mouseMoveHandler(e) {
+      if (!isDragging) return
+      e.preventDefault()
+      const x = e.pageX - container.offsetLeft
+      const walk = x - startX
+      container.scrollLeft = scrollLeft - walk
+
+      // クリック時の僅かな動きでリンクが無効化されないよう、ある程度スクロールが発生したときに限定する
+      if(Math.abs(walk) > 5) {
+        container.classList.add('active')
+        preventClick = true
+      }
+    }
+
+    function mouseUpHandler() {
+      isDragging = false
+      container.classList.remove('active')
+
+      document.removeEventListener('mousemove', mouseMoveHandler)
+      document.removeEventListener('mouseup', mouseUpHandler)
+    }
+
+    container.addEventListener('click', (e) => {
+      if(preventClick) {
+        e.preventDefault()
+        preventClick = false
+      }
+    })
+  }
 }

src/sass/components/mainMenu.scss

@@ -48,27 +48,32 @@
 
   /* MainMenuのスクロールバー調整 */
   // 横スクロールが発生するとき
-  #main-menu ul:not(.menu-children) {
+  #main-menu {
     @apply overflow-x-scroll py-1
   }
 
-  #main-menu ul:not(.menu-children)::-webkit-scrollbar {
+  #main-menu.active,
+  #main-menu.active * {
+    @apply cursor-grabbing
+  }
+
+  #main-menu::-webkit-scrollbar {
     @apply h-[4px]
   }
 
-  #main-menu ul:not(.menu-children)::-webkit-scrollbar-thumb {
+  #main-menu::-webkit-scrollbar-thumb {
     @apply cursor-grab bg-background-dark/20 rounded
   }
 
-  #main-menu:hover ul:not(.menu-children)::-webkit-scrollbar-thumb {
+  #main-menu:hover::-webkit-scrollbar-thumb {
     @apply bg-background-dark/50
   }
 
-  #main-menu ul:not(.menu-children)::-webkit-scrollbar-thumb:active {
+  #main-menu::-webkit-scrollbar-thumb:active {
     @apply cursor-grabbing
   }
 
-  #main-menu ul:not(.menu-children)::-webkit-scrollbar-corner {
+  #main-menu::-webkit-scrollbar-corner {
     @apply hidden
   }