magistr/frontend/admin/js/dropdown.js

// dropdown.js - Premium Custom Dropdowns

export class CustomSelect {
    constructor(originalSelect) {
        if (originalSelect.classList.contains('custom-select-initialized')) return;
        
        this.originalSelect = originalSelect;
        this.originalSelect.classList.add('custom-select-initialized');
        
        // Hide original but keep it accessible for form submissions and JS
        this.originalSelect.style.display = 'none';

        // Bind methods
        this.handleTriggerClick = this.handleTriggerClick.bind(this);
        this.closeAll = this.closeAll.bind(this);
        this.handleItemClick = this.handleItemClick.bind(this);
        this.rebuildMenu = this.rebuildMenu.bind(this);

        this.init();
        
        // Watch for dynamic changes (like when api fetching populates <option> tags)
        this.observer = new MutationObserver((mutations) => {
            let shouldRebuild = false;
            mutations.forEach(mut => {
                if (mut.type === 'childList') shouldRebuild = true;
            });
            if (shouldRebuild) {
                this.rebuildMenu();
            }
        });
        
        this.observer.observe(this.originalSelect, { childList: true });

        // Listen for external value changes (e.g. form.reset())
        this.originalSelect.addEventListener('change', () => {
            this.syncTriggerText();
        });
    }

    init() {
        // Create wrapper
        this.wrapper = document.createElement('div');
        this.wrapper.className = 'custom-select-wrapper';
        
        // Insert wrapper right after the original select
        this.originalSelect.parentNode.insertBefore(this.wrapper, this.originalSelect.nextSibling);

        // Create trigger button
        this.trigger = document.createElement('div');
        this.trigger.className = 'custom-select-trigger';
        this.trigger.tabIndex = 0; // Make focusable
        
        this.triggerText = document.createElement('span');
        this.triggerText.className = 'custom-select-text';
        
        this.triggerIcon = document.createElement('div');
        this.triggerIcon.className = 'custom-select-icon';
        this.triggerIcon.innerHTML = `<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1.5L6 6.5L11 1.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;

        this.trigger.appendChild(this.triggerText);
        this.trigger.appendChild(this.triggerIcon);

        // Create menu
        this.menu = document.createElement('ul');
        this.menu.className = 'custom-select-menu';

        this.wrapper.appendChild(this.trigger);
        this.wrapper.appendChild(this.menu);

        this.rebuildMenu();

        // Events
        this.trigger.addEventListener('click', this.handleTriggerClick);
        this.trigger.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                this.handleTriggerClick(e);
            } else if (e.key === 'Escape') {
                this.close();
            }
        });

        // Close when clicking outside
        document.addEventListener('click', (e) => {
            if (!this.wrapper.contains(e.target)) {
                this.close();
            }
        });
    }

    rebuildMenu() {
        this.menu.innerHTML = '';
        const options = Array.from(this.originalSelect.options);
        
        if (options.length === 0) {
            const li = document.createElement('li');
            li.className = 'custom-select-item disabled';
            li.textContent = 'Нет опций';
            this.menu.appendChild(li);
        } else {
            options.forEach((option, index) => {
                const li = document.createElement('li');
                li.className = 'custom-select-item';
                li.textContent = option.text;
                li.dataset.value = option.value;
                li.dataset.index = index;
                
                if (option.disabled || option.value === '') {
                    li.classList.add('disabled');
                    if (option.value === '') li.classList.add('placeholder-item');
                } else {
                    li.addEventListener('click', (e) => this.handleItemClick(e, index));
                }

                if (option.selected) {
                    li.classList.add('selected');
                }

                this.menu.appendChild(li);
            });
        }

        this.syncTriggerText();
    }

    syncTriggerText() {
        const selectedOption = this.originalSelect.options[this.originalSelect.selectedIndex];
        
        if (selectedOption) {
            this.triggerText.textContent = selectedOption.text;
            if (selectedOption.value === '') {
                this.trigger.classList.add('placeholder-active');
            } else {
                this.trigger.classList.remove('placeholder-active');
            }
        } else {
            this.triggerText.textContent = '—';
            this.trigger.classList.add('placeholder-active');
        }

        // Disable state sync
        if (this.originalSelect.disabled) {
            this.wrapper.classList.add('disabled');
            this.trigger.tabIndex = -1;
        } else {
            this.wrapper.classList.remove('disabled');
            this.trigger.tabIndex = 0;
        }

        // Highlight selected in menu
        const items = this.menu.querySelectorAll('.custom-select-item');
        items.forEach(item => item.classList.remove('selected'));
        if (selectedOption && this.originalSelect.selectedIndex >= 0) {
            const activeItem = this.menu.querySelector(`[data-index="${this.originalSelect.selectedIndex}"]`);
            if(activeItem) activeItem.classList.add('selected');
        }
    }

    handleTriggerClick(e) {
        if (this.originalSelect.disabled) return;
        
        const isOpen = this.wrapper.classList.contains('open');
        this.closeAll(); // Close other open dropdowns

        if (!isOpen) {
            this.wrapper.classList.add('open');
            // Scroll selected item into view
            const selectedItem = this.menu.querySelector('.selected');
            if (selectedItem) {
                setTimeout(() => {
                    selectedItem.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
                }, 50);
            }
        }
    }

    closeAll() {
        document.querySelectorAll('.custom-select-wrapper.open').forEach(wrapper => {
            wrapper.classList.remove('open');
        });
    }

    close() {
        this.wrapper.classList.remove('open');
    }

    handleItemClick(e, index) {
        e.stopPropagation();
        this.originalSelect.selectedIndex = index;
        
        // Trigger native change event so other scripts (users.js) pick it up
        this.originalSelect.dispatchEvent(new Event('change', { bubbles: true }));
        
        this.syncTriggerText();
        this.close();
    }
}

// Global initializer
export function initAllCustomDropdowns(root = document) {
    const selects = root.querySelectorAll('select:not(.custom-select-initialized)');
    selects.forEach(select => {
        new CustomSelect(select);
    });
}

// Observe DOM for automatically picking up new select elements
export function startDropdownAutoObserver() {
    const observer = new MutationObserver((mutations) => {
        let shouldInit = false;
        mutations.forEach(mut => {
            if (mut.addedNodes.length > 0) {
                shouldInit = true;
            }
        });
        if (shouldInit) {
            initAllCustomDropdowns(document.body);
        }
    });

    observer.observe(document.body, { childList: true, subtree: true });
}