69 lines
2.4 KiB
JavaScript
69 lines
2.4 KiB
JavaScript
|
/* COMPONENT INTERACTIONS */
|
||
|
|
export function initInteractions() {
|
||
|
|
// Button Interactions (Ripple/Scale)
|
||
|
|
document.querySelectorAll('.btn').forEach(btn => {
|
||
|
|
btn.addEventListener('mousedown', () => btn.style.transform = 'scale(0.95)');
|
||
|
|
btn.addEventListener('mouseup', () => btn.style.transform = '');
|
||
|
|
btn.addEventListener('mouseleave', () => btn.style.transform = '');
|
||
|
|
});
|
||
|
|
|
||
|
|
// Tab Switching (Generic)
|
||
|
|
document.querySelectorAll('.profile-tab').forEach(tab => {
|
||
|
|
tab.addEventListener('click', function () {
|
||
|
|
// Find parent siblings
|
||
|
|
const parent = this.parentElement;
|
||
|
|
parent.querySelectorAll('.profile-tab').forEach(t => t.classList.remove('active'));
|
||
|
|
this.classList.add('active');
|
||
|
|
// logic to switch tab content would go here
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Toggle Switches
|
||
|
|
document.querySelectorAll('.toggle-switch').forEach(toggle => {
|
||
|
|
toggle.addEventListener('click', function () {
|
||
|
|
this.classList.toggle('active');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Generic Modals (Data Attribute Based)
|
||
|
|
document.querySelectorAll('[data-modal-target]').forEach(trigger => {
|
||
|
|
trigger.addEventListener('click', () => {
|
||
|
|
const targetId = trigger.getAttribute('data-modal-target');
|
||
|
|
const modal = document.getElementById(targetId);
|
||
|
|
if (modal) {
|
||
|
|
modal.classList.add('active');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
document.querySelectorAll('[data-modal-close]').forEach(closeBtn => {
|
||
|
|
closeBtn.addEventListener('click', () => {
|
||
|
|
const modal = closeBtn.closest('.modal-backdrop');
|
||
|
|
if (modal) {
|
||
|
|
modal.classList.remove('active');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Generic Backdrop Close
|
||
|
|
document.querySelectorAll('.modal-backdrop').forEach(modal => {
|
||
|
|
modal.addEventListener('click', (e) => {
|
||
|
|
if (e.target === modal && modal.id !== 'searchModal') { // Search modal has its own logic
|
||
|
|
modal.classList.remove('active');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// ESC to close generic modals
|
||
|
|
document.addEventListener('keydown', (e) => {
|
||
|
|
if (e.key === 'Escape') {
|
||
|
|
document.querySelectorAll('.modal-backdrop.active').forEach(modal => {
|
||
|
|
if (modal.id !== 'searchModal') {
|
||
|
|
modal.classList.remove('active');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|