drag-manager.js

// Drag Manager Module
// Handles drag-and-drop reordering of language sections

class DragManager {
    constructor(container, onOrderChange) {
        this.container = container;
        this.onOrderChange = onOrderChange; // callback(newOrder: string[])
        this.draggedElement = null;
        this.placeholder = null;

        this._onDragStart = this._onDragStart.bind(this);
        this._onDragOver = this._onDragOver.bind(this);
        this._onDragLeave = this._onDragLeave.bind(this);
        this._onDrop = this._onDrop.bind(this);
        this._onDragEnd = this._onDragEnd.bind(this);

        this._attachContainerListeners();
    }

    // Attach drag events to the container (event delegation)
    _attachContainerListeners() {
        this.container.addEventListener('dragover', this._onDragOver);
        this.container.addEventListener('dragleave', this._onDragLeave);
        this.container.addEventListener('drop', this._onDrop);
        this.container.addEventListener('dragend', this._onDragEnd);
    }

    // Initialize drag handle for a section element.
    // Called by app-main after a section is added to the DOM.
    initSection(sectionElement) {
        const handle = sectionElement.querySelector('.drag-handle');
        if (!handle) return;

        // When mouse presses on the handle, make the section draggable
        handle.addEventListener('mousedown', () => {
            sectionElement.setAttribute('draggable', 'true');
        });

        // After drag ends or mouse leaves, remove draggable
        handle.addEventListener('mouseup', () => {
            sectionElement.removeAttribute('draggable');
        });

        sectionElement.addEventListener('dragstart', this._onDragStart);
    }

    _onDragStart(e) {
        this.draggedElement = e.currentTarget;
        // Set drag data (required for Firefox)
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('text/plain', this.draggedElement.dataset.language || '');

        // Create placeholder
        this.placeholder = document.createElement('div');
        this.placeholder.className = 'drag-placeholder';

        // Apply dragging style after a frame so the drag image captures the original look
        requestAnimationFrame(() => {
            if (this.draggedElement) {
                this.draggedElement.classList.add('dragging');
            }
        });
    }

    _onDragOver(e) {
        e.preventDefault();
        e.dataTransfer.dropEffect = 'move';

        if (!this.draggedElement) return;

        const target = this._getDraggableTarget(e.target);
        if (!target || target === this.draggedElement || target === this.placeholder) return;

        // Skip "Overall Trending" section (data-language="all")
        if (target.dataset.language === 'all') return;

        const rect = target.getBoundingClientRect();
        const midY = rect.top + rect.height / 2;

        // Remove existing placeholder
        if (this.placeholder.parentNode) {
            this.placeholder.parentNode.removeChild(this.placeholder);
        }

        // Insert placeholder before or after the target based on cursor position
        if (e.clientY < midY) {
            target.parentNode.insertBefore(this.placeholder, target);
        } else {
            target.parentNode.insertBefore(this.placeholder, target.nextSibling);
        }
    }

    _onDragLeave(e) {
        // Only handle when leaving the container entirely
        if (!this.container.contains(e.relatedTarget) && this.placeholder && this.placeholder.parentNode) {
            this.placeholder.parentNode.removeChild(this.placeholder);
        }
    }

    _onDrop(e) {
        e.preventDefault();

        if (!this.draggedElement || !this.placeholder || !this.placeholder.parentNode) {
            this._cleanup();
            return;
        }

        // Move the dragged element to the placeholder position
        this.placeholder.parentNode.insertBefore(this.draggedElement, this.placeholder);

        this._cleanup();
        this._emitOrderChange();
    }

    _onDragEnd() {
        this._cleanup();
    }

    _cleanup() {
        if (this.draggedElement) {
            this.draggedElement.classList.remove('dragging');
            this.draggedElement.removeAttribute('draggable');
        }
        if (this.placeholder && this.placeholder.parentNode) {
            this.placeholder.parentNode.removeChild(this.placeholder);
        }
        this.draggedElement = null;
        this.placeholder = null;
    }

    // Walk up the DOM to find the language-section element
    _getDraggableTarget(el) {
        while (el && el !== this.container) {
            if (el.classList && el.classList.contains('language-section') && el.dataset.language) {
                return el;
            }
            el = el.parentElement;
        }
        return null;
    }

    // Read the current DOM order and fire the callback
    _emitOrderChange() {
        const sections = this.container.querySelectorAll('.language-section[data-language]');
        const order = [];
        sections.forEach(section => {
            const lang = section.dataset.language;
            // Skip "Overall Trending"
            if (lang !== 'all') {
                order.push(lang);
            }
        });

        if (this.onOrderChange) {
            this.onOrderChange(order);
        }
    }
}

// Export for global use
if (typeof window !== 'undefined') {
    window.DragManager = DragManager;
}