Spaces:
Paused
Paused
File size: 3,932 Bytes
4edc3e5 fe0be60 4edc3e5 fe0be60 4edc3e5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | // components/profile-component.js - Profile modal functionality
import { StateManager } from '../services/state-manager.js';
export const ProfileComponent = {
elements: {
profileModal: null,
profileBtn: null,
ageGroupInput: null,
genderInput: null,
roleInputs: null,
participantInput: null,
welcomePopup: null
},
/**
* Initialize the profile component
*/
init() {
this.elements.profileModal = document.getElementById('profile-modal');
this.elements.profileBtn = document.getElementById('profileBtn');
this.elements.ageGroupInput = document.getElementById('age-group');
this.elements.genderInput = document.getElementById('gender');
this.elements.roleInputs = document.querySelectorAll('input[name="role"]');
this.elements.participantInput = document.getElementById('participant-id');
this.elements.welcomePopup = document.getElementById('welcomePopup');
this.attachEventListeners();
},
/**
* Attach event listeners
*/
attachEventListeners() {
// Add listeners to validate profile on input change
this.elements.genderInput.addEventListener('click', () => this.checkProfileValidity());
this.elements.ageGroupInput.addEventListener('click', () => this.checkProfileValidity());
this.elements.roleInputs.forEach(input =>
input.addEventListener('change', () => this.checkProfileValidity())
);
this.elements.participantInput.addEventListener('input', () => this.checkParticipantIdInput());
this.elements.participantInput.addEventListener('input', () => this.checkProfileValidity());
// Handle profile submission
this.elements.profileBtn.addEventListener('click', () => this.submitProfile());
},
/**
* Check if profile form is valid and enable/disable button accordingly
*/
checkProfileValidity() {
// 1. Check if any gender is selected
const genderSelected = this.elements.genderInput.value !== '';
// 2. Check if any age group is selected
const ageSelected = this.elements.ageGroupInput.value !== '';
// 3. Check if at least one role checkbox is selected
const roleSelected = Array.from(this.elements.roleInputs).some(input => input.checked);
// 4. Check if the participant id field has a value
const participantIdEntered = this.elements.participantInput.value.trim().length > 0;
// 5. Enable button only if all are true
if (genderSelected && ageSelected && roleSelected && participantIdEntered) {
this.elements.profileBtn.disabled = false;
this.elements.profileBtn.classList.replace('disabled-button', 'ok-button');
} else {
this.elements.profileBtn.disabled = true;
this.elements.profileBtn.classList.replace('ok-button', 'disabled-button');
}
},
/**
* Submit profile and close welcome popup
*/
submitProfile() {
const profileData = {
ageGroup: this.elements.ageGroupInput.value,
gender: this.elements.genderInput.value,
roles: Array.from(document.querySelectorAll('input[name="role"]:checked')).map(input => input.value),
participantId: this.elements.participantInput.value.trim()
};
StateManager.updateProfile(profileData);
// Close welcome popup and re-enable scrolling
this.elements.welcomePopup.style.display = 'none';
document.body.classList.remove('no-scroll');
},
checkParticipantIdInput() {
const input = this.elements.participantInput;
// Save current cursor position
const start = input.selectionStart;
const end = input.selectionEnd;
// Remove any character that is NOT a-z, A-Z, 0-9, _, or -
const newValue = input.value.replace(/[^-a-zA-Z0-9_]/g, '');
// Only update if something was actually removed
if (input.value !== newValue) {
input.value = newValue;
// Restore cursor position so it doesn't jump to the end
input.setSelectionRange(start - 1, end - 1);
}
}
}; |