|
|
/**
|
|
|
* 自定义器控制功能
|
|
|
* 关于我们时间轴设置的用户体验
|
|
|
*/
|
|
|
|
|
|
(function($) {
|
|
|
'use strict';
|
|
|
|
|
|
// 确保 wp.customize 对象完全加载后再执行
|
|
|
$(document).ready(function() {
|
|
|
// 等待 wp.customize 对象可用
|
|
|
var checkCustomizeReady = function() {
|
|
|
if (typeof wp !== 'undefined' && wp.customize && wp.customize.bind) {
|
|
|
wp.customize.bind('ready', function() {
|
|
|
// 关于我们时间轴控制功能
|
|
|
initAboutTimelineControls();
|
|
|
|
|
|
// 视频Banner控制功能
|
|
|
initVideoBannerControls();
|
|
|
|
|
|
// 业务流程控制功能
|
|
|
initBusinessProcessControls();
|
|
|
});
|
|
|
} else {
|
|
|
// 如果 wp.customize 还没准备好，等待 100ms 后重试
|
|
|
setTimeout(checkCustomizeReady, 100);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
checkCustomizeReady();
|
|
|
});
|
|
|
|
|
|
// 关于我们时间轴控制功能
|
|
|
function initAboutTimelineControls() {
|
|
|
// 时间轴现在使用独立字段面板，不需要额外的控制功能
|
|
|
// 所有设置都通过WordPress自定义器的标准控件处理
|
|
|
}
|
|
|
|
|
|
// 视频Banner控制功能
|
|
|
function initVideoBannerControls() {
|
|
|
|
|
|
// 视频背景URL验证
|
|
|
wp.customize('video_banner_video_bg_url', function(setting) {
|
|
|
setting.bind(function(value) {
|
|
|
validateVideoUrl(value);
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 高度验证
|
|
|
wp.customize('video_banner_height', function(setting) {
|
|
|
setting.bind(function(value) {
|
|
|
validateHeight(value);
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 添加预设配置按钮
|
|
|
addVideoBannerPresets();
|
|
|
|
|
|
// 视频背景控制
|
|
|
initVideoBgControls();
|
|
|
|
|
|
// 内容预设
|
|
|
addContentPresets();
|
|
|
}
|
|
|
|
|
|
// 视频URL验证
|
|
|
function validateVideoUrl(url) {
|
|
|
if (!url) return;
|
|
|
|
|
|
const videoExtensions = ['.mp4', '.webm', '.ogg', '.mov'];
|
|
|
const isValidVideo = videoExtensions.some(ext => url.toLowerCase().includes(ext));
|
|
|
|
|
|
if (!isValidVideo && !url.includes('youtube.com') && !url.includes('vimeo.com')) {
|
|
|
showNotification('请输入有效的视频URL（支持MP4、WebM、OGG格式或YouTube/Vimeo链接）', 'warning');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 高度验证
|
|
|
function validateHeight(height) {
|
|
|
const numHeight = parseInt(height);
|
|
|
if (numHeight < 300) {
|
|
|
showNotification('建议高度不少于300px以确保良好的视觉效果', 'warning');
|
|
|
} else if (numHeight > 1200) {
|
|
|
showNotification('建议高度不超过1200px以确保页面性能', 'warning');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 添加预设配置按钮
|
|
|
function addVideoBannerPresets() {
|
|
|
// 确保 wp.customize 可用
|
|
|
if (typeof wp === 'undefined' || !wp.customize || !wp.customize.section) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
const section = wp.customize.section('video_banner_section');
|
|
|
if (!section) return;
|
|
|
|
|
|
const presetContainer = $('<div class="video-banner-presets"></div>');
|
|
|
presetContainer.append('<h4>快速预设</h4>');
|
|
|
|
|
|
const presets = [
|
|
|
{
|
|
|
name: '标准配置',
|
|
|
settings: {
|
|
|
video_banner_height: 800,
|
|
|
video_banner_video_bg_opacity: 0.7,
|
|
|
video_banner_video_bg_lazy_load: false
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name: '高清大屏',
|
|
|
settings: {
|
|
|
video_banner_height: 1000,
|
|
|
video_banner_video_bg_opacity: 0.8,
|
|
|
video_banner_video_bg_lazy_load: false
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name: '移动优化',
|
|
|
settings: {
|
|
|
video_banner_height: 600,
|
|
|
video_banner_video_bg_opacity: 0.6,
|
|
|
video_banner_video_bg_lazy_load: true
|
|
|
}
|
|
|
}
|
|
|
];
|
|
|
|
|
|
presets.forEach(function(preset) {
|
|
|
const button = $('<button type="button" class="button preset-button">' + preset.name + '</button>');
|
|
|
button.on('click', function() {
|
|
|
applyPreset(preset.settings);
|
|
|
showNotification('已应用 "' + preset.name + '" 预设配置', 'success');
|
|
|
});
|
|
|
presetContainer.append(button);
|
|
|
});
|
|
|
|
|
|
// 将预设按钮添加到section容器
|
|
|
setTimeout(function() {
|
|
|
const sectionContainer = section.container.find('.accordion-section-content');
|
|
|
if (sectionContainer.length) {
|
|
|
sectionContainer.prepend(presetContainer);
|
|
|
}
|
|
|
}, 100);
|
|
|
}
|
|
|
|
|
|
// 应用预设配置
|
|
|
function applyPreset(settings) {
|
|
|
// 确保 wp.customize 可用
|
|
|
if (typeof wp === 'undefined' || !wp.customize) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
Object.keys(settings).forEach(function(key) {
|
|
|
const setting = wp.customize(key);
|
|
|
if (setting) {
|
|
|
setting.set(settings[key]);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 视频背景控制
|
|
|
function initVideoBgControls() {
|
|
|
// 确保 wp.customize 可用
|
|
|
if (typeof wp === 'undefined' || !wp.customize) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 视频背景启用/禁用控制
|
|
|
wp.customize('video_banner_video_bg_enabled', function(setting) {
|
|
|
setting.bind(function(enabled) {
|
|
|
toggleVideoBgControls(enabled);
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 初始状态 - 安全获取设置值
|
|
|
setTimeout(function() {
|
|
|
const enabledSetting = wp.customize('video_banner_video_bg_enabled');
|
|
|
if (enabledSetting) {
|
|
|
const initialEnabled = enabledSetting();
|
|
|
toggleVideoBgControls(initialEnabled);
|
|
|
}
|
|
|
}, 50);
|
|
|
|
|
|
// 不透明度控制
|
|
|
wp.customize('video_banner_video_bg_opacity', function(setting) {
|
|
|
setting.bind(function(opacity) {
|
|
|
updateOpacityDisplay(opacity);
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 切换视频背景控制显示
|
|
|
function toggleVideoBgControls(enabled) {
|
|
|
// 确保 wp.customize 可用
|
|
|
if (typeof wp === 'undefined' || !wp.customize || !wp.customize.control) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
const controls = [
|
|
|
'video_banner_video_bg_url',
|
|
|
'video_banner_video_bg_opacity',
|
|
|
'video_banner_video_bg_lazy_load'
|
|
|
];
|
|
|
|
|
|
controls.forEach(function(controlId) {
|
|
|
const control = wp.customize.control(controlId);
|
|
|
if (control) {
|
|
|
if (enabled) {
|
|
|
control.container.show();
|
|
|
} else {
|
|
|
control.container.hide();
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 更新不透明度显示
|
|
|
function updateOpacityDisplay(opacity) {
|
|
|
// 确保 wp.customize 可用
|
|
|
if (typeof wp === 'undefined' || !wp.customize || !wp.customize.control) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
const control = wp.customize.control('video_banner_video_bg_opacity');
|
|
|
if (control) {
|
|
|
const label = control.container.find('.customize-control-title');
|
|
|
label.text('视频背景不透明度 (' + Math.round(opacity * 100) + '%)');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 添加内容预设
|
|
|
function addContentPresets() {
|
|
|
const contentPresets = [
|
|
|
{
|
|
|
name: '企业介绍',
|
|
|
content: {
|
|
|
video_banner_content_subtitle: 'COMPANY INTRODUCTION',
|
|
|
video_banner_content_title: '能辉能源',
|
|
|
video_banner_content_description: '专业的能源解决方案提供商，致力于可持续发展'
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name: '产品展示',
|
|
|
content: {
|
|
|
video_banner_content_subtitle: 'PRODUCT SHOWCASE',
|
|
|
video_banner_content_title: '创新产品',
|
|
|
video_banner_content_description: '领先的技术，卓越的品质，为您提供最佳解决方案'
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name: '服务介绍',
|
|
|
content: {
|
|
|
video_banner_content_subtitle: 'OUR SERVICES',
|
|
|
video_banner_content_title: '专业服务',
|
|
|
video_banner_content_description: '全方位的服务支持，让您的项目更加成功'
|
|
|
}
|
|
|
}
|
|
|
];
|
|
|
|
|
|
// 添加内容预设按钮
|
|
|
setTimeout(function() {
|
|
|
// 确保 wp.customize 可用
|
|
|
if (typeof wp === 'undefined' || !wp.customize || !wp.customize.control) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
const titleControl = wp.customize.control('video_banner_content_title');
|
|
|
if (titleControl) {
|
|
|
const presetContainer = $('<div class="content-presets" style="margin-top: 10px;"></div>');
|
|
|
presetContainer.append('<label>内容预设：</label>');
|
|
|
|
|
|
contentPresets.forEach(function(preset) {
|
|
|
const button = $('<button type="button" class="button button-small" style="margin: 2px;">' + preset.name + '</button>');
|
|
|
button.on('click', function() {
|
|
|
// 确保 wp.customize 可用
|
|
|
if (typeof wp === 'undefined' || !wp.customize) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
Object.keys(preset.content).forEach(function(key) {
|
|
|
const setting = wp.customize(key);
|
|
|
if (setting) {
|
|
|
setting.set(preset.content[key]);
|
|
|
}
|
|
|
});
|
|
|
showNotification('已应用 "' + preset.name + '" 内容预设', 'success');
|
|
|
});
|
|
|
presetContainer.append(button);
|
|
|
});
|
|
|
|
|
|
titleControl.container.append(presetContainer);
|
|
|
}
|
|
|
}, 200);
|
|
|
}
|
|
|
|
|
|
// 显示通知
|
|
|
function showNotification(message, type) {
|
|
|
type = type || 'info';
|
|
|
|
|
|
// 移除现有通知
|
|
|
$('.video-banner-notification').remove();
|
|
|
|
|
|
const notification = $('<div class="video-banner-notification notice notice-' + type + ' is-dismissible"><p>' + message + '</p></div>');
|
|
|
|
|
|
// 添加关闭按钮功能
|
|
|
notification.on('click', '.notice-dismiss', function() {
|
|
|
notification.fadeOut();
|
|
|
});
|
|
|
|
|
|
// 显示通知
|
|
|
$('#customize-controls').prepend(notification);
|
|
|
|
|
|
// 自动隐藏
|
|
|
setTimeout(function() {
|
|
|
notification.fadeOut();
|
|
|
}, 5000);
|
|
|
}
|
|
|
|
|
|
// 业务流程控制功能
|
|
|
function initBusinessProcessControls() {
|
|
|
// 业务流程显示控制
|
|
|
wp.customize('business_process_show', function(setting) {
|
|
|
setting.bind(function(value) {
|
|
|
toggleBusinessProcessSections(value);
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 初始化时检查显示状态
|
|
|
const initialShow = wp.customize('business_process_show')();
|
|
|
toggleBusinessProcessSections(initialShow);
|
|
|
|
|
|
// 添加Tab预设配置
|
|
|
addBusinessProcessPresets();
|
|
|
|
|
|
// 图片验证
|
|
|
initBusinessProcessImageValidation();
|
|
|
|
|
|
// 添加批量操作功能
|
|
|
addBusinessProcessBatchOperations();
|
|
|
}
|
|
|
|
|
|
// 切换业务流程相关设置的显示状态
|
|
|
function toggleBusinessProcessSections(show) {
|
|
|
const sections = [
|
|
|
'business_process_tab1_section',
|
|
|
'business_process_tab2_section',
|
|
|
'business_process_tab3_section',
|
|
|
'business_process_tab4_section'
|
|
|
];
|
|
|
|
|
|
sections.forEach(function(sectionId) {
|
|
|
const section = wp.customize.section(sectionId);
|
|
|
if (section) {
|
|
|
if (show) {
|
|
|
section.container.show();
|
|
|
} else {
|
|
|
section.container.hide();
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 添加业务流程预设配置
|
|
|
function addBusinessProcessPresets() {
|
|
|
setTimeout(function() {
|
|
|
const basicSection = wp.customize.section('business_process_basic_section');
|
|
|
if (basicSection && basicSection.container) {
|
|
|
const presetContainer = $('<div class="business-process-presets" style="margin: 15px 0; padding: 10px; background: #f9f9f9; border-radius: 4px;"></div>');
|
|
|
|
|
|
presetContainer.append('<h4 style="margin: 0 0 10px 0; font-size: 12px; color: #555;">快速配置预设</h4>');
|
|
|
|
|
|
const presets = [
|
|
|
{
|
|
|
name: '默认设计流程',
|
|
|
config: {
|
|
|
title: '设计业务流程',
|
|
|
subtitle: '专业的设计流程，确保项目高质量完成',
|
|
|
tab1: { title: '可行性研究', description: '前期调研并综合考虑"可行性、经济性、安全性"三个方面，多方案比较，确定最优设计方案和实施策略。' },
|
|
|
tab2: { title: '初步设计', description: '在基本方案确定的基础上，进行"精细设计"，确定主要设备的选型和布置，形成初步设计方案。' },
|
|
|
tab3: { title: '施工图设计', description: '基于初步设计方案，进行详细的施工图设计，确保设计方案的可实施性和工程质量。' },
|
|
|
tab4: { title: '竣工图设计', description: '项目完工后的竣工图设计，真实反映工程实际建设情况，为后续运维提供准确的技术资料。' }
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name: '工程管理流程',
|
|
|
config: {
|
|
|
title: '工程管理流程',
|
|
|
subtitle: '规范化的工程管理，保障项目顺利实施',
|
|
|
tab1: { title: '项目启动', description: '项目立项、团队组建、资源配置，明确项目目标和实施计划。' },
|
|
|
tab2: { title: '方案设计', description: '深入分析需求，制定详细的技术方案和实施策略。' },
|
|
|
tab3: { title: '实施执行', description: '按照既定方案执行项目，严格控制质量、进度和成本。' },
|
|
|
tab4: { title: '验收交付', description: '项目验收、文档整理、知识转移，确保项目成功交付。' }
|
|
|
}
|
|
|
}
|
|
|
];
|
|
|
|
|
|
presets.forEach(function(preset) {
|
|
|
const button = $('<button type="button" class="button button-secondary" style="margin-right: 5px; margin-bottom: 5px; font-size: 11px;">' + preset.name + '</button>');
|
|
|
|
|
|
button.on('click', function(e) {
|
|
|
e.preventDefault();
|
|
|
applyBusinessProcessPreset(preset.config);
|
|
|
showNotification('已应用预设配置：' + preset.name, 'success');
|
|
|
});
|
|
|
|
|
|
presetContainer.append(button);
|
|
|
});
|
|
|
|
|
|
// 添加重置按钮
|
|
|
const resetButton = $('<button type="button" class="button button-link-delete" style="margin-left: 10px; font-size: 11px;">重置为默认</button>');
|
|
|
resetButton.on('click', function(e) {
|
|
|
e.preventDefault();
|
|
|
resetBusinessProcessSettings();
|
|
|
showNotification('已重置为默认设置', 'info');
|
|
|
});
|
|
|
presetContainer.append(resetButton);
|
|
|
|
|
|
basicSection.container.find('.customize-section-description-container').after(presetContainer);
|
|
|
}
|
|
|
}, 500);
|
|
|
}
|
|
|
|
|
|
// 应用业务流程预设配置
|
|
|
function applyBusinessProcessPreset(config) {
|
|
|
wp.customize('business_process_title').set(config.title);
|
|
|
wp.customize('business_process_subtitle').set(config.subtitle);
|
|
|
|
|
|
for (let i = 1; i <= 4; i++) {
|
|
|
const tabConfig = config['tab' + i];
|
|
|
if (tabConfig) {
|
|
|
wp.customize('business_process_tab' + i + '_title').set(tabConfig.title);
|
|
|
wp.customize('business_process_tab' + i + '_description').set(tabConfig.description);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 重置业务流程设置
|
|
|
function resetBusinessProcessSettings() {
|
|
|
const defaults = {
|
|
|
'business_process_show': true,
|
|
|
'business_process_title': '设计业务流程',
|
|
|
'business_process_subtitle': '专业的设计流程，确保项目高质量完成',
|
|
|
'business_process_tab1_title': '可行性研究',
|
|
|
'business_process_tab1_description': '前期调研并综合考虑"可行性、经济性、安全性"三个方面，多方案比较，确定最优设计方案和实施策略。',
|
|
|
'business_process_tab2_title': '初步设计',
|
|
|
'business_process_tab2_description': '在基本方案确定的基础上，进行"精细设计"，确定主要设备的选型和布置，形成初步设计方案。',
|
|
|
'business_process_tab3_title': '施工图设计',
|
|
|
'business_process_tab3_description': '基于初步设计方案，进行详细的施工图设计，确保设计方案的可实施性和工程质量。',
|
|
|
'business_process_tab4_title': '竣工图设计',
|
|
|
'business_process_tab4_description': '项目完工后的竣工图设计，真实反映工程实际建设情况，为后续运维提供准确的技术资料。'
|
|
|
};
|
|
|
|
|
|
Object.keys(defaults).forEach(function(key) {
|
|
|
if (wp.customize(key)) {
|
|
|
wp.customize(key).set(defaults[key]);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 业务流程图片验证
|
|
|
function initBusinessProcessImageValidation() {
|
|
|
for (let i = 1; i <= 4; i++) {
|
|
|
wp.customize('business_process_tab' + i + '_image', function(setting) {
|
|
|
setting.bind(function(value) {
|
|
|
validateBusinessProcessImage(value, i);
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 验证业务流程图片
|
|
|
function validateBusinessProcessImage(imageUrl, tabNumber) {
|
|
|
if (!imageUrl) {
|
|
|
showNotification('Tab ' + String(tabNumber).padStart(2, '0') + ' 的图片不能为空', 'warning');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 检查图片格式
|
|
|
const validExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg'];
|
|
|
const isValidImage = validExtensions.some(ext => imageUrl.toLowerCase().includes(ext));
|
|
|
|
|
|
if (!isValidImage) {
|
|
|
showNotification('Tab ' + String(tabNumber).padStart(2, '0') + ' 请选择有效的图片格式（JPG、PNG、GIF、WebP、SVG）', 'warning');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 添加批量操作功能
|
|
|
function addBusinessProcessBatchOperations() {
|
|
|
setTimeout(function() {
|
|
|
const basicSection = wp.customize.section('business_process_basic_section');
|
|
|
if (basicSection && basicSection.container) {
|
|
|
const batchContainer = $('<div class="business-process-batch-ops" style="margin: 15px 0; padding: 10px; background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px;"></div>');
|
|
|
|
|
|
batchContainer.append('<h4 style="margin: 0 0 10px 0; font-size: 12px; color: #856404;">批量操作</h4>');
|
|
|
|
|
|
// 批量设置相同图片
|
|
|
const imageInput = $('<input type="text" placeholder="输入图片URL，将应用到所有Tab" style="width: 100%; margin-bottom: 5px; padding: 4px;">');
|
|
|
const applyImageButton = $('<button type="button" class="button button-secondary" style="font-size: 11px;">应用到所有Tab</button>');
|
|
|
|
|
|
applyImageButton.on('click', function(e) {
|
|
|
e.preventDefault();
|
|
|
const imageUrl = imageInput.val().trim();
|
|
|
if (imageUrl) {
|
|
|
for (let i = 1; i <= 4; i++) {
|
|
|
wp.customize('business_process_tab' + i + '_image').set(imageUrl);
|
|
|
}
|
|
|
showNotification('已将图片应用到所有Tab', 'success');
|
|
|
imageInput.val('');
|
|
|
} else {
|
|
|
showNotification('请输入有效的图片URL', 'warning');
|
|
|
}
|
|
|
});
|
|
|
|
|
|
batchContainer.append(imageInput);
|
|
|
batchContainer.append(applyImageButton);
|
|
|
|
|
|
basicSection.container.find('.business-process-presets').after(batchContainer);
|
|
|
}
|
|
|
}, 600);
|
|
|
}
|
|
|
|
|
|
})(jQuery); |
