win / js /startMenu.js
igorvkarpov's picture
Upload 24 files
cdf0905 verified
// Переменные для управления меню "Пуск"
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);
}
}