/* Жёстко задаём курсор для всех элементов, у которых в классе есть слово "draggable" */
[class*="draggable"] {
  cursor: grab !important;
  -webkit-user-drag: none;
  transition: cursor 0.08s;
}

/* Пока на body есть класс dragging-global — показываем сжатую ладонь */
.dragging-global [class*="draggable"] {
  cursor: grabbing !important;
}



(function () {
  // Делегирование: отслеживаем pointerdown/ pointerup на документе, 
  // чтобы сработало даже для динамически добавленных элементов.
  const selector = '[class*="draggable"]';

  // Флаг, чтобы не снимать класс сразу при быстром переключении
  let isActive = false;

  function isDraggableElement(el) {
    return el && el.closest && el.closest(selector);
  }

  // При нажатии любой кнопки или касании — включаем grabbing у всех draggable-элементов
  document.addEventListener('pointerdown', function (e) {
    // Если нажали по элементу, который внутри draggable-элемента
    const targetDraggable = isDraggableElement(e.target);
    if (!targetDraggable) return;

    // Опционально: разрешить только правую кнопку — если нужно, раскомментируй
    // if (e.button !== 2) return; 

    // Убираем стандартное контекстное меню при правом клике на draggable (опционально)
    // if (e.button === 2) e.preventDefault();

    // Ставим класс на body — CSS меняет курсоры у всех draggable-элементов
    document.body.classList.add('dragging-global');
    isActive = true;

    // Дополнительно: принудительно установим inline-курсор на сами элементы
    document.querySelectorAll(selector).forEach(el => {
      try { el.style.cursor = 'grabbing'; } catch (err) {}
    });
  }, { passive: true });

  // При отпускании/отмене — возвращаем всё обратно
  function stopDraggingVisual() {
    if (!isActive) return;
    isActive = false;
    document.body.classList.remove('dragging-global');

    // Убираем inline-курсор, чтобы позволить CSS снова управлять им
    document.querySelectorAll(selector).forEach(el => {
      try { el.style.cursor = ''; } catch (err) {}
    });
  }

  document.addEventListener('pointerup', function () {
    stopDraggingVisual();
  }, { passive: true });

  document.addEventListener('pointercancel', function () {
    stopDraggingVisual();
  }, { passive: true });

  // На случай, если drag прерывается мышью вне окна
  window.addEventListener('blur', function () {
    stopDraggingVisual();
  });

  // Отдельно: если не хочешь, чтобы контекстное меню появлялось при правом клике на draggable,
  // можно включить глобальную отмену для таких элементов:
  document.addEventListener('contextmenu', function (e) {
    if (isDraggableElement(e.target)) {
      e.preventDefault();
    }
  });

  // Debug: можно временно раскомментировать для логирования
  // document.addEventListener('pointerdown', e => console.log('pointerdown', e.button, e.target.closest(selector)));
})();