`;
document.body.appendChild(panel);
this.panel = panel;
}
bindEvents() {
const mobile = isMobile();
if (mobile) {
this.bindMobileEvents();
} else {
this.bindDesktopEvents();
}
this.bindCommonEvents();
}
bindMobileEvents() {
let longPressTimer = null;
let isDragging = false;
let hasMoved = false;
this.floatBall.addEventListener('touchstart', (e) => {
e.preventDefault();
const touch = e.touches[0];
this.touchStartPos = { x: touch.clientX, y: touch.clientY };
this.touchStartTime = Date.now();
hasMoved = false;
longPressTimer = setTimeout(() => {
isDragging = true;
this.floatBall.classList.add('dragging');
if (navigator.vibrate) {
navigator.vibrate(50);
}
}, 300);
this.dragOffset.x = touch.clientX - this.floatBall.offsetLeft;
this.dragOffset.y = touch.clientY - this.floatBall.offsetTop;
});
this.floatBall.addEventListener('touchmove', (e) => {
e.preventDefault();
const touch = e.touches[0];
const moveDistance = Math.sqrt(
Math.pow(touch.clientX - this.touchStartPos.x, 2) +
Math.pow(touch.clientY - this.touchStartPos.y, 2)
);
if (moveDistance > 10) {
hasMoved = true;
if (longPressTimer) {
clearTimeout(longPressTimer);
longPressTimer = null;
}
}
if (isDragging) {
let newX = touch.clientX - this.dragOffset.x;
let newY = touch.clientY - this.dragOffset.y;
// 根据设置决定是否允许超出边缘
if (!this.configManager.get('allowHalfBall')) {
const maxX = window.innerWidth - this.floatBall.offsetWidth;
const maxY = window.innerHeight - this.floatBall.offsetHeight;
newX = Math.max(0, Math.min(newX, maxX));
newY = Math.max(0, Math.min(newY, maxY));
} else {
const halfSize = this.floatBall.offsetWidth / 2;
const maxX = window.innerWidth - halfSize;
const maxY = window.innerHeight - halfSize;
newX = Math.max(-halfSize, Math.min(newX, maxX));
newY = Math.max(-halfSize, Math.min(newY, maxY));
}
this.floatBall.style.left = `${newX}px`;
this.floatBall.style.top = `${newY}px`;
}
});
this.floatBall.addEventListener('touchend', (e) => {
e.preventDefault();
if (longPressTimer) {
clearTimeout(longPressTimer);
}
this.floatBall.classList.remove('dragging');
if (isDragging) {
this.configManager.set('floatBallPosition', {
x: parseInt(this.floatBall.style.left),
y: parseInt(this.floatBall.style.top)
});
} else if (!hasMoved) {
const touchDuration = Date.now() - this.touchStartTime;
if (touchDuration < 300) {
this.togglePanel();
}
}
isDragging = false;
hasMoved = false;
});
}
bindDesktopEvents() {
this.floatBall.addEventListener('click', (e) => {
if (!this.isDragging) {
this.togglePanel();
}
});
this.floatBall.addEventListener('mousedown', (e) => {
this.isDragging = false;
this.dragOffset.x = e.clientX - this.floatBall.offsetLeft;
this.dragOffset.y = e.clientY - this.floatBall.offsetTop;
this.floatBall.classList.add('dragging');
const mouseMoveHandler = (e) => {
this.isDragging = true;
let newX = e.clientX - this.dragOffset.x;
let newY = e.clientY - this.dragOffset.y;
// 根据设置决定是否允许超出边缘
if (!this.configManager.get('allowHalfBall')) {
const maxX = window.innerWidth - this.floatBall.offsetWidth;
const maxY = window.innerHeight - this.floatBall.offsetHeight;
newX = Math.max(0, Math.min(newX, maxX));
newY = Math.max(0, Math.min(newY, maxY));
} else {
const halfSize = this.floatBall.offsetWidth / 2;
const maxX = window.innerWidth - halfSize;
const maxY = window.innerHeight - halfSize;
newX = Math.max(-halfSize, Math.min(newX, maxX));
newY = Math.max(-halfSize, Math.min(newY, maxY));
}
this.floatBall.style.left = `${newX}px`;
this.floatBall.style.top = `${newY}px`;
};
const mouseUpHandler = () => {
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);
this.floatBall.classList.remove('dragging');
if (this.isDragging) {
this.configManager.set('floatBallPosition', {
x: parseInt(this.floatBall.style.left),
y: parseInt(this.floatBall.style.top)
});
}
setTimeout(() => {
this.isDragging = false;
}, 100);
};
document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);
});
}
bindCommonEvents() {
// 面板关闭按钮
document.getElementById('translate-panel-close').addEventListener('click', () => {
this.togglePanel();
});
// 启用翻译开关
document.getElementById('translate-enable').addEventListener('change', (e) => {
this.configManager.set('enabled', e.target.checked);
this.translateManager.toggle(e.target.checked);
});
// 自动翻译开关
document.getElementById('translate-auto').addEventListener('change', (e) => {
this.configManager.set('autoTranslate', e.target.checked);
});
// 本地语言选择
document.getElementById('translate-local-lang').addEventListener('change', (e) => {
this.configManager.set('localLanguage', e.target.value);
if (typeof translate !== 'undefined') {
translate.language.setLocal(e.target.value);
}
});
// 目标语言选择
document.getElementById('translate-target-lang').addEventListener('change', (e) => {
this.configManager.set('targetLanguage', e.target.value);
});
// 显示悬浮球开关
document.getElementById('translate-show-ball').addEventListener('change', (e) => {
this.configManager.set('showFloatBall', e.target.checked);
this.floatBall.style.display = e.target.checked ? 'flex' : 'none';
});
// 允许悬浮球超出边缘
document.getElementById('translate-allow-half').addEventListener('change', (e) => {
this.configManager.set('allowHalfBall', e.target.checked);
this.ensureInViewport();
});
// 悬浮球大小滑块
const sizeSlider = document.getElementById('translate-ball-size');
if (sizeSlider) {
sizeSlider.addEventListener('input', (e) => {
const size = parseInt(e.target.value);
this.configManager.set('floatBallSize', size);
this.floatBall.style.width = `${size}px`;
this.floatBall.style.height = `${size}px`;
e.target.nextElementSibling.textContent = `${size}px`;
this.ensureInViewport();
});
}
// 悬浮球透明度滑块
const opacitySlider = document.getElementById('translate-ball-opacity');
if (opacitySlider) {
opacitySlider.addEventListener('input', (e) => {
const opacity = parseInt(e.target.value) / 100;
this.configManager.set('floatBallOpacity', opacity);
this.floatBall.style.opacity = opacity;
e.target.nextElementSibling.textContent = `${e.target.value}%`;
});
}
// 立即翻译按钮
document.getElementById('translate-now-btn').addEventListener('click', () => {
const targetLang = this.configManager.get('targetLanguage');
this.translateManager.changeLanguage(targetLang);
this.togglePanel();
});
// 重置位置按钮
document.getElementById('translate-reset-btn').addEventListener('click', () => {
const defaultPosition = { x: 20, y: 100 };
this.floatBall.style.left = `${defaultPosition.x}px`;
this.floatBall.style.top = `${defaultPosition.y}px`;
this.configManager.set('floatBallPosition', defaultPosition);
});
// 监听窗口大小变化
window.addEventListener('resize', () => {
this.ensureInViewport();
});
// 监听方向变化
window.addEventListener('orientationchange', () => {
setTimeout(() => {
this.ensureInViewport();
}, 300);
});
}
togglePanel() {
if (this.panel.classList.contains('show')) {
this.panel.classList.remove('show');
} else {
this.panel.classList.add('show');
if (!isMobile()) {
this.positionPanel();
}
}
}
positionPanel() {
if (isMobile()) return;
const ballRect = this.floatBall.getBoundingClientRect();
const panelWidth = 400;
const panelHeight = 600;
let left = ballRect.right + 10;
let top = ballRect.top;
if (left + panelWidth > window.innerWidth) {
left = ballRect.left - panelWidth - 10;
}
if (left < 0) {
left = (window.innerWidth - panelWidth) / 2;
}
if (top < 10) {
top = 10;
}
if (top + panelHeight > window.innerHeight - 10) {
top = window.innerHeight - panelHeight - 10;
}
this.panel.style.left = `${left}px`;
this.panel.style.top = `${top}px`;
}
ensureInViewport() {
const position = this.configManager.get('floatBallPosition');
const size = this.configManager.get('floatBallSize');
const allowHalf = this.configManager.get('allowHalfBall');
let x = position.x;
let y = position.y;
if (allowHalf) {
const halfSize = size / 2;
const maxX = window.innerWidth - halfSize;
const maxY = window.innerHeight - halfSize;
x = Math.max(-halfSize, Math.min(x, maxX));
y = Math.max(-halfSize, Math.min(y, maxY));
} else {
const maxX = window.innerWidth - size;
const maxY = window.innerHeight - size;
x = Math.max(0, Math.min(x, maxX));
y = Math.max(0, Math.min(y, maxY));
}
this.floatBall.style.left = `${x}px`;
this.floatBall.style.top = `${y}px`;
if (x !== position.x || y !== position.y) {
this.configManager.set('floatBallPosition', { x, y });
}
}
}
// 初始化
async function init() {
// 等待DOM加载
if (document.readyState === 'loading') {
await new Promise(resolve => {
document.addEventListener('DOMContentLoaded', resolve);
});
}
try {
// 动态加载 translate.js
await loadScript('https://cdnjs.webstatic.cn/ajax/libs/translate.js/3.18.0/translate.js');
// 初始化组件
const configManager = new ConfigManager();
const translateManager = new TranslateManager(configManager);
const uiManager = new UIManager(configManager, translateManager);
// 注册菜单命令
GM_registerMenuCommand('打开翻译设置', () => {
uiManager.togglePanel();
});
// 全局对象
window.translateHelper = {
config: configManager,
translate: translateManager,
ui: uiManager
};
console.log('智能翻译助手已加载');
} catch (error) {
console.error('翻译脚本加载失败:', error);
}
}
// 延迟初始化主功能，确保悬浮球已显示
setTimeout(init, 100);
})();
})();