Spaces:
Running
Running
// Переменные для управления меню "Пуск" | |
let isStartMenuVisible = false; | |
let startMenu = null; | |
// Функция для создания меню "Пуск" | |
function initializeStartMenu() { | |
console.log('Инициализация меню "Пуск"'); | |
// Проверяем, существует ли уже меню "Пуск" | |
if (document.getElementById('start-menu')) { | |
console.log('Меню "Пуск" уже существует'); | |
startMenu = document.getElementById('start-menu'); | |
// Добавляем обработчики событий для приложений в меню "Пуск" | |
const appElements = startMenu.querySelectorAll('.start-menu-app'); | |
appElements.forEach(appElement => { | |
const appId = appElement.dataset.appId; | |
appElement.addEventListener('click', () => { | |
console.log(`Клик по приложению в меню Пуск: ${appId}`); | |
launchApp(appId); | |
toggleStartMenu(); // Закрываем меню "Пуск" после запуска приложения | |
}); | |
}); | |
return; | |
} | |
// Создаем меню "Пуск" | |
startMenu = document.createElement('div'); | |
startMenu.id = 'start-menu'; | |
// Создаем заголовок меню "Пуск" | |
const startMenuHeader = document.createElement('div'); | |
startMenuHeader.id = 'start-menu-header'; | |
const userIcon = document.createElement('img'); | |
userIcon.src = 'src/images/user-icon.png'; | |
userIcon.alt = 'Пользователь'; | |
const userName = document.createElement('span'); | |
userName.textContent = 'Пользователь'; | |
startMenuHeader.appendChild(userIcon); | |
startMenuHeader.appendChild(userName); | |
startMenu.appendChild(startMenuHeader); | |
// Создаем контейнер для приложений в меню "Пуск" | |
const startMenuApps = document.createElement('div'); | |
startMenuApps.id = 'start-menu-apps'; | |
startMenu.appendChild(startMenuApps); | |
// Добавляем приложения в меню "Пуск" | |
const apps = [ | |
{ name: 'Браузер', icon: 'browser-icon.png', appId: 'browser' }, | |
/*{ name: 'Проводник', icon: 'explorer-icon.png', appId: 'explorer' }, | |
{ name: 'Калькулятор', icon: 'calculator-icon.png', appId: 'calculator' }, | |
{ name: 'Заметки', icon: 'notepad-icon.png', appId: 'notepad' }, | |
{ name: 'Фотографии', icon: 'photos-icon.png', appId: 'photos' },*/ | |
{ name: 'Настройки', icon: 'settings-icon.png', appId: 'settings' } | |
]; | |
apps.forEach(app => { | |
const appElement = document.createElement('div'); | |
appElement.className = 'start-menu-app'; | |
appElement.dataset.appId = app.appId; | |
const appIcon = document.createElement('img'); | |
appIcon.src = `src/images/${app.icon}`; | |
appIcon.alt = app.name; | |
const appName = document.createElement('span'); | |
appName.textContent = app.name; | |
appElement.appendChild(appIcon); | |
appElement.appendChild(appName); | |
startMenuApps.appendChild(appElement); | |
// Добавляем обработчик клика | |
appElement.addEventListener('click', () => { | |
console.log(`Клик по приложению в меню Пуск: ${app.name}`); | |
launchApp(app.appId); | |
toggleStartMenu(); // Закрываем меню "Пуск" после запуска приложения | |
}); | |
}); | |
// Добавляем меню "Пуск" в DOM - сразу после body, чтобы избежать проблем с z-index | |
document.body.insertBefore(startMenu, document.body.firstChild); | |
console.log('Меню "Пуск" добавлено в DOM'); | |
// Добавляем обработчик события для закрытия меню "Пуск" при клике вне его | |
document.addEventListener('mousedown', (e) => { | |
if ( | |
isStartMenuVisible && | |
startMenu && | |
!startMenu.contains(e.target) && | |
e.target.id !== 'start-button' && | |
!e.target.closest('#start-button') | |
) { | |
console.log('Клик вне меню "Пуск", закрываем меню'); | |
toggleStartMenu(); | |
} | |
}); | |
// Принудительно обновляем меню "Пуск" для стилей | |
setTimeout(() => { | |
if (startMenu) { | |
startMenu.style.display = 'flex'; | |
console.log('Стили меню "Пуск" обновлены'); | |
} | |
}, 100); | |
} | |
// Функция для показа/скрытия меню "Пуск" | |
function toggleStartMenu() { | |
console.log('Вызов функции toggleStartMenu'); | |
// Получаем меню и кнопку по необходимости | |
const startMenu = document.getElementById('start-menu'); | |
const startButton = document.getElementById('start-button'); | |
if (!startMenu) { | |
console.error('Меню "Пуск" не найдено в DOM'); | |
return; | |
} | |
// Определяем текущее состояние | |
const isActive = startMenu.classList.contains('active'); | |
console.log(`Переключение меню "Пуск": ${isActive ? 'скрыть' : 'показать'}`); | |
// Переключаем классы | |
if (isActive) { | |
startMenu.classList.remove('active'); | |
if (startButton) startButton.classList.remove('active'); | |
console.log('Меню "Пуск" скрыто'); | |
} else { | |
startMenu.classList.add('active'); | |
if (startButton) startButton.classList.add('active'); | |
console.log('Меню "Пуск" активировано'); | |
// Проверка видимости | |
setTimeout(() => { | |
const computedStyle = window.getComputedStyle(startMenu); | |
console.log(`Меню "Пуск" видимость: opacity=${computedStyle.opacity}, transform=${computedStyle.transform}`); | |
}, 50); | |
} | |
} |