DreamLife_ToolBox/scripts.js

const searchBox = document.getElementById('search-input');  // 使用不同的名称避免重复声明
const fullButton = document.getElementById('fullscreen-button');

// 监听滚动事件
window.addEventListener('scroll', function() {
    const scrollTop = window.scrollY || document.documentElement.scrollTop; // 获取滚动的距离

    if (scrollTop > 50) {  // 当页面滚动超过50px时
        searchBox.style.top = '-50px'; // 将搜索框移出视口
        fullscreenButton.style.top = '-50px'; // 让全屏按钮同步隐藏
    } else {
        searchBox.style.top = '10px'; // 恢复到初始位置
        fullscreenButton.style.top = '0px'; // 让全屏按钮同步恢复
    }
});

// 获取按钮和侧边栏元素
const menuButton = document.querySelector('.toggle-menu');
const sidebar = document.getElementById('sidebar');

// 侧边栏切换功能
menuButton.addEventListener('click', function(event) {
    event.stopPropagation();  // 阻止事件冒泡，避免触发文档点击事件
    toggleSidebar();  // 调用切换侧边栏函数
    toggleRotation();  // 调用旋转按钮函数
});

// 侧边栏元素和按钮
function toggleSidebar() {
    sidebar.classList.toggle('open');  // 切换侧边栏的显示/隐藏
    if (sidebar.classList.contains('open')) {
        document.body.classList.add('no-scroll'); // 禁用滚动
    } else {
        document.body.classList.remove('no-scroll'); // 恢复滚动
    }
}

// 检查侧边栏的状态，更新按钮显示/隐藏
function updateMenuButtonVisibility() {
    if (window.innerWidth <= 768) {  // 小屏幕显示菜单按钮
        menuButton.style.display = 'block';
    } else {  // 大屏幕上不显示菜单按钮，侧边栏始终可见
        menuButton.style.display = 'none';
        if (sidebar.classList.contains('open')) {
            sidebar.classList.add('open');
        }
    }
}

// 监听窗口大小变化，确保菜单按钮的显示和隐藏正确
window.addEventListener('resize', function() {
    updateMenuButtonVisibility();
});

// 初始化时检查菜单按钮的显示状态
updateMenuButtonVisibility();

// 监听点击事件，点击侧边栏外部区域关闭侧边栏
document.addEventListener('click', function(event) {
    const isClickInsideSidebar = sidebar.contains(event.target);
    const isClickInsideButton = menuButton.contains(event.target);

    // 如果点击的地方不在侧边栏和按钮内部，并且侧边栏是打开的，则关闭侧边栏
    if (!isClickInsideSidebar && !isClickInsideButton && sidebar.classList.contains('open')) {
        sidebar.classList.remove('open');  // 关闭侧边栏
        menuButton.classList.remove('rotated');  // 恢复按钮横向
        document.body.classList.remove('no-scroll'); // 允许滚动
    }
});

// 阻止点击侧边栏时关闭侧边栏
sidebar.addEventListener('click', function(event) {
    event.stopPropagation();  // 阻止事件冒泡，防止点击侧边栏时关闭
});

// 动画效果
function animateToolCards() {
    const toolCards = document.querySelectorAll('.tool-card');
    toolCards.forEach((card, index) => {
        card.style.transitionDelay = `${index * 100}ms`; // 按顺序延迟动画
        card.classList.add('animated'); // 添加动画类
    });
}
;

// 禁用双指缩放
document.addEventListener('touchstart', function(e) {
    if (e.touches.length > 1) {  // 如果检测到多于一个手指
        e.preventDefault();  // 阻止默认缩放行为
    }
});

document.addEventListener('touchmove', function(e) {
    if (e.touches.length > 1) {  // 如果检测到多于一个手指
        e.preventDefault();  // 阻止默认缩放行为
    }
});

// 获取搜索框输入和所有工具卡片
const searchInput = document.getElementById('search-input');
const toolCards = document.querySelectorAll('.tool-card');

// 监听搜索框的输入事件
searchInput.addEventListener('input', function() {
    const searchTerm = searchInput.value.toLowerCase().trim();  // 获取搜索关键词并转换为小写

    // 过滤工具卡片
    filterCards(searchTerm);
});

// 过滤工具卡片
function filterCards(searchTerm) {
    const filteredCards = Array.from(toolCards).filter(card => {
        const title = card.querySelector('.tool-name').textContent.toLowerCase();
        const description = card.querySelector('.card-description').textContent.toLowerCase();
        return title.includes(searchTerm) || description.includes(searchTerm);
    });

    // 更新卡片布局
    updateCardLayout(filteredCards, searchTerm);
}

// 更新卡片布局，确保卡片顺序正确
function updateCardLayout(filteredCards, searchTerm) {
    const container = document.querySelector('.tools-grid');
    container.innerHTML = '';  // 清空容器中的所有卡片

    if (searchTerm === '') {
        // 如果搜索框为空，恢复原始顺序
        toolCards.forEach(card => container.appendChild(card));
    } else {
        // 搜索时按顺序添加匹配的卡片
        filteredCards.forEach(card => container.appendChild(card));
    }

    // 确保跳转链接依然有效
    addLinkFunctionality(filteredCards);
}

// 为每个卡片的链接添加跳转功能
function addLinkFunctionality(cards) {
    cards.forEach(card => {
        const link = card.querySelector('.tool-card-link');  // 获取卡片中的链接元素
        if (link) {
            // 确保链接点击时会跳转（无论是旧标签还是新标签）
            link.addEventListener('click', function(event) {
                // 如果需要额外的功能（比如日志记录等），可以插入代码
                // 例如：console.log('Tool clicked:', link.href);
                // 无需手动修改 target="_blank"，浏览器会根据 <a> 标签的设置自动处理
            });
        }
    });
}

// 获取两个全屏按钮
const fullscreenButton = document.getElementById('fullscreen-button');
const sidebarFullscreenButton = document.getElementById('sidebar-fullscreen-button');

// 绑定全屏切换事件
function toggleFullscreen() {
    if (!document.fullscreenElement) {
        if (document.documentElement.requestFullscreen) {
            document.documentElement.requestFullscreen();
        } else if (document.documentElement.mozRequestFullScreen) {
            document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullscreen) {
            document.documentElement.webkitRequestFullscreen();
        } else if (document.documentElement.msRequestFullscreen) {
            document.documentElement.msRequestFullscreen();
        }
        updateFullscreenButton(true);
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
        updateFullscreenButton(false);
    }
}

// 更新按钮文本和图标
function updateFullscreenButton(isFullscreen) {
    const buttons = [fullscreenButton, sidebarFullscreenButton];
    buttons.forEach(button => {
        if (isFullscreen) {
            button.querySelector('span').textContent = '退出';
            button.querySelector('.icon').innerHTML = '&#x21B5;'; // 退出全屏图标
        } else {
            button.querySelector('span').textContent = '全屏';
            button.querySelector('.icon').innerHTML = '&#x26F6;'; // 全屏图标
        }
    });
}

// 绑定点击事件
fullscreenButton.addEventListener('click', toggleFullscreen);
sidebarFullscreenButton.addEventListener('click', toggleFullscreen);

// 页面加载完成后滚动到顶部
window.addEventListener('load', function() {
    setTimeout(function() {
        window.scrollTo(0, 0);  // 将页面滚动到顶部
    }, 100);  // 延迟 100ms 执行，确保页面已完全加载
});