pindo 5.1.1 → 5.1.3

data/lib/pindo/module/webserver/preview/preview.js

@@ -0,0 +1,595 @@
+// 预览页面的JavaScript代码
+document.addEventListener('DOMContentLoaded', function() {
+    // WebGL目录路径，初始为相对路径，将由后端动态替换
+    const webglDirPath = './';
+    
+    // 设备配置
+    const devices = {
+        'iPhone 16 Pro Max': { width: 430, height: 932 },
+        'iPhone 16 Pro Max (横屏)': { width: 932, height: 430 },
+        'iPhone 16': { width: 393, height: 852 },
+        'iPhone 16 (横屏)': { width: 852, height: 393 },
+        'iPhone X': { width: 375, height: 812 },
+        'iPhone X (横屏)': { width: 812, height: 375 },
+        'iPhone 8 Plus': { width: 414, height: 736 },
+        'iPhone 8 Plus (横屏)': { width: 736, height: 414 },
+        'iPhone 8': { width: 375, height: 667 },
+        'iPhone 8 (横屏)': { width: 667, height: 375 },
+        'iPhone 5s': { width: 320, height: 568 },
+        'iPhone 5s (横屏)': { width: 568, height: 320 },
+        'iPad Mini': { width: 768, height: 1024 },
+        'iPad Mini (横屏)': { width: 1024, height: 768 },
+        'iPad Pro 11"': { width: 834, height: 1194 },
+        'iPad Pro 11" (横屏)': { width: 1194, height: 834 },
+        'iPad Pro 12.9"': { width: 1024, height: 1366 },
+        'iPad Pro 12.9" (横屏)': { width: 1366, height: 1024 },
+        'Galaxy Note 8': { width: 360, height: 740 },
+        'Galaxy Note 8 (横屏)': { width: 740, height: 360 },
+        'Galaxy S5': { width: 360, height: 640 },
+        'Galaxy S5 (横屏)': { width: 640, height: 360 },
+        'Nexus 5': { width: 360, height: 640 },
+        'Nexus 5 (横屏)': { width: 640, height: 360 },
+        'Lumia 920': { width: 384, height: 640 },
+        'Lumia 920 (横屏)': { width: 640, height: 384 },
+        'MacBook Pro': { width: 1440, height: 900 },
+        'MacBook Pro (横屏)': { width: 900, height: 1440 },
+        '标准桌面': { width: 1280, height: 720 },
+        '标准桌面 (横屏)': { width: 720, height: 1280 },
+        '宽屏桌面': { width: 1920, height: 1080 },
+        '宽屏桌面 (横屏)': { width: 1080, height: 1920 }
+    };
+    
+    // 根据设备尺寸和窗口尺寸动态决定是否允许滚动
+    function updateScrollBehavior() {
+        const deviceFrame = document.getElementById('device-frame');
+        const mainContent = document.querySelector('.main-content');
+        
+        // 获取设备框架的尺寸和位置
+        const deviceRect = deviceFrame.getBoundingClientRect();
+        const windowHeight = window.innerHeight;
+        const headerHeight = document.querySelector('.header').offsetHeight;
+        const availableHeight = windowHeight - headerHeight;
+        
+        // 判断设备是否完全显示在窗口中
+        const isDeviceFullyVisible = deviceRect.height <= availableHeight;
+        
+        return isDeviceFullyVisible;
+    }
+    
+    // 智能滚动处理函数
+    function handleScroll(e) {
+        // 如果是设备下拉菜单或自定义尺寸面板内的滚动，始终允许
+        if (e.target.closest('.custom-dimensions') || e.target.closest('.device-select-dropdown')) {
+            return;
+        }
+        
+        // 检查设备是否完全可见
+        if (updateScrollBehavior()) {
+            // 设备完全可见，禁止滚动
+            e.preventDefault();
+        }
+        // 设备不完全可见，允许滚动，不做处理
+    }
+    
+    // 设置滚动事件监听
+    document.addEventListener('touchmove', handleScroll, { passive: false });
+    document.addEventListener('wheel', handleScroll, { passive: false });
+    
+    // 获取DOM元素
+    const deviceSelectButton = document.getElementById('device-select-button');
+    const deviceSelectDropdown = document.getElementById('device-select-dropdown');
+    const customDimensions = document.getElementById('custom-dimensions');
+    const widthInput = document.getElementById('width-input');
+    const heightInput = document.getElementById('height-input');
+    const applyDimensionsButton = document.getElementById('apply-dimensions');
+    const rotateButton = document.getElementById('rotate-button');
+    const fullscreenButton = document.getElementById('fullscreen-button');
+    const deviceFrame = document.getElementById('device-frame');
+    const previewFrame = document.getElementById('preview-frame');
+    const headerDimensionsDisplay = document.getElementById('header-dimensions-display');
+    const frameDimensionsDisplay = document.getElementById('frame-dimensions-display');
+    const loading = document.getElementById('loading');
+    const currentDeviceName = document.getElementById('current-device-name');
+    const deviceInfo = document.getElementById('device-info');
+    const deviceContainer = document.getElementById('device-container');
+    
+    let isLandscape = false;
+    let currentDevice = 'iPhone 8 Plus';
+    let isInitialLoad = true;
+    
+    // 生成设备选项
+    function generateDeviceOptions() {
+        let deviceOptionsHTML = '';
+        let deviceGroups = {};
+        
+        // 将设备按类型分组
+        for (const [name, dims] of Object.entries(devices)) {
+            // 跳过横屏设备，它们将在后面与对应的竖屏设备一起添加
+            if (name.includes('(横屏)')) continue;
+            
+            // 获取设备基本类型（iPhone、iPad等）
+            let deviceType = name.split(' ')[0];
+            if (deviceType === '标准' || deviceType === '宽屏') {
+                deviceType = '桌面';
+            }
+            
+            if (!deviceGroups[deviceType]) {
+                deviceGroups[deviceType] = [];
+            }
+            
+            // 添加竖屏设备
+            deviceGroups[deviceType].push({
+                name: name,
+                width: dims.width,
+                height: dims.height
+            });
+            
+            // 添加对应的横屏设备
+            const landscapeName = `${name} (横屏)`;
+            if (devices[landscapeName]) {
+                deviceGroups[deviceType].push({
+                    name: landscapeName,
+                    width: devices[landscapeName].width,
+                    height: devices[landscapeName].height
+                });
+            }
+        }
+        
+        // 设备类型的显示顺序
+        const deviceOrder = ['iPhone', 'iPad', 'Galaxy', 'Nexus', 'Lumia', 'MacBook', '桌面'];
+        
+        // 按组生成HTML
+        deviceOrder.forEach(groupName => {
+            if (deviceGroups[groupName]) {
+                deviceOptionsHTML += `<div class="device-group-header">${groupName}</div>`;
+                
+                deviceGroups[groupName].forEach(device => {
+                    deviceOptionsHTML += `<div class='device-option' data-device='${device.name}' data-width='${device.width}' data-height='${device.height}'>
+                        ${device.name} (${device.width}×${device.height})
+                    </div>`;
+                });
+            }
+        });
+        
+        // 添加自定义尺寸选项
+        deviceOptionsHTML += `<div class="device-group-header">自定义</div>`;
+        deviceOptionsHTML += `<div class="device-option" data-device="custom">自定义尺寸...</div>`;
+        
+        // 更新下拉菜单内容
+        deviceSelectDropdown.innerHTML = deviceOptionsHTML;
+        
+        // 为新生成的设备选项添加点击事件
+        attachDeviceOptionEvents();
+    }
+    
+    // 为设备选项添加点击事件
+    function attachDeviceOptionEvents() {
+        const deviceOptions = document.querySelectorAll('.device-option');
+        deviceOptions.forEach(option => {
+            option.addEventListener('click', function(e) {
+                e.stopPropagation(); // 阻止事件冒泡
+                const deviceName = this.dataset.device;
+                
+                if (deviceName === 'custom') {
+                    // 显示自定义尺寸弹窗
+                    customDimensions.classList.add('active');
+                    deviceSelectDropdown.classList.remove('active');
+                    deviceSelectButton.querySelector('.caret-icon').classList.remove('up');
+                    
+                    // 将当前的宽高填入输入框
+                    const currentWidth = parseInt(deviceFrame.style.width) || 375;
+                    const currentHeight = parseInt(deviceFrame.style.height) || 667;
+                    widthInput.value = isLandscape ? currentHeight : currentWidth;
+                    heightInput.value = isLandscape ? currentWidth : currentHeight;
+                } else {
+                    initDevice(deviceName);
+                    deviceSelectDropdown.classList.remove('active');
+                    deviceSelectButton.querySelector('.caret-icon').classList.remove('up');
+                    currentDevice = deviceName;
+                    currentDeviceName.textContent = deviceName;
+                    if (deviceInfo) {
+                        deviceInfo.textContent = deviceName;
+                    }
+                }
+            });
+        });
+    }
+    
+    // 初始化设备选项
+    generateDeviceOptions();
+    
+    // 初始化默认设备
+    initDevice('iPhone 8 Plus');
+    
+    // 恢复默认的iframe加载事件处理
+    function setupDefaultIframeLoadHandler() {
+        previewFrame.onload = function() {
+            // 隐藏加载动画
+            loading.style.display = 'none';
+            
+            // 重置滚动位置
+            if (window.scrollY > 0) {
+                window.scrollTo(0, 0);
+            }
+            
+            // 尝试访问iframe内容
+            try {
+                const iframeDocument = previewFrame.contentDocument || (previewFrame.contentWindow && previewFrame.contentWindow.document);
+                if (iframeDocument) {
+                    const htmlElement = iframeDocument.documentElement;
+                    const bodyElement = iframeDocument.body;
+                    
+                    // 获取当前设备的宽高
+                    let width, height;
+                    if (currentDevice === 'custom') {
+                        width = parseInt(deviceFrame.style.width);
+                        height = parseInt(deviceFrame.style.height);
+                    } else {
+                        width = devices[currentDevice].width;
+                        height = devices[currentDevice].height;
+                    }
+                    
+                    // 根据旋转状态设置内部尺寸
+                    if (isLandscape) {
+                        // 横屏模式 - 交换宽高
+                        htmlElement.style.width = height + 'px';
+                        htmlElement.style.height = width + 'px';
+                        
+                        if (bodyElement) {
+                            bodyElement.style.width = height + 'px';
+                            bodyElement.style.height = width + 'px';
+                        }
+                    } else {
+                        // 竖屏模式 - 正常宽高
+                        htmlElement.style.width = width + 'px';
+                        htmlElement.style.height = height + 'px';
+                        
+                        if (bodyElement) {
+                            bodyElement.style.width = width + 'px';
+                            bodyElement.style.height = height + 'px';
+                        }
+                    }
+                    
+                    // 设置CSS，优化展示并禁止滚动
+                    if (bodyElement) {
+                        bodyElement.style.overflow = 'hidden';
+                        bodyElement.style.margin = '0';
+                        bodyElement.style.padding = '0';
+                    }
+                    
+                    // 添加滚动锁定
+                    htmlElement.style.overflow = 'hidden';
+                    htmlElement.style.position = 'fixed';
+                    htmlElement.style.margin = '0';
+                    htmlElement.style.padding = '0';
+                    
+                    // 禁止触摸滚动
+                    iframeDocument.addEventListener('touchmove', function(e) {
+                        e.preventDefault();
+                    }, { passive: false });
+                    
+                    // 尝试修复iframe中相对路径的问题
+                    const basePath = './';
+                    const baseElement = iframeDocument.createElement('base');
+                    baseElement.href = webglDirPath;
+                    
+                    // 将base元素添加到head开始位置
+                    const head = iframeDocument.head || iframeDocument.getElementsByTagName('head')[0];
+                    if (head && !head.querySelector('base')) {
+                        head.insertBefore(baseElement, head.firstChild);
+                    }
+                    
+                    // 添加内联样式确保所有元素正确显示
+                    const styleEl = iframeDocument.createElement('style');
+                    styleEl.textContent = `
+                        html, body {
+                            width: ${isLandscape ? height : width}px !important;
+                            height: ${isLandscape ? width : height}px !important;
+                            margin: 0 !important;
+                            padding: 0 !important;
+                            overflow: hidden !important;
+                        }
+                        body > * {
+                            width: 100% !important;
+                            box-sizing: border-box !important;
+                        }
+                    `;
+                    head.appendChild(styleEl);
+                }
+            } catch (e) {
+                // 可能由于同源策略限制，忽略错误
+                console.log("无法访问iframe内容:", e);
+            }
+            
+            // 更新滚动行为
+            setTimeout(updateScrollBehavior, 300);
+        };
+    }
+    
+    // iframe错误处理，避免无限加载
+    previewFrame.onerror = function() {
+        loading.style.display = 'none';
+    };
+    
+    // 初始化设备
+    function initDevice(deviceName) {
+        if (devices[deviceName]) {
+            // 显示加载动画
+            showLoading();
+            
+            if (isInitialLoad) {
+                isInitialLoad = false;
+            }
+            
+            // 检查是否是横屏设备
+            const isLandscapeDevice = deviceName.includes('(横屏)');
+            
+            // 设置方向标志
+            isLandscape = isLandscapeDevice;
+            
+            // 根据方向设置类
+            if (isLandscape) {
+                deviceContainer.classList.add('landscape');
+                deviceFrame.classList.add('landscape');
+            } else {
+                deviceContainer.classList.remove('landscape');
+                deviceFrame.classList.remove('landscape');
+            }
+            
+            // 重置iframe样式 - 重要：不要设置transform属性，让CSS规则处理旋转
+            previewFrame.style.width = '100%';
+            previewFrame.style.height = '100%';
+            
+            // 恢复默认的iframe加载事件处理
+            setupDefaultIframeLoadHandler();
+            
+            const { width, height } = devices[deviceName];
+            
+            // 更新设备名称显示
+            currentDeviceName.textContent = deviceName;
+            
+            // 应用尺寸到设备框架
+            deviceFrame.style.width = width + 'px';
+            deviceFrame.style.height = height + 'px';
+            
+            // 设置CSS变量，用于设备旋转时交换宽高
+            document.documentElement.style.setProperty('--device-width', `${width}px`);
+            document.documentElement.style.setProperty('--device-height', `${height}px`);
+            
+            // 更新尺寸显示 - 按照显示方向确定尺寸
+            if (isLandscape) {
+                // 在横屏模式下交换宽高显示
+                updateDimensionsDisplay(height, width);
+            } else {
+                updateDimensionsDisplay(width, height);
+            }
+            
+            // 更新滚动行为
+            setTimeout(updateScrollBehavior, 100);
+            
+            // 强制刷新iframe
+            refreshIframe(true);
+            
+            // 更新设备选择按钮显示的文本
+            deviceSelectButton.querySelector('span').textContent = deviceName;
+        }
+    }
+    
+    // 显示加载动画
+    function showLoading() {
+        loading.style.display = 'flex';
+        
+        // 设置超时，如果5秒后还在加载，则强制隐藏加载动画
+        setTimeout(() => {
+            loading.style.display = 'none';
+        }, 5000);
+    }
+    
+    // 设备选择下拉菜单
+    deviceSelectButton.addEventListener('click', function(e) {
+        e.stopPropagation();
+        deviceSelectDropdown.classList.toggle('active');
+        deviceSelectButton.querySelector('.caret-icon').classList.toggle('up');
+        customDimensions.classList.remove('active');
+    });
+    
+    // 点击页面其他区域关闭下拉菜单
+    document.addEventListener('click', function() {
+        deviceSelectDropdown.classList.remove('active');
+        customDimensions.classList.remove('active');
+        deviceSelectButton.querySelector('.caret-icon').classList.remove('up');
+    });
+    
+    // 防止自定义尺寸弹窗被点击外部区域关闭
+    customDimensions.addEventListener('click', function(e) {
+        e.stopPropagation();
+    });
+    
+    // 应用自定义尺寸
+    applyDimensionsButton.addEventListener('click', function() {
+        // 获取用户输入的宽高值，并确保它们是有效的正整数
+        let width = parseInt(widthInput.value);
+        let height = parseInt(heightInput.value);
+        
+        // 设置最小尺寸限制
+        width = (width && width >= 200) ? width : 375;
+        height = (height && height >= 200) ? height : 667;
+        
+        // 更新输入框的值，确保显示有效数值
+        widthInput.value = width;
+        heightInput.value = height;
+        
+        // 显示加载动画
+        showLoading();
+        
+        // 重置滚动位置
+        document.querySelector('.main-content').scrollTop = 0;
+        
+        // 更新设备名为"自定义尺寸"
+        currentDevice = 'custom';
+        currentDeviceName.textContent = '自定义尺寸';
+        
+        // 设置CSS变量，用于设备旋转时交换宽高
+        document.documentElement.style.setProperty('--device-width', `${width}px`);
+        document.documentElement.style.setProperty('--device-height', `${height}px`);
+        
+        // 更新尺寸显示
+        updateDimensionsDisplay(width, height);
+        
+        // 应用新尺寸到设备框架
+        setTimeout(() => {
+            deviceFrame.style.width = width + 'px';
+            deviceFrame.style.height = height + 'px';
+            
+            // 关闭自定义尺寸面板
+            customDimensions.classList.remove('active');
+            
+            // 强制刷新iframe
+            refreshIframe(true);
+        }, 100);
+    });
+    
+    // 设置设备容器的尺寸
+    function setDeviceFrameSize(width, height) {
+        if (!deviceFrame) return;
+        
+        // 设置设备框架的尺寸
+        deviceFrame.style.width = width + 'px';
+        deviceFrame.style.height = height + 'px';
+        
+        // 设置预览框架的尺寸与设备框架相同
+        previewFrame.style.width = width + 'px';
+        previewFrame.style.height = height + 'px';
+        
+        // 更新尺寸显示
+        updateDimensionsDisplay(width, height);
+    }
+
+    // 旋转按钮事件处理
+    rotateButton.addEventListener('click', function() {
+        // 显示加载动画
+        showLoading();
+        
+        // 切换方向状态
+        isLandscape = !isLandscape;
+        
+        // 获取当前设备尺寸
+        let width, height;
+        if (currentDevice === 'custom') {
+            width = parseInt(deviceFrame.style.width) || 375;
+            height = parseInt(deviceFrame.style.height) || 667;
+        } else {
+            width = devices[currentDevice].width;
+            height = devices[currentDevice].height;
+        }
+        
+        // 根据当前方向更新容器类
+        if (isLandscape) {
+            deviceContainer.classList.add('landscape');
+            deviceFrame.classList.add('landscape');
+            
+            // 在横屏模式下交换宽高
+            updateDimensionsDisplay(height, width);
+        } else {
+            deviceContainer.classList.remove('landscape');
+            deviceFrame.classList.remove('landscape');
+            
+            // 在竖屏模式下恢复原始宽高
+            updateDimensionsDisplay(width, height);
+        }
+        
+        // 更新滚动行为
+        setTimeout(updateScrollBehavior, 100);
+        
+        // 刷新iframe，以确保内容能适应新的方向
+        refreshIframe(true);
+    });
+    
+    // 全屏按钮点击事件
+    fullscreenButton.addEventListener('click', function() {
+        if (previewFrame.requestFullscreen) {
+            previewFrame.requestFullscreen();
+        } else if (previewFrame.mozRequestFullScreen) {
+            previewFrame.mozRequestFullScreen();
+        } else if (previewFrame.webkitRequestFullscreen) {
+            previewFrame.webkitRequestFullscreen();
+        } else if (previewFrame.msRequestFullscreen) {
+            previewFrame.msRequestFullscreen();
+        }
+    });
+    
+    // 刷新iframe，添加方向参数
+    function refreshIframe(forceRefresh) {
+        // 显示加载动画
+        showLoading();
+        
+        const baseUrl = webglDirPath + 'rawindex.html';
+        const currentTime = new Date().getTime();
+        const orientation = isLandscape ? 'landscape' : 'portrait';
+        const freshUrl = `${baseUrl}?t=${currentTime}&orientation=${orientation}`;
+        
+        previewFrame.src = freshUrl;
+    }
+    
+    // 在文档加载完成时，添加CSS规则到页面样式表，确保框架旋转正确
+    (function() {
+        // 创建新的样式元素
+        const styleElement = document.createElement('style');
+        // 添加CSS规则
+        styleElement.textContent = `
+            /* 横屏模式样式规则 */
+            #device-container.landscape {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+            
+            /* 设备框架旋转样式 - 仅旋转90度，不改变尺寸 */
+            #device-frame.landscape {
+                transform: rotate(-90deg);
+                transform-origin: center center;
+            }
+            
+            /* 预览窗口旋转样式 - 在设备框架旋转的基础上旋转回来 */
+            #device-frame.landscape #preview-frame {
+                transform: rotate(90deg);
+                transform-origin: center center;
+            }
+        `;
+        // 添加到文档头部
+        document.head.appendChild(styleElement);
+    })();
+    
+    // 更新尺寸显示
+    function updateDimensionsDisplay(width, height) {
+        const dimensionsText = width + ' × ' + height;
+        
+        // 更新顶部尺寸显示
+        if (headerDimensionsDisplay) {
+            headerDimensionsDisplay.textContent = dimensionsText;
+        }
+        
+        // 更新设备框架下方的尺寸显示
+        if (frameDimensionsDisplay) {
+            frameDimensionsDisplay.textContent = dimensionsText;
+        }
+    }
+    
+    // 应用尺寸到设备框架
+    function applyDimensions(width, height) {
+        deviceFrame.style.width = width + 'px';
+        deviceFrame.style.height = height + 'px';
+        
+        // 更新尺寸显示
+        updateDimensionsDisplay(width, height);
+        
+        // 更新滚动行为
+        setTimeout(updateScrollBehavior, 100);
+    }
+    
+    // 监听窗口尺寸改变
+    window.addEventListener('resize', function() {
+        // 更新滚动行为
+        updateScrollBehavior();
+    });
+});