blog/themes/Ying/assets/js/modules/utils.js

// 判断是否为移动端
window.isMobile = function() {
  if (window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
    return true; // 移动端
  } else {
    return false; // PC端
  }
};

// Toast Message Helper
window.showToast = function(text, type) {
    type = type || 'info'; // default to info
    if (typeof Qmsg !== 'undefined') {
        // Map common types to Qmsg methods
        if (typeof Qmsg[type] === 'function') {
            Qmsg[type](text);
        } else {
            Qmsg.info(text);
        }
    } else {
        // Fallback custom toast
        let toast = document.querySelector('.custom-toast');
        if (!toast) {
            toast = document.createElement('div');
            toast.className = 'custom-toast';
            toast.style.cssText = `
                position: fixed;
                top: 20px;
                left: 50%;
                transform: translateX(-50%);
                background: rgba(0,0,0,0.8);
                color: white;
                padding: 8px 16px;
                border-radius: 4px;
                z-index: 9999;
                font-size: 14px;
                opacity: 0;
                transition: opacity 0.3s;
                pointer-events: none;
                display: flex;
                align-items: center;
                gap: 8px;
            `;
            document.body.appendChild(toast);
        }
        
        // Simple icon mapping for fallback
        let icon = '';
        if (type === 'success') icon = '✅ ';
        else if (type === 'error') icon = '❌ ';
        else if (type === 'warning') icon = '⚠️ ';
        
        toast.innerText = icon + text;
        toast.style.opacity = '1';
        
        if (window.toastTimeout) clearTimeout(window.toastTimeout);
        window.toastTimeout = setTimeout(() => {
            toast.style.opacity = '0';
        }, 2500);
    }
};

// Theme Toggle Logic
window.initThemeToggle = function() {
    const avatar = document.getElementById('theme-toggle-avatar');
    if (!avatar) return;
    
    // Remove existing listeners to avoid duplicates (if any)
    const newAvatar = avatar.cloneNode(true);
    avatar.parentNode.replaceChild(newAvatar, avatar);
    
    newAvatar.addEventListener('click', function(e) {
        // Prevent if clicking on something interactive inside (unlikely for avatar)
        e.preventDefault();
        
        const html = document.documentElement;
        const currentTheme = html.getAttribute('data-theme');
        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
        
        html.setAttribute('data-theme', newTheme);
        localStorage.setItem('theme', newTheme);
        
        window.showToast('已切换至 ' + (newTheme === 'dark' ? '深色' : '浅色') + '模式', 'success');
        
        // Trigger generic resize event to force charts/etc to redraw if needed
        window.dispatchEvent(new Event('resize'));
    });
};

// Code Folding Logic
window.initCodeFold = function() {
    const codeBlocks = document.querySelectorAll('.highlight');
    codeBlocks.forEach(block => {
        // Check height (approx 300px)
        if (block.offsetHeight > 360) {
            // Check if already processed
            if (block.parentNode.classList.contains('code-fold-container')) return;
            
            // Wrap
            const wrapper = document.createElement('div');
            wrapper.className = 'code-fold-container collapsed';
            block.parentNode.insertBefore(wrapper, block);
            wrapper.appendChild(block);
            
            // Add Button
            const btn = document.createElement('button');
            btn.className = 'code-expand-btn';
            btn.innerHTML = '<span><i class="ri-arrow-down-s-line" style="margin-right:4px;"></i> 展开代码 / Expand</span>';
            btn.onclick = function() {
                wrapper.classList.remove('collapsed');
                // Hide button after expand, or change to collapse?
                // Usually just expand is enough.
                btn.style.display = 'none';
            };
            wrapper.appendChild(btn);
        }
    });
};

// Code Copy Logic
window.initCodeCopy = function() {
    // Target pre tags that contain code, or .highlight containers
    const codeBlocks = document.querySelectorAll('pre');
    
    codeBlocks.forEach(pre => {
        // Avoid double init
        if (pre.parentNode.querySelector('.copy-code-btn')) return;
        if (pre.querySelector('.copy-code-btn')) return;
        
        // Check if it's inside a highlight block (Hugo usually does .highlight > pre)
        // We attach button to the pre or the highlight container?
        // Attaching to pre is safer for positioning.
        
        const btn = document.createElement('button');
        btn.className = 'copy-code-btn';
        btn.innerHTML = '<i class="ri-file-copy-line"></i>';
        btn.title = "复制代码 / Copy Code";
        btn.style.cssText = `
            position: absolute;
            top: 5px;
            right: 5px;
            background: transparent;
            border: none;
            color: #888;
            cursor: pointer;
            padding: 5px;
            border-radius: 4px;
            transition: all 0.2s;
            opacity: 0; 
            z-index: 10;
        `;
        
        // Show on hover
        pre.addEventListener('mouseenter', () => btn.style.opacity = '1');
        pre.addEventListener('mouseleave', () => btn.style.opacity = '0');
        
        // Handle touch devices
        if (window.isMobile()) {
            btn.style.opacity = '1';
        }

        btn.addEventListener('click', (e) => {
            e.stopPropagation();
            const code = pre.querySelector('code') ? pre.querySelector('code').innerText : pre.innerText;
            
            if (navigator.clipboard) {
                navigator.clipboard.writeText(code).then(() => {
                    window.showToast('代码已复制 / Copied!', 'success');
                    btn.innerHTML = '<i class="ri-check-line"></i>';
                    setTimeout(() => btn.innerHTML = '<i class="ri-file-copy-line"></i>', 2000);
                }).catch(err => {
                    console.error('Copy failed', err);
                    window.showToast('复制失败 / Failed', 'error');
                });
            } else {
                // Fallback
                const textarea = document.createElement('textarea');
                textarea.value = code;
                document.body.appendChild(textarea);
                textarea.select();
                document.execCommand('copy');
                document.body.removeChild(textarea);
                window.showToast('代码已复制 / Copied!', 'success');
            }
        });
        
        // Ensure relative positioning
        if (getComputedStyle(pre).position === 'static') {
            pre.style.position = 'relative';
        }
        
        pre.appendChild(btn);
    });
};