优化移动设备上的提示框样式和交互逻辑，增强用户体验，确保在不同设备上均能良好显示和操作。
This commit is contained in:
parent
79bd57b79d
commit
943991e025
@ -205,3 +205,66 @@
|
||||
padding-left: 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 移动设备上的提示框样式优化 */
|
||||
@media (max-width: 768px) {
|
||||
#tft-tooltip {
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid rgba(99, 102, 241, 0.5);
|
||||
max-width: calc(100vw - 40px);
|
||||
animation: mobileTooltipFadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
#tft-tooltip .close-tooltip {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(79, 70, 229, 0.2);
|
||||
border-radius: 50%;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
#tft-tooltip .tooltip-content {
|
||||
margin-top: 5px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
/* 增大移动端触摸目标大小 */
|
||||
.chess-item-mini, .synergy-item-mini {
|
||||
padding: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* 移动端使用更明显的交互提示 */
|
||||
.chess-item-mini::after, .synergy-item-mini::after {
|
||||
content: '点击查看';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
transform: translateY(-50%);
|
||||
color: rgba(99, 102, 241, 0.8);
|
||||
font-size: 10px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 提示框返回按钮优化 */
|
||||
.tooltip-back-button {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
opacity: 0.9;
|
||||
background-color: rgba(79, 70, 229, 0.8);
|
||||
}
|
||||
|
||||
@keyframes mobileTooltipFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -658,20 +658,43 @@ function toggleActiveChessVisibility(showOnlyActive) {
|
||||
let tooltipHistory = [];
|
||||
|
||||
/**
|
||||
* 创建悬停提示
|
||||
* 创建提示框
|
||||
*/
|
||||
function createTooltip() {
|
||||
// 创建提示元素
|
||||
if ($('#tft-tooltip').length === 0) {
|
||||
$('body').append(`
|
||||
<div id="tft-tooltip" class="hidden fixed z-50 p-4 bg-gray-800 text-white rounded-lg shadow-lg max-w-sm">
|
||||
<div class="tooltip-content relative"></div>
|
||||
<div class="loading-spinner hidden flex justify-center py-2">
|
||||
<div class="animate-spin rounded-full h-6 w-6 border-t-2 border-b-2 border-white"></div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
// 如果已经存在提示框，不重复创建
|
||||
if ($('#tft-tooltip').length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const tooltip = $(`
|
||||
<div id="tft-tooltip" class="fixed z-50 hidden bg-gray-800 text-white rounded-lg p-4 shadow-lg border border-gray-700 w-80">
|
||||
<div class="tooltip-content"></div>
|
||||
<div class="loading-spinner absolute inset-0 flex items-center justify-center bg-gray-800 bg-opacity-80 hidden">
|
||||
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-500"></div>
|
||||
</div>
|
||||
<button class="close-tooltip absolute top-2 right-2 text-gray-400 hover:text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
`);
|
||||
|
||||
// 添加到页面
|
||||
$('body').append(tooltip);
|
||||
|
||||
// 绑定关闭按钮事件
|
||||
tooltip.find('.close-tooltip').on('click', function(e) {
|
||||
e.stopPropagation();
|
||||
tooltip.addClass('hidden');
|
||||
currentHoveredId = null;
|
||||
$('.tooltip-active').removeClass('tooltip-active');
|
||||
});
|
||||
|
||||
// 防止点击提示框本身触发关闭
|
||||
tooltip.on('click', function(e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
@ -1069,34 +1092,65 @@ function showSynergyTooltip(synergyId, element) {
|
||||
*/
|
||||
function positionTooltip(tooltip, element) {
|
||||
const rect = element.getBoundingClientRect();
|
||||
const tooltipWidth = 320; // 提示框宽度
|
||||
const isMobile = window.matchMedia("(max-width: 768px)").matches ||
|
||||
('ontouchstart' in window) ||
|
||||
(navigator.maxTouchPoints > 0);
|
||||
|
||||
// 计算水平位置，优先显示在右侧
|
||||
let left = rect.right + 10;
|
||||
if (left + tooltipWidth > window.innerWidth) {
|
||||
// 右侧空间不足，显示在左侧
|
||||
left = rect.left - tooltipWidth - 10;
|
||||
// 如果左侧也没有足够空间
|
||||
if (left < 0) {
|
||||
left = Math.max(10, (window.innerWidth - tooltipWidth) / 2); // 居中显示
|
||||
// 移动设备优先考虑居中显示
|
||||
if (isMobile) {
|
||||
const tooltipWidth = Math.min(320, window.innerWidth - 40); // 在小屏幕上适当缩小
|
||||
let left = Math.max(20, (window.innerWidth - tooltipWidth) / 2);
|
||||
|
||||
// 移动设备上优先显示在元素下方，占据更多空间
|
||||
let top = rect.bottom + 10;
|
||||
|
||||
// 如果元素已经在视窗下方，则显示在元素上方
|
||||
if (top > window.innerHeight / 2) {
|
||||
top = Math.max(20, rect.top - 300); // 预留足够空间显示内容
|
||||
}
|
||||
|
||||
// 设置最大高度，确保提示框不会占满整个屏幕
|
||||
const maxHeight = window.innerHeight - top - 20;
|
||||
|
||||
tooltip.css({
|
||||
left: `${left}px`,
|
||||
top: `${top}px`,
|
||||
width: `${tooltipWidth}px`,
|
||||
maxHeight: `${maxHeight}px`,
|
||||
zIndex: 1000 // 确保在移动设备上能覆盖其他元素
|
||||
});
|
||||
} else {
|
||||
// 桌面设备的定位逻辑
|
||||
const tooltipWidth = 320; // 提示框宽度
|
||||
|
||||
// 计算水平位置，优先显示在右侧
|
||||
let left = rect.right + 10;
|
||||
if (left + tooltipWidth > window.innerWidth) {
|
||||
// 右侧空间不足，显示在左侧
|
||||
left = rect.left - tooltipWidth - 10;
|
||||
// 如果左侧也没有足够空间
|
||||
if (left < 0) {
|
||||
left = Math.max(10, (window.innerWidth - tooltipWidth) / 2); // 居中显示
|
||||
}
|
||||
}
|
||||
|
||||
// 计算垂直位置，考虑提示框不超出屏幕
|
||||
let top = rect.top;
|
||||
const tooltipHeight = Math.min(500, window.innerHeight * 0.8); // 预估高度
|
||||
|
||||
if (top + tooltipHeight > window.innerHeight) {
|
||||
// 尝试显示在元素上方
|
||||
top = Math.max(10, rect.top - tooltipHeight);
|
||||
}
|
||||
|
||||
// 设置位置
|
||||
tooltip.css({
|
||||
left: `${left}px`,
|
||||
top: `${top}px`,
|
||||
width: 'auto',
|
||||
maxHeight: `${window.innerHeight - 20}px` // 防止溢出屏幕
|
||||
});
|
||||
}
|
||||
|
||||
// 计算垂直位置，考虑提示框不超出屏幕
|
||||
let top = rect.top;
|
||||
const tooltipHeight = Math.min(500, window.innerHeight * 0.8); // 预估高度
|
||||
|
||||
if (top + tooltipHeight > window.innerHeight) {
|
||||
// 尝试显示在元素上方
|
||||
top = Math.max(10, rect.top - tooltipHeight);
|
||||
}
|
||||
|
||||
// 设置位置
|
||||
tooltip.css({
|
||||
left: `${left}px`,
|
||||
top: `${top}px`,
|
||||
maxHeight: `${window.innerHeight - 20}px` // 防止溢出屏幕
|
||||
});
|
||||
}
|
||||
|
||||
// 防抖函数
|
||||
@ -1155,72 +1209,128 @@ function initTooltips() {
|
||||
|
||||
const tooltipElement = $('#tft-tooltip');
|
||||
|
||||
// 棋子悬停事件 - 使用防抖
|
||||
const debouncedShowChessTooltip = debounce((chessId, element) => {
|
||||
if (currentHoveredId === chessId) {
|
||||
showChessTooltip(chessId, element);
|
||||
}
|
||||
}, 50);
|
||||
// 检测是否为移动设备
|
||||
const isMobile = window.matchMedia("(max-width: 768px)").matches ||
|
||||
('ontouchstart' in window) ||
|
||||
(navigator.maxTouchPoints > 0);
|
||||
|
||||
$(document).on('mouseenter', '.chess-item', function(e) {
|
||||
// 点击文档其它位置关闭提示框
|
||||
$(document).on('click touchend', function(e) {
|
||||
if (!$(e.target).closest('#tft-tooltip, .chess-item, .synergy-item').length) {
|
||||
tooltipElement.addClass('hidden');
|
||||
currentHoveredId = null;
|
||||
$('.tooltip-active').removeClass('tooltip-active');
|
||||
}
|
||||
});
|
||||
|
||||
// 处理棋子触发事件
|
||||
$(document).on(isMobile ? 'click' : 'mouseenter', '.chess-item', function(e) {
|
||||
// 避免在点击移除按钮时显示提示
|
||||
if ($(e.target).closest('.remove-chess').length) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 在移动设备上点击时阻止冒泡
|
||||
if (isMobile) {
|
||||
e.stopPropagation();
|
||||
// 如果已经点击过同一个元素，则关闭提示
|
||||
if (currentHoveredId === $(this).data('chess-id') && tooltipElement.is(':visible')) {
|
||||
tooltipElement.addClass('hidden');
|
||||
currentHoveredId = null;
|
||||
$(this).removeClass('tooltip-active');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const chessId = $(this).data('chess-id');
|
||||
if (chessId) {
|
||||
// 关闭之前可能打开的提示
|
||||
$('.tooltip-active').removeClass('tooltip-active');
|
||||
|
||||
currentHoveredId = chessId;
|
||||
debouncedShowChessTooltip(chessId, this);
|
||||
|
||||
// 在移动设备上直接显示，非移动设备使用防抖
|
||||
if (isMobile) {
|
||||
showChessTooltip(chessId, this);
|
||||
} else {
|
||||
// 使用防抖函数延迟显示提示
|
||||
debounce((id, element) => {
|
||||
if (currentHoveredId === id) {
|
||||
showChessTooltip(id, element);
|
||||
}
|
||||
}, 50)(chessId, this);
|
||||
}
|
||||
|
||||
// 添加活跃状态
|
||||
$(this).addClass('tooltip-active');
|
||||
}
|
||||
});
|
||||
|
||||
// 羁绊悬停事件 - 使用防抖
|
||||
const debouncedShowSynergyTooltip = debounce((synergyId, element) => {
|
||||
if (currentHoveredId === synergyId) {
|
||||
showSynergyTooltip(synergyId, element);
|
||||
}
|
||||
}, 50);
|
||||
|
||||
$(document).on('mouseenter', '.synergy-item', function(e) {
|
||||
// 处理羁绊触发事件
|
||||
$(document).on(isMobile ? 'click' : 'mouseenter', '.synergy-item', function(e) {
|
||||
// 避免在点击移除按钮时显示提示
|
||||
if ($(e.target).closest('.remove-synergy').length) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 在移动设备上点击时阻止冒泡
|
||||
if (isMobile) {
|
||||
e.stopPropagation();
|
||||
// 如果已经点击过同一个元素，则关闭提示
|
||||
if (currentHoveredId === $(this).data('synergy-id') && tooltipElement.is(':visible')) {
|
||||
tooltipElement.addClass('hidden');
|
||||
currentHoveredId = null;
|
||||
$(this).removeClass('tooltip-active');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const synergyId = $(this).data('synergy-id');
|
||||
if (synergyId) {
|
||||
// 关闭之前可能打开的提示
|
||||
$('.tooltip-active').removeClass('tooltip-active');
|
||||
|
||||
currentHoveredId = synergyId;
|
||||
debouncedShowSynergyTooltip(synergyId, this);
|
||||
|
||||
// 在移动设备上直接显示，非移动设备使用防抖
|
||||
if (isMobile) {
|
||||
showSynergyTooltip(synergyId, this);
|
||||
} else {
|
||||
// 使用防抖函数延迟显示提示
|
||||
debounce((id, element) => {
|
||||
if (currentHoveredId === id) {
|
||||
showSynergyTooltip(id, element);
|
||||
}
|
||||
}, 50)(synergyId, this);
|
||||
}
|
||||
|
||||
// 添加活跃状态
|
||||
$(this).addClass('tooltip-active');
|
||||
}
|
||||
});
|
||||
|
||||
// 离开时隐藏提示
|
||||
$(document).on('mouseleave', '.chess-item, .synergy-item', function() {
|
||||
currentHoveredId = null;
|
||||
// 移除活跃状态
|
||||
$(this).removeClass('tooltip-active');
|
||||
// 非移动设备的鼠标离开事件
|
||||
if (!isMobile) {
|
||||
$(document).on('mouseleave', '.chess-item, .synergy-item', function() {
|
||||
currentHoveredId = null;
|
||||
// 移除活跃状态
|
||||
$(this).removeClass('tooltip-active');
|
||||
|
||||
// 检查鼠标是否在提示框上
|
||||
if (!tooltipElement.is(':hover')) {
|
||||
tooltipElement.addClass('hidden');
|
||||
}
|
||||
});
|
||||
// 检查鼠标是否在提示框上
|
||||
if (!tooltipElement.is(':hover')) {
|
||||
tooltipElement.addClass('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
// 避免提示框本身触发悬停事件
|
||||
tooltipElement.on('mouseenter', function() {
|
||||
// 保持显示
|
||||
}).on('mouseleave', function() {
|
||||
$(this).addClass('hidden');
|
||||
currentHoveredId = null;
|
||||
$('.tooltip-active').removeClass('tooltip-active');
|
||||
});
|
||||
// 避免提示框本身触发悬停事件
|
||||
tooltipElement.on('mouseenter', function() {
|
||||
// 保持显示
|
||||
}).on('mouseleave', function() {
|
||||
$(this).addClass('hidden');
|
||||
currentHoveredId = null;
|
||||
$('.tooltip-active').removeClass('tooltip-active');
|
||||
});
|
||||
}
|
||||
|
||||
// 处理点击事件，避免与提示框冲突
|
||||
$(document).on('click', '.remove-chess, .remove-synergy', function(e) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user