377 lines
11 KiB
JavaScript
377 lines
11 KiB
JavaScript
// 二维码功能 - 优化版编辑器工具栏
|
|
(function() {
|
|
'use strict';
|
|
|
|
// ========== 配置 ==========
|
|
const CONFIG = {
|
|
MIN_SIZE: 0,
|
|
MAX_SIZE: 200,
|
|
DEFAULT_SIZE: 100,
|
|
PREVIEW_SIZE: 128,
|
|
DEBOUNCE_DELAY: 300
|
|
};
|
|
|
|
// ========== DOM 元素缓存 ==========
|
|
const elements = {
|
|
btn: document.getElementById('qr-btn'),
|
|
modal: document.getElementById('qr-modal'),
|
|
input: document.getElementById('qr-input'),
|
|
preview: document.getElementById('qr-preview'),
|
|
closeBtn: document.querySelector('.qr-close'),
|
|
cancelBtn: document.querySelector('.qr-cancel'),
|
|
okBtn: document.querySelector('.qr-ok'),
|
|
// 工具栏
|
|
editorToolbar: document.getElementById('editorToolbar'),
|
|
textTools: document.getElementById('textTools'),
|
|
imageTools: document.getElementById('imageTools'),
|
|
bgTools: document.getElementById('bgTools'),
|
|
qrTools: document.getElementById('qrTools'),
|
|
qrOpacitySlider: document.getElementById('qrOpacitySlider'),
|
|
qrOpacityValue: document.getElementById('qrOpacityValue'),
|
|
qrScaleSlider: document.getElementById('qrScaleSlider'),
|
|
qrScaleValue: document.getElementById('qrScaleValue')
|
|
};
|
|
|
|
// 验证必需元素
|
|
if (!elements.btn || !elements.modal) return;
|
|
|
|
// ========== 状态管理 ==========
|
|
const state = {
|
|
currentQR: null,
|
|
selectedQR: null,
|
|
previewTimer: null,
|
|
isDragging: false
|
|
};
|
|
|
|
// ========== 核心功能 ==========
|
|
|
|
/**
|
|
* 检查背景图并显示/隐藏二维码按钮
|
|
*/
|
|
function checkBackground() {
|
|
const container = document.getElementById('imageContainer');
|
|
if (!container) return;
|
|
|
|
const bgImg = container.querySelector('img:not([data-type="qrcode"])');
|
|
const hasBackground = bgImg && bgImg.src && !bgImg.src.endsWith(window.location.href);
|
|
|
|
elements.btn.classList.toggle('show', hasBackground);
|
|
}
|
|
|
|
/**
|
|
* 打开二维码生成弹窗
|
|
*/
|
|
function openModal() {
|
|
elements.modal.classList.add('active');
|
|
elements.input.value = '';
|
|
elements.preview.innerHTML = '';
|
|
state.currentQR = null;
|
|
elements.input.focus();
|
|
}
|
|
|
|
/**
|
|
* 关闭二维码生成弹窗
|
|
*/
|
|
function closeModal() {
|
|
elements.modal.classList.remove('active');
|
|
}
|
|
|
|
/**
|
|
* 生成二维码预览
|
|
*/
|
|
function generatePreview() {
|
|
const text = elements.input.value.trim();
|
|
|
|
if (!text) {
|
|
elements.preview.innerHTML = '';
|
|
state.currentQR = null;
|
|
return;
|
|
}
|
|
|
|
elements.preview.innerHTML = '';
|
|
|
|
try {
|
|
state.currentQR = new QRCode(elements.preview, {
|
|
text: text,
|
|
width: CONFIG.PREVIEW_SIZE,
|
|
height: CONFIG.PREVIEW_SIZE,
|
|
colorDark: '#000000',
|
|
colorLight: '#ffffff',
|
|
correctLevel: QRCode.CorrectLevel.M
|
|
});
|
|
} catch (error) {
|
|
console.error('二维码生成失败:', error);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 将二维码添加到画布
|
|
*/
|
|
function addToCanvas() {
|
|
if (!state.currentQR) {
|
|
alert('请输入内容');
|
|
return;
|
|
}
|
|
|
|
const canvas = elements.preview.querySelector('canvas');
|
|
if (!canvas) return;
|
|
|
|
const container = document.getElementById('imageContainer');
|
|
const rect = container.getBoundingClientRect();
|
|
|
|
const img = document.createElement('img');
|
|
img.src = canvas.toDataURL('image/png');
|
|
img.className = 'qr-item';
|
|
img.dataset.type = 'qrcode';
|
|
img.style.cssText = `
|
|
width: ${CONFIG.DEFAULT_SIZE}px;
|
|
height: ${CONFIG.DEFAULT_SIZE}px;
|
|
opacity: 1;
|
|
left: ${(rect.width / 2 - CONFIG.DEFAULT_SIZE / 2)}px;
|
|
top: ${(rect.height / 2 - CONFIG.DEFAULT_SIZE / 2)}px;
|
|
`;
|
|
|
|
container.appendChild(img);
|
|
makeDraggable(img);
|
|
selectQR(img);
|
|
closeModal();
|
|
|
|
saveState();
|
|
}
|
|
|
|
/**
|
|
* 选中二维码
|
|
*/
|
|
function selectQR(img) {
|
|
// 取消其他选中状态
|
|
document.querySelectorAll('.qr-item').forEach(el => {
|
|
el.classList.remove('qr-selected');
|
|
});
|
|
|
|
// 选中当前二维码
|
|
img.classList.add('qr-selected');
|
|
state.selectedQR = img;
|
|
|
|
// 显示二维码工具栏
|
|
showQRTools();
|
|
}
|
|
|
|
/**
|
|
* 显示二维码工具栏
|
|
*/
|
|
function showQRTools() {
|
|
if (!state.selectedQR) return;
|
|
|
|
// 激活编辑器工具栏
|
|
if (elements.editorToolbar) {
|
|
elements.editorToolbar.classList.add('active');
|
|
}
|
|
|
|
// 隐藏其他工具栏
|
|
['textTools', 'imageTools', 'bgTools'].forEach(key => {
|
|
if (elements[key]) elements[key].classList.remove('active');
|
|
});
|
|
|
|
// 显示二维码工具栏
|
|
if (elements.qrTools) {
|
|
elements.qrTools.classList.add('active');
|
|
}
|
|
|
|
// 同步滑块值
|
|
syncToolbarValues();
|
|
}
|
|
|
|
/**
|
|
* 同步工具栏滑块值
|
|
*/
|
|
function syncToolbarValues() {
|
|
if (!state.selectedQR) return;
|
|
|
|
const opacity = parseFloat(state.selectedQR.style.opacity) || 1;
|
|
const size = parseInt(state.selectedQR.style.width) || CONFIG.DEFAULT_SIZE;
|
|
|
|
if (elements.qrOpacitySlider) {
|
|
elements.qrOpacitySlider.value = Math.round(opacity * 100);
|
|
elements.qrOpacityValue.textContent = Math.round(opacity * 100) + '%';
|
|
}
|
|
|
|
if (elements.qrScaleSlider) {
|
|
elements.qrScaleSlider.value = size;
|
|
elements.qrScaleValue.textContent = size + '%';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 隐藏二维码工具栏
|
|
*/
|
|
function hideQRTools() {
|
|
if (elements.qrTools) {
|
|
elements.qrTools.classList.remove('active');
|
|
}
|
|
|
|
document.querySelectorAll('.qr-item').forEach(el => {
|
|
el.classList.remove('qr-selected');
|
|
});
|
|
|
|
state.selectedQR = null;
|
|
}
|
|
|
|
/**
|
|
* 更新二维码透明度
|
|
*/
|
|
function updateOpacity(value) {
|
|
if (!state.selectedQR) return;
|
|
|
|
state.selectedQR.style.opacity = value / 100;
|
|
elements.qrOpacityValue.textContent = value + '%';
|
|
}
|
|
|
|
/**
|
|
* 更新二维码大小
|
|
*/
|
|
function updateScale(value) {
|
|
if (!state.selectedQR) return;
|
|
|
|
state.selectedQR.style.width = value + 'px';
|
|
state.selectedQR.style.height = value + 'px';
|
|
elements.qrScaleValue.textContent = value + '%';
|
|
}
|
|
|
|
/**
|
|
* 保存状态
|
|
*/
|
|
function saveState() {
|
|
if (typeof window.saveState === 'function') {
|
|
window.saveState();
|
|
}
|
|
}
|
|
|
|
// ========== 拖拽功能 ==========
|
|
|
|
/**
|
|
* 使元素可拖拽
|
|
*/
|
|
function makeDraggable(el) {
|
|
let isDragging = false;
|
|
let startX, startY, startLeft, startTop;
|
|
|
|
function startDrag(clientX, clientY) {
|
|
isDragging = true;
|
|
startX = clientX;
|
|
startY = clientY;
|
|
startLeft = parseInt(el.style.left) || 0;
|
|
startTop = parseInt(el.style.top) || 0;
|
|
el.style.cursor = 'grabbing';
|
|
}
|
|
|
|
function moveDrag(clientX, clientY) {
|
|
if (!isDragging) return;
|
|
el.style.left = (startLeft + clientX - startX) + 'px';
|
|
el.style.top = (startTop + clientY - startY) + 'px';
|
|
}
|
|
|
|
function endDrag() {
|
|
if (isDragging) {
|
|
isDragging = false;
|
|
el.style.cursor = 'move';
|
|
saveState();
|
|
}
|
|
}
|
|
|
|
// 鼠标事件
|
|
el.addEventListener('mousedown', (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
selectQR(el);
|
|
startDrag(e.clientX, e.clientY);
|
|
});
|
|
|
|
// 触摸事件
|
|
el.addEventListener('touchstart', (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
selectQR(el);
|
|
if (e.touches.length === 1) {
|
|
startDrag(e.touches[0].clientX, e.touches[0].clientY);
|
|
}
|
|
}, { passive: false });
|
|
|
|
// 全局移动事件
|
|
document.addEventListener('mousemove', (e) => moveDrag(e.clientX, e.clientY));
|
|
document.addEventListener('touchmove', (e) => {
|
|
if (isDragging && e.touches.length === 1) {
|
|
e.preventDefault();
|
|
moveDrag(e.touches[0].clientX, e.touches[0].clientY);
|
|
}
|
|
}, { passive: false });
|
|
|
|
// 全局结束事件
|
|
document.addEventListener('mouseup', endDrag);
|
|
document.addEventListener('touchend', endDrag);
|
|
}
|
|
|
|
// ========== 事件绑定 ==========
|
|
|
|
function bindEvents() {
|
|
// 弹窗事件
|
|
elements.btn.addEventListener('click', openModal);
|
|
elements.closeBtn.addEventListener('click', closeModal);
|
|
elements.cancelBtn.addEventListener('click', closeModal);
|
|
elements.okBtn.addEventListener('click', addToCanvas);
|
|
elements.modal.addEventListener('click', (e) => {
|
|
if (e.target === elements.modal) closeModal();
|
|
});
|
|
|
|
// 输入防抖
|
|
elements.input.addEventListener('input', () => {
|
|
clearTimeout(state.previewTimer);
|
|
state.previewTimer = setTimeout(generatePreview, CONFIG.DEBOUNCE_DELAY);
|
|
});
|
|
|
|
// 透明度滑块
|
|
if (elements.qrOpacitySlider) {
|
|
elements.qrOpacitySlider.addEventListener('input', (e) => {
|
|
updateOpacity(e.target.value);
|
|
});
|
|
elements.qrOpacitySlider.addEventListener('change', saveState);
|
|
}
|
|
|
|
// 缩放滑块
|
|
if (elements.qrScaleSlider) {
|
|
elements.qrScaleSlider.addEventListener('input', (e) => {
|
|
updateScale(e.target.value);
|
|
});
|
|
elements.qrScaleSlider.addEventListener('change', saveState);
|
|
}
|
|
}
|
|
|
|
// ========== 初始化 ==========
|
|
|
|
function init() {
|
|
// 监听背景图变化
|
|
const container = document.getElementById('imageContainer');
|
|
if (container) {
|
|
const observer = new MutationObserver(checkBackground);
|
|
observer.observe(container, { childList: true, subtree: true });
|
|
}
|
|
|
|
// 定期检查背景图状态
|
|
setInterval(checkBackground, 500);
|
|
|
|
// 绑定事件
|
|
bindEvents();
|
|
|
|
// 初始检查
|
|
checkBackground();
|
|
|
|
// 暴露全局 API
|
|
window.QRCodeAPI = {
|
|
hideTools: hideQRTools,
|
|
getSelected: () => state.selectedQR
|
|
};
|
|
}
|
|
|
|
// 启动
|
|
init();
|
|
})();
|