Deslizar para el chat

Contribuir Característica
5

He creado un script para el gesto de deslizamiento (swipe) que permite mostrar la barra lateral deslizando de izquierda a derecha, y de la misma manera en el chat para mostrar la lista de conversaciones cuando se está en una conversación. El objetivo es mejorar la experiencia de usuario. Hay que copiar el script en un componente asignado a tu tema en common\head. Después, creo que siempre hay posibilidad de mejorarlo

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

    let startX = 0;
    let startY = 0;

    // Uso de 'window' para asegurarse de capturar el gesto antes que el chat
    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. ¿ESTAMOS EN UN CANAL DE CHAT?
        // Verificamos si la URL contiene las palabras clave típicas de un canal de chat de Discourse
        const currentUrl = window.location.pathname;
        const isInChatChannel = currentUrl.includes('/chat/c/') || currentUrl.includes('/chat/channel/');
        
        if (isInChatChannel) {
          // Primero intentamos hacer clic en el enlace de regreso si está estandarizado
          const chatBackBtn = document.querySelector('.chat-channel-header a, a[href="/chat"]');
          if (chatBackBtn) {
            chatBackBtn.click();
          } else {
            // Método infalible: le pedimos al navegador que retroceda una página
            window.history.back();
          }
          startX = 0;
          return; // Detenemos el script aquí
        }

        // 2. SI ESTAMOS EN OTRA PARTE DEL FORO (Apertura del menú)
        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>