Свайп для чата

Внести вклад Функция
1

Здравствуйте :waving_hand:

Небольшое предложение по улучшению эргономики мобильного чата Discourse: планируется ли реализовать жест свайпа (слева направо) из канала или личного сообщения для быстрого открытия боковой панели (список каналов / список личных сообщений)? Это сделало бы навигацию на небольших экранах гораздо более плавной. Поскольку вы работаете над новым полем ввода, чтобы облегчить использование на мобильных устройствах одной рукой, я подумал, что то же самое можно сделать и для чата :sweat_smile:

7 лайков
2

На данный момент нет никаких планов по этому поводу, но стоит обсудить, какие жесты свайпа могли бы упростить навигацию по сайту такого типа.

6 лайков
3

Свайпы влево/вправо осложнены тем, что на различных устройствах они используются как жесты для перехода назад/вперёд в браузере.

2 лайка
4

Я считаю, что Дон предложил хороший подход в Topic Preview Modal; он не вмешивается в поведение по умолчанию, и я нашёл его очень полезным.

3 лайка
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>