изменил дизайн выпадающих списков
This commit is contained in:
Zuev
222
frontend/admin/js/dropdown.js
Normal file
222
frontend/admin/js/dropdown.js
Normal file
@@ -0,0 +1,222 @@
|
||||
// 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 });
|
||||
}
|
||||
Reference in New Issue
Block a user