78 lines
2.7 KiB
JavaScript
78 lines
2.7 KiB
JavaScript
export default class Settings {
|
|
constructor(os) {
|
|
this.os = os;
|
|
this.element = document.getElementById('settings');
|
|
this.listElement = document.getElementById('settings-list');
|
|
this.closeBtn = this.element.querySelector('.close-btn');
|
|
|
|
this.settingsData = [
|
|
{ label: "Dark Mode", icon: "dark_mode", active: false },
|
|
{ label: "Notifications", icon: "notifications", active: true },
|
|
{ label: "Sound Effects", icon: "volume_up", active: true },
|
|
{ label: "Bluetooth", icon: "bluetooth", active: false },
|
|
{ label: "Location Services", icon: "location_on", active: false }
|
|
];
|
|
|
|
this.initialize();
|
|
this.render();
|
|
}
|
|
|
|
initialize() {
|
|
this.closeBtn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
this.os.closeAllPopups();
|
|
});
|
|
}
|
|
|
|
render() {
|
|
this.listElement.innerHTML = '';
|
|
const fragment = document.createDocumentFragment();
|
|
|
|
this.settingsData.forEach((setting, index) => {
|
|
const settingEl = document.createElement('div');
|
|
settingEl.className = 'setting-item';
|
|
|
|
const activeClass = setting.active ? 'active' : '';
|
|
|
|
settingEl.innerHTML = `
|
|
<div class="setting-info">
|
|
<span class="material-icons setting-icon">${setting.icon}</span>
|
|
<span class="setting-label">${setting.label}</span>
|
|
</div>
|
|
<div class="toggle-switch ${activeClass}" data-index="${index}">
|
|
<div class="toggle-thumb"></div>
|
|
</div>
|
|
`;
|
|
|
|
const toggleSwitch = settingEl.querySelector('.toggle-switch');
|
|
toggleSwitch.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
// Toggle active state locally
|
|
this.settingsData[index].active = !this.settingsData[index].active;
|
|
toggleSwitch.classList.toggle('active');
|
|
});
|
|
|
|
// Make whole row clickable
|
|
settingEl.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
// Find and click the toggle switch inside
|
|
toggleSwitch.click();
|
|
});
|
|
|
|
fragment.appendChild(settingEl);
|
|
});
|
|
|
|
this.listElement.appendChild(fragment);
|
|
}
|
|
|
|
open() {
|
|
this.element.classList.add('active');
|
|
this.os.components.taskbar.updateActiveButton('settings');
|
|
}
|
|
|
|
close() {
|
|
this.element.classList.remove('active');
|
|
this.os.components.taskbar.updateActiveButton(null);
|
|
}
|
|
}
|