diff --git a/src/libs/inputTranslate.js b/src/libs/inputTranslate.js index a20501a..1489ff9 100644 --- a/src/libs/inputTranslate.js +++ b/src/libs/inputTranslate.js @@ -7,7 +7,7 @@ import { import { genEventName, removeEndchar, matchInputStr } from "./utils"; import { stepShortcutRegister } from "./shortcut"; import { apiTranslate } from "../apis"; -import { loadingSvg } from "./svg"; +import { createLoadingSVG } from "./svg"; import { kissLog } from "./log"; function isInputNode(node) { @@ -46,7 +46,7 @@ function addLoading(node, loadingId) { const rect = node.getBoundingClientRect(); const div = document.createElement("div"); div.id = loadingId; - div.innerHTML = loadingSvg; + div.appendChild(createLoadingSVG()); div.style.cssText = ` position: fixed; left: ${rect.left}px; diff --git a/src/libs/svg.js b/src/libs/svg.js index 34de861..1805cea 100644 --- a/src/libs/svg.js +++ b/src/libs/svg.js @@ -1,5 +1,5 @@ export const loadingSvg = ` - @@ -13,53 +13,98 @@ export const loadingSvg = ` `; +function createSVGElement(tag, attributes) { + const svgNS = "http://www.w3.org/2000/svg"; + const el = document.createElementNS(svgNS, tag); + for (const key in attributes) { + el.setAttribute(key, attributes[key]); + } + return el; +} + +/** + * 创建loding动画 + * @returns + */ +export function createLoadingSVG() { + const svg = createSVGElement("svg", { + viewBox: "-20 0 100 100", + style: + "display: inline-block; width: 1em; height: 1em; vertical-align: middle;", + }); + + const circleData = [ + { cx: "6", begin: "0.1", values: "0 15 ; 0 -15; 0 15" }, + { cx: "30", begin: "0.2", values: "0 10 ; 0 -10; 0 10" }, + { cx: "54", begin: "0.3", values: "0 5 ; 0 -5; 0 5" }, + ]; + + circleData.forEach((data) => { + const circle = createSVGElement("circle", { + fill: "#209CEE", + stroke: "none", + cx: data.cx, + cy: "50", + r: "6", + }); + const animation = createSVGElement("animateTransform", { + attributeName: "transform", + dur: "1s", + type: "translate", + values: data.values, + repeatCount: "indefinite", + begin: data.begin, + }); + circle.appendChild(animation); + svg.appendChild(circle); + }); + + return svg; +} + /** * 创建logo * @param {*} param0 * @returns */ -export const createLogoSvg = ({ +export function createLogoSVG({ width = "100%", height = "100%", viewBox = "-20 -20 70 70", isSelected = false, -} = {}) => { - const svgNS = "http://www.w3.org/2000/svg"; - const svgElement = document.createElementNS(svgNS, "svg"); +} = {}) { + const svg = createSVGElement("svg", { + xmlns: "http://www.w3.org/2000/svg", + width, + height, + viewBox, + version: "1.1", + }); - svgElement.setAttribute("xmlns", svgNS); - svgElement.setAttribute("width", width); - svgElement.setAttribute("height", height); - svgElement.setAttribute("viewBox", viewBox); - svgElement.setAttribute("version", "1.1"); + const path1 = createSVGElement("path", { + d: "M0 0 C10.56 0 21.12 0 32 0 C32 10.56 32 21.12 32 32 C21.44 32 10.88 32 0 32 C0 21.44 0 10.88 0 0 Z ", + fill: "#209CEE", + transform: "translate(0,0)", + }); - const path1 = document.createElementNS(svgNS, "path"); - path1.setAttribute( - "d", - "M0 0 C10.56 0 21.12 0 32 0 C32 10.56 32 21.12 32 32 C21.44 32 10.88 32 0 32 C0 21.44 0 10.88 0 0 Z " - ); - path1.setAttribute("fill", "#209CEE"); - path1.setAttribute("transform", "translate(0,0)"); + const path2 = createSVGElement("path", { + d: "M0 0 C0.66 0 1.32 0 2 0 C2 2.97 2 5.94 2 9 C2.969375 8.2575 3.93875 7.515 4.9375 6.75 C5.48277344 6.33234375 6.02804688 5.9146875 6.58984375 5.484375 C8.39053593 3.83283924 8.39053593 3.83283924 9 0 C13.95 0 18.9 0 24 0 C24 0.99 24 1.98 24 3 C22.68 3 21.36 3 20 3 C20 9.27 20 15.54 20 22 C19.01 22 18.02 22 17 22 C17 15.73 17 9.46 17 3 C15.35 3 13.7 3 12 3 C11.731875 3.598125 11.46375 4.19625 11.1875 4.8125 C10.01506533 6.97224808 8.80630718 8.35790256 7 10 C8.01790655 12.27071461 8.77442829 13.80784632 10.6875 15.4375 C11.120625 15.953125 11.55375 16.46875 12 17 C11.6875 19.6875 11.6875 19.6875 11 22 C10.34 22 9.68 22 9 22 C8.773125 21.236875 8.54625 20.47375 8.3125 19.6875 C6.73268318 16.45263699 5.16717283 15.58358642 2 14 C2 16.64 2 19.28 2 22 C1.34 22 0.68 22 0 22 C0 14.74 0 7.48 0 0 Z ", + fill: "#E9F5FD", + transform: "translate(4,5)", + }); - const path2 = document.createElementNS(svgNS, "path"); - path2.setAttribute( - "d", - "M0 0 C0.66 0 1.32 0 2 0 C2 2.97 2 5.94 2 9 C2.969375 8.2575 3.93875 7.515 4.9375 6.75 C5.48277344 6.33234375 6.02804688 5.9146875 6.58984375 5.484375 C8.39053593 3.83283924 8.39053593 3.83283924 9 0 C13.95 0 18.9 0 24 0 C24 0.99 24 1.98 24 3 C22.68 3 21.36 3 20 3 C20 9.27 20 15.54 20 22 C19.01 22 18.02 22 17 22 C17 15.73 17 9.46 17 3 C15.35 3 13.7 3 12 3 C11.731875 3.598125 11.46375 4.19625 11.1875 4.8125 C10.01506533 6.97224808 8.80630718 8.35790256 7 10 C8.01790655 12.27071461 8.77442829 13.80784632 10.6875 15.4375 C11.120625 15.953125 11.55375 16.46875 12 17 C11.6875 19.6875 11.6875 19.6875 11 22 C10.34 22 9.68 22 9 22 C8.773125 21.236875 8.54625 20.47375 8.3125 19.6875 C6.73268318 16.45263699 5.16717283 15.58358642 2 14 C2 16.64 2 19.28 2 22 C1.34 22 0.68 22 0 22 C0 14.74 0 7.48 0 0 Z " - ); - path2.setAttribute("fill", "#E9F5FD"); - path2.setAttribute("transform", "translate(4,5)"); - - svgElement.appendChild(path1); - svgElement.appendChild(path2); + svg.appendChild(path1); + svg.appendChild(path2); if (isSelected) { - const redLine = document.createElementNS(svgNS, "path"); - redLine.setAttribute("d", "M0 36 L32 36"); - redLine.setAttribute("stroke", "red"); - redLine.setAttribute("stroke-width", "3"); - redLine.setAttribute("stroke-linecap", "round"); - svgElement.appendChild(redLine); + const redLine = createSVGElement("path", { + d: "M0 36 L32 36", + stroke: "red", + "stroke-width": "3", + "stroke-linecap": "round", + }); + svg.appendChild(redLine); } - return svgElement; -}; + return svg; +} diff --git a/src/libs/translator.js b/src/libs/translator.js index 8d3ba0b..aed7c7f 100644 --- a/src/libs/translator.js +++ b/src/libs/translator.js @@ -30,7 +30,7 @@ import { injectInlineJs, injectInternalCss } from "./injector"; import { kissLog } from "./log"; import { clearAllBatchQueue } from "./batchQueue"; import { genTextClass } from "./style"; -import { loadingSvg } from "./svg"; +import { createLoadingSVG } from "./svg"; import { shortcutRegister } from "./shortcut"; import { tryDetectLang } from "./detect"; import { browser } from "./browser"; @@ -1001,7 +1001,7 @@ export class Translator { const inner = document.createElement(transTag); inner.className = `${Translator.KISS_CLASS.inner} ${this.#textClass[textStyle]}`; - inner.innerHTML = loadingSvg; + inner.appendChild(createLoadingSVG()); wrapper.appendChild(inner); nodes[nodes.length - 1].after(wrapper); diff --git a/src/subtitle/YouTubeCaptionProvider.js b/src/subtitle/YouTubeCaptionProvider.js index 3942e1d..14e00ce 100644 --- a/src/subtitle/YouTubeCaptionProvider.js +++ b/src/subtitle/YouTubeCaptionProvider.js @@ -8,7 +8,7 @@ import { OPT_TRANS_MICROSOFT, } from "../config"; import { sleep } from "../libs/utils.js"; -import { createLogoSvg } from "../libs/svg.js"; +import { createLogoSVG } from "../libs/svg.js"; import { randomBetween } from "../libs/utils.js"; const VIDEO_SELECT = "#container video"; @@ -107,7 +107,7 @@ class YouTubeCaptionProvider { opacity: "0.5", }); - toggleButton.appendChild(createLogoSvg()); + toggleButton.appendChild(createLogoSVG()); kissControls.appendChild(toggleButton); toggleButton.onclick = () => { @@ -334,7 +334,7 @@ class YouTubeCaptionProvider { return; } this.#enabled = true; - this.#toggleButton?.replaceChildren(createLogoSvg({ isSelected: true })); + this.#toggleButton?.replaceChildren(createLogoSVG({ isSelected: true })); const videoEl = document.querySelector(VIDEO_SELECT); if (!videoEl) { @@ -369,7 +369,7 @@ class YouTubeCaptionProvider { return; } this.#enabled = false; - this.#toggleButton?.replaceChildren(createLogoSvg()); + this.#toggleButton?.replaceChildren(createLogoSVG()); logger.info("Youtube Provider: Destroying manager...");