|
|
/**
|
|
|
* 业务流程设计区块交互脚本
|
|
|
* Business Process Block Interactive Script
|
|
|
*/
|
|
|
|
|
|
(function($) {
|
|
|
'use strict';
|
|
|
|
|
|
/**
|
|
|
* 业务流程Tab切换类
|
|
|
*/
|
|
|
class BusinessProcessTabs {
|
|
|
constructor(container) {
|
|
|
this.container = $(container);
|
|
|
this.tabs = this.container.find('.process-tab');
|
|
|
this.images = this.container.find('.process-image');
|
|
|
this.currentIndex = 0;
|
|
|
this.isAnimating = false;
|
|
|
|
|
|
this.init();
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 初始化
|
|
|
*/
|
|
|
init() {
|
|
|
this.bindEvents();
|
|
|
this.setupIntersectionObserver();
|
|
|
this.preloadImages();
|
|
|
|
|
|
// 设置初始状态
|
|
|
this.setActiveTab(0, false);
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 绑定事件
|
|
|
*/
|
|
|
bindEvents() {
|
|
|
// Tab点击事件
|
|
|
this.tabs.on('click', (e) => {
|
|
|
e.preventDefault();
|
|
|
const index = this.tabs.index($(e.currentTarget));
|
|
|
this.switchTab(index);
|
|
|
});
|
|
|
|
|
|
// 键盘导航支持
|
|
|
this.tabs.on('keydown', (e) => {
|
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
|
e.preventDefault();
|
|
|
const index = this.tabs.index($(e.currentTarget));
|
|
|
this.switchTab(index);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 触摸滑动支持（移动端）
|
|
|
if ('ontouchstart' in window) {
|
|
|
this.setupTouchEvents();
|
|
|
}
|
|
|
|
|
|
// 窗口大小改变时重新计算
|
|
|
$(window).on('resize', this.debounce(() => {
|
|
|
this.handleResize();
|
|
|
}, 250));
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 设置触摸事件（移动端滑动支持）
|
|
|
*/
|
|
|
setupTouchEvents() {
|
|
|
let startX = 0;
|
|
|
let startY = 0;
|
|
|
let isScrolling = false;
|
|
|
|
|
|
this.container.on('touchstart', (e) => {
|
|
|
const touch = e.originalEvent.touches[0];
|
|
|
startX = touch.clientX;
|
|
|
startY = touch.clientY;
|
|
|
isScrolling = false;
|
|
|
});
|
|
|
|
|
|
this.container.on('touchmove', (e) => {
|
|
|
if (isScrolling) return;
|
|
|
|
|
|
const touch = e.originalEvent.touches[0];
|
|
|
const deltaX = touch.clientX - startX;
|
|
|
const deltaY = touch.clientY - startY;
|
|
|
|
|
|
// 判断是否为水平滑动
|
|
|
if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 30) {
|
|
|
isScrolling = true;
|
|
|
e.preventDefault();
|
|
|
|
|
|
if (deltaX > 0 && this.currentIndex > 0) {
|
|
|
// 向右滑动，切换到上一个tab
|
|
|
this.switchTab(this.currentIndex - 1);
|
|
|
} else if (deltaX < 0 && this.currentIndex < this.tabs.length - 1) {
|
|
|
// 向左滑动，切换到下一个tab
|
|
|
this.switchTab(this.currentIndex + 1);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 切换Tab
|
|
|
*/
|
|
|
switchTab(index) {
|
|
|
if (index === this.currentIndex || this.isAnimating || index < 0 || index >= this.tabs.length) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
this.setActiveTab(index, true);
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 设置活动Tab
|
|
|
*/
|
|
|
setActiveTab(index, animate = true) {
|
|
|
if (this.isAnimating && animate) return;
|
|
|
|
|
|
this.isAnimating = animate;
|
|
|
this.currentIndex = index;
|
|
|
|
|
|
// 更新Tab状态
|
|
|
this.tabs.removeClass('active').eq(index).addClass('active');
|
|
|
|
|
|
// 更新图片显示
|
|
|
if (animate) {
|
|
|
this.animateImageTransition(index);
|
|
|
} else {
|
|
|
this.images.removeClass('active').eq(index).addClass('active');
|
|
|
this.isAnimating = false;
|
|
|
}
|
|
|
|
|
|
// 更新ARIA属性
|
|
|
this.updateAccessibility(index);
|
|
|
|
|
|
// 触发自定义事件
|
|
|
this.container.trigger('tabChanged', [index, this.tabs.eq(index)]);
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 图片切换动画
|
|
|
*/
|
|
|
animateImageTransition(index) {
|
|
|
const currentImage = this.images.filter('.active');
|
|
|
const nextImage = this.images.eq(index);
|
|
|
|
|
|
// 如果没有当前活动图片，直接显示新图片
|
|
|
if (currentImage.length === 0) {
|
|
|
nextImage.addClass('active');
|
|
|
this.isAnimating = false;
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 淡出当前图片
|
|
|
currentImage.animate({ opacity: 0 }, 250, () => {
|
|
|
currentImage.removeClass('active');
|
|
|
|
|
|
// 淡入新图片
|
|
|
nextImage.addClass('active').css('opacity', 0).animate({ opacity: 1 }, 250, () => {
|
|
|
this.isAnimating = false;
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 更新无障碍访问属性
|
|
|
*/
|
|
|
updateAccessibility(index) {
|
|
|
this.tabs.each((i, tab) => {
|
|
|
const $tab = $(tab);
|
|
|
$tab.attr('aria-selected', i === index ? 'true' : 'false');
|
|
|
$tab.attr('tabindex', i === index ? '0' : '-1');
|
|
|
});
|
|
|
|
|
|
this.images.each((i, image) => {
|
|
|
const $image = $(image);
|
|
|
$image.attr('aria-hidden', i === index ? 'false' : 'true');
|
|
|
});
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 预加载图片
|
|
|
*/
|
|
|
preloadImages() {
|
|
|
this.images.each((index, element) => {
|
|
|
const $img = $(element).find('img');
|
|
|
if ($img.length && $img.attr('data-src')) {
|
|
|
const img = new Image();
|
|
|
img.onload = () => {
|
|
|
$img.attr('src', $img.attr('data-src')).removeAttr('data-src');
|
|
|
};
|
|
|
img.src = $img.attr('data-src');
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 设置交叉观察器（用于动画触发）
|
|
|
*/
|
|
|
setupIntersectionObserver() {
|
|
|
if (!window.IntersectionObserver) return;
|
|
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
|
entries.forEach(entry => {
|
|
|
if (entry.isIntersecting) {
|
|
|
this.container.addClass('animate-in');
|
|
|
observer.unobserve(entry.target);
|
|
|
}
|
|
|
});
|
|
|
}, {
|
|
|
threshold: 0.2,
|
|
|
rootMargin: '0px 0px -50px 0px'
|
|
|
});
|
|
|
|
|
|
observer.observe(this.container[0]);
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 处理窗口大小改变
|
|
|
*/
|
|
|
handleResize() {
|
|
|
// 重新计算布局相关的尺寸
|
|
|
this.container.removeClass('animate-in');
|
|
|
|
|
|
// 延迟重新添加动画类
|
|
|
setTimeout(() => {
|
|
|
this.container.addClass('animate-in');
|
|
|
}, 100);
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 防抖函数
|
|
|
*/
|
|
|
debounce(func, wait) {
|
|
|
let timeout;
|
|
|
return function executedFunction(...args) {
|
|
|
const later = () => {
|
|
|
clearTimeout(timeout);
|
|
|
func(...args);
|
|
|
};
|
|
|
clearTimeout(timeout);
|
|
|
timeout = setTimeout(later, wait);
|
|
|
};
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 自动播放功能
|
|
|
*/
|
|
|
startAutoPlay(interval = 5000) {
|
|
|
this.stopAutoPlay();
|
|
|
|
|
|
this.autoPlayTimer = setInterval(() => {
|
|
|
const nextIndex = (this.currentIndex + 1) % this.tabs.length;
|
|
|
this.switchTab(nextIndex);
|
|
|
}, interval);
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 停止自动播放
|
|
|
*/
|
|
|
stopAutoPlay() {
|
|
|
if (this.autoPlayTimer) {
|
|
|
clearInterval(this.autoPlayTimer);
|
|
|
this.autoPlayTimer = null;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 销毁实例
|
|
|
*/
|
|
|
destroy() {
|
|
|
this.stopAutoPlay();
|
|
|
this.tabs.off('click keydown');
|
|
|
this.container.off('touchstart touchmove');
|
|
|
$(window).off('resize');
|
|
|
this.container.removeClass('animate-in');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 初始化所有业务流程区块
|
|
|
*/
|
|
|
function initBusinessProcessBlocks() {
|
|
|
$('.business-process-block').each(function() {
|
|
|
const $block = $(this);
|
|
|
|
|
|
// 避免重复初始化
|
|
|
if ($block.data('business-process-initialized')) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
const instance = new BusinessProcessTabs(this);
|
|
|
$block.data('business-process-instance', instance);
|
|
|
$block.data('business-process-initialized', true);
|
|
|
|
|
|
// 如果设置了自动播放，启动自动播放
|
|
|
const autoPlay = $block.data('auto-play');
|
|
|
const autoPlayInterval = $block.data('auto-play-interval') || 5000;
|
|
|
|
|
|
if (autoPlay) {
|
|
|
instance.startAutoPlay(autoPlayInterval);
|
|
|
|
|
|
// 鼠标悬停时暂停自动播放
|
|
|
$block.on('mouseenter', () => instance.stopAutoPlay());
|
|
|
$block.on('mouseleave', () => instance.startAutoPlay(autoPlayInterval));
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 页面加载完成后初始化
|
|
|
*/
|
|
|
$(document).ready(function() {
|
|
|
initBusinessProcessBlocks();
|
|
|
});
|
|
|
|
|
|
/**
|
|
|
* 支持动态加载的内容
|
|
|
*/
|
|
|
$(document).on('DOMNodeInserted', function(e) {
|
|
|
const $target = $(e.target);
|
|
|
if ($target.hasClass('business-process-block') || $target.find('.business-process-block').length) {
|
|
|
setTimeout(initBusinessProcessBlocks, 100);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
/**
|
|
|
* 自定义器预览支持
|
|
|
*/
|
|
|
if (typeof wp !== 'undefined' && wp.customize) {
|
|
|
wp.customize.bind('ready', function() {
|
|
|
// 当自定义器设置改变时重新初始化
|
|
|
wp.customize.bind('change', function() {
|
|
|
setTimeout(initBusinessProcessBlocks, 500);
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 导出到全局作用域（用于外部调用）
|
|
|
*/
|
|
|
window.BusinessProcessTabs = BusinessProcessTabs;
|
|
|
window.initBusinessProcessBlocks = initBusinessProcessBlocks;
|
|
|
|
|
|
})(jQuery); |
