Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

色々書き換え #174

Draft
wants to merge 6 commits into
base: main
Choose a base branch
from
Draft

色々書き換え #174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
feb348c
TUICLibraryのうち色関連のものを分離
kaonasi-biwa Jul 7, 2024
f3271bd
TUICPrefを関数ごとに分解
kaonasi-biwa Jul 7, 2024
1ab5be4
fontSizeClass/getPrimitiveOrFunctionを分割
kaonasi-biwa Jul 7, 2024
39fc354
TUICLibraryを廃止
kaonasi-biwa Jul 7, 2024
e95192c
prototype汚染を廃止
kaonasi-biwa Jul 7, 2024
574cb38
JSDocの修正
kaonasi-biwa Jul 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 13 additions & 14 deletions src/content/applyCSS.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import browser from "webextension-polyfill";
import { TUICLibrary } from "@content/library.ts";
import { isSafemode } from "@modules/settings/safemode/isSafemode.ts";

import { DOG, TWITTER, X } from "./icons/index.ts";
import { TUICPref } from "@modules/index.ts";
import { ColorData } from "@shared/sharedData.ts";

import styleUrl from "./styles/index.pcss?url";
import { backgroundColorCheck, backgroundColorClass, getColorFromPref } from "@modules/utils/color.ts";
import { getPref, getSettingIDs } from "@modules/pref";
import { fontSizeClass } from "@modules/utils/fontSize.ts";

export function applyDefaultStyle() {
document.querySelector("#tuicDefaultStyle")?.remove();
Expand Down Expand Up @@ -70,7 +71,7 @@ export function applyCustomIcon() {
}

export function applySystemCss() {
const backgroundColor = TUICLibrary.backgroundColorCheck();
const backgroundColor = backgroundColorCheck();

const settingsArr = [
"sidebarSetting.buttonConfigsmallerSidebarContent",
Expand All @@ -90,11 +91,11 @@ export function applySystemCss() {
];
let settingsOutput = "|";
for (const elem of settingsArr) {
if (TUICPref.getPref(elem)) {
if (getPref(elem)) {
settingsOutput += elem + "|";
}
}
if (!TUICPref.getPref("sidebarButtons").includes("verified-choose")) {
if (!getPref("sidebarButtons").includes("verified-choose")) {
settingsOutput += "sidebarButtons.style.verifiedChoose" + "|";
}
document.documentElement.setAttribute("TUICSettings", settingsOutput);
Expand All @@ -103,31 +104,29 @@ export function applySystemCss() {
if (r instanceof HTMLElement) {
const rs = r.style;

for (const elem of TUICPref.getSettingIDs("buttonColor")) {
for (const elem of 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`);
rs.setProperty("--TUIC-pinnedTab-top", `${fontSizeClass("47", "49", "52", "57", "63")}px`);
}
}

export function applyCustomCss() {
document.querySelector("#twitter_ui_customizer_css").textContent = localStorage.getItem("TUIC_CSS");
}
12 changes: 6 additions & 6 deletions src/content/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,18 @@
*/

import { TUICObserver } from "@modules/observer/index.ts";
import { TUICLibrary } from "@content/library.ts";
import { TUICI18N } from "@modules/i18n";
import { applySystemCss, addCssElement, applyDataCss, applyCustomIcon, applyDefaultStyle } from "@content/applyCSS.ts";
import { runSafemode } from "@modules/settings/safemode/safemode";
import { isSafemode } from "@modules/settings/safemode/isSafemode.ts";
import { startTluiObserver } from "@shared/tlui/observer.ts";
import { TUICPref } from "@modules/index.ts";
import { initIconObserverFunction } from "@modules/observer/functions/changeIcon.ts";
import { titleObserverFunction } from "@modules/observer/titleObserver.ts";
import { updateClasses } from "./modules/htmlClass/classManager";
import { placeSettingObserver } from "./modules/settings";
import { placePrintPrefButton } from "./printPref";
import { getPref, mergeDefaultPref, setPref, updatePref } from "@modules/pref";
import { waitForElement } from "@modules/utils/controlElements";

(async () => {
if (location.href === "https://twitter.com/ja/tos") {
Expand All @@ -38,13 +38,13 @@ import { placePrintPrefButton } from "./printPref";
TUICI18N.fetch(),

// NOTE: 設定の更新
TUICPref.updatePref(),
updatePref(),

// NOTE: Twitter のレンダリングを待機
TUICLibrary.waitForElement("#react-root"),
waitForElement("#react-root"),
]);

TUICPref.setPref("", TUICPref.mergeDefaultPref(TUICPref.getPref("")));
setPref("", mergeDefaultPref(getPref("")));

// 起動メッセージ
console.log(
Expand Down Expand Up @@ -77,7 +77,7 @@ import { placePrintPrefButton } from "./printPref";
}

// タイトル変更のためのObserver
TUICLibrary.waitForElement("title").then(titleObserverFunction);
waitForElement("title").then(titleObserverFunction);

// TLUI用のObserver
startTluiObserver();
Expand Down
176 changes: 0 additions & 176 deletions src/content/library.ts
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions src/content/modules/index.ts
View file
Open in desktop

This file was deleted.

26 changes: 13 additions & 13 deletions src/content/modules/observer/functions/changeIcon.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@ import DOG from "@content/icons/logo/dog.png?url";
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";
import { getPref } from "@modules/pref";
import { hideElement, processElement } from "@modules/utils/controlElements";

let iconObserver: MutationObserver | null = null;

Expand All @@ -23,22 +24,21 @@ const iconObserverFunc = (elem: Element) => {
});
}
};

function changeIconProcess(elem: Element, base: Element) {
const favicon = document.querySelector<HTMLLinkElement>(`[rel="shortcut icon"]`);
const changeFavicon = TUICPref.getPref("twitterIcon.options.faviconSet");
switch (TUICPref.getPref("twitterIcon.icon")) {
const changeFavicon = getPref("twitterIcon.options.faviconSet");
switch (getPref("twitterIcon.icon")) {
case "invisible":
if (favicon && changeFavicon) {
favicon.href = chrome.runtime.getURL(EMPTY);
}
elem.classList.add("TUIC_SVGDISPNONE");
base.hide();
hideElement(base);
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;
Expand All @@ -50,16 +50,16 @@ function changeIconProcess(elem: Element, base: Element) {
break;
case "custom":
if (favicon && changeFavicon) {
const imageURL = localStorage.getItem(TUICPref.getPref("twitterIcon.options.roundIcon") ? "TUIC_IconImg_Favicon" : "TUIC_IconImg");
const imageURL = localStorage.getItem(getPref("twitterIcon.options.roundIcon") ? "TUIC_IconImg_Favicon" : "TUIC_IconImg");
favicon.href = imageURL ?? chrome.runtime.getURL(EMPTY);
}
elem.classList.add("TUIC_SVGDISPNONE", "TUICTwitterIcon_IconImg");
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;
Expand All @@ -70,7 +70,7 @@ function changeIconProcess(elem: Element, base: Element) {
elem.classList.add("TUIC_NOTSVGDISPNONE");
break;
}
elem.process();
processElement(elem);
if (favicon && !changeFavicon) {
favicon.href = "//abs.twimg.com/favicons/twitter.3.ico";
}
Expand Down
4 changes: 2 additions & 2 deletions src/content/modules/observer/functions/fixDM.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { TUICPref } from "../..";
import { render } from "solid-js/web";
import { IconElement } from "@content/modules/observer/resources/dmIcon";
import { getPref } from "@modules/pref";

export function dmPage() {
if (TUICPref.getPref("dmPage.showIcon")) {
if (getPref("dmPage.showIcon")) {
if (
document.querySelector(
`:is([data-testid="DM_Conversation_Avatar"]:not([data-testid="conversation"] *) [data-testid="UserAvatar-Container-unknown"] [role="presentation"] > div+div+div > div > div > div > div,[data-testid="DmScrollerContainer"] [data-testid="UserAvatar-Container-unknown"]:not([href$="/followers_you_follow"] *) [style*="background-image:"])`,
Expand Down
Loading
Loading