Swipe pour le chat

Contribute Feature
5

J’ai fait un script pour le swipe pour faire apparaitre la barre latérale en glissant de gauche à droite et de même dans le chat pour faire apparaitre la liste quand on est dans une conversation. Le but est d’améliorer l’expérience utilisateur. Il faut copier le script dans un composant affecter à votre thème dans common\head. Après je pense qu’il y a toujours possibilité d’améliorer. Par contre, j’utilise un téléphone android à voir sur iphone si cela fonctionne :sweat_smile:

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

    let startX = 0;
    let startY = 0;

    // Utilisation de 'window' pour être sûr de capter le geste avant le 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. SOMMES-NOUS DANS UN CANAL DE CHAT ?
        // On vérifie si l'URL contient les mots-clés typiques d'un canal de chat Discourse
        const currentUrl = window.location.pathname;
        const isInChatChannel = currentUrl.includes('/chat/c/') || currentUrl.includes('/chat/channel/');
        
        if (isInChatChannel) {
          // On tente d'abord de cliquer sur le lien retour s'il est standardisé
          const chatBackBtn = document.querySelector('.chat-channel-header a, a[href="/chat"]');
          if (chatBackBtn) {
            chatBackBtn.click();
          } else {
            // Méthode infaillible : on demande au navigateur de reculer d'une page
            window.history.back();
          }
          startX = 0;
          return; // On arrête le script ici
        }

        // 2. SI NOUS SOMMES AILLEURS SUR LE FORUM (Ouverture du menu)
        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>