채팅을 위한 스와이프

기여 기능
5

좌에서 오른쪽으로 스와이프하면 사이드바가 나타나도록, 그리고 대화 중에는 스와이프하면 채팅 목록이 나타나도록 하는 스와이프 스크립트를 작성했습니다. 이는 사용자 경험을 개선하기 위한 목적입니다. 이 스크립트를 테마에 할당된 common\\head 컴포넌트에 복사해 넣으시면 됩니다. 이후에도 개선할 여지가 있다고 생각합니다.

<script>
  (function() {
    if (window.innerWidth > 768) return;

    let startX = 0;
    let startY = 0;

    // 채팅보다 먼저 제스처를 감지할 수 있도록 'window' 사용
    window.addEventListener("touchstart", function(e) {
      if (e.touches.length === 1) {
        startX = e.touches[0].clientX;
        startY = e.touches[0].clientY;
      }
    }, { passive: true, capture: true });

    window.addEventListener("touchend", function(e) {
      if (!startX) return;

      const touch = e.changedTouches[0];
      const deltaX = touch.clientX - startX;
      const deltaY = touch.clientY - startY;

      if (startX >= 10 && startX <= 120 && deltaX > 50 && Math.abs(deltaY) < 50) {
        
        // 1. 채팅 채널에 있는가?
        // URL에 Discourse 채팅 채널의 전형적인 키워드가 포함되어 있는지 확인
        const currentUrl = window.location.pathname;
        const isInChatChannel = currentUrl.includes('/chat/c/') || currentUrl.includes('/chat/channel/');
        
        if (isInChatChannel) {
          // 표준화된 경우 먼저 뒤로가기 링크를 클릭해 보기
          const chatBackBtn = document.querySelector('.chat-channel-header a, a[href="/chat"]');
          if (chatBackBtn) {
            chatBackBtn.click();
          } else {
            // 확실한 방법: 브라우저에 한 페이지 뒤로가기를 요청
            window.history.back();
          }
          startX = 0;
          return; // 여기서 스크립트 종료
        }

        // 2. 포럼의 다른 위치에 있는 경우 (메뉴 열기)
        const sidebarSelectors = [
          ".btn-sidebar-toggle",
          ".sidebar-toggle",
          "button.header-dropdown-toggle.hamburger-dropdown",
          "#toggle-hamburger-menu"
        ];

        for (const selector of sidebarSelectors) {
          const btn = document.querySelector(selector);
          if (btn && btn.getBoundingClientRect().width > 0) {
            btn.click();
            break; 
          }
        }
      }

      startX = 0;
      startY = 0;
    }, { passive: true, capture: true });
  })();
</script>