1935
This commit is contained in:
Vaica committed
1 parent
3a8db8fb12
commit
adce55986d
2 files changed
+390
-352
No files matched your search
@@ -271,7 +271,9 @@ window.initArtalk = function() {
|
||||
// 能够通过 type/id/name/placeholder/class/aria-label 准确匹配
|
||||
var enhanceEditorInputs = function() {
|
||||
var editor = document.querySelector('.atk-editor');
|
||||
if (!editor) return;
|
||||
if (!editor) return 0;
|
||||
|
||||
var enhanced = 0;
|
||||
|
||||
// 昵称输入框
|
||||
var nickInput = editor.querySelector('input[name="nick"]');
|
||||
@@ -280,6 +282,7 @@ window.initArtalk = function() {
|
||||
nickInput.setAttribute('aria-label', '昵称 author nick name');
|
||||
nickInput.classList.add('comment-author', 'user-nick');
|
||||
nickInput.setAttribute('data-autofill-done', '1');
|
||||
enhanced++;
|
||||
}
|
||||
|
||||
// 邮箱输入框
|
||||
@@ -289,6 +292,7 @@ window.initArtalk = function() {
|
||||
emailInput.setAttribute('aria-label', '邮箱 email mail');
|
||||
emailInput.classList.add('comment-email', 'user-email');
|
||||
emailInput.setAttribute('data-autofill-done', '1');
|
||||
enhanced++;
|
||||
}
|
||||
|
||||
// 网址输入框
|
||||
@@ -298,6 +302,7 @@ window.initArtalk = function() {
|
||||
linkInput.setAttribute('aria-label', '网址 website url link homepage site web');
|
||||
linkInput.classList.add('comment-url', 'user-link', 'user-website');
|
||||
linkInput.setAttribute('data-autofill-done', '1');
|
||||
enhanced++;
|
||||
}
|
||||
|
||||
// 内容输入框（避免被误识别为昵称）
|
||||
@@ -306,25 +311,168 @@ window.initArtalk = function() {
|
||||
contentInput.setAttribute('autocomplete', 'off');
|
||||
contentInput.setAttribute('aria-label', '评论内容 content comment');
|
||||
contentInput.setAttribute('data-autofill-done', '1');
|
||||
enhanced++;
|
||||
}
|
||||
|
||||
// 触发油猴脚本自动填充（延迟到评论框稳定后）
|
||||
if (enhanced > 0) {
|
||||
triggerAutoFill(editor);
|
||||
}
|
||||
|
||||
return enhanced;
|
||||
};
|
||||
|
||||
// ── 触发油猴脚本自动填充 ──
|
||||
// 问题：油猴脚本可能在评论框还没完全加载时就填充了，
|
||||
// 导致填充的数据在 Artalk 重新渲染后丢失。
|
||||
// 解决：使用 MutationObserver 监控评论框 DOM 变化，
|
||||
// 在评论框稳定后（300ms 内没有变化）才触发填充。
|
||||
var pendingFillTimer = null;
|
||||
var fillDebounceDelay = 300; // 评论框稳定后 300ms 才触发填充
|
||||
|
||||
var triggerAutoFill = function(editor) {
|
||||
if (pendingFillTimer) {
|
||||
clearTimeout(pendingFillTimer);
|
||||
}
|
||||
|
||||
// 延迟触发，等待评论框稳定
|
||||
pendingFillTimer = setTimeout(function() {
|
||||
pendingFillTimer = null;
|
||||
|
||||
// 再次检查评论框是否存在
|
||||
editor = document.querySelector('.atk-editor');
|
||||
if (!editor) return;
|
||||
|
||||
// 获取评论框中的输入框
|
||||
var nickInput = editor.querySelector('input[name="nick"]');
|
||||
var emailInput = editor.querySelector('input[name="email"]');
|
||||
var linkInput = editor.querySelector('input[name="link"]');
|
||||
|
||||
// 保存当前输入框的值到 sessionStorage
|
||||
var fillData = {
|
||||
nick: nickInput ? nickInput.value : '',
|
||||
email: emailInput ? emailInput.value : '',
|
||||
link: linkInput ? linkInput.value : '',
|
||||
timestamp: Date.now()
|
||||
};
|
||||
|
||||
// 如果有填充数据，保存到 sessionStorage
|
||||
if (fillData.nick || fillData.email || fillData.link) {
|
||||
try {
|
||||
sessionStorage.setItem('artalk_autofill_data', JSON.stringify(fillData));
|
||||
console.log('[ArtalkEnhancer] 保存填充数据到 sessionStorage:', fillData);
|
||||
} catch(e) {}
|
||||
}
|
||||
|
||||
// 手动触发 input 事件，通知可能存在的自动填充脚本
|
||||
// 一些油猴脚本会监听 input/change 事件来检测新字段
|
||||
[nickInput, emailInput, linkInput].forEach(function(input) {
|
||||
if (input && input.value) {
|
||||
input.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
}
|
||||
});
|
||||
|
||||
// 尝试调用油猴脚本的公开 API（如果有）
|
||||
// 例如 Greasemonkey/Tampermonkey 的 GM_setValue 配合 GM_getValue
|
||||
if (typeof window.GM !== 'undefined' && window.GM.setValue) {
|
||||
// 通知油猴脚本评论框已加载完成
|
||||
window.GM_setValue('artalk_editor_ready', true);
|
||||
}
|
||||
|
||||
console.log('[ArtalkEnhancer] 评论框稳定，触发自动填充');
|
||||
}, fillDebounceDelay);
|
||||
};
|
||||
|
||||
// ── 恢复 sessionStorage 中的填充数据 ──
|
||||
// 问题：Artalk 评论框可能在填充后又重新渲染，导致填充的数据丢失。
|
||||
// 解决：在评论框稳定后，检查 sessionStorage 是否有之前保存的填充数据，
|
||||
// 如果有，自动恢复到输入框中。
|
||||
var restoreAutoFillData = function() {
|
||||
var editor = document.querySelector('.atk-editor');
|
||||
if (!editor) return;
|
||||
|
||||
try {
|
||||
var stored = sessionStorage.getItem('artalk_autofill_data');
|
||||
if (!stored) return;
|
||||
|
||||
var fillData = JSON.parse(stored);
|
||||
if (!fillData || !fillData.timestamp) return;
|
||||
|
||||
// 数据是否在 24 小时内有效
|
||||
var maxAge = 24 * 60 * 60 * 1000; // 24 小时
|
||||
if (Date.now() - fillData.timestamp > maxAge) {
|
||||
sessionStorage.removeItem('artalk_autofill_data');
|
||||
return;
|
||||
}
|
||||
|
||||
// 恢复到输入框
|
||||
var nickInput = editor.querySelector('input[name="nick"]');
|
||||
var emailInput = editor.querySelector('input[name="email"]');
|
||||
var linkInput = editor.querySelector('input[name="link"]');
|
||||
|
||||
if (fillData.nick && nickInput && !nickInput.value) {
|
||||
nickInput.value = fillData.nick;
|
||||
nickInput.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
}
|
||||
if (fillData.email && emailInput && !emailInput.value) {
|
||||
emailInput.value = fillData.email;
|
||||
emailInput.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
}
|
||||
if (fillData.link && linkInput && !linkInput.value) {
|
||||
linkInput.value = fillData.link;
|
||||
linkInput.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
}
|
||||
|
||||
if (fillData.nick || fillData.email || fillData.link) {
|
||||
console.log('[ArtalkEnhancer] 从 sessionStorage 恢复填充数据:', fillData);
|
||||
}
|
||||
} catch(e) {
|
||||
console.warn('[ArtalkEnhancer] 恢复填充数据失败:', e);
|
||||
}
|
||||
};
|
||||
|
||||
// 立即执行一次
|
||||
enhanceEditorInputs();
|
||||
|
||||
// 监听评论框加载完成
|
||||
// 评论框加载完成（Artalk 内置事件）
|
||||
artalk.on('mounted', function() {
|
||||
setTimeout(enhanceEditorInputs, 100);
|
||||
setTimeout(function() {
|
||||
enhanceEditorInputs();
|
||||
restoreAutoFillData();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// 监听评论列表加载（PJAX 切换后）
|
||||
// 评论列表加载完成（PJAX 切换后）
|
||||
artalk.on('list-loaded', function() {
|
||||
setTimeout(enhanceEditorInputs, 200);
|
||||
setTimeout(function() {
|
||||
enhanceEditorInputs();
|
||||
restoreAutoFillData();
|
||||
}, 200);
|
||||
});
|
||||
|
||||
// 评论发送成功后保存填充数据
|
||||
artalk.on('comment-submit', function() {
|
||||
try {
|
||||
var editor = document.querySelector('.atk-editor');
|
||||
if (editor) {
|
||||
var fillData = {
|
||||
nick: editor.querySelector('input[name="nick"]') ? editor.querySelector('input[name="nick"]').value : '',
|
||||
email: editor.querySelector('input[name="email"]') ? editor.querySelector('input[name="email"]').value : '',
|
||||
link: editor.querySelector('input[name="link"]') ? editor.querySelector('input[name="link"]').value : '',
|
||||
timestamp: Date.now()
|
||||
};
|
||||
if (fillData.nick || fillData.email || fillData.link) {
|
||||
sessionStorage.setItem('artalk_autofill_data', JSON.stringify(fillData));
|
||||
console.log('[ArtalkEnhancer] 评论提交后保存填充数据');
|
||||
}
|
||||
}
|
||||
} catch(e) {}
|
||||
});
|
||||
|
||||
// 兜底：定时检查（防止某些情况下事件未触发）
|
||||
var enhanceInterval = setInterval(function() {
|
||||
enhanceEditorInputs();
|
||||
restoreAutoFillData();
|
||||
// 找到所有字段都已增强后停止
|
||||
var editor = document.querySelector('.atk-editor');
|
||||
if (editor) {
|
||||
|
||||
Reference in new issue
Block a user