From feb348ce64ea713b0c3e942172049248c0c32cd9 Mon Sep 17 00:00:00 2001 From: kaonasi_biwa Date: Sun, 7 Jul 2024 14:35:51 +0900 Subject: [PATCH 1/6] =?UTF-8?q?TUICLibrary=E3=81=AE=E3=81=86=E3=81=A1?= =?UTF-8?q?=E8=89=B2=E9=96=A2=E9=80=A3=E3=81=AE=E3=82=82=E3=81=AE=E3=82=92?= =?UTF-8?q?=E5=88=86=E9=9B=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/applyCSS.ts | 15 ++-- src/content/library.ts | 42 +---------- .../modules/observer/functions/changeIcon.ts | 12 +-- .../observer/functions/followersList.tsx | 3 +- .../observer/functions/rightSidebarTexts.tsx | 4 +- .../observer/functions/sidebarBtn/index.ts | 7 +- .../functions/tweetSettings/buttonHTML.tsx | 4 +- .../tweetSettings/placeEngagementsLink.ts | 5 +- .../tweetSettings/showLinkCardInfo.ts | 8 +- .../tweetSettings/tweetTopButtons.ts | 3 +- src/content/modules/utils/color.ts | 74 +++++++++++++++++++ .../options/components/ColorSetting.vue | 16 ++-- 12 files changed, 115 insertions(+), 78 deletions(-) create mode 100644 src/content/modules/utils/color.ts diff --git a/src/content/applyCSS.ts b/src/content/applyCSS.ts index 16257530..07f75aa7 100644 --- a/src/content/applyCSS.ts +++ b/src/content/applyCSS.ts @@ -7,6 +7,7 @@ import { TUICPref } from "@modules/index.ts"; import { ColorData } from "@shared/sharedData.ts"; import styleUrl from "./styles/index.pcss?url"; +import { backgroundColorCheck, backgroundColorClass, getColorFromPref } from "@content/modules/utils/color.ts"; export function applyDefaultStyle() { document.querySelector("#tuicDefaultStyle")?.remove(); @@ -70,7 +71,7 @@ export function applyCustomIcon() { } export function applySystemCss() { - const backgroundColor = TUICLibrary.backgroundColorCheck(); + const backgroundColor = backgroundColorCheck(); const settingsArr = [ "sidebarSetting.buttonConfigsmallerSidebarContent", @@ -106,28 +107,26 @@ export function applySystemCss() { for (const elem of TUICPref.getSettingIDs("buttonColor")) { for (const el of ["background", "border", "color"]) { if (ColorData.defaultTUICColor.colors[elem][el]) { - rs.setProperty(`--twitter-${elem}-${el}`, TUICLibrary.color.getColorFromPref(elem, el, null)); + rs.setProperty(`--twitter-${elem}-${el}`, getColorFromPref(elem, el, null)); } } } - rs.setProperty("--twitter-TUIC-color", ColorData.TUICFixedColor[backgroundColor].textColor); rs.setProperty("--TUIC-container-background", ColorData.TUICFixedColor[backgroundColor].containerBackground); rs.setProperty("--TUIC-container-background2", ColorData.TUICFixedColor[backgroundColor].containerBackground2); rs.setProperty("--TUIC-color-hover-efect", ColorData.TUICFixedColor[backgroundColor].colorHover); - rs.setProperty("--TUIC-sidebar-hover-color", TUICLibrary.backgroundColorCheck() == "light" ? "rgba(15,20,25,0.1)" : "rgba(247,249,249,0.1)"); - rs.setProperty("--TUIC-sidebar-active-color", TUICLibrary.backgroundColorCheck() == "light" ? "rgba(15,20,25,0.2)" : "rgba(247,249,249,0.2)"); - rs.setProperty("--TUIC-sidebar-focus-color", TUICLibrary.backgroundColorCheck() == "light" ? "rgb(135,138,140)" : "rgb(251,252,252)"); + rs.setProperty("--TUIC-sidebar-hover-color", backgroundColorCheck() == "light" ? "rgba(15,20,25,0.1)" : "rgba(247,249,249,0.1)"); + rs.setProperty("--TUIC-sidebar-active-color", backgroundColorCheck() == "light" ? "rgba(15,20,25,0.2)" : "rgba(247,249,249,0.2)"); + rs.setProperty("--TUIC-sidebar-focus-color", backgroundColorCheck() == "light" ? "rgb(135,138,140)" : "rgb(251,252,252)"); rs.setProperty("--TUIC-detail-border", ColorData.TUICFixedColor[backgroundColor].detailBorder); - rs.setProperty("--TUIC-pinnedTab-background", `rgba(${TUICLibrary.backgroundColorClass("0, 0, 0, 0.65", "21, 32, 43, 0.75", "255, 255, 255, 0.85")})`); + rs.setProperty("--TUIC-pinnedTab-background", `rgba(${backgroundColorClass("0, 0, 0, 0.65", "21, 32, 43, 0.75", "255, 255, 255, 0.85")})`); rs.setProperty("--TUIC-pinnedTab-top", `${TUICLibrary.fontSizeClass("47", "49", "52", "57", "63")}px`); } } - export function applyCustomCss() { document.querySelector("#twitter_ui_customizer_css").textContent = localStorage.getItem("TUIC_CSS"); } diff --git a/src/content/library.ts b/src/content/library.ts index 690835aa..35cecb89 100644 --- a/src/content/library.ts +++ b/src/content/library.ts @@ -1,25 +1,6 @@ -import { ColorData, ProcessedClass } from "@shared/sharedData.ts"; -import { TUICPref } from "@modules/index.ts"; +import { ProcessedClass } from "@shared/sharedData.ts"; export const TUICLibrary = { - color: { - /** RGB 配列を #xxxxxx 表記に変換します。 */ - rgb2hex: (rgb: [number, number, number]) => { - return `#${rgb.map((value) => ("0" + value.toString(16)).slice(-2)).join("")}`; - }, - /** #xxxxxx 表記を RGB に変換します。 */ - hex2rgb: (hex: string): [number, number, number] => { - if (hex.slice(0, 1) == "#") hex = hex.slice(1); - return <[number, number, number]>[hex.slice(0, 2), hex.slice(2, 4), hex.slice(4, 6)].map((str) => { - return parseInt(str, 16); - }); - }, - getColorFromPref: (name: string, type: string, mode: "buttonColor" | "buttonColorLight" | "buttonColorDark" | null) => { - let _mode = ""; - _mode = mode ? mode : TUICLibrary.backgroundColorCheck() == "light" ? "buttonColorLight" : "buttonColorDark"; - return TUICPref.getPref(`${_mode}.${name}.${type}`) ?? ColorData.defaultTUICColor?.["colors-" + _mode]?.[name]?.[type] ?? TUICPref.getPref(`buttonColor.${name}.${type}`) ?? ColorData.defaultTUICColor.colors[name][type]; - }, - }, getPrimitiveOrFunction: (functionOrPrimitive: (() => T) | T): T => { if (typeof functionOrPrimitive === "function") { return (functionOrPrimitive as () => T)(); @@ -27,26 +8,7 @@ export const TUICLibrary = { return functionOrPrimitive; } }, - backgroundColorCheck: (): "dark" | "blue" | "light" => { - const bodyStyle = document.querySelector("body").style.backgroundColor.toString(); - if (bodyStyle == "rgb(0, 0, 0)") { - return "dark"; - } else if (bodyStyle == "rgb(21, 32, 43)") { - return "blue"; - } else { - return "light"; - } - }, - backgroundColorClass: (dark: T, blue: T, white: T) => { - const backgroundType = TUICLibrary.backgroundColorCheck(); - if (backgroundType == "dark") { - return dark; - } else if (backgroundType == "blue") { - return blue; - } else { - return white; - } - }, + fontSizeClass: (x1: T, x2: T, x3: T, x4: T, x5: T) => { const fontSize = document.querySelector("html").style.fontSize.toString(); if (fontSize == "17px") { diff --git a/src/content/modules/observer/functions/changeIcon.ts b/src/content/modules/observer/functions/changeIcon.ts index b362af9b..e4622e9a 100644 --- a/src/content/modules/observer/functions/changeIcon.ts +++ b/src/content/modules/observer/functions/changeIcon.ts @@ -3,7 +3,7 @@ import TWITTER from "@content/icons/logo/twitter.svg?raw"; import X from "@content/icons/logo/x.svg?raw"; import EMPTY from "@content/icons/logo/empty.svg?url"; import { TUICPref } from "../.."; -import { TUICLibrary } from "@content/library"; +import { getColorFromPref } from "@content/modules/utils/color"; let iconObserver: MutationObserver | null = null; @@ -37,8 +37,8 @@ function changeIconProcess(elem: Element, base: Element) { break; case "twitter": if (favicon && changeFavicon) { - favicon.href = "data:image/svg+xml," + encodeURIComponent(TWITTER.replace("var(--TUIC-favicon-color)", TUICLibrary.color.getColorFromPref("twitterIconFavicon", "color", null))); - //replace(`xmlns:xlink="http:%2F%2Fwww.w3.org%2F1999%2Fxlink"`, `xmlns:xlink="http:%2F%2Fwww.w3.org%2F1999%2Fxlink"%20fill="${TUICLibrary.color.getColorFromPref("twitterIconFavicon", "color")}"`) + favicon.href = "data:image/svg+xml," + encodeURIComponent(TWITTER.replace("var(--TUIC-favicon-color)", getColorFromPref("twitterIconFavicon", "color", null))); + //replace(`xmlns:xlink="http:%2F%2Fwww.w3.org%2F1999%2Fxlink"`, `xmlns:xlink="http:%2F%2Fwww.w3.org%2F1999%2Fxlink"%20fill="${getColorFromPref("twitterIconFavicon", "color")}"`) } elem.classList.add("TUIC_SVGDISPNONE", "TUICTwitterIcon_Twitter"); break; @@ -57,9 +57,9 @@ function changeIconProcess(elem: Element, base: Element) { break; case "twitterIcon-X": if (favicon && changeFavicon) { - //console.log(encodeURIComponent(X.replace("var(--TUIC-favicon-color)", TUICLibrary.color.getColorFromPref("twitterIconFavicon", "color", null)))); - favicon.href = "data:image/svg+xml," + encodeURIComponent(X.replace("var(--TUIC-favicon-color)", TUICLibrary.color.getColorFromPref("twitterIconFavicon", "color", null))); - //.replace(`xmlns:xlink="http:%2F%2Fwww.w3.org%2F1999%2Fxlink"`, `xmlns:xlink="http:%2F%2Fwww.w3.org%2F1999%2Fxlink"%20fill="${TUICLibrary.color.getColorFromPref("twitterIconFavicon", "color")}"`); + //console.log(encodeURIComponent(X.replace("var(--TUIC-favicon-color)", getColorFromPref("twitterIconFavicon", "color", null)))); + favicon.href = "data:image/svg+xml," + encodeURIComponent(X.replace("var(--TUIC-favicon-color)", getColorFromPref("twitterIconFavicon", "color", null))); + //.replace(`xmlns:xlink="http:%2F%2Fwww.w3.org%2F1999%2Fxlink"`, `xmlns:xlink="http:%2F%2Fwww.w3.org%2F1999%2Fxlink"%20fill="${getColorFromPref("twitterIconFavicon", "color")}"`); } elem.classList.add("TUIC_SVGDISPNONE", "TUICTwitterIcon_X"); break; diff --git a/src/content/modules/observer/functions/followersList.tsx b/src/content/modules/observer/functions/followersList.tsx index 780c9d8b..b2a1a0fd 100644 --- a/src/content/modules/observer/functions/followersList.tsx +++ b/src/content/modules/observer/functions/followersList.tsx @@ -1,5 +1,6 @@ import { TUICLibrary } from "@content/library"; import { TUICPref } from "@content/modules"; +import { backgroundColorClass } from "@content/modules/utils/color"; import { ProcessedClass } from "@shared/sharedData"; import { JSX } from "solid-js"; import { render } from "solid-js/web"; @@ -20,7 +21,7 @@ function followersListButton(id: string, baseElement: HTMLElement): () => JSX.El
-
-
@@ -48,7 +49,7 @@ const _data = { "r-adyw6z r-135wba7 r-dlybji r-nazi8o", "r-evnaw r-eaezby r-16dba41 r-1fqalh9 r-k1rd3f r-i0ley5 r-19o66xi", "r-1x35g6 r-1h1c4di r-16dba41 r-ikuq2u r-1ck5maq", - )} r-bcqeeo r-qvutc0 ${TUICLibrary.backgroundColorCheck() == "light" ? "r-18jsvk2" : "r-vlxjld r-1nao33i"}" style="margin-right: 15px; text-overflow: unset;" > + )} r-bcqeeo r-qvutc0 ${backgroundColorCheck() == "light" ? "r-18jsvk2" : "r-vlxjld r-1nao33i"}" style="margin-right: 15px; text-overflow: unset;" > ${TUICI18N.get("sidebarButtons-" + id)}
diff --git a/src/content/modules/observer/functions/tweetSettings/buttonHTML.tsx b/src/content/modules/observer/functions/tweetSettings/buttonHTML.tsx index 89df65c1..44e08ad1 100644 --- a/src/content/modules/observer/functions/tweetSettings/buttonHTML.tsx +++ b/src/content/modules/observer/functions/tweetSettings/buttonHTML.tsx @@ -4,7 +4,7 @@ import { TUICI18N } from "@content/modules/i18n"; import { JSX } from "solid-js"; import { render } from "solid-js/web"; import { ButtonUnderTweetSelectors, TweetUnderButtonsData } from "./_data"; - +import { backgroundColorClass } from "@content/modules/utils/color"; export let willClickRT = false; const copiedURLMessage = (): JSX.Element => { @@ -260,7 +260,7 @@ export const TweetUnderButtonsHTML = (id: string, articleInfomation: ArticleInfo diff --git a/src/content/modules/observer/functions/tweetSettings/placeEngagementsLink.ts b/src/content/modules/observer/functions/tweetSettings/placeEngagementsLink.ts index 88ecf509..5b0fe63a 100644 --- a/src/content/modules/observer/functions/tweetSettings/placeEngagementsLink.ts +++ b/src/content/modules/observer/functions/tweetSettings/placeEngagementsLink.ts @@ -1,15 +1,16 @@ import { TUICI18N } from "@modules/i18n"; import { TUICLibrary } from "@content/library"; import { TUICPref } from "@content/modules"; +import { backgroundColorClass } from "@content/modules/utils/color"; const _data = { engagementsBox: (): Element => { - return TUICLibrary.parseHtml(`
`).item(0); + return TUICLibrary.parseHtml(`
`).item(0); }, links: (id: string, article: Element, isShort: boolean): Element => { const returnElem = TUICLibrary.parseHtml( `
- + ${TUICI18N.get("bottomTweetButtons-setting-placeEngagementsLink-" + id + (isShort ? "-short" : ""))}
`.replace(/( |\n|\r)( |\n|\r)+/g, ""), diff --git a/src/content/modules/observer/functions/tweetSettings/showLinkCardInfo.ts b/src/content/modules/observer/functions/tweetSettings/showLinkCardInfo.ts index f05b0be7..febd718a 100644 --- a/src/content/modules/observer/functions/tweetSettings/showLinkCardInfo.ts +++ b/src/content/modules/observer/functions/tweetSettings/showLinkCardInfo.ts @@ -1,6 +1,6 @@ import { TUICLibrary } from "@content/library"; import { TUICPref } from "@content/modules"; - +import { backgroundColorClass } from "@content/modules/utils/color"; const showLinkCardInfoElement = (link: string, domain: string, title: string, description: string): Element => { return TUICLibrary.parseHtml( `
@@ -12,7 +12,7 @@ const showLinkCardInfoElement = (link: string, domain: string, title: string, de "r-ig955 r-1orpq53 r-19urhcx", "r-i03k3n r-779j7e r-5t7p9m", )}" id="id__7fpkgwkoke8" data-testid="card.layoutSmall.detail" style="padding: 12px 15px"> -
${domain}
-
${title}
-
void) => { elem.addEventListener("keydown", (e: KeyboardEvent) => { if (e.key === "Enter") { @@ -36,7 +37,7 @@ const _data = {
- + ${svg} diff --git a/src/content/modules/utils/color.ts b/src/content/modules/utils/color.ts new file mode 100644 index 00000000..2889d230 --- /dev/null +++ b/src/content/modules/utils/color.ts @@ -0,0 +1,74 @@ +import { ColorData } from "@shared/sharedData"; +import { getPref } from "../pref"; + +/** + * RGB配列を#XXXXXX表記に変換します。 + * + * @param {[number, number, number]} rgb RGBの色を表す配列 + * @return {string} #XXXXXX表記 + */ +export function rgb2hex(rgb: [number, number, number]) { + return `#${rgb.map((value) => ("0" + value.toString(16)).slice(-2)).join("")}`; +} +/** + * #XXXXXX表記をRGB配列に変換します。 + * + * @param {[number, number, number]} hex #XXXXXX表記 + * @return {string} rgbの色を表す配列 + */ +export function hex2rgb(hex: string): [number, number, number] { + if (hex.slice(0, 1) == "#") hex = hex.slice(1); + return <[number, number, number]>[hex.slice(0, 2), hex.slice(2, 4), hex.slice(4, 6)].map((str) => { + return parseInt(str, 16); + }); +} +/** + * TUICのPrefから色を取得します。 + * 色の指定がされていない場合は、ColorDataにあるデフォルト値を参照します。 + * modeが指定されていない場合は、実際に使われている背景色を取得します。 + * modeがbuttonColorLight/buttonColorDarkの場合でも、指定されていない場合はbuttonColorとして色を取得します。 + * buttonColorは設定画面上の「ベース」です。 + * + * @param {string} name 色の設定ID + * @param {string} type 色の種類(基本的にはbackground,border,color) + * @return {"buttonColor" | "buttonColorLight" | "buttonColorDark" | null} 色の取得に使用する背景色 + */ +export function getColorFromPref(name: string, type: string, mode: "buttonColor" | "buttonColorLight" | "buttonColorDark" | null) { + let _mode = ""; + _mode = mode ? mode : backgroundColorCheck() == "light" ? "buttonColorLight" : "buttonColorDark"; + return getPref(`${_mode}.${name}.${type}`) ?? ColorData.defaultTUICColor?.["colors-" + _mode]?.[name]?.[type] ?? getPref(`buttonColor.${name}.${type}`) ?? ColorData.defaultTUICColor.colors[name][type]; +} + +/** + * 現在の画面での背景色を取得します。 + * + * @return {"dark" | "blue" | "light" } 背景色 + */ +export function backgroundColorCheck(): "dark" | "blue" | "light" { + const bodyStyle = document.querySelector("body").style.backgroundColor.toString(); + if (bodyStyle == "rgb(0, 0, 0)") { + return "dark"; + } else if (bodyStyle == "rgb(21, 32, 43)") { + return "blue"; + } else { + return "light"; + } +} + +/** + * 現在の画面での背景色を用いて、与えられた値から返り値を選びます。 + * + * @param {unknwon} dark 背景色が「ブラック」のときに返す値 + * @param {unknwon} blue 背景色が「ダークブルー」のときに返す値 + * @param {unknwon} white 背景色が「デフォルト」のときに返す値 + */ +export function backgroundColorClass(dark: T, blue: T, white: T) { + const backgroundType = backgroundColorCheck(); + if (backgroundType == "dark") { + return dark; + } else if (backgroundType == "blue") { + return blue; + } else { + return white; + } +} diff --git a/src/shared/options/components/ColorSetting.vue b/src/shared/options/components/ColorSetting.vue index cdd58b75..124f36d2 100644 --- a/src/shared/options/components/ColorSetting.vue +++ b/src/shared/options/components/ColorSetting.vue @@ -19,7 +19,6 @@
- +
@@ -9,7 +9,7 @@ diff --git a/src/shared/options/components/ColorSetting.vue b/src/shared/options/components/ColorSetting.vue index 124f36d2..4e2b2b00 100644 --- a/src/shared/options/components/ColorSetting.vue +++ b/src/shared/options/components/ColorSetting.vue @@ -23,7 +23,7 @@ import { TUICI18N } from "@modules/i18n"; import RoundedColorPicker from "@shared/settings/components/RoundedColorPicker.vue"; import TransparentToggleButton from "@shared/settings/components/TransparentToggleButton.vue"; import ColorResetButton from "@shared/settings/components/ColorResetButton.vue"; -import { TUICPref } from "@content/modules"; +import { getPref, savePref, setPref, deletePref } from "@modules/pref"; import { applySystemCss } from "@content/applyCSS"; import { useStore } from "../store"; @@ -54,7 +54,7 @@ function resetBtnClicked() { // Prefにデータが保持されているか確認して、あるならデフォルトじゃない const isDefault = computed(() => { - return !!TUICPref.getPref(store.editingColorType)?.[props.id]?.[props.type]; + return !!getPref(store.editingColorType)?.[props.id]?.[props.type]; }); // Prefから設定された色を取得(配列で[R: string, G: string, B: string]の形式) // このコンポーネントを呼び出すときのpropsから取得する色の場所などが決定される @@ -67,7 +67,7 @@ const TUICColor1 = computed(() => { }); function defaultColor(colorAttr, colorType, colorKind) { - if (TUICPref.getPref(`${colorKind}.${colorAttr}`) && TUICPref.getPref(`${colorKind}.${colorAttr}.${colorType}`)) TUICPref.deletePref(`${colorKind}.${colorAttr}.${colorType}`); + if (getPref(`${colorKind}.${colorAttr}`) && getPref(`${colorKind}.${colorAttr}.${colorType}`)) deletePref(`${colorKind}.${colorAttr}.${colorType}`); const TUIC_color = getColorFromPref(colorAttr, colorType, colorKind).replace("rgba(", "").replace(")", "").replaceAll(" ", "").split(","); const TUICColor1 = rgb2hex([Number(TUIC_color[0]), Number(TUIC_color[1]), Number(TUIC_color[2])]); @@ -77,7 +77,7 @@ function defaultColor(colorAttr, colorType, colorKind) { transparentButton.value.setCheckedValue(TUIC_color[3] == 0); colorRoot.value.classList.add("TUIC_ISNOTDEFAULT"); - TUICPref.save(); + savePref(); applySystemCss(); } @@ -85,12 +85,12 @@ function changeColor(colorAttr, colorType, colorKind, colorPickerVal) { const colorValue = hex2rgb(colorPickerVal); const isChecked = transparentButton.value.checked; - TUICPref.setPref(`${colorKind}.${colorAttr}.${colorType}`, `rgba(${colorValue[0]}, ${colorValue[1]}, ${colorValue[2]}, ${isChecked ? 0 : 1})`); + setPref(`${colorKind}.${colorAttr}.${colorType}`, `rgba(${colorValue[0]}, ${colorValue[1]}, ${colorValue[2]}, ${isChecked ? 0 : 1})`); // CHECKの出現？ colorRoot.value.classList.remove("TUIC_ISNOTDEFAULT"); - TUICPref.save(); + savePref(); applySystemCss(); } @@ -98,10 +98,10 @@ function changeColor(colorAttr, colorType, colorKind, colorPickerVal) { function changeColorCheck(colorAttr, colorType, colorKind, isChecked) { const colorValue = getColorFromPref(props.id, props.type, store.editingColorType).replace("rgba(", "").replace(")", "").replaceAll(" ", "").split(","); - TUICPref.setPref(`${colorKind}.${colorAttr}.${colorType}`, `rgba(${colorValue[0]}, ${colorValue[1]}, ${colorValue[2]}, ${isChecked ? 0 : 1})`); + setPref(`${colorKind}.${colorAttr}.${colorType}`, `rgba(${colorValue[0]}, ${colorValue[1]}, ${colorValue[2]}, ${isChecked ? 0 : 1})`); colorRoot.value.classList.remove("TUIC_ISNOTDEFAULT"); - TUICPref.save(); + savePref(); applySystemCss(); } diff --git a/src/shared/options/components/ColorsList.vue b/src/shared/options/components/ColorsList.vue index dc1af860..9b28ae51 100644 --- a/src/shared/options/components/ColorsList.vue +++ b/src/shared/options/components/ColorsList.vue @@ -1,6 +1,6 @@