class CustomModelSelector extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.render();
this.attachEvents();
}
render() {
this.shadowRoot.innerHTML = `
`;
if (window.feather) {
setTimeout(() => feather.replace(), 0);
}
}
attachEvents() {
const toggle = this.shadowRoot.getElementById('selector-toggle');
const dropdown = this.shadowRoot.getElementById('dropdown');
const options = this.shadowRoot.querySelectorAll('.model-option');
toggle.addEventListener('click', (e) => {
e.stopPropagation();
dropdown.classList.toggle('open');
});
document.addEventListener('click', () => {
dropdown.classList.remove('open');
});
options.forEach(opt => {
opt.addEventListener('click', () => {
options.forEach(o => o.classList.remove('active'));
opt.classList.add('active');
dropdown.classList.remove('open');
document.dispatchEvent(new CustomEvent('galleryFilter', {
detail: { filter: opt.dataset.filter }
}));
});
});
}
}
customElements.define('custom-model-selector', CustomModelSelector);