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); | |
| } | |
| } |