mirror of
https://github.com/YuzuZensai/Crowdin-Localization-Tools.git
synced 2026-01-06 04:33:03 +00:00
2456 lines
77 KiB
JavaScript
2456 lines
77 KiB
JavaScript
// ==UserScript==
|
||
// @name Crowdin Localization Tools
|
||
// @namespace https://yuzu.kirameki.cafe/
|
||
// @version 1.2.0
|
||
// @description A tool for translating Crowdin projects using a CSV file
|
||
// @author Yuzu (YuzuZensai)
|
||
// @match https://crowdin.com/editor/*
|
||
// @grant GM_addStyle
|
||
// @grant GM_xmlhttpRequest
|
||
// @updateURL https://raw.githubusercontent.com/YuzuZensai/Crowdin-Localization-Tools/refs/heads/main/script.user.js
|
||
// @downloadURL https://raw.githubusercontent.com/YuzuZensai/Crowdin-Localization-Tools/refs/heads/main/script.user.js
|
||
// @connect github.com
|
||
// @connect raw.githubusercontent.com
|
||
// ==/UserScript==
|
||
|
||
// Global configuration
|
||
const CONFIG = {
|
||
defaultVisible: true,
|
||
defaultPosition: { right: "20px", bottom: "20px" },
|
||
windowDimensions: {
|
||
width: "600px",
|
||
height: "600px",
|
||
},
|
||
|
||
debug: true,
|
||
|
||
// Update check
|
||
updateCheckUrl:
|
||
"https://raw.githubusercontent.com/YuzuZensai/Crowdin-Localization-Tools/main/data/version.json",
|
||
autoUpdateInterval: 15 * 60 * 1000, // 15 minutes
|
||
|
||
// Remote CSV
|
||
remoteCSVUrl:
|
||
"https://raw.githubusercontent.com/YuzuZensai/Crowdin-Localization-Tools/main/data/data.csv",
|
||
allowLocalOverride: true,
|
||
allowUrlOverride: true,
|
||
|
||
// Crowdin editor
|
||
textboxSelector: ".editor-panel__editor-container textarea",
|
||
stringNumberSelector: "#file_options > li:nth-child(4) > a:nth-child(1)",
|
||
editorSourceContainer: ".editor-current-translation-source",
|
||
sourceStringContainer: "#source_phrase_container",
|
||
|
||
autoSearchInterval: 1000,
|
||
|
||
// Search thresholds and scoring configuration
|
||
thresholds: {
|
||
fuzzy: 0.7, // Base fuzzy matching threshold
|
||
wordOverlap: 0.5, // Word overlap threshold for longer phrases
|
||
|
||
// Word normalization settings
|
||
normalization: {
|
||
stripChars: /[.,!?;:'")\]}/\\]/g, // Remove these characters when normalizing words
|
||
maxCharDiff: 2, // Maximum allowed character difference for similar words
|
||
minWordLength: 4, // Minimum word length to apply fuzzy matching
|
||
minVariationSimilarity: 0.75, // Minimum similarity for word variations
|
||
wordEndings: ["s", "es", "ed", "ing", "'s"], // Common word endings to normalize
|
||
},
|
||
|
||
// Base scores
|
||
scores: {
|
||
exactMatch: 1.0,
|
||
exactWordMatch: 0.9,
|
||
contextBaseScore: 0.6,
|
||
singularPluralMatch: 0.95,
|
||
singularPluralContext: 0.85,
|
||
partialMatchBase: 0.6,
|
||
wordVariationMatch: 0.85,
|
||
},
|
||
|
||
// Multipliers and penalties
|
||
multipliers: {
|
||
autoSearchThreshold: 0.95,
|
||
singleWordThreshold: 1.4,
|
||
baseThresholdIncrease: 1.1,
|
||
positionPenalty: 1.5,
|
||
lengthDiffPenalty: 0.2,
|
||
minLengthPenaltyScore: 0.3,
|
||
},
|
||
|
||
// Weights for different scoring components
|
||
weights: {
|
||
fuzzyMatchWeight: 0.2,
|
||
wordOverlapWeight: 0.8,
|
||
positionMatchWeight: 0.4,
|
||
positionOverlapWeight: 0.6,
|
||
},
|
||
|
||
// Cache limits
|
||
cacheLimits: {
|
||
similarity: 10000,
|
||
combinations: 1000,
|
||
},
|
||
},
|
||
|
||
metadata: {
|
||
version: "1.2.0",
|
||
repository: "https://github.com/YuzuZensai/Crowdin-Localization-Tools",
|
||
authorGithub: "https://github.com/YuzuZensai",
|
||
},
|
||
};
|
||
|
||
function log(type, message, data = null) {
|
||
if (!CONFIG.debug) return;
|
||
|
||
const timestamp = new Date().toLocaleTimeString();
|
||
const prefix = `[Crowdin Localization Tools][${timestamp}]`;
|
||
|
||
switch (type.toLowerCase()) {
|
||
case "info":
|
||
console.log(`${prefix} ℹ️ ${message}`, data || "");
|
||
break;
|
||
case "warn":
|
||
console.warn(`${prefix} ⚠️ ${message}`, data || "");
|
||
break;
|
||
case "error":
|
||
console.error(`${prefix} ❌ ${message}`, data || "");
|
||
break;
|
||
case "success":
|
||
console.log(`${prefix} ✅ ${message}`, data || "");
|
||
break;
|
||
case "debug":
|
||
console.debug(`${prefix} 🔍 ${message}`, data || "");
|
||
break;
|
||
}
|
||
}
|
||
|
||
function sanitizeHTML(str) {
|
||
if (typeof str !== "string") return "";
|
||
const div = document.createElement("div");
|
||
div.textContent = str;
|
||
return div.innerHTML;
|
||
}
|
||
|
||
// Just for good measure, remove any potential script tags, even if they're encoded
|
||
function validateCSVField(field) {
|
||
if (typeof field !== "string") {
|
||
return "";
|
||
}
|
||
|
||
field = field
|
||
.replace(/<\s*script[^>]*>.*?<\s*\/\s*script\s*>/gi, "")
|
||
.replace(/<\s*script[^&]*>.*?<\/\s*script\s*>/gi, "");
|
||
|
||
// Remove potential event handlers
|
||
field = field.replace(/\bon\w+\s*=\s*["']?[^"']*["']?/gi, "");
|
||
|
||
// Remove data URLs
|
||
field = field.replace(/data:[^,]*,/gi, "");
|
||
|
||
// Remove any HTML tags
|
||
field = field.replace(/<[^>]*>/g, "");
|
||
|
||
return field.trim();
|
||
}
|
||
|
||
function validateCSVEntry(entry) {
|
||
if (!entry || typeof entry !== "object") {
|
||
return null;
|
||
}
|
||
|
||
return {
|
||
source: validateCSVField(entry.source),
|
||
target: validateCSVField(entry.target),
|
||
note: validateCSVField(entry.note),
|
||
category: validateCSVField(entry.category),
|
||
};
|
||
}
|
||
|
||
function levenshteinDistance(a, b) {
|
||
const matrix = [];
|
||
|
||
for (let i = 0; i <= b.length; i++) {
|
||
matrix[i] = [i];
|
||
}
|
||
|
||
for (let j = 0; j <= a.length; j++) {
|
||
matrix[0][j] = j;
|
||
}
|
||
|
||
for (let i = 1; i <= b.length; i++) {
|
||
for (let j = 1; j <= a.length; j++) {
|
||
if (b.charAt(i - 1) === a.charAt(j - 1)) {
|
||
matrix[i][j] = matrix[i - 1][j - 1];
|
||
} else {
|
||
matrix[i][j] = Math.min(
|
||
matrix[i - 1][j - 1] + 1, // substitution
|
||
matrix[i][j - 1] + 1, // insertion
|
||
matrix[i - 1][j] + 1 // deletion
|
||
);
|
||
}
|
||
}
|
||
}
|
||
|
||
return matrix[b.length][a.length];
|
||
}
|
||
|
||
function similarity(s1, s2) {
|
||
if (s1.length === 0 || s2.length === 0) return 0;
|
||
const longerLength = Math.max(s1.length, s2.length);
|
||
return (longerLength - levenshteinDistance(s1, s2)) / longerLength;
|
||
}
|
||
|
||
function normalizeWord(word) {
|
||
// Remove specified characters
|
||
word = word
|
||
.toLowerCase()
|
||
.replace(CONFIG.thresholds.normalization.stripChars, "");
|
||
|
||
// Remove common word endings
|
||
for (const ending of CONFIG.thresholds.normalization.wordEndings) {
|
||
if (word.endsWith(ending)) {
|
||
word = word.slice(0, -ending.length);
|
||
break;
|
||
}
|
||
}
|
||
|
||
return word;
|
||
}
|
||
|
||
// Cache for word combinations and similarity scores
|
||
const combinationsCache = new Map();
|
||
const similarityCache = new Map();
|
||
|
||
function getCachedSimilarity(str1, str2) {
|
||
const key = `${str1}|${str2}`;
|
||
if (similarityCache.has(key)) {
|
||
return similarityCache.get(key);
|
||
}
|
||
const score = similarity(str1, str2);
|
||
similarityCache.set(key, score);
|
||
return score;
|
||
}
|
||
|
||
function areWordsSimilar(word1, word2) {
|
||
const norm1 = normalizeWord(word1);
|
||
const norm2 = normalizeWord(word2);
|
||
|
||
// If words are too short, require exact match
|
||
if (
|
||
norm1.length < CONFIG.thresholds.normalization.minWordLength ||
|
||
norm2.length < CONFIG.thresholds.normalization.minWordLength
|
||
) {
|
||
return norm1 === norm2;
|
||
}
|
||
|
||
// Check character difference
|
||
const charDiff = Math.abs(norm1.length - norm2.length);
|
||
if (charDiff > CONFIG.thresholds.normalization.maxCharDiff) {
|
||
return false;
|
||
}
|
||
|
||
// Calculate similarity
|
||
const similarity = getCachedSimilarity(norm1, norm2);
|
||
return similarity >= CONFIG.thresholds.normalization.minVariationSimilarity;
|
||
}
|
||
|
||
function TranslatorTool() {
|
||
var container;
|
||
var translationData = [];
|
||
var resultsDiv;
|
||
var searchInput;
|
||
var isDragging = false;
|
||
var dragOffsetX = 0;
|
||
var dragOffsetY = 0;
|
||
var toggleButton;
|
||
var visible = CONFIG.defaultVisible;
|
||
var lastSearchedText = "";
|
||
var autoSearchIntervalId = null;
|
||
var updateLink;
|
||
var currentCSVSource = null;
|
||
var categoryColors = new Map();
|
||
|
||
// Common words that shouldn't be matched individually or in pairs
|
||
const COMMON_WORDS = new Set([
|
||
"the",
|
||
"a",
|
||
"an",
|
||
"and",
|
||
"or",
|
||
"but",
|
||
"in",
|
||
"on",
|
||
"at",
|
||
"to",
|
||
"for",
|
||
"of",
|
||
"with",
|
||
"by",
|
||
"from",
|
||
"up",
|
||
"about",
|
||
"into",
|
||
"over",
|
||
"after",
|
||
"is",
|
||
"are",
|
||
"was",
|
||
"were",
|
||
"be",
|
||
"have",
|
||
"has",
|
||
"had",
|
||
"do",
|
||
"does",
|
||
"did",
|
||
"will",
|
||
"would",
|
||
"should",
|
||
"could",
|
||
"this",
|
||
"that",
|
||
"these",
|
||
"those",
|
||
"it",
|
||
"its",
|
||
"as",
|
||
]);
|
||
|
||
function isSignificantPhrase(phrase) {
|
||
const words = phrase.toLowerCase().split(/\s+/);
|
||
// If it's a single word, it should be longer than 3 chars and not common
|
||
if (words.length === 1) {
|
||
return words[0].length > 3 && !COMMON_WORDS.has(words[0]);
|
||
}
|
||
// For multi-word phrases, at least one word should be significant
|
||
return words.some((word) => word.length > 3 && !COMMON_WORDS.has(word));
|
||
}
|
||
|
||
function generateColorForCategory(category) {
|
||
if (!category) return null;
|
||
if (categoryColors.has(category)) {
|
||
return categoryColors.get(category);
|
||
}
|
||
|
||
const predefinedColors = {
|
||
UI: "#c6dbe1",
|
||
"Unity / 3D": "#3d3d3d",
|
||
"Trust Rank": "#e6cff2",
|
||
"Instance Type": "#d4edbc",
|
||
"Avatar Performance Rank": "#ffc8aa",
|
||
"VRChat Specific": "#bfe1f6",
|
||
Common: "#e6e6e6",
|
||
};
|
||
|
||
if (predefinedColors[category]) {
|
||
categoryColors.set(category, predefinedColors[category]);
|
||
return predefinedColors[category];
|
||
}
|
||
|
||
let hash = 0;
|
||
for (let i = 0; i < category.length; i++) {
|
||
hash = category.charCodeAt(i) + ((hash << 5) - hash);
|
||
}
|
||
|
||
const hue = Math.abs(hash % 360);
|
||
const color = `hsl(${hue}, 65%, 55%)`;
|
||
categoryColors.set(category, color);
|
||
return color;
|
||
}
|
||
|
||
function isColorBright(color) {
|
||
// Convert hex to RGB
|
||
let r, g, b;
|
||
if (color.startsWith("#")) {
|
||
const hex = color.replace("#", "");
|
||
r = parseInt(hex.substr(0, 2), 16);
|
||
g = parseInt(hex.substr(2, 2), 16);
|
||
b = parseInt(hex.substr(4, 2), 16);
|
||
} else if (color.startsWith("hsl")) {
|
||
// Convert HSL to RGB
|
||
const matches = color.match(/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/);
|
||
if (matches) {
|
||
const h = parseInt(matches[1]) / 360;
|
||
const s = parseInt(matches[2]) / 100;
|
||
const l = parseInt(matches[3]) / 100;
|
||
|
||
if (s === 0) {
|
||
r = g = b = l * 255;
|
||
} else {
|
||
const hue2rgb = (p, q, t) => {
|
||
if (t < 0) t += 1;
|
||
if (t > 1) t -= 1;
|
||
if (t < 1 / 6) return p + (q - p) * 6 * t;
|
||
if (t < 1 / 2) return q;
|
||
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
|
||
return p;
|
||
};
|
||
|
||
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
||
const p = 2 * l - q;
|
||
r = hue2rgb(p, q, h + 1 / 3) * 255;
|
||
g = hue2rgb(p, q, h) * 255;
|
||
b = hue2rgb(p, q, h - 1 / 3) * 255;
|
||
}
|
||
} else {
|
||
r = g = b = 128; // Fallback to gray if parsing fails
|
||
}
|
||
} else {
|
||
r = g = b = 128; // Fallback to gray
|
||
}
|
||
|
||
// Convert RGB values to 0-1 range
|
||
const rr = r / 255;
|
||
const gg = g / 255;
|
||
const bb = b / 255;
|
||
|
||
// Calculate relative luminance (WCAG 2.0)
|
||
const luminance =
|
||
0.2126 *
|
||
(rr <= 0.03928 ? rr / 12.92 : Math.pow((rr + 0.055) / 1.055, 2.4)) +
|
||
0.7152 *
|
||
(gg <= 0.03928 ? gg / 12.92 : Math.pow((gg + 0.055) / 1.055, 2.4)) +
|
||
0.0722 *
|
||
(bb <= 0.03928 ? bb / 12.92 : Math.pow((bb + 0.055) / 1.055, 2.4));
|
||
|
||
// Calculate YIQ
|
||
const yiq = (r * 299 + g * 587 + b * 114) / 1000;
|
||
|
||
// Combine both methods
|
||
// For pastel colors (high luminance but moderate YIQ)
|
||
if (luminance > 0.7) {
|
||
return true; // Definitely bright
|
||
} else if (luminance > 0.5 && yiq > 128) {
|
||
return true; // Moderately bright and good YIQ
|
||
}
|
||
return false;
|
||
}
|
||
|
||
function createCategoryChip(category) {
|
||
if (!category) return "";
|
||
|
||
const color = generateColorForCategory(category);
|
||
const textColor = isColorBright(color) ? "#000000" : "#ffffff";
|
||
return `<span style="
|
||
display: inline-block;
|
||
padding: 2px 8px;
|
||
margin: 2px;
|
||
border-radius: 12px;
|
||
font-size: 11px;
|
||
background-color: ${color};
|
||
color: ${textColor};
|
||
white-space: nowrap;
|
||
">${category}</span>`;
|
||
}
|
||
|
||
function init() {
|
||
log("info", "Initializing translator tool");
|
||
createUI();
|
||
createToggleButton();
|
||
setupEventListeners();
|
||
setupExternalTextboxListener();
|
||
setupCrowdinEditorListener();
|
||
|
||
const sourceToggle = document.querySelector("#source-toggle");
|
||
if (!sourceToggle || !sourceToggle.checked) {
|
||
fetchRemoteCSV(CONFIG.remoteCSVUrl);
|
||
}
|
||
|
||
setInterval(() => {
|
||
log("info", "Running automatic update check");
|
||
checkForUpdates();
|
||
}, CONFIG.autoUpdateInterval);
|
||
|
||
setTimeout(() => {
|
||
checkForEditorContent(true);
|
||
}, 2000);
|
||
|
||
log(
|
||
"success",
|
||
"Crowdin Localization Tools version " +
|
||
CONFIG.metadata.version +
|
||
" by " +
|
||
CONFIG.metadata.authorGithub +
|
||
" initialized successfully"
|
||
);
|
||
}
|
||
|
||
function createUI() {
|
||
log("info", "Creating UI elements");
|
||
|
||
// Container
|
||
container = document.createElement("div");
|
||
container.id = "translator-tool";
|
||
container.style.position = "fixed";
|
||
container.style.bottom = CONFIG.defaultPosition.bottom;
|
||
container.style.right = CONFIG.defaultPosition.right;
|
||
container.style.width = CONFIG.windowDimensions.width;
|
||
container.style.height = CONFIG.windowDimensions.height;
|
||
container.style.backgroundColor = "#fff";
|
||
container.style.border = "1px solid #e0e0e0";
|
||
container.style.borderRadius = "8px";
|
||
container.style.boxShadow = "0 4px 12px rgba(0,0,0,0.15)";
|
||
container.style.zIndex = "9999";
|
||
container.style.display = CONFIG.defaultVisible ? "flex" : "none";
|
||
container.style.flexDirection = "column";
|
||
container.style.fontFamily =
|
||
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
|
||
container.style.minWidth = "400px";
|
||
container.style.minHeight = "300px";
|
||
|
||
// Resize handles
|
||
const handles = ["n", "e", "s", "w", "ne", "nw", "se", "sw"];
|
||
handles.forEach((dir) => {
|
||
const handle = document.createElement("div");
|
||
handle.className = `resize-handle resize-${dir}`;
|
||
handle.style.position = "absolute";
|
||
handle.style.zIndex = "10000";
|
||
|
||
switch (dir) {
|
||
case "n":
|
||
case "s":
|
||
handle.style.left = "0";
|
||
handle.style.right = "0";
|
||
handle.style.height = "6px";
|
||
handle.style.cursor = "ns-resize";
|
||
break;
|
||
case "e":
|
||
case "w":
|
||
handle.style.top = "0";
|
||
handle.style.bottom = "0";
|
||
handle.style.width = "6px";
|
||
handle.style.cursor = "ew-resize";
|
||
break;
|
||
case "ne":
|
||
case "nw":
|
||
case "se":
|
||
case "sw":
|
||
handle.style.width = "10px";
|
||
handle.style.height = "10px";
|
||
handle.style.cursor = `${dir}-resize`;
|
||
break;
|
||
}
|
||
|
||
// Position handles
|
||
if (dir.includes("n")) handle.style.top = "-3px";
|
||
if (dir.includes("s")) handle.style.bottom = "-3px";
|
||
if (dir.includes("e")) handle.style.right = "-3px";
|
||
if (dir.includes("w")) handle.style.left = "-3px";
|
||
|
||
container.appendChild(handle);
|
||
});
|
||
|
||
// Header
|
||
var header = document.createElement("div");
|
||
header.style.padding = "12px 16px";
|
||
header.style.backgroundColor = "#f8f9fa";
|
||
header.style.borderBottom = "1px solid #e0e0e0";
|
||
header.style.display = "flex";
|
||
header.style.justifyContent = "space-between";
|
||
header.style.alignItems = "center";
|
||
header.style.cursor = "move";
|
||
|
||
var title = document.createElement("h3");
|
||
title.textContent = "Crowdin Localization Tools";
|
||
title.style.margin = "0";
|
||
title.style.fontSize = "16px";
|
||
title.style.fontWeight = "600";
|
||
title.style.color = "#1a73e8";
|
||
|
||
var closeButton = document.createElement("button");
|
||
closeButton.textContent = "×";
|
||
closeButton.style.border = "none";
|
||
closeButton.style.background = "none";
|
||
closeButton.style.cursor = "pointer";
|
||
closeButton.style.fontSize = "24px";
|
||
closeButton.style.color = "#666";
|
||
closeButton.style.padding = "0 4px";
|
||
closeButton.style.lineHeight = "1";
|
||
closeButton.addEventListener("click", function () {
|
||
log("info", "Close button clicked");
|
||
toggleVisibility();
|
||
});
|
||
|
||
header.appendChild(title);
|
||
header.appendChild(closeButton);
|
||
container.appendChild(header);
|
||
|
||
// Tab menu
|
||
var tabMenu = document.createElement("div");
|
||
tabMenu.style.padding = "0 16px";
|
||
tabMenu.style.backgroundColor = "#f8f9fa";
|
||
tabMenu.style.borderBottom = "1px solid #e0e0e0";
|
||
tabMenu.style.display = "flex";
|
||
tabMenu.style.gap = "16px";
|
||
|
||
var mainTab = createTab("Translator", true);
|
||
var settingsTab = createTab("Settings", false);
|
||
|
||
tabMenu.appendChild(mainTab);
|
||
tabMenu.appendChild(settingsTab);
|
||
container.appendChild(tabMenu);
|
||
|
||
// Content containers
|
||
var mainContent = createMainContent();
|
||
var settingsContent = createSettingsContent();
|
||
|
||
container.appendChild(mainContent);
|
||
container.appendChild(settingsContent);
|
||
|
||
// Footer
|
||
var footer = createFooter();
|
||
container.appendChild(footer);
|
||
|
||
// Inject
|
||
try {
|
||
document.body.appendChild(container);
|
||
log("success", "Main container added to document body");
|
||
} catch (error) {
|
||
log("error", "Error appending container to body:", error);
|
||
}
|
||
|
||
setupDraggable(header);
|
||
setupResizable();
|
||
|
||
log("success", "UI elements created successfully");
|
||
}
|
||
|
||
function setupResizable() {
|
||
let isResizing = false;
|
||
let currentHandle = null;
|
||
let startX, startY, startWidth, startHeight, startLeft, startTop;
|
||
|
||
const handles = container.querySelectorAll(".resize-handle");
|
||
|
||
handles.forEach((handle) => {
|
||
handle.addEventListener("mousedown", (e) => {
|
||
isResizing = true;
|
||
currentHandle = handle;
|
||
startX = e.clientX;
|
||
startY = e.clientY;
|
||
|
||
const rect = container.getBoundingClientRect();
|
||
startWidth = rect.width;
|
||
startHeight = rect.height;
|
||
startLeft = rect.left;
|
||
startTop = rect.top;
|
||
|
||
document.addEventListener("mousemove", handleMouseMove);
|
||
document.addEventListener("mouseup", stopResize);
|
||
e.preventDefault();
|
||
log("info", "Started resizing window");
|
||
});
|
||
});
|
||
|
||
function handleMouseMove(e) {
|
||
if (!isResizing) return;
|
||
|
||
const dx = e.clientX - startX;
|
||
const dy = e.clientY - startY;
|
||
const rect = container.getBoundingClientRect();
|
||
|
||
// Enforce minimum dimensions
|
||
const minWidth = 400;
|
||
const minHeight = 300;
|
||
|
||
if (currentHandle.className.includes("e")) {
|
||
const newWidth = Math.max(startWidth + dx, minWidth);
|
||
container.style.width = `${newWidth}px`;
|
||
}
|
||
if (currentHandle.className.includes("s")) {
|
||
const newHeight = Math.max(startHeight + dy, minHeight);
|
||
container.style.height = `${newHeight}px`;
|
||
}
|
||
if (currentHandle.className.includes("w")) {
|
||
const newWidth = Math.max(startWidth - dx, minWidth);
|
||
if (newWidth !== rect.width) {
|
||
container.style.width = `${newWidth}px`;
|
||
container.style.left = `${startLeft + startWidth - newWidth}px`;
|
||
}
|
||
}
|
||
if (currentHandle.className.includes("n")) {
|
||
const newHeight = Math.max(startHeight - dy, minHeight);
|
||
if (newHeight !== rect.height) {
|
||
container.style.height = `${newHeight}px`;
|
||
container.style.top = `${startTop + startHeight - newHeight}px`;
|
||
}
|
||
}
|
||
}
|
||
|
||
function stopResize() {
|
||
if (isResizing) {
|
||
isResizing = false;
|
||
document.removeEventListener("mousemove", handleMouseMove);
|
||
document.removeEventListener("mouseup", stopResize);
|
||
log("info", "Stopped resizing window");
|
||
}
|
||
}
|
||
}
|
||
|
||
GM_addStyle(`
|
||
.resize-handle {
|
||
background: transparent;
|
||
position: absolute;
|
||
transition: background-color 0.2s;
|
||
}
|
||
.resize-handle:hover {
|
||
background-color: rgba(26, 115, 232, 0.2);
|
||
}
|
||
`);
|
||
|
||
function createTab(text, isActive) {
|
||
var tab = document.createElement("button");
|
||
tab.textContent = text;
|
||
tab.style.padding = "12px 16px";
|
||
tab.style.border = "none";
|
||
tab.style.background = "none";
|
||
tab.style.borderBottom = isActive
|
||
? "2px solid #1a73e8"
|
||
: "2px solid transparent";
|
||
tab.style.color = isActive ? "#1a73e8" : "#666";
|
||
tab.style.cursor = "pointer";
|
||
tab.style.fontSize = "14px";
|
||
tab.style.fontWeight = "500";
|
||
tab.style.transition = "all 0.2s ease";
|
||
|
||
tab.addEventListener("click", function () {
|
||
switchTab(text.toLowerCase());
|
||
});
|
||
|
||
return tab;
|
||
}
|
||
|
||
function createMainContent() {
|
||
var content = document.createElement("div");
|
||
content.id = "translator-main-content";
|
||
content.style.display = "flex";
|
||
content.style.flexDirection = "column";
|
||
content.style.flexGrow = "1";
|
||
content.style.padding = "16px";
|
||
content.style.height = "100%";
|
||
content.style.boxSizing = "border-box";
|
||
content.style.minHeight = "0";
|
||
|
||
// Search container
|
||
var searchContainer = document.createElement("div");
|
||
searchContainer.style.position = "relative";
|
||
searchContainer.style.marginBottom = "16px";
|
||
searchContainer.style.flexShrink = "0";
|
||
|
||
// Current string label
|
||
var currentStringLabel = document.createElement("div");
|
||
currentStringLabel.style.fontSize = "12px";
|
||
currentStringLabel.style.color = "#666";
|
||
currentStringLabel.style.marginBottom = "4px";
|
||
currentStringLabel.style.padding = "4px";
|
||
currentStringLabel.style.backgroundColor = "#f8f9fa";
|
||
currentStringLabel.style.borderRadius = "4px";
|
||
currentStringLabel.style.whiteSpace = "nowrap";
|
||
currentStringLabel.style.overflow = "hidden";
|
||
currentStringLabel.style.textOverflow = "ellipsis";
|
||
currentStringLabel.textContent = "Current string: ";
|
||
currentStringLabel.id = "current-string-label";
|
||
searchContainer.appendChild(currentStringLabel);
|
||
|
||
// Search input
|
||
searchInput = document.createElement("input");
|
||
searchInput.type = "text";
|
||
searchInput.placeholder = "Search translations...";
|
||
searchInput.style.width = "100%";
|
||
searchInput.style.padding = "10px 12px";
|
||
searchInput.style.border = "2px solid #e0e0e0";
|
||
searchInput.style.borderRadius = "6px";
|
||
searchInput.style.fontSize = "14px";
|
||
searchInput.style.boxSizing = "border-box";
|
||
searchInput.style.transition = "all 0.2s ease";
|
||
searchInput.style.backgroundColor = "#f8f9fa";
|
||
searchInput.style.outline = "none";
|
||
|
||
searchInput.addEventListener("mouseover", function () {
|
||
if (document.activeElement !== this) {
|
||
this.style.borderColor = "#ccc";
|
||
}
|
||
});
|
||
searchInput.addEventListener("mouseout", function () {
|
||
if (document.activeElement !== this) {
|
||
this.style.borderColor = "#e0e0e0";
|
||
}
|
||
});
|
||
searchInput.addEventListener("focus", function () {
|
||
this.style.borderColor = "#1a73e8";
|
||
this.style.backgroundColor = "#fff";
|
||
});
|
||
searchInput.addEventListener("blur", function () {
|
||
this.style.borderColor = "#e0e0e0";
|
||
this.style.backgroundColor = "#f8f9fa";
|
||
});
|
||
|
||
searchContainer.appendChild(searchInput);
|
||
content.appendChild(searchContainer);
|
||
|
||
resultsDiv = document.createElement("div");
|
||
resultsDiv.style.display = "flex";
|
||
resultsDiv.style.flexDirection = "column";
|
||
resultsDiv.style.flexGrow = "1";
|
||
resultsDiv.style.minHeight = "0";
|
||
resultsDiv.style.padding = "8px";
|
||
resultsDiv.style.backgroundColor = "#fff";
|
||
resultsDiv.style.borderRadius = "4px";
|
||
resultsDiv.style.overflow = "hidden";
|
||
|
||
content.appendChild(resultsDiv);
|
||
|
||
return content;
|
||
}
|
||
|
||
function createSettingsContent() {
|
||
var content = document.createElement("div");
|
||
content.id = "translator-settings-content";
|
||
content.style.display = "none";
|
||
content.style.flexDirection = "column";
|
||
content.style.flexGrow = "1";
|
||
content.style.padding = "16px";
|
||
content.style.gap = "16px";
|
||
|
||
// CSV Source Settings
|
||
var csvSourceSection = document.createElement("div");
|
||
csvSourceSection.style.marginBottom = "20px";
|
||
|
||
var csvSourceTitle = document.createElement("h4");
|
||
csvSourceTitle.textContent = "CSV Source Settings";
|
||
csvSourceTitle.style.margin = "0 0 12px 0";
|
||
csvSourceTitle.style.color = "#333";
|
||
|
||
// Source Type Toggle
|
||
var sourceToggleContainer = document.createElement("div");
|
||
sourceToggleContainer.style.display = "flex";
|
||
sourceToggleContainer.style.alignItems = "center";
|
||
sourceToggleContainer.style.marginBottom = "16px";
|
||
sourceToggleContainer.style.gap = "8px";
|
||
|
||
var sourceToggle = document.createElement("input");
|
||
sourceToggle.type = "checkbox";
|
||
sourceToggle.id = "source-toggle";
|
||
sourceToggle.style.margin = "0";
|
||
sourceToggle.checked = false;
|
||
|
||
var sourceToggleLabel = document.createElement("label");
|
||
sourceToggleLabel.htmlFor = "source-toggle";
|
||
sourceToggleLabel.textContent = "Use Local File";
|
||
sourceToggleLabel.style.fontSize = "14px";
|
||
sourceToggleLabel.style.color = "#666";
|
||
sourceToggleLabel.style.userSelect = "none";
|
||
sourceToggleLabel.style.cursor = "pointer";
|
||
|
||
sourceToggleContainer.appendChild(sourceToggle);
|
||
sourceToggleContainer.appendChild(sourceToggleLabel);
|
||
|
||
// Remote URL Input Container
|
||
var urlContainer = document.createElement("div");
|
||
urlContainer.style.marginBottom = "16px";
|
||
|
||
var urlLabel = document.createElement("label");
|
||
urlLabel.textContent = "Remote CSV URL";
|
||
urlLabel.style.display = "block";
|
||
urlLabel.style.marginBottom = "8px";
|
||
urlLabel.style.fontSize = "14px";
|
||
urlLabel.style.color = "#666";
|
||
|
||
var remoteUrlInput = document.createElement("input");
|
||
remoteUrlInput.type = "text";
|
||
remoteUrlInput.value = CONFIG.remoteCSVUrl;
|
||
remoteUrlInput.placeholder = "Enter remote CSV URL";
|
||
remoteUrlInput.style.width = "100%";
|
||
remoteUrlInput.style.padding = "8px 12px";
|
||
remoteUrlInput.style.border = "1px solid #e0e0e0";
|
||
remoteUrlInput.style.borderRadius = "4px";
|
||
remoteUrlInput.style.boxSizing = "border-box";
|
||
remoteUrlInput.style.fontSize = "14px";
|
||
|
||
urlContainer.appendChild(urlLabel);
|
||
urlContainer.appendChild(remoteUrlInput);
|
||
|
||
// Local File Input Container
|
||
var fileContainer = document.createElement("div");
|
||
fileContainer.style.marginBottom = "16px";
|
||
fileContainer.style.display = "none";
|
||
|
||
var fileLabel = document.createElement("label");
|
||
fileLabel.textContent = "Local CSV File";
|
||
fileLabel.style.display = "block";
|
||
fileLabel.style.marginBottom = "8px";
|
||
fileLabel.style.fontSize = "14px";
|
||
fileLabel.style.color = "#666";
|
||
|
||
var localFileInput = document.createElement("input");
|
||
localFileInput.type = "file";
|
||
localFileInput.accept = ".csv";
|
||
localFileInput.style.width = "100%";
|
||
localFileInput.style.fontSize = "14px";
|
||
|
||
localFileInput.addEventListener("change", function () {
|
||
if (this.files.length > 0) {
|
||
readCSVFile(this.files[0]);
|
||
}
|
||
});
|
||
|
||
fileContainer.appendChild(fileLabel);
|
||
fileContainer.appendChild(localFileInput);
|
||
|
||
sourceToggle.addEventListener("change", function () {
|
||
urlContainer.style.display = this.checked ? "none" : "block";
|
||
fileContainer.style.display = this.checked ? "block" : "none";
|
||
|
||
if (this.checked) {
|
||
remoteUrlInput.value = "";
|
||
} else {
|
||
localFileInput.value = "";
|
||
}
|
||
});
|
||
|
||
// Global style for refresh button
|
||
GM_addStyle(`
|
||
.csv-translator-refresh-btn {
|
||
padding: 8px 16px;
|
||
background-color: #1a73e8;
|
||
color: #ffffff !important;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
width: fit-content;
|
||
transition: all 0.2s ease;
|
||
}
|
||
.csv-translator-refresh-btn:hover {
|
||
background-color: #1557b0;
|
||
color: #ffffff !important;
|
||
}
|
||
`);
|
||
|
||
// Refresh Button
|
||
var refreshButton = document.createElement("button");
|
||
refreshButton.textContent = "Refresh Data";
|
||
refreshButton.className = "csv-translator-refresh-btn";
|
||
|
||
refreshButton.addEventListener("click", function () {
|
||
refreshTranslationData();
|
||
});
|
||
|
||
csvSourceSection.appendChild(csvSourceTitle);
|
||
csvSourceSection.appendChild(sourceToggleContainer);
|
||
csvSourceSection.appendChild(urlContainer);
|
||
csvSourceSection.appendChild(fileContainer);
|
||
csvSourceSection.appendChild(refreshButton);
|
||
|
||
content.appendChild(csvSourceSection);
|
||
|
||
return content;
|
||
}
|
||
|
||
function createFooter() {
|
||
var footer = document.createElement("div");
|
||
footer.style.padding = "12px 16px";
|
||
footer.style.borderTop = "1px solid #e0e0e0";
|
||
footer.style.backgroundColor = "#f8f9fa";
|
||
footer.style.fontSize = "12px";
|
||
footer.style.color = "#666";
|
||
footer.style.display = "flex";
|
||
footer.style.justifyContent = "space-between";
|
||
footer.style.alignItems = "center";
|
||
|
||
var credits = document.createElement("div");
|
||
var authorLink = document.createElement("a");
|
||
authorLink.href = CONFIG.metadata.authorGithub;
|
||
authorLink.textContent = "YuzuZensai";
|
||
authorLink.style.color = "#1a73e8";
|
||
authorLink.style.textDecoration = "none";
|
||
authorLink.style.cursor = "pointer";
|
||
authorLink.target = "_blank";
|
||
|
||
credits.appendChild(document.createTextNode("Made with 💖 by "));
|
||
credits.appendChild(authorLink);
|
||
credits.appendChild(
|
||
document.createTextNode(` • v${CONFIG.metadata.version}`)
|
||
);
|
||
|
||
updateLink = document.createElement("a");
|
||
updateLink.href = "javascript:void(0)";
|
||
updateLink.textContent = "Check for updates";
|
||
updateLink.style.color = "#1a73e8";
|
||
updateLink.style.textDecoration = "none";
|
||
updateLink.style.cursor = "pointer";
|
||
updateLink.addEventListener("click", function (e) {
|
||
e.preventDefault();
|
||
checkForUpdates();
|
||
});
|
||
|
||
footer.appendChild(credits);
|
||
footer.appendChild(updateLink);
|
||
|
||
return footer;
|
||
}
|
||
|
||
function switchTab(tabName) {
|
||
var mainContent = document.getElementById("translator-main-content");
|
||
var settingsContent = document.getElementById(
|
||
"translator-settings-content"
|
||
);
|
||
var tabs = container.querySelectorAll("button");
|
||
|
||
tabs.forEach((tab) => {
|
||
if (tab.textContent.toLowerCase() === tabName) {
|
||
tab.style.borderBottom = "2px solid #1a73e8";
|
||
tab.style.color = "#1a73e8";
|
||
} else {
|
||
tab.style.borderBottom = "2px solid transparent";
|
||
tab.style.color = "#666";
|
||
}
|
||
});
|
||
|
||
if (tabName === "translator") {
|
||
mainContent.style.display = "flex";
|
||
settingsContent.style.display = "none";
|
||
} else {
|
||
mainContent.style.display = "none";
|
||
settingsContent.style.display = "flex";
|
||
}
|
||
}
|
||
|
||
function setupDraggable(element) {
|
||
element.addEventListener("mousedown", function (e) {
|
||
isDragging = true;
|
||
var rect = container.getBoundingClientRect();
|
||
dragOffsetX = e.clientX - rect.left;
|
||
dragOffsetY = e.clientY - rect.top;
|
||
e.preventDefault();
|
||
log("info", "Started dragging window");
|
||
});
|
||
|
||
document.addEventListener("mousemove", function (e) {
|
||
if (isDragging) {
|
||
var x = e.clientX - dragOffsetX;
|
||
var y = e.clientY - dragOffsetY;
|
||
container.style.left = x + "px";
|
||
container.style.top = y + "px";
|
||
container.style.right = "auto";
|
||
container.style.bottom = "auto";
|
||
}
|
||
});
|
||
|
||
document.addEventListener("mouseup", function () {
|
||
if (isDragging) {
|
||
isDragging = false;
|
||
log("info", "Stopped dragging window");
|
||
}
|
||
});
|
||
}
|
||
|
||
function createToggleButton() {
|
||
log("info", "Creating toggle button");
|
||
toggleButton = document.createElement("div");
|
||
toggleButton.id = "translator-toggle";
|
||
toggleButton.textContent = "T";
|
||
toggleButton.style.position = "fixed";
|
||
toggleButton.style.bottom = "10px";
|
||
toggleButton.style.right = "10px";
|
||
toggleButton.style.width = "30px";
|
||
toggleButton.style.height = "30px";
|
||
toggleButton.style.backgroundColor = visible ? "#F44336" : "#4CAF50";
|
||
toggleButton.style.color = "white";
|
||
toggleButton.style.borderRadius = "50%";
|
||
toggleButton.style.display = "flex";
|
||
toggleButton.style.justifyContent = "center";
|
||
toggleButton.style.alignItems = "center";
|
||
toggleButton.style.cursor = "pointer";
|
||
toggleButton.style.fontSize = "16px";
|
||
toggleButton.style.fontWeight = "bold";
|
||
toggleButton.style.zIndex = "10000";
|
||
toggleButton.style.boxShadow = "0 2px 5px rgba(0,0,0,0.2)";
|
||
|
||
toggleButton.addEventListener("click", function () {
|
||
log("info", "Toggle button clicked");
|
||
toggleVisibility();
|
||
});
|
||
|
||
try {
|
||
document.body.appendChild(toggleButton);
|
||
log("success", "Toggle button added to document body");
|
||
} catch (error) {
|
||
log("error", "Error appending toggle button to body:", error);
|
||
}
|
||
}
|
||
|
||
function toggleVisibility() {
|
||
visible = !visible;
|
||
container.style.display = visible ? "flex" : "none";
|
||
toggleButton.style.backgroundColor = visible ? "#F44336" : "#4CAF50";
|
||
toggleButton.textContent = visible ? "X" : "T";
|
||
log("info", "Toggled visibility", {
|
||
visible: visible ? "shown" : "hidden",
|
||
});
|
||
}
|
||
|
||
function setupEventListeners() {
|
||
log("info", "Setting up event listeners");
|
||
// Debounce the search with 300ms delay
|
||
const debouncedSearch = debounce(() => {
|
||
if (!searchInput.value.trim()) {
|
||
// If textbox is cleared, force a search of the editor content
|
||
checkForEditorContent(true);
|
||
} else {
|
||
searchTranslations(searchInput.value, false);
|
||
}
|
||
}, 300);
|
||
|
||
searchInput.addEventListener("input", function () {
|
||
log("info", "Search input detected - debounced");
|
||
debouncedSearch();
|
||
});
|
||
}
|
||
|
||
function setupExternalTextboxListener() {
|
||
log("info", "Setting up external textbox listener");
|
||
|
||
var observer = new MutationObserver(function (mutations) {
|
||
var textbox = document.querySelector(CONFIG.textboxSelector);
|
||
if (textbox && !textbox.dataset.translatorInitialized) {
|
||
log("info", "Found target textbox", {
|
||
selector: CONFIG.textboxSelector,
|
||
});
|
||
textbox.dataset.translatorInitialized = "true";
|
||
textbox.addEventListener("input", function () {
|
||
log("info", "External textbox input detected");
|
||
findMatches(textbox.value);
|
||
});
|
||
|
||
textbox.addEventListener("mouseup", function () {
|
||
var selectedText = window.getSelection()?.toString();
|
||
if (selectedText) {
|
||
log("info", "Text selection detected", {
|
||
selectedText:
|
||
selectedText.substring(0, 20) +
|
||
(selectedText.length > 20 ? "..." : ""),
|
||
});
|
||
findMatches(selectedText);
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
try {
|
||
observer.observe(document.body, {
|
||
childList: true,
|
||
subtree: true,
|
||
});
|
||
log("success", "MutationObserver started");
|
||
} catch (error) {
|
||
log("error", "Error setting up MutationObserver:", error);
|
||
}
|
||
}
|
||
|
||
function setupCrowdinEditorListener() {
|
||
log("info", "Setting up Crowdin editor listener");
|
||
|
||
if (autoSearchIntervalId) {
|
||
clearInterval(autoSearchIntervalId);
|
||
}
|
||
|
||
setTimeout(() => {
|
||
checkForEditorContent();
|
||
}, 1000);
|
||
|
||
autoSearchIntervalId = setInterval(function () {
|
||
checkForEditorContent();
|
||
}, CONFIG.autoSearchInterval);
|
||
|
||
const editorObserver = new MutationObserver(function (mutations) {
|
||
checkForEditorContent();
|
||
});
|
||
|
||
try {
|
||
const editorContainer = document.querySelector(
|
||
CONFIG.editorSourceContainer
|
||
);
|
||
if (editorContainer) {
|
||
editorObserver.observe(editorContainer, {
|
||
childList: true,
|
||
subtree: true,
|
||
characterData: true,
|
||
});
|
||
log("success", "Editor observer started");
|
||
}
|
||
} catch (error) {
|
||
log("error", "Error setting up editor observer:", error);
|
||
}
|
||
}
|
||
|
||
function checkForEditorContent(forceRefresh = false) {
|
||
if (!visible || translationData.length === 0) {
|
||
log("debug", "Skipping editor content check", {
|
||
visible: visible,
|
||
hasTranslations: translationData.length > 0,
|
||
});
|
||
return;
|
||
}
|
||
|
||
try {
|
||
var content = parseEditorContent();
|
||
if (content && content.fullText) {
|
||
if (content.fullText !== lastSearchedText || forceRefresh) {
|
||
lastSearchedText = content.fullText;
|
||
|
||
const currentStringLabel = document.getElementById(
|
||
"current-string-label"
|
||
);
|
||
if (currentStringLabel) {
|
||
const stringIdText = content.stringId
|
||
? ` [ID: ${content.stringId}]`
|
||
: "";
|
||
currentStringLabel.textContent =
|
||
"Current string" +
|
||
stringIdText +
|
||
": " +
|
||
content.fullText.substring(0, 100) +
|
||
(content.fullText.length > 100 ? "..." : "");
|
||
}
|
||
|
||
log("debug", "Editor content changed", {
|
||
text:
|
||
content.fullText.substring(0, 50) +
|
||
(content.fullText.length > 50 ? "..." : ""),
|
||
terms: content.terms,
|
||
stringId: content.stringId,
|
||
length: content.fullText.length,
|
||
lastSearchedText: lastSearchedText,
|
||
});
|
||
findMatches(content.fullText);
|
||
}
|
||
} else {
|
||
log("debug", "No valid editor content found");
|
||
}
|
||
} catch (error) {
|
||
log("error", "Error in checkForEditorContent", error);
|
||
}
|
||
}
|
||
|
||
function parseEditorContent() {
|
||
const editorContainer = document.querySelector(
|
||
CONFIG.editorSourceContainer
|
||
);
|
||
if (!editorContainer) {
|
||
log("debug", "Editor container not found", {
|
||
selector: CONFIG.editorSourceContainer,
|
||
});
|
||
return null;
|
||
}
|
||
|
||
const sourceContainer = document.querySelector(
|
||
CONFIG.sourceStringContainer
|
||
);
|
||
if (!sourceContainer) {
|
||
log("debug", "Source container not found", {
|
||
selector: CONFIG.sourceStringContainer,
|
||
});
|
||
return null;
|
||
}
|
||
|
||
const result = {
|
||
fullText: "",
|
||
terms: [],
|
||
stringId: "",
|
||
};
|
||
|
||
try {
|
||
// Try to get text content directly first
|
||
result.fullText = sourceContainer.textContent.trim();
|
||
|
||
// If no text found, try alternative selectors
|
||
if (!result.fullText) {
|
||
const alternativeSelectors = [
|
||
".source-string",
|
||
".source-string__content",
|
||
'[data-test="source-string"]',
|
||
".singular",
|
||
];
|
||
|
||
for (const selector of alternativeSelectors) {
|
||
const element = sourceContainer.querySelector(selector);
|
||
if (element) {
|
||
result.fullText = element.textContent.trim();
|
||
if (result.fullText) {
|
||
log("debug", "Found text using alternative selector", {
|
||
selector,
|
||
});
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Get string ID from URL if possible
|
||
const urlMatch = window.location.href.match(
|
||
/\/translate\/([^\/]+)\/([^\/]+)\/([^-]+)-(\d+)/
|
||
);
|
||
if (urlMatch && urlMatch[4]) {
|
||
result.stringId = urlMatch[4];
|
||
}
|
||
|
||
// Fallback to context link if URL parsing fails
|
||
if (!result.stringId) {
|
||
const contextLink = document.querySelector(
|
||
'a[href*="view_in_context"]'
|
||
);
|
||
if (contextLink) {
|
||
const href = contextLink.getAttribute("href");
|
||
const match = href.match(/#(\d+)/);
|
||
if (match && match[1]) {
|
||
result.stringId = match[1];
|
||
}
|
||
}
|
||
}
|
||
|
||
// if (result.fullText) {
|
||
// log("debug", "Successfully parsed editor content", {
|
||
// length: result.fullText.length,
|
||
// stringId: result.stringId || "none",
|
||
// });
|
||
// } else {
|
||
// log("debug", "No text content found in editor");
|
||
// }
|
||
|
||
return result;
|
||
} catch (error) {
|
||
log("error", "Error parsing editor content:", error);
|
||
return null;
|
||
}
|
||
}
|
||
|
||
function refreshTranslationData() {
|
||
log("info", "Refreshing translation data");
|
||
const sourceToggle = document.querySelector("#source-toggle");
|
||
const remoteUrlInput = document.querySelector(
|
||
'#translator-settings-content input[type="text"]'
|
||
);
|
||
const localFileInput = document.querySelector(
|
||
'#translator-settings-content input[type="file"]'
|
||
);
|
||
|
||
if (sourceToggle.checked) {
|
||
if (localFileInput && localFileInput.files.length > 0) {
|
||
readCSVFile(localFileInput.files[0]);
|
||
} else {
|
||
updateResults("Please select a local CSV file first.");
|
||
log("warn", "No local file selected");
|
||
}
|
||
} else {
|
||
const url = remoteUrlInput
|
||
? remoteUrlInput.value.trim()
|
||
: CONFIG.remoteCSVUrl;
|
||
if (url) {
|
||
fetchRemoteCSV(url);
|
||
} else {
|
||
updateResults("Please enter a valid remote CSV URL.");
|
||
log("warn", "No remote URL provided");
|
||
}
|
||
}
|
||
}
|
||
|
||
function fetchRemoteCSV(url) {
|
||
log("info", "Fetching remote CSV from", { url: url });
|
||
GM_xmlhttpRequest({
|
||
method: "GET",
|
||
url: url,
|
||
onload: function (response) {
|
||
if (response.status === 200) {
|
||
try {
|
||
const newData = parseCSVToArray(response.responseText);
|
||
translationData = newData;
|
||
currentCSVSource = url;
|
||
|
||
log("debug", "Translation data", {
|
||
translationData: JSON.stringify(translationData),
|
||
newData: JSON.stringify(newData),
|
||
});
|
||
|
||
log("success", "Successfully loaded remote CSV", {
|
||
entries: translationData.length,
|
||
});
|
||
} catch (csvError) {
|
||
log("error", "Error parsing CSV data", csvError);
|
||
updateResults(
|
||
"Error parsing CSV data. Please check the file format and try again."
|
||
);
|
||
}
|
||
} else {
|
||
log("error", "Failed to fetch remote CSV", {
|
||
status: response.status,
|
||
});
|
||
updateResults(
|
||
"Failed to fetch remote CSV. Please check the URL and try again."
|
||
);
|
||
}
|
||
},
|
||
onerror: function (error) {
|
||
log("error", "Error fetching remote CSV", error);
|
||
updateResults(
|
||
"Error fetching remote CSV. Please check your connection and try again."
|
||
);
|
||
},
|
||
});
|
||
}
|
||
|
||
function readCSVFile(file) {
|
||
log("info", "Reading CSV file");
|
||
var reader = new FileReader();
|
||
reader.onload = function (e) {
|
||
var csvContent = e.target?.result;
|
||
log("info", "CSV file loaded, content length", {
|
||
length: csvContent.length,
|
||
});
|
||
parseCSV(csvContent);
|
||
currentCSVSource = file.name;
|
||
};
|
||
reader.onerror = function (error) {
|
||
log("error", "Error reading file", error);
|
||
updateResults("Error reading CSV file. Please try again.");
|
||
};
|
||
reader.readAsText(file);
|
||
}
|
||
|
||
function parseCSV(csvContent) {
|
||
log("info", "Parsing CSV content", {
|
||
lines: csvContent.split("\n").length,
|
||
});
|
||
var lines = csvContent.split("\n");
|
||
|
||
translationData = [];
|
||
categoryColors.clear();
|
||
|
||
if (!lines || lines.length < 2) {
|
||
log("error", "Invalid CSV structure: insufficient lines");
|
||
updateResults("Error: Invalid CSV file structure");
|
||
return;
|
||
}
|
||
|
||
// Skip header
|
||
for (var i = 1; i < lines.length; i++) {
|
||
var line = lines[i].trim();
|
||
if (line) {
|
||
try {
|
||
// Handle quoted values that might contain commas
|
||
var values = [];
|
||
var inQuotes = false;
|
||
var currentValue = "";
|
||
|
||
for (var j = 0; j < line.length; j++) {
|
||
var char = line[j];
|
||
|
||
if (char === '"' && (j === 0 || line[j - 1] !== "\\")) {
|
||
inQuotes = !inQuotes;
|
||
} else if (char === "," && !inQuotes) {
|
||
values.push(currentValue);
|
||
currentValue = "";
|
||
} else {
|
||
currentValue += char;
|
||
}
|
||
}
|
||
|
||
values.push(currentValue);
|
||
|
||
// Remove quotes if present and validate
|
||
values = values.map(function (v) {
|
||
return validateCSVField(v.replace(/^"(.*)"$/, "$1"));
|
||
});
|
||
|
||
if (values.length >= 2) {
|
||
const entry = validateCSVEntry({
|
||
source: values[0],
|
||
target: values[1],
|
||
note: values[2] || "",
|
||
category: values[3] || "",
|
||
});
|
||
|
||
if (entry) {
|
||
translationData.push(entry);
|
||
}
|
||
}
|
||
} catch (error) {
|
||
log("error", "Error parsing CSV line", { line: i, error: error });
|
||
continue;
|
||
}
|
||
}
|
||
}
|
||
|
||
log("success", "CSV parsing complete", {
|
||
entries: translationData.length,
|
||
source: currentCSVSource || "CSV",
|
||
});
|
||
updateResults(
|
||
`Loaded ${translationData.length} translations from ${sanitizeHTML(
|
||
currentCSVSource || "CSV"
|
||
)}`
|
||
);
|
||
|
||
const editorContent = parseEditorContent();
|
||
if (editorContent && editorContent.fullText) {
|
||
log("debug", "Found editor content after loading CSV", {
|
||
text:
|
||
editorContent.fullText.substring(0, 50) +
|
||
(editorContent.fullText.length > 50 ? "..." : ""),
|
||
length: editorContent.fullText.length,
|
||
});
|
||
findMatches(editorContent.fullText);
|
||
} else {
|
||
log("debug", "No editor content found after loading CSV");
|
||
// Try again after a short delay
|
||
setTimeout(() => {
|
||
const delayedContent = parseEditorContent();
|
||
if (delayedContent && delayedContent.fullText) {
|
||
log("debug", "Found editor content after delay", {
|
||
text:
|
||
delayedContent.fullText.substring(0, 50) +
|
||
(delayedContent.fullText.length > 50 ? "..." : ""),
|
||
length: delayedContent.fullText.length,
|
||
});
|
||
findMatches(delayedContent.fullText);
|
||
} else {
|
||
log("warn", "Still no editor content found after delay");
|
||
}
|
||
}, 1000);
|
||
}
|
||
}
|
||
|
||
// Debounce function
|
||
function debounce(func, wait) {
|
||
let timeout;
|
||
return function executedFunction(...args) {
|
||
const later = () => {
|
||
clearTimeout(timeout);
|
||
func(...args);
|
||
};
|
||
clearTimeout(timeout);
|
||
timeout = setTimeout(later, wait);
|
||
};
|
||
}
|
||
|
||
function getCachedCombinations(text) {
|
||
if (combinationsCache.has(text)) {
|
||
return combinationsCache.get(text);
|
||
}
|
||
|
||
const words = text.split(/\s+/).filter((word) => word.length > 0);
|
||
const combinations = [];
|
||
|
||
// Add full phrase first
|
||
const fullPhrase = words.join(" ");
|
||
if (isSignificantPhrase(fullPhrase)) {
|
||
combinations.push(fullPhrase);
|
||
}
|
||
|
||
// Add all possible 3-word combinations
|
||
for (let i = 0; i < words.length - 2; i++) {
|
||
const threeWordPhrase = words.slice(i, i + 3).join(" ");
|
||
if (isSignificantPhrase(threeWordPhrase)) {
|
||
combinations.push(threeWordPhrase);
|
||
}
|
||
}
|
||
|
||
// Add word pairs
|
||
for (let i = 0; i < words.length - 1; i++) {
|
||
const twoWordPhrase = words.slice(i, i + 2).join(" ");
|
||
if (isSignificantPhrase(twoWordPhrase)) {
|
||
combinations.push(twoWordPhrase);
|
||
}
|
||
}
|
||
|
||
// Add individual significant words
|
||
words.forEach((word) => {
|
||
if (isSignificantPhrase(word)) {
|
||
combinations.push(word);
|
||
}
|
||
});
|
||
|
||
combinationsCache.set(text, combinations);
|
||
return combinations;
|
||
}
|
||
|
||
function searchTranslations(text, isAutoSearch = false) {
|
||
if (!text || !translationData.length) {
|
||
updateResults("");
|
||
lastSearchedText = "";
|
||
return;
|
||
}
|
||
|
||
// For manual search
|
||
let searchText = text;
|
||
if (!isAutoSearch) {
|
||
const editorTextbox = document.querySelector(CONFIG.textboxSelector);
|
||
if (editorTextbox && editorTextbox.value.trim()) {
|
||
searchText = editorTextbox.value;
|
||
}
|
||
}
|
||
|
||
const query = searchText.toLowerCase().trim();
|
||
if (!isAutoSearch && query.length <= 1) {
|
||
updateResults("");
|
||
lastSearchedText = "";
|
||
checkForEditorContent(true);
|
||
return;
|
||
}
|
||
|
||
log(
|
||
"info",
|
||
`${isAutoSearch ? "Auto" : "Manual"} searching translations for`,
|
||
{
|
||
query: query,
|
||
originalText: text,
|
||
editorText: !isAutoSearch ? searchText : undefined,
|
||
isAutoSearch: isAutoSearch,
|
||
}
|
||
);
|
||
|
||
const matches = [];
|
||
const seenEntries = new Set();
|
||
|
||
// For auto-search or long queries, break down into significant phrases
|
||
const searchPhrases = [];
|
||
if (isAutoSearch || query.split(/\s+/).length > 3) {
|
||
// Get word combinations for better partial matching
|
||
searchPhrases.push(...getCachedCombinations(query));
|
||
} else {
|
||
searchPhrases.push(query);
|
||
}
|
||
|
||
// Remove duplicates and empty phrases
|
||
const uniquePhrases = [...new Set(searchPhrases)].filter(
|
||
(phrase) => phrase && phrase.length > 2
|
||
);
|
||
|
||
log("debug", "Searching with phrases:", uniquePhrases);
|
||
|
||
translationData.forEach((entry) => {
|
||
const entryKey = `${entry.source}_${entry.category || ""}`;
|
||
if (seenEntries.has(entryKey)) return;
|
||
|
||
let bestScore = 0;
|
||
let bestPhrase = "";
|
||
|
||
// Try each search phrase against the entry
|
||
for (const searchPhrase of uniquePhrases) {
|
||
let score = 0;
|
||
const searchWords = searchPhrase.split(/\s+/);
|
||
|
||
// For single words or short phrases, use enhanced matching
|
||
if (searchWords.length === 1 || searchPhrase.length <= 3) {
|
||
const sourceWords = entry.source.toLowerCase().split(/\s+/);
|
||
const targetWords = entry.target.toLowerCase().split(/\s+/);
|
||
|
||
// Check for word variations and similarities
|
||
const hasVariationMatch = searchWords.some(
|
||
(searchWord) =>
|
||
sourceWords.some((sourceWord) =>
|
||
areWordsSimilar(searchWord, sourceWord)
|
||
) ||
|
||
targetWords.some((targetWord) =>
|
||
areWordsSimilar(searchWord, targetWord)
|
||
)
|
||
);
|
||
|
||
if (hasVariationMatch) {
|
||
score = CONFIG.thresholds.scores.wordVariationMatch;
|
||
|
||
// Boost score for closer matches
|
||
const bestSourceMatch = Math.max(
|
||
...sourceWords.map((w) =>
|
||
Math.max(
|
||
...searchWords.map((sw) =>
|
||
getCachedSimilarity(normalizeWord(w), normalizeWord(sw))
|
||
)
|
||
)
|
||
)
|
||
);
|
||
const bestTargetMatch = Math.max(
|
||
...targetWords.map((w) =>
|
||
Math.max(
|
||
...searchWords.map((sw) =>
|
||
getCachedSimilarity(normalizeWord(w), normalizeWord(sw))
|
||
)
|
||
)
|
||
)
|
||
);
|
||
|
||
const bestMatch = Math.max(bestSourceMatch, bestTargetMatch);
|
||
score = Math.max(score, bestMatch);
|
||
}
|
||
|
||
// Exact matching
|
||
const regex = new RegExp(`\\b${searchPhrase}\\b`, "i");
|
||
if (regex.test(entry.source) || regex.test(entry.target)) {
|
||
score = Math.max(score, CONFIG.thresholds.scores.exactWordMatch);
|
||
}
|
||
} else {
|
||
// For longer phrases, use stricter matching
|
||
const sourceWords = entry.source.toLowerCase().split(/\s+/);
|
||
const targetWords = entry.target.toLowerCase().split(/\s+/);
|
||
|
||
// Calculate word overlap with stricter position consideration
|
||
const sourceOverlap = calculateOverlapScore(searchWords, sourceWords);
|
||
const targetOverlap = calculateOverlapScore(searchWords, targetWords);
|
||
|
||
// Only use fuzzy matching if there's significant word overlap
|
||
if (
|
||
Math.max(sourceOverlap, targetOverlap) >
|
||
CONFIG.thresholds.wordOverlap
|
||
) {
|
||
const sourceScore = similarity(
|
||
entry.source.toLowerCase(),
|
||
searchPhrase
|
||
);
|
||
const targetScore = similarity(
|
||
entry.target.toLowerCase(),
|
||
searchPhrase
|
||
);
|
||
|
||
score = Math.max(sourceScore, targetScore);
|
||
|
||
// Weight the score using configured weights
|
||
const overlapWeight = Math.max(sourceOverlap, targetOverlap);
|
||
score =
|
||
score * CONFIG.thresholds.weights.fuzzyMatchWeight +
|
||
overlapWeight * CONFIG.thresholds.weights.wordOverlapWeight;
|
||
}
|
||
|
||
// Check for exact substring matches
|
||
const isExactMatch = entry.source.toLowerCase() === searchPhrase;
|
||
const isPartialMatch =
|
||
entry.source.toLowerCase().includes(searchPhrase) ||
|
||
entry.target.toLowerCase().includes(searchPhrase);
|
||
|
||
if (isExactMatch) {
|
||
score = CONFIG.thresholds.scores.exactMatch;
|
||
} else if (isPartialMatch) {
|
||
// Stricter scoring for partial matches
|
||
const matchRatio = searchPhrase.length / entry.source.length;
|
||
score = Math.max(
|
||
score,
|
||
Math.min(
|
||
CONFIG.thresholds.scores.singularPluralContext,
|
||
CONFIG.thresholds.scores.partialMatchBase + matchRatio * 0.25
|
||
)
|
||
);
|
||
}
|
||
|
||
// Length difference penalty
|
||
const lengthDiff = Math.abs(sourceWords.length - searchWords.length);
|
||
if (lengthDiff > 0) {
|
||
score *= Math.max(
|
||
CONFIG.thresholds.multipliers.minLengthPenaltyScore,
|
||
1 - lengthDiff * CONFIG.thresholds.multipliers.lengthDiffPenalty
|
||
);
|
||
}
|
||
}
|
||
|
||
// Update best score if this phrase matched better
|
||
if (score > bestScore) {
|
||
bestScore = score;
|
||
bestPhrase = searchPhrase;
|
||
}
|
||
}
|
||
|
||
// Apply thresholds
|
||
let threshold =
|
||
CONFIG.thresholds.fuzzy *
|
||
CONFIG.thresholds.multipliers.baseThresholdIncrease;
|
||
if (isAutoSearch) {
|
||
threshold *= CONFIG.thresholds.multipliers.autoSearchThreshold;
|
||
}
|
||
|
||
// Higher threshold for single-word matches in multi-word entries
|
||
if (
|
||
bestPhrase.split(/\s+/).length === 1 &&
|
||
entry.source.split(/\s+/).length > 1
|
||
) {
|
||
threshold *= CONFIG.thresholds.multipliers.singleWordThreshold;
|
||
}
|
||
|
||
if (bestScore >= threshold) {
|
||
seenEntries.add(entryKey);
|
||
matches.push({
|
||
entry,
|
||
score: bestScore,
|
||
matchedWord: bestPhrase || query,
|
||
});
|
||
}
|
||
});
|
||
|
||
// Helper function to calculate overlap score with position matching
|
||
function calculateOverlapScore(searchWords, targetWords) {
|
||
let matchCount = 0;
|
||
let positionScore = 0;
|
||
|
||
for (let i = 0; i < searchWords.length; i++) {
|
||
const searchWord = searchWords[i];
|
||
const targetIndex = targetWords.indexOf(searchWord);
|
||
|
||
if (targetIndex !== -1) {
|
||
matchCount++;
|
||
const positionPenalty =
|
||
Math.abs(i - targetIndex) /
|
||
Math.max(searchWords.length, targetWords.length);
|
||
positionScore +=
|
||
1 - positionPenalty * CONFIG.thresholds.multipliers.positionPenalty;
|
||
}
|
||
}
|
||
|
||
const matchRatio = matchCount / searchWords.length;
|
||
const avgPositionScore = matchCount > 0 ? positionScore / matchCount : 0;
|
||
|
||
return (
|
||
matchRatio * CONFIG.thresholds.weights.positionOverlapWeight +
|
||
avgPositionScore * CONFIG.thresholds.weights.positionMatchWeight
|
||
);
|
||
}
|
||
|
||
// Clear caches if they get too large
|
||
if (similarityCache.size > CONFIG.thresholds.cacheLimits.similarity)
|
||
similarityCache.clear();
|
||
if (combinationsCache.size > CONFIG.thresholds.cacheLimits.combinations)
|
||
combinationsCache.clear();
|
||
|
||
// Find all punctuation marks in the search phrase
|
||
const punctuationMarks = query.match(/[.,!?;:'")\]}/\\]/g) || [];
|
||
if (punctuationMarks.length > 0) {
|
||
// Add each punctuation mark as a separate search phrase
|
||
punctuationMarks.forEach((mark) => {
|
||
searchPhrases.push(mark);
|
||
});
|
||
|
||
// Find exact matches for punctuation marks
|
||
const exactMatches = translationData
|
||
.filter((entry) =>
|
||
punctuationMarks.some(
|
||
(mark) => entry.source.includes(mark) || entry.target.includes(mark)
|
||
)
|
||
)
|
||
.map((entry) => ({
|
||
entry,
|
||
score: 1.0,
|
||
matchedWord: query,
|
||
}));
|
||
matches.push(...exactMatches);
|
||
}
|
||
|
||
// Sort matches
|
||
matches.sort((a, b) => {
|
||
// First prioritize exact matches
|
||
if (a.score === 1 && b.score !== 1) return -1;
|
||
if (b.score === 1 && a.score !== 1) return 1;
|
||
|
||
// Then by match word count (prefer more complete matches)
|
||
const aWords = a.matchedWord.split(/\s+/).length;
|
||
const bWords = b.matchedWord.split(/\s+/).length;
|
||
if (aWords !== bWords) return bWords - aWords;
|
||
|
||
// Then by category presence
|
||
if (!!a.entry.category !== !!b.entry.category) {
|
||
return a.entry.category ? -1 : 1;
|
||
}
|
||
|
||
// Finally by score
|
||
return b.score - a.score;
|
||
});
|
||
|
||
// Limit results for performance
|
||
const limitedMatches = matches.slice(0, 50);
|
||
|
||
log("success", "Search found matches", {
|
||
count: limitedMatches.length,
|
||
isAutoSearch,
|
||
matches: limitedMatches.map((m) => ({
|
||
source: m.entry.source,
|
||
score: Math.round(m.score * 100) + "%",
|
||
matchedWord: m.matchedWord,
|
||
})),
|
||
});
|
||
|
||
displayFuzzyMatches(limitedMatches);
|
||
}
|
||
|
||
function findMatches(text) {
|
||
searchTranslations(text, true);
|
||
}
|
||
|
||
function displayFuzzyMatches(matches) {
|
||
if (matches.length === 0) {
|
||
updateResults(
|
||
'<div style="color: #666; text-align: center; padding: 16px;">No matches found</div>'
|
||
);
|
||
return;
|
||
}
|
||
|
||
// Wrapper for table with flex layout
|
||
var wrapper = document.createElement("div");
|
||
wrapper.style.display = "flex";
|
||
wrapper.style.flexDirection = "column";
|
||
wrapper.style.height = "100%";
|
||
wrapper.style.overflow = "hidden";
|
||
wrapper.style.position = "relative";
|
||
|
||
// Table container with scrolling
|
||
var tableContainer = document.createElement("div");
|
||
tableContainer.style.flexGrow = "1";
|
||
tableContainer.style.overflow = "auto";
|
||
tableContainer.style.position = "relative";
|
||
tableContainer.style.minHeight = "0";
|
||
|
||
var table = document.createElement("table");
|
||
table.style.width = "100%";
|
||
table.style.borderCollapse = "collapse";
|
||
table.style.tableLayout = "fixed";
|
||
table.style.color = "#000";
|
||
|
||
var thead = document.createElement("thead");
|
||
thead.style.position = "sticky";
|
||
thead.style.top = "0";
|
||
thead.style.backgroundColor = "#f8f9fa";
|
||
thead.style.zIndex = "1";
|
||
|
||
var headerRow = document.createElement("tr");
|
||
var columns = [
|
||
{ name: "Source", width: "30%" },
|
||
{ name: "Target", width: "30%" },
|
||
{ name: "Note", width: "30%" },
|
||
{ name: "Score", width: "10%" },
|
||
];
|
||
|
||
columns.forEach((col) => {
|
||
var th = document.createElement("th");
|
||
th.textContent = col.name;
|
||
th.style.textAlign = "left";
|
||
th.style.padding = "8px";
|
||
th.style.border = "1px solid #e0e0e0";
|
||
th.style.width = col.width;
|
||
th.style.backgroundColor = "#f8f9fa";
|
||
headerRow.appendChild(th);
|
||
});
|
||
|
||
thead.appendChild(headerRow);
|
||
table.appendChild(thead);
|
||
|
||
// Create table body
|
||
var tbody = document.createElement("tbody");
|
||
|
||
// Sort matches by score (highest to lowest)
|
||
matches.sort((a, b) => b.score - a.score);
|
||
|
||
matches.forEach(function (match) {
|
||
var row = document.createElement("tr");
|
||
const scorePercentage = Math.round(match.score * 100);
|
||
const bgColor = `rgba(26, 115, 232, ${match.score * 0.1})`;
|
||
row.style.backgroundColor = bgColor;
|
||
|
||
row.appendChild(createCopyableCell(match.entry.source, true, false));
|
||
row.appendChild(createCopyableCell(match.entry.target, false, true));
|
||
row.appendChild(
|
||
createCopyableCell(match.entry.note, false, false, match.entry.category)
|
||
);
|
||
|
||
// Score cell
|
||
var scoreCell = document.createElement("td");
|
||
scoreCell.textContent = scorePercentage + "%";
|
||
scoreCell.style.padding = "8px";
|
||
scoreCell.style.border = "1px solid #e0e0e0";
|
||
scoreCell.style.fontWeight = "bold";
|
||
if (scorePercentage === 100) {
|
||
scoreCell.style.color = "#4CAF50"; // Green for perfect matches
|
||
} else if (scorePercentage >= 80) {
|
||
scoreCell.style.color = "#1a73e8"; // Blue for high matches
|
||
} else {
|
||
scoreCell.style.color = "#666"; // Gray for lower matches
|
||
}
|
||
row.appendChild(scoreCell);
|
||
|
||
tbody.appendChild(row);
|
||
});
|
||
|
||
table.appendChild(tbody);
|
||
tableContainer.appendChild(table);
|
||
wrapper.appendChild(tableContainer);
|
||
|
||
// Copy label at bottom
|
||
var copyLabelContainer = document.createElement("div");
|
||
copyLabelContainer.style.padding = "4px 8px";
|
||
copyLabelContainer.style.backgroundColor = "#f8f9fa";
|
||
copyLabelContainer.style.borderTop = "1px solid #e0e0e0";
|
||
copyLabelContainer.style.display = "flex";
|
||
copyLabelContainer.style.alignItems = "center";
|
||
copyLabelContainer.style.gap = "4px";
|
||
copyLabelContainer.style.fontSize = "11px";
|
||
copyLabelContainer.style.color = "#666";
|
||
|
||
var matchCount = document.createElement("span");
|
||
matchCount.textContent = `${matches.length} matches`;
|
||
copyLabelContainer.appendChild(matchCount);
|
||
|
||
var separator = document.createElement("span");
|
||
separator.textContent = "•";
|
||
separator.style.color = "#ccc";
|
||
copyLabelContainer.appendChild(separator);
|
||
|
||
var copyButton = document.createElement("span");
|
||
copyButton.textContent = "Copy as CSV";
|
||
copyButton.style.color = "#1a73e8";
|
||
copyButton.style.cursor = "pointer";
|
||
copyButton.style.transition = "color 0.2s";
|
||
|
||
copyButton.addEventListener("mouseover", function () {
|
||
this.style.color = "#1557b0";
|
||
this.style.textDecoration = "underline";
|
||
});
|
||
|
||
copyButton.addEventListener("mouseout", function () {
|
||
this.style.color = "#1a73e8";
|
||
this.style.textDecoration = "none";
|
||
});
|
||
|
||
copyButton.addEventListener("click", function () {
|
||
let csvContent = "Score,Source,Target,Note,Category\n";
|
||
matches.forEach(function (match) {
|
||
const escapeField = (field) => {
|
||
if (!field) return "";
|
||
const escaped = field.replace(/"/g, '""');
|
||
return `"${escaped}"`;
|
||
};
|
||
|
||
csvContent +=
|
||
[
|
||
Math.round(match.score * 100) + "%",
|
||
escapeField(match.entry.source),
|
||
escapeField(match.entry.target),
|
||
escapeField(match.entry.note),
|
||
escapeField(match.entry.category),
|
||
].join(",") + "\n";
|
||
});
|
||
|
||
navigator.clipboard
|
||
.writeText(csvContent)
|
||
.then(() => {
|
||
const originalText = copyButton.textContent;
|
||
copyButton.textContent = "Copied!";
|
||
copyButton.style.color = "#4CAF50";
|
||
setTimeout(() => {
|
||
copyButton.textContent = originalText;
|
||
copyButton.style.color = "#1a73e8";
|
||
}, 2000);
|
||
})
|
||
.catch((err) => {
|
||
log("error", "Failed to copy CSV", err);
|
||
copyButton.textContent = "Failed to copy";
|
||
copyButton.style.color = "#F44336";
|
||
setTimeout(() => {
|
||
copyButton.textContent = "Copy as CSV";
|
||
copyButton.style.color = "#1a73e8";
|
||
}, 2000);
|
||
});
|
||
});
|
||
|
||
copyLabelContainer.appendChild(copyButton);
|
||
wrapper.appendChild(copyLabelContainer);
|
||
|
||
resultsDiv.innerHTML = "";
|
||
resultsDiv.appendChild(wrapper);
|
||
log("success", "Updated results panel with table layout");
|
||
}
|
||
|
||
function updateResults(content) {
|
||
resultsDiv.innerHTML = content;
|
||
log("success", "Updated results panel");
|
||
}
|
||
|
||
function checkForUpdates() {
|
||
log("info", "Checking for updates");
|
||
updateLink.textContent = "Checking for updates...";
|
||
updateLink.style.color = "#666";
|
||
|
||
// Check version first
|
||
GM_xmlhttpRequest({
|
||
method: "GET",
|
||
url: CONFIG.updateCheckUrl,
|
||
onload: function (response) {
|
||
if (response.status === 200) {
|
||
try {
|
||
const versionInfo = JSON.parse(response.responseText);
|
||
const latestVersion = versionInfo.latest;
|
||
const needsVersionUpdate =
|
||
latestVersion !== CONFIG.metadata.version;
|
||
|
||
log("info", "Retrieved version info", {
|
||
current: CONFIG.metadata.version,
|
||
latest: latestVersion,
|
||
});
|
||
|
||
// Check CSV data
|
||
const sourceToggle = document.querySelector("#source-toggle");
|
||
const remoteUrlInput = document.querySelector(
|
||
'#translator-settings-content input[type="text"]'
|
||
);
|
||
const csvUrl =
|
||
!sourceToggle || !sourceToggle.checked
|
||
? remoteUrlInput && remoteUrlInput.value.trim()
|
||
? remoteUrlInput.value.trim()
|
||
: CONFIG.remoteCSVUrl
|
||
: null;
|
||
|
||
if (csvUrl) {
|
||
log("info", "Checking CSV updates from", { url: csvUrl });
|
||
GM_xmlhttpRequest({
|
||
method: "GET",
|
||
url: csvUrl,
|
||
onload: function (csvResponse) {
|
||
if (csvResponse.status === 200) {
|
||
try {
|
||
const newData = parseCSVToArray(csvResponse.responseText);
|
||
|
||
function isEqual(obj1, obj2) {
|
||
return JSON.stringify(obj1) === JSON.stringify(obj2);
|
||
}
|
||
|
||
const needsDataUpdate = !isEqual(
|
||
translationData,
|
||
newData
|
||
);
|
||
|
||
log("debug", "Translation data", {
|
||
translationData: JSON.stringify(translationData),
|
||
newData: JSON.stringify(newData),
|
||
});
|
||
|
||
log("info", "CSV check complete", {
|
||
needsUpdate: needsDataUpdate,
|
||
currentEntries: translationData.length,
|
||
newEntries: newData.length,
|
||
});
|
||
updateUIAfterChecks(
|
||
needsVersionUpdate,
|
||
needsDataUpdate,
|
||
latestVersion,
|
||
newData
|
||
);
|
||
} catch (csvError) {
|
||
log("error", "Error parsing CSV data", csvError);
|
||
updateUIAfterChecks(
|
||
needsVersionUpdate,
|
||
false,
|
||
latestVersion,
|
||
null
|
||
);
|
||
}
|
||
} else {
|
||
log("error", "Failed to fetch CSV", {
|
||
status: csvResponse.status,
|
||
});
|
||
updateUIAfterChecks(
|
||
needsVersionUpdate,
|
||
false,
|
||
latestVersion,
|
||
null
|
||
);
|
||
}
|
||
},
|
||
onerror: function (csvError) {
|
||
log("error", "Error fetching CSV", csvError);
|
||
updateUIAfterChecks(
|
||
needsVersionUpdate,
|
||
false,
|
||
latestVersion,
|
||
null
|
||
);
|
||
},
|
||
});
|
||
} else {
|
||
log("info", "Skipping CSV check - using local file");
|
||
updateUIAfterChecks(
|
||
needsVersionUpdate,
|
||
false,
|
||
latestVersion,
|
||
null
|
||
);
|
||
}
|
||
} catch (e) {
|
||
log("error", "Error parsing version info", e);
|
||
updateLink.textContent = "Error checking for updates";
|
||
updateLink.style.color = "#F44336";
|
||
}
|
||
} else {
|
||
log("error", "Failed to check for updates", {
|
||
status: response.status,
|
||
});
|
||
updateLink.textContent = "Error checking for updates";
|
||
updateLink.style.color = "#F44336";
|
||
}
|
||
},
|
||
onerror: function (error) {
|
||
log("error", "Error checking for updates", error);
|
||
updateLink.textContent = "Error checking for updates";
|
||
updateLink.style.color = "#F44336";
|
||
},
|
||
});
|
||
}
|
||
|
||
function parseCSVToArray(csvContent) {
|
||
const lines = csvContent.split("\n");
|
||
const result = [];
|
||
|
||
// Skip header
|
||
for (let i = 1; i < lines.length; i++) {
|
||
const line = lines[i].trim();
|
||
if (line) {
|
||
let values = [];
|
||
let inQuotes = false;
|
||
let currentValue = "";
|
||
|
||
for (let j = 0; j < line.length; j++) {
|
||
const char = line[j];
|
||
|
||
if (char === '"' && (j === 0 || line[j - 1] !== "\\")) {
|
||
inQuotes = !inQuotes;
|
||
} else if (char === "," && !inQuotes) {
|
||
values.push(currentValue);
|
||
currentValue = "";
|
||
} else {
|
||
currentValue += char;
|
||
}
|
||
}
|
||
|
||
values.push(currentValue);
|
||
values = values.map((v) => v.replace(/^"(.*)"$/, "$1"));
|
||
|
||
if (values.length >= 2) {
|
||
result.push({
|
||
source: values[0],
|
||
target: values[1],
|
||
note: values[2] || "",
|
||
category: values[3] || "",
|
||
});
|
||
}
|
||
}
|
||
}
|
||
return result;
|
||
}
|
||
|
||
function updateUIAfterChecks(
|
||
needsVersionUpdate,
|
||
needsDataUpdate,
|
||
newVersion,
|
||
newData
|
||
) {
|
||
if (needsVersionUpdate && needsDataUpdate) {
|
||
updateLink.textContent = `Update available! v${newVersion} + new translations`;
|
||
updateLink.style.color = "#F44336";
|
||
showUpdateNotification(true, true);
|
||
} else if (needsVersionUpdate) {
|
||
updateLink.textContent = `Update available! v${newVersion}`;
|
||
updateLink.style.color = "#F44336";
|
||
showUpdateNotification(true, false);
|
||
} else if (needsDataUpdate) {
|
||
updateLink.textContent = "New translations applied!";
|
||
updateLink.style.color = "#F44336";
|
||
showUpdateNotification(false, true);
|
||
|
||
if (newData) {
|
||
translationData = newData;
|
||
log("success", "Updated translation data", { entries: newData.length });
|
||
updateResults(`Updated with ${newData.length} translations`);
|
||
|
||
setTimeout(() => {
|
||
updateLink.textContent = "Translations updated ✓";
|
||
updateLink.style.color = "#4CAF50";
|
||
// Trigger content check after updating data
|
||
setTimeout(() => {
|
||
checkForEditorContent(true);
|
||
}, 500);
|
||
setTimeout(() => {
|
||
updateLink.textContent = "Check for updates";
|
||
updateLink.style.color = "#1a73e8";
|
||
}, 2000);
|
||
}, 1000);
|
||
}
|
||
} else {
|
||
log("info", "No updates available");
|
||
updateLink.textContent = "No updates available ✓";
|
||
setTimeout(() => {
|
||
updateLink.textContent = "Check for updates";
|
||
updateLink.style.color = "#1a73e8";
|
||
}, 3000);
|
||
}
|
||
}
|
||
|
||
function showUpdateNotification(hasVersionUpdate, hasDataUpdate) {
|
||
log("info", "Showing update notification");
|
||
const notification = document.createElement("div");
|
||
notification.style.position = "fixed";
|
||
notification.style.top = "10px";
|
||
notification.style.right = "10px";
|
||
notification.style.background = "#4CAF50";
|
||
notification.style.color = "white";
|
||
notification.style.padding = "16px";
|
||
notification.style.borderRadius = "8px";
|
||
notification.style.zIndex = "10001";
|
||
notification.style.boxShadow = "0 4px 12px rgba(0,0,0,0.15)";
|
||
notification.style.maxWidth = "300px";
|
||
|
||
let message = "";
|
||
if (hasVersionUpdate && hasDataUpdate) {
|
||
message = "New version and translations available!";
|
||
} else if (hasVersionUpdate) {
|
||
message = "New version available!";
|
||
} else if (hasDataUpdate) {
|
||
message = "New translations available!";
|
||
}
|
||
|
||
notification.innerHTML = `
|
||
<div style="margin-bottom:12px">
|
||
<b>${message}</b>
|
||
</div>
|
||
<div style="display:flex;justify-content:flex-end;gap:8px">
|
||
<button id="csv-translator-dismiss" style="padding:8px 16px;border:none;background:#2E7D32;color:white;border-radius:4px;cursor:pointer">Dismiss</button>
|
||
${
|
||
hasVersionUpdate
|
||
? `<button id="csv-translator-update" style="padding:8px 16px;border:none;background:#1a73e8;color:white;border-radius:4px;cursor:pointer">Open Repository</button>`
|
||
: ""
|
||
}
|
||
</div>
|
||
`;
|
||
|
||
document.body.appendChild(notification);
|
||
|
||
document
|
||
.getElementById("csv-translator-dismiss")
|
||
.addEventListener("click", function () {
|
||
document.body.removeChild(notification);
|
||
});
|
||
|
||
if (hasVersionUpdate) {
|
||
document
|
||
.getElementById("csv-translator-update")
|
||
.addEventListener("click", function () {
|
||
window.open(CONFIG.metadata.repository, "_blank");
|
||
document.body.removeChild(notification);
|
||
});
|
||
}
|
||
|
||
setTimeout(() => {
|
||
if (document.body.contains(notification)) {
|
||
document.body.removeChild(notification);
|
||
}
|
||
}, 10000);
|
||
}
|
||
|
||
function createCopyableCell(
|
||
text,
|
||
isSource = false,
|
||
isTarget = false,
|
||
category = ""
|
||
) {
|
||
var cell = document.createElement("td");
|
||
|
||
// Create container for content
|
||
var container = document.createElement("div");
|
||
container.style.display = "flex";
|
||
container.style.flexDirection = "column";
|
||
container.style.gap = "4px";
|
||
container.style.color = "#000";
|
||
|
||
// Add category chip first if in note column
|
||
if (!isSource && !isTarget && category) {
|
||
container.innerHTML += createCategoryChip(category);
|
||
}
|
||
|
||
// Add main text
|
||
var mainText = document.createElement("div");
|
||
mainText.textContent = text || "";
|
||
mainText.style.flex = "1";
|
||
container.appendChild(mainText);
|
||
|
||
cell.appendChild(container);
|
||
cell.style.padding = "8px";
|
||
cell.style.border = "1px solid #e0e0e0";
|
||
cell.style.wordBreak = "break-word";
|
||
cell.style.whiteSpace = "normal";
|
||
cell.style.verticalAlign = "top";
|
||
cell.style.cursor = "pointer";
|
||
cell.style.userSelect = "text";
|
||
cell.style.position = "relative";
|
||
|
||
cell.title = "Click to copy";
|
||
|
||
// Hover effect
|
||
cell.addEventListener("mouseover", function () {
|
||
this.style.backgroundColor = "rgba(26, 115, 232, 0.1)";
|
||
});
|
||
|
||
cell.addEventListener("mouseout", function () {
|
||
this.style.backgroundColor = "transparent";
|
||
});
|
||
|
||
cell.addEventListener("click", function (e) {
|
||
if (window.getSelection().toString()) {
|
||
return;
|
||
}
|
||
|
||
navigator.clipboard.writeText(text).then(() => {
|
||
var tooltip = document.createElement("div");
|
||
tooltip.textContent = "Copied!";
|
||
tooltip.style.position = "absolute";
|
||
tooltip.style.backgroundColor = "#333";
|
||
tooltip.style.color = "white";
|
||
tooltip.style.padding = "4px 8px";
|
||
tooltip.style.borderRadius = "4px";
|
||
tooltip.style.fontSize = "12px";
|
||
tooltip.style.zIndex = "1000";
|
||
tooltip.style.top = "0";
|
||
tooltip.style.left = "50%";
|
||
tooltip.style.transform = "translate(-50%, -100%)";
|
||
|
||
cell.appendChild(tooltip);
|
||
|
||
setTimeout(() => {
|
||
tooltip.remove();
|
||
}, 1000);
|
||
});
|
||
});
|
||
|
||
return cell;
|
||
}
|
||
|
||
init();
|
||
}
|
||
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
log("info", "DOMContentLoaded event fired");
|
||
try {
|
||
new TranslatorTool();
|
||
} catch (error) {
|
||
log("error", "Error initializing tool:", error);
|
||
}
|
||
});
|
||
|
||
// Fallback initialization
|
||
if (
|
||
document.readyState === "complete" ||
|
||
document.readyState === "interactive"
|
||
) {
|
||
log("info", "Document already loaded, initializing immediately");
|
||
setTimeout(function () {
|
||
try {
|
||
new TranslatorTool();
|
||
} catch (error) {
|
||
log("error", "Error initializing tool (fallback):", error);
|
||
}
|
||
}, 1000);
|
||
}
|
||
|
||
log("info", "Script loaded. Current document.readyState:", document.readyState);
|