From c2e9be30268537bf1560445a45a2e42c08042bb8 Mon Sep 17 00:00:00 2001 From: hayao Date: Sat, 28 Oct 2023 00:30:01 +0900 Subject: [PATCH 01/14] Update: New class structure --- .vscode/settings.json | 3 +- src/class/Kyomu/index.ts | 14 +++--- src/class/Media/index.ts | 10 ++-- src/class/Moodle/DisableRainbow.ts | 6 +-- src/class/Moodle/EnableRainbow.ts | 14 +++--- src/class/MyLibrary/index.ts | 6 +-- src/class/SSO/index.ts | 2 +- src/class/UnivWebsite/ClassApplicator.ts | 62 ++++++++++++++++++++++++ src/class/UnivWebsite/index.ts | 54 +++++---------------- src/utils/loadGamingWebsite.ts | 4 +- 10 files changed, 104 insertions(+), 71 deletions(-) create mode 100644 src/class/UnivWebsite/ClassApplicator.ts diff --git a/.vscode/settings.json b/.vscode/settings.json index 8ed726b..3a3afb7 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -15,5 +15,6 @@ }, "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" - } + }, + "typescript.tsserver.experimental.enableProjectDiagnostics": true, } diff --git a/src/class/Kyomu/index.ts b/src/class/Kyomu/index.ts index a26b81b..d1abf80 100644 --- a/src/class/Kyomu/index.ts +++ b/src/class/Kyomu/index.ts @@ -14,19 +14,19 @@ Kyomu.enableRainbow = function () { } // ページ遷移リンク - this.rainbowText.apply(".commonTopPageLink", ".commonTopPageLinkWithPadding"); + this.rainbow.text.apply(".commonTopPageLink", ".commonTopPageLinkWithPadding"); - this.rainbowText.apply( + this.rainbow.text.apply( "#CtlInfLstBfrLginEmrgncy_LblTitle", "#CtlInfLstBfrLginNrml_LblTitle", "#AllAnnualList_LblTitle", "#JeLblSyllabiHeader_lbl", ); - this.rainbowBg.apply(".infoListEntryOrgName"); - this.rainbowBg.apply(".infoListBeforeLoginGrid"); + this.rainbow.bg.apply(".infoListEntryOrgName"); + this.rainbow.bg.apply(".infoListBeforeLoginGrid"); // ログイン後のトップページ - this.rainbowBg.apply(".top_title_header", ".top_now_title"); + this.rainbow.bg.apply(".top_title_header", ".top_now_title"); // トップページのウェルカムメッセージ changeQueryInnerHTML("#loginHeader_lblWelcome_1_lbl", "よおこそ、群馬大学ゲーミング教務システムへ"); @@ -39,7 +39,7 @@ Kyomu.enableRainbow = function () { changeQueryInnerHTML("#AllAnnualList_LblTitle", "ゲーミング ライフ スタイル"); // 受信メッセージ一覧 - this.rainbowBgShadow.apply("#ctl00_phContents_ctlMesReceive_gridMes tr"); + this.rainbow.bgShadow.apply("#ctl00_phContents_ctlMesReceive_gridMes tr"); // リンクを挿入 if (["/portal/login.aspx", "/portal/"].includes(location.pathname.toLowerCase())) { @@ -52,5 +52,5 @@ Kyomu.enableRainbow = function () { } //ヘッダー上部の名前 - this.rainbowText.apply("#ctl00_bhHeader_lblName"); + this.rainbow.text.apply("#ctl00_bhHeader_lblName"); }; diff --git a/src/class/Media/index.ts b/src/class/Media/index.ts index a3203e9..b21f664 100644 --- a/src/class/Media/index.ts +++ b/src/class/Media/index.ts @@ -4,9 +4,9 @@ import { GundaiWebSite } from "../UnivWebsite"; export const Media = new GundaiWebSite("media"); Media.enableRainbow = function () { - this.rainbowBgShadow.apply(".banner_list li"); - this.rainbowBgShadow.apply(".banner_list li a"); - this.rainbowBgShadow.apply(".menu_category h3"); - this.rainbowText.apply("#news_list li a"); - this.rainbowBg.apply("#news_category_list .active"); + this.rainbow.bgShadow.apply(".banner_list li"); + this.rainbow.bgShadow.apply(".banner_list li a"); + this.rainbow.bgShadow.apply(".menu_category h3"); + this.rainbow.text.apply("#news_list li a"); + this.rainbow.bg.apply("#news_category_list .active"); }; diff --git a/src/class/Moodle/DisableRainbow.ts b/src/class/Moodle/DisableRainbow.ts index 8d34612..ee9d133 100644 --- a/src/class/Moodle/DisableRainbow.ts +++ b/src/class/Moodle/DisableRainbow.ts @@ -2,9 +2,9 @@ import changeQueryInnerHTML from "../../utils/changeQueryInnerHTML"; import { Moodle } from "./type"; export const DisableRainbowBg = (moodle: Moodle) => { - moodle.rainbowBg.remove(".navbar", ".addinghtml"); - moodle.rainbowBg.remove(".page-header-headings h1"); - moodle.rainbowBg.remove("a"); + moodle.rainbow.bg.remove(".navbar", ".addinghtml"); + moodle.rainbow.bg.remove(".page-header-headings h1"); + moodle.rainbow.bg.remove("a"); }; export const ReplaceImagesToDefault = () => { diff --git a/src/class/Moodle/EnableRainbow.ts b/src/class/Moodle/EnableRainbow.ts index 98a4249..cd18590 100644 --- a/src/class/Moodle/EnableRainbow.ts +++ b/src/class/Moodle/EnableRainbow.ts @@ -5,16 +5,16 @@ import { Moodle } from "./type"; import { MoodleAdditionalInfo } from "./type"; export const EnableRainbowTextAndBg = (moodle: Moodle) => { - moodle.rainbowBg.apply(".navbar", "#action-menu-0-menu"); + moodle.rainbow.bg.apply(".navbar", "#action-menu-0-menu"); - moodle.rainbowText.apply(".page-header-headings h1"); - moodle.rainbowText.apply("#page-content a:not(#inst301 a)"); - moodle.rainbowText.apply("#instance-301-header"); + moodle.rainbow.text.apply(".page-header-headings h1"); + moodle.rainbow.text.apply("#page-content a:not(#inst301 a)"); + moodle.rainbow.text.apply("#instance-301-header"); // rainbowBgの中のrainbowTextを無効化 - const rainbowBgSelector = moodle.rainbowBg.selector(); - const targetElementsSelector = `${rainbowBgSelector} ${moodle.rainbowText.selector()}`; - removeClass([targetElementsSelector], moodle.rainbowText.base); + const rainbowBgSelector = moodle.rainbow.bg.selector(); + const targetElementsSelector = `${rainbowBgSelector} ${moodle.rainbow.text.selector()}`; + removeClass([targetElementsSelector], moodle.rainbow.text.base); }; export const InjectLink = () => { diff --git a/src/class/MyLibrary/index.ts b/src/class/MyLibrary/index.ts index 4c204bd..a69413a 100644 --- a/src/class/MyLibrary/index.ts +++ b/src/class/MyLibrary/index.ts @@ -13,11 +13,11 @@ MyLibrary.enableRainbow = function () { ChangeQueryInnerHTML("#ssoLoginTitle", "全学ゲーミングアカウントでログイン"); // フッターをレインボー - this.rainbowBg.apply("#footer"); + this.rainbow.bg.apply("#footer"); document.getElementById("footer")!.id = ""; } // ヘッダーとタイトルをレインボー - this.rainbowBg.apply("#header", "h2"); - this.rainbowText.apply("#lblTitle", "#mainTitle"); + this.rainbow.bg.apply("#header", "h2"); + this.rainbow.text.apply("#lblTitle", "#mainTitle"); }; diff --git a/src/class/SSO/index.ts b/src/class/SSO/index.ts index 7a71e29..87363b0 100644 --- a/src/class/SSO/index.ts +++ b/src/class/SSO/index.ts @@ -6,6 +6,6 @@ import { GundaiWebSite } from "../UnivWebsite"; export const SSO = new GundaiWebSite("sso"); SSO.enableRainbow = () => { - SSO.rainbowBg.apply(".header_column", ".input_form", ".input_column"); + SSO.rainbow.bg.apply(".header_column", ".input_form", ".input_column"); changeQueryInnerHTML(".product", "群馬大学ゲーミングサインオンシステム"); }; diff --git a/src/class/UnivWebsite/ClassApplicator.ts b/src/class/UnivWebsite/ClassApplicator.ts new file mode 100644 index 0000000..8e1f136 --- /dev/null +++ b/src/class/UnivWebsite/ClassApplicator.ts @@ -0,0 +1,62 @@ +import { addClass, Elements, removeClass } from "../../utils/addClass"; + +const rainbowBg = "rainbow-bg"; +const rainbowText = "rainbow-text"; +const rainbowBgShadow = "rainbow-bg-shadow"; +const rainbowTextShadow = "rainbow-text-shadow"; + +// 要素にclassNameを追加します +// baseとclassesで追加するclassNameを指定し、applyで適用、removeで削除します +// selectorで適用されるセレクタを取得できます +// baseは初期化に必ず指定する必要があり書き換えるべきではありませんが、classesは追加で個別の設定を行うために指定できます +export class classApplicator { + base: string[]; + classes: string[]; + constructor(base: string[]) { + this.base = base; + this.classes = []; + } + + apply(...elements: Elements[]) { + addClass(elements, [...this.base, ...this.classes]); + } + remove(...elements: Elements[]) { + removeClass(elements, [...this.base, ...this.classes]); + } + selector() { + if (this.classes.length === 0) return `.${this.base}`; + else return `.${this.base}.${this.classes.join(".")}`; + } +} + +// classApplicatorを用いて虹色にするクラス +export class RainbowApplicator { + text: classApplicator; + bg: classApplicator; + textShadow: classApplicator; + bgShadow: classApplicator; + + constructor() { + this.text = new classApplicator([rainbowText]); + this.bg = new classApplicator([rainbowBg]); + this.textShadow = new classApplicator([rainbowText, rainbowTextShadow]); + this.bgShadow = new classApplicator([rainbowBg, rainbowBgShadow]); + } +} + +// classApplicatorを用いてダークテーマにするクラス +export class DarkApplicator { + base: classApplicator; + baseDarker: classApplicator; + content: classApplicator; + neutral: classApplicator; + accent: classApplicator; + + constructor() { + this.base = new classApplicator(["dark-base"]); + this.baseDarker = new classApplicator(["dark-base-darker"]); + this.content = new classApplicator(["dark-content"]); + this.neutral = new classApplicator(["dark-neutral"]); + this.accent = new classApplicator(["dark-accent"]); + } +} diff --git a/src/class/UnivWebsite/index.ts b/src/class/UnivWebsite/index.ts index cb35c2a..a69cac6 100644 --- a/src/class/UnivWebsite/index.ts +++ b/src/class/UnivWebsite/index.ts @@ -1,15 +1,10 @@ // 無駄とは人生である。無駄を極めよ。無駄を愛せ。無駄を生きろ。 // 無駄を以て物を成す者は、無駄を以て物を滅ぼす者に勝る。x -import { addClass, Elements, removeClass } from "../../utils/addClass"; import { StorageTool } from "../StorageTool"; +import { DarkApplicator, RainbowApplicator } from "./ClassApplicator"; //import Storage from "../../utils/Storage"; -const rainbowBg = "rainbow-bg"; -const rainbowText = "rainbow-text"; -const rainbowBgShadow = "rainbow-bg-shadow"; -const rainbowTextShadow = "rainbow-text-shadow"; - // UnivWebSiteはゲーミング化するウェブサイトを定義したクラス // 型変数とAdditionalInfoプロパティによって任意の情報を追加できる export class UnivWebsite { @@ -17,21 +12,16 @@ export class UnivWebsite { additionalInfo: T; // 型変数使うとかっこいいよね storage: StorageTool; - rainbowText: Rainbow; - rainbowBg: Rainbow; - - rainbowTextShadow: Rainbow; - rainbowBgShadow: Rainbow; + rainbow: RainbowApplicator; + dark: DarkApplicator; constructor(id: string) { this.id = id; this.additionalInfo = {} as T; this.storage = new StorageTool(id); - this.rainbowText = new Rainbow([rainbowText]); - this.rainbowBg = new Rainbow([rainbowBg]); - this.rainbowTextShadow = new Rainbow([rainbowText, rainbowTextShadow]); - this.rainbowBgShadow = new Rainbow([rainbowBg, rainbowBgShadow]); + this.rainbow = new RainbowApplicator(); + this.dark = new DarkApplicator(); this.enableRainbow.bind(this); this.enableHidden.bind(this); @@ -46,43 +36,23 @@ export class UnivWebsite { disableHidden() {} // 上記の関数を実行するためのラッパー - enable() { + static enable(site: UnivWebsite) { // CSSのためにHTML要素にデータ属性を追加 document.documentElement.dataset.gaming_gundai = "true"; - this.storage.set("enabled", "true"); - this.enableRainbow(); + site.storage.set("enabled", "true"); + site.enableRainbow(); new StorageTool("other").getBool("enabled-hidden").then((enabled) => { - if (enabled) this.enableHidden(); + if (enabled) site.enableHidden(); }); } - disable() { + static disable(site: UnivWebsite) { // CSSのためにHTML要素にデータ属性を追加 document.documentElement.dataset.gaming_gundai = "false"; - this.storage.set("enabled", "false"); - this.disableRainbow(); + site.storage.set("enabled", "false"); + site.disableRainbow(); //this.DisableHidden(); } } export class GundaiWebSite extends UnivWebsite {} - -export class Rainbow { - base: string[]; - classes: string[]; - constructor(base: string[]) { - this.base = base; - this.classes = []; - } - - apply(...elements: Elements[]) { - addClass(elements, [...this.base, ...this.classes]); - } - remove(...elements: Elements[]) { - removeClass(elements, [...this.base, ...this.classes]); - } - selector() { - if (this.classes.length === 0) return `.${this.base}`; - else return `.${this.base}.${this.classes.join(".")}`; - } -} diff --git a/src/utils/loadGamingWebsite.ts b/src/utils/loadGamingWebsite.ts index 46d728e..c31441a 100644 --- a/src/utils/loadGamingWebsite.ts +++ b/src/utils/loadGamingWebsite.ts @@ -7,9 +7,9 @@ export default function loadGamingWebsite(website: UnivWebsite) { window.addEventListener("load", async () => { const isEnabled = await website.storage.get("enabled"); if (isTrue(isEnabled)) { - website.enable(); + UnivWebsite.enable(website); } else { - website.disable(); + UnivWebsite.enable(website); } }); } From fe757645ca1e2df3370c586ffde274eecfd7764b Mon Sep 17 00:00:00 2001 From: hayao Date: Sat, 28 Oct 2023 00:50:46 +0900 Subject: [PATCH 02/14] Update: Move enable functions --- .vscode/settings.json | 2 +- .../{UnivWebsite => }/ClassApplicator.ts | 16 ++++++++++--- src/class/Kyomu/index.ts | 16 ++++++------- src/class/Media/index.ts | 12 +++++----- src/class/Moodle/DisableRainbow.ts | 10 ++++---- src/class/Moodle/EnableRainbow.ts | 18 +++++++-------- src/class/Moodle/index.ts | 10 ++++---- src/class/MyLibrary/index.ts | 8 +++---- src/class/SSO/index.ts | 4 ++-- src/class/UnivWebsite/index.ts | 23 ++++++------------- 10 files changed, 60 insertions(+), 59 deletions(-) rename src/class/{UnivWebsite => }/ClassApplicator.ts (84%) diff --git a/.vscode/settings.json b/.vscode/settings.json index 3a3afb7..df862f0 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -16,5 +16,5 @@ "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, - "typescript.tsserver.experimental.enableProjectDiagnostics": true, + "typescript.tsserver.experimental.enableProjectDiagnostics": true } diff --git a/src/class/UnivWebsite/ClassApplicator.ts b/src/class/ClassApplicator.ts similarity index 84% rename from src/class/UnivWebsite/ClassApplicator.ts rename to src/class/ClassApplicator.ts index 8e1f136..7280452 100644 --- a/src/class/UnivWebsite/ClassApplicator.ts +++ b/src/class/ClassApplicator.ts @@ -1,4 +1,4 @@ -import { addClass, Elements, removeClass } from "../../utils/addClass"; +import { addClass, Elements, removeClass } from "../utils/addClass"; const rainbowBg = "rainbow-bg"; const rainbowText = "rainbow-text"; @@ -29,14 +29,20 @@ export class classApplicator { } } +export class ApplicatorBase { + enable() {} + disable() {} +} + // classApplicatorを用いて虹色にするクラス -export class RainbowApplicator { +export class RainbowApplicator extends ApplicatorBase { text: classApplicator; bg: classApplicator; textShadow: classApplicator; bgShadow: classApplicator; constructor() { + super(); this.text = new classApplicator([rainbowText]); this.bg = new classApplicator([rainbowBg]); this.textShadow = new classApplicator([rainbowText, rainbowTextShadow]); @@ -44,8 +50,11 @@ export class RainbowApplicator { } } +// 隠し機能を有効化するクラス +export class HiddenApplicator extends ApplicatorBase {} + // classApplicatorを用いてダークテーマにするクラス -export class DarkApplicator { +export class DarkApplicator extends ApplicatorBase { base: classApplicator; baseDarker: classApplicator; content: classApplicator; @@ -53,6 +62,7 @@ export class DarkApplicator { accent: classApplicator; constructor() { + super(); this.base = new classApplicator(["dark-base"]); this.baseDarker = new classApplicator(["dark-base-darker"]); this.content = new classApplicator(["dark-content"]); diff --git a/src/class/Kyomu/index.ts b/src/class/Kyomu/index.ts index d1abf80..a6368c0 100644 --- a/src/class/Kyomu/index.ts +++ b/src/class/Kyomu/index.ts @@ -5,7 +5,7 @@ import { GundaiWebSite } from "../UnivWebsite"; export const Kyomu = new GundaiWebSite("kyomu"); -Kyomu.enableRainbow = function () { +Kyomu.rainbow.enable = function () { // ログインボタン // https://qiita.com/Sekky0905/items/a88721f2af41050c93f2 const loginBtn: HTMLInputElement = document.getElementById("ctl21_btnLoginShibbolethGunma"); @@ -14,19 +14,19 @@ Kyomu.enableRainbow = function () { } // ページ遷移リンク - this.rainbow.text.apply(".commonTopPageLink", ".commonTopPageLinkWithPadding"); + this.text.apply(".commonTopPageLink", ".commonTopPageLinkWithPadding"); - this.rainbow.text.apply( + this.text.apply( "#CtlInfLstBfrLginEmrgncy_LblTitle", "#CtlInfLstBfrLginNrml_LblTitle", "#AllAnnualList_LblTitle", "#JeLblSyllabiHeader_lbl", ); - this.rainbow.bg.apply(".infoListEntryOrgName"); - this.rainbow.bg.apply(".infoListBeforeLoginGrid"); + this.bg.apply(".infoListEntryOrgName"); + this.bg.apply(".infoListBeforeLoginGrid"); // ログイン後のトップページ - this.rainbow.bg.apply(".top_title_header", ".top_now_title"); + this.bg.apply(".top_title_header", ".top_now_title"); // トップページのウェルカムメッセージ changeQueryInnerHTML("#loginHeader_lblWelcome_1_lbl", "よおこそ、群馬大学ゲーミング教務システムへ"); @@ -39,7 +39,7 @@ Kyomu.enableRainbow = function () { changeQueryInnerHTML("#AllAnnualList_LblTitle", "ゲーミング ライフ スタイル"); // 受信メッセージ一覧 - this.rainbow.bgShadow.apply("#ctl00_phContents_ctlMesReceive_gridMes tr"); + this.bgShadow.apply("#ctl00_phContents_ctlMesReceive_gridMes tr"); // リンクを挿入 if (["/portal/login.aspx", "/portal/"].includes(location.pathname.toLowerCase())) { @@ -52,5 +52,5 @@ Kyomu.enableRainbow = function () { } //ヘッダー上部の名前 - this.rainbow.text.apply("#ctl00_bhHeader_lblName"); + this.text.apply("#ctl00_bhHeader_lblName"); }; diff --git a/src/class/Media/index.ts b/src/class/Media/index.ts index b21f664..bb29418 100644 --- a/src/class/Media/index.ts +++ b/src/class/Media/index.ts @@ -3,10 +3,10 @@ import { GundaiWebSite } from "../UnivWebsite"; export const Media = new GundaiWebSite("media"); -Media.enableRainbow = function () { - this.rainbow.bgShadow.apply(".banner_list li"); - this.rainbow.bgShadow.apply(".banner_list li a"); - this.rainbow.bgShadow.apply(".menu_category h3"); - this.rainbow.text.apply("#news_list li a"); - this.rainbow.bg.apply("#news_category_list .active"); +Media.rainbow.enable = function () { + this.bgShadow.apply(".banner_list li"); + this.bgShadow.apply(".banner_list li a"); + this.bgShadow.apply(".menu_category h3"); + this.text.apply("#news_list li a"); + this.bg.apply("#news_category_list .active"); }; diff --git a/src/class/Moodle/DisableRainbow.ts b/src/class/Moodle/DisableRainbow.ts index ee9d133..7734897 100644 --- a/src/class/Moodle/DisableRainbow.ts +++ b/src/class/Moodle/DisableRainbow.ts @@ -1,10 +1,10 @@ import changeQueryInnerHTML from "../../utils/changeQueryInnerHTML"; -import { Moodle } from "./type"; +import { RainbowApplicator } from "../ClassApplicator"; -export const DisableRainbowBg = (moodle: Moodle) => { - moodle.rainbow.bg.remove(".navbar", ".addinghtml"); - moodle.rainbow.bg.remove(".page-header-headings h1"); - moodle.rainbow.bg.remove("a"); +export const DisableRainbowBg = (rainbow: RainbowApplicator) => { + rainbow.bg.remove(".navbar", ".addinghtml"); + rainbow.bg.remove(".page-header-headings h1"); + rainbow.bg.remove("a"); }; export const ReplaceImagesToDefault = () => { diff --git a/src/class/Moodle/EnableRainbow.ts b/src/class/Moodle/EnableRainbow.ts index cd18590..be6138e 100644 --- a/src/class/Moodle/EnableRainbow.ts +++ b/src/class/Moodle/EnableRainbow.ts @@ -1,20 +1,20 @@ import { removeClass } from "../../utils/addClass"; import changeQueryInnerHTML from "../../utils/changeQueryInnerHTML"; +import { RainbowApplicator } from "../ClassApplicator"; import { GundaiWebSite } from "../UnivWebsite"; -import { Moodle } from "./type"; import { MoodleAdditionalInfo } from "./type"; -export const EnableRainbowTextAndBg = (moodle: Moodle) => { - moodle.rainbow.bg.apply(".navbar", "#action-menu-0-menu"); +export const EnableRainbowTextAndBg = (rainbow: RainbowApplicator) => { + rainbow.bg.apply(".navbar", "#action-menu-0-menu"); - moodle.rainbow.text.apply(".page-header-headings h1"); - moodle.rainbow.text.apply("#page-content a:not(#inst301 a)"); - moodle.rainbow.text.apply("#instance-301-header"); + rainbow.text.apply(".page-header-headings h1"); + rainbow.text.apply("#page-content a:not(#inst301 a)"); + rainbow.text.apply("#instance-301-header"); // rainbowBgの中のrainbowTextを無効化 - const rainbowBgSelector = moodle.rainbow.bg.selector(); - const targetElementsSelector = `${rainbowBgSelector} ${moodle.rainbow.text.selector()}`; - removeClass([targetElementsSelector], moodle.rainbow.text.base); + const rainbowBgSelector = rainbow.bg.selector(); + const targetElementsSelector = `${rainbowBgSelector} ${rainbow.text.selector()}`; + removeClass([targetElementsSelector], rainbow.text.base); }; export const InjectLink = () => { diff --git a/src/class/Moodle/index.ts b/src/class/Moodle/index.ts index ae8e959..bbcb626 100644 --- a/src/class/Moodle/index.ts +++ b/src/class/Moodle/index.ts @@ -10,11 +10,11 @@ Moodle.additionalInfo = { headerText: " Gaming Edition🎮", }; -Moodle.enableRainbow = function () { +Moodle.rainbow.enable = function () { EnableRainbowTextAndBg(this); InjectLink(); ReplaceImagesToGamimg(); - ReplaceTextToGaimg(this); + ReplaceTextToGaimg(Moodle); // メニューバーでホバー時にclassを追加 document.querySelectorAll(".moremenu .nav-link").forEach((e) => { @@ -30,17 +30,17 @@ Moodle.enableRainbow = function () { }); }; -Moodle.disableRainbow = function () { +Moodle.rainbow.disable = function () { DisableRainbowBg(this); ReplaceImagesToDefault(); - const headerText = this.additionalInfo.headerText; + const headerText = Moodle.additionalInfo.headerText; document.querySelectorAll(".page-header-headings h1").forEach((e) => { if (e.innerHTML.includes(headerText)) e.innerHTML.replace(headerText, ""); }); }; -Moodle.enableHidden = () => { +Moodle.hidden.enable = () => { const cardElement = document.querySelector(".card-text .no-overflow"); if (!cardElement) return; const playCountUnderTextElement = cardElement.getElementsByTagName("p")[1]; diff --git a/src/class/MyLibrary/index.ts b/src/class/MyLibrary/index.ts index a69413a..3389947 100644 --- a/src/class/MyLibrary/index.ts +++ b/src/class/MyLibrary/index.ts @@ -3,7 +3,7 @@ import { GundaiWebSite } from "../UnivWebsite"; export const MyLibrary = new GundaiWebSite("mylibrary"); -MyLibrary.enableRainbow = function () { +MyLibrary.rainbow.enable = function () { if (location.pathname == "/portal/portal/selectLogin/") { //document.getElementById("explanation") ChangeQueryInnerHTML( @@ -13,11 +13,11 @@ MyLibrary.enableRainbow = function () { ChangeQueryInnerHTML("#ssoLoginTitle", "全学ゲーミングアカウントでログイン"); // フッターをレインボー - this.rainbow.bg.apply("#footer"); + this.bg.apply("#footer"); document.getElementById("footer")!.id = ""; } // ヘッダーとタイトルをレインボー - this.rainbow.bg.apply("#header", "h2"); - this.rainbow.text.apply("#lblTitle", "#mainTitle"); + this.bg.apply("#header", "h2"); + this.text.apply("#lblTitle", "#mainTitle"); }; diff --git a/src/class/SSO/index.ts b/src/class/SSO/index.ts index 87363b0..53f36db 100644 --- a/src/class/SSO/index.ts +++ b/src/class/SSO/index.ts @@ -5,7 +5,7 @@ import changeQueryInnerHTML from "../../utils/changeQueryInnerHTML"; import { GundaiWebSite } from "../UnivWebsite"; export const SSO = new GundaiWebSite("sso"); -SSO.enableRainbow = () => { - SSO.rainbow.bg.apply(".header_column", ".input_form", ".input_column"); +SSO.rainbow.enable = function () { + this.bg.apply(".header_column", ".input_form", ".input_column"); changeQueryInnerHTML(".product", "群馬大学ゲーミングサインオンシステム"); }; diff --git a/src/class/UnivWebsite/index.ts b/src/class/UnivWebsite/index.ts index a69cac6..0130b11 100644 --- a/src/class/UnivWebsite/index.ts +++ b/src/class/UnivWebsite/index.ts @@ -1,8 +1,8 @@ // 無駄とは人生である。無駄を極めよ。無駄を愛せ。無駄を生きろ。 // 無駄を以て物を成す者は、無駄を以て物を滅ぼす者に勝る。x +import { DarkApplicator, HiddenApplicator, RainbowApplicator } from "../ClassApplicator"; import { StorageTool } from "../StorageTool"; -import { DarkApplicator, RainbowApplicator } from "./ClassApplicator"; //import Storage from "../../utils/Storage"; // UnivWebSiteはゲーミング化するウェブサイトを定義したクラス @@ -14,6 +14,7 @@ export class UnivWebsite { rainbow: RainbowApplicator; dark: DarkApplicator; + hidden: HiddenApplicator; constructor(id: string) { this.id = id; @@ -22,36 +23,26 @@ export class UnivWebsite { this.rainbow = new RainbowApplicator(); this.dark = new DarkApplicator(); - - this.enableRainbow.bind(this); - this.enableHidden.bind(this); - this.disableRainbow.bind(this); - this.disableHidden.bind(this); + this.hidden = new HiddenApplicator(); } - // これらのメソッドは継承先でオーバーライドする - enableRainbow() {} - enableHidden() {} - disableRainbow() {} - disableHidden() {} - // 上記の関数を実行するためのラッパー static enable(site: UnivWebsite) { // CSSのためにHTML要素にデータ属性を追加 document.documentElement.dataset.gaming_gundai = "true"; site.storage.set("enabled", "true"); - site.enableRainbow(); + site.rainbow.enable(); new StorageTool("other").getBool("enabled-hidden").then((enabled) => { - if (enabled) site.enableHidden(); + if (enabled) site.hidden.enable(); }); } static disable(site: UnivWebsite) { // CSSのためにHTML要素にデータ属性を追加 document.documentElement.dataset.gaming_gundai = "false"; site.storage.set("enabled", "false"); - site.disableRainbow(); - //this.DisableHidden(); + site.rainbow.disable(); + site.hidden.disable(); } } From 3eed5a2d6466cfea2514e00e5e8bd4d61412c78f Mon Sep 17 00:00:00 2001 From: hayao Date: Sat, 28 Oct 2023 00:55:35 +0900 Subject: [PATCH 03/14] Fix: typo --- src/scripts/content_moodle.ts | 13 ------------- src/utils/loadGamingWebsite.ts | 3 +-- 2 files changed, 1 insertion(+), 15 deletions(-) diff --git a/src/scripts/content_moodle.ts b/src/scripts/content_moodle.ts index 6e791a2..7b5772d 100644 --- a/src/scripts/content_moodle.ts +++ b/src/scripts/content_moodle.ts @@ -3,17 +3,4 @@ import "/styles/moodle.scss"; import { Moodle } from "../class"; import loadGamingWebsite from "../utils/loadGamingWebsite"; -//window.addEventListener("load", async () => await runFuncIfEnabled(Moodle.EnableRainbow)); loadGamingWebsite(Moodle); - -// あとでリロード無しでゲーミングモード解除を実装する -/* -chrome.action.onClicked.addListener(async () => { - const isEnable = await isEnabled(); - if (isEnable) { - EnableRainbow(); - } else { - DisableRainbow(); - } -}); -*/ diff --git a/src/utils/loadGamingWebsite.ts b/src/utils/loadGamingWebsite.ts index c31441a..7301013 100644 --- a/src/utils/loadGamingWebsite.ts +++ b/src/utils/loadGamingWebsite.ts @@ -1,6 +1,5 @@ import { UnivWebsite } from "../class/UnivWebsite"; import isTrue from "./isTrue"; -//import RunFuncIfEnabled from "./RunFuncIfEnabled"; // ウィンドウが読み込まれたらGundaiWebsiteのEnableRainbowを実行する export default function loadGamingWebsite(website: UnivWebsite) { @@ -9,7 +8,7 @@ export default function loadGamingWebsite(website: UnivWebsite) { if (isTrue(isEnabled)) { UnivWebsite.enable(website); } else { - UnivWebsite.enable(website); + UnivWebsite.disable(website); } }); } From cdad2e9c7118255fbc7be4d542ad1be3f6619a86 Mon Sep 17 00:00:00 2001 From: hayao Date: Sat, 28 Oct 2023 01:14:52 +0900 Subject: [PATCH 04/14] Update: New load method --- src/class/UnivWebsite/index.ts | 52 +++++++++++++++++++++++----------- src/utils/loadGamingWebsite.ts | 8 +----- 2 files changed, 36 insertions(+), 24 deletions(-) diff --git a/src/class/UnivWebsite/index.ts b/src/class/UnivWebsite/index.ts index 0130b11..d26ed10 100644 --- a/src/class/UnivWebsite/index.ts +++ b/src/class/UnivWebsite/index.ts @@ -26,23 +26,41 @@ export class UnivWebsite { this.hidden = new HiddenApplicator(); } - // 上記の関数を実行するためのラッパー - static enable(site: UnivWebsite) { - // CSSのためにHTML要素にデータ属性を追加 - document.documentElement.dataset.gaming_gundai = "true"; - site.storage.set("enabled", "true"); - site.rainbow.enable(); - - new StorageTool("other").getBool("enabled-hidden").then((enabled) => { - if (enabled) site.hidden.enable(); - }); - } - static disable(site: UnivWebsite) { - // CSSのためにHTML要素にデータ属性を追加 - document.documentElement.dataset.gaming_gundai = "false"; - site.storage.set("enabled", "false"); - site.rainbow.disable(); - site.hidden.disable(); + static async load(site: UnivWebsite) { + const isRainbowEnabled = await site.storage.get("rainbow"); + if (isRainbowEnabled === "true") { + // CSSのためにHTML要素にデータ属性を追加 + document.documentElement.dataset.gaming_gundai = "true"; + site.storage.set("rainbow", "true"); + site.rainbow.enable(); + } else { + // CSSのためにHTML要素にデータ属性を追加 + document.documentElement.dataset.gaming_gundai = "false"; + site.storage.set("rainbow", "false"); + site.rainbow.disable(); + } + + const isDarkEnabled = await site.storage.get("dark"); + if (isDarkEnabled === "true") { + document.documentElement.dataset.gaming_gundai_dark = "true"; + site.storage.set("dark", "true"); + site.dark.enable(); + } else { + document.documentElement.dataset.gaming_gundai_dark = "false"; + site.storage.set("dark", "false"); + site.dark.disable(); + } + + const isHiddenEnabled = await new StorageTool("other").getBool("enabled-hidden"); + if (isHiddenEnabled) { + document.documentElement.dataset.gaming_gundai_hidden = "true"; + site.storage.set("hidden", "true"); + site.hidden.enable(); + } else { + document.documentElement.dataset.gaming_gundai_hidden = "false"; + site.storage.set("hidden", "false"); + site.hidden.disable(); + } } } diff --git a/src/utils/loadGamingWebsite.ts b/src/utils/loadGamingWebsite.ts index 7301013..02d52fb 100644 --- a/src/utils/loadGamingWebsite.ts +++ b/src/utils/loadGamingWebsite.ts @@ -1,14 +1,8 @@ import { UnivWebsite } from "../class/UnivWebsite"; -import isTrue from "./isTrue"; // ウィンドウが読み込まれたらGundaiWebsiteのEnableRainbowを実行する export default function loadGamingWebsite(website: UnivWebsite) { window.addEventListener("load", async () => { - const isEnabled = await website.storage.get("enabled"); - if (isTrue(isEnabled)) { - UnivWebsite.enable(website); - } else { - UnivWebsite.disable(website); - } + UnivWebsite.load(website); }); } From 0785b2173b4916e9d183fa754a14764043579a26 Mon Sep 17 00:00:00 2001 From: hayao Date: Sat, 28 Oct 2023 01:44:48 +0900 Subject: [PATCH 05/14] Update: Prepare for dark mode --- src/class/Moodle/index.ts | 4 ++++ src/class/StorageTool/index.ts | 8 +++++--- src/class/UnivWebsite/index.ts | 7 ++++--- src/components/SwitchItem.tsx | 7 ++++--- src/components/Switches.tsx | 5 +++-- src/components/type.ts | 1 + src/options/pages/Top.tsx | 10 ++++++++-- src/popup/components/Main.tsx | 2 +- src/scripts/content_sso.ts | 2 -- 9 files changed, 30 insertions(+), 16 deletions(-) create mode 100644 src/components/type.ts diff --git a/src/class/Moodle/index.ts b/src/class/Moodle/index.ts index bbcb626..b9864d3 100644 --- a/src/class/Moodle/index.ts +++ b/src/class/Moodle/index.ts @@ -48,3 +48,7 @@ Moodle.hidden.enable = () => { playCountUnderTextElement.innerHTML = "想定最大利用者乳首数：4,000"; }; + +Moodle.dark.enable = () => { + Moodle.dark.base.apply("#page"); +}; diff --git a/src/class/StorageTool/index.ts b/src/class/StorageTool/index.ts index 33dc4c2..79bf2de 100644 --- a/src/class/StorageTool/index.ts +++ b/src/class/StorageTool/index.ts @@ -1,5 +1,7 @@ import IsTrue from "../../utils/isTrue"; +type Keys = "dark" | "rainbow" | "enabled-hidden" | "show-hidden-option" | "installed"; + export class StorageTool { id: string; constructor(id: string) { @@ -11,7 +13,7 @@ export class StorageTool { } // eslint-disable-next-line @typescript-eslint/no-explicit-any - async set(key: string, value: any) { + async set(key: Keys, value: any) { let newData = { [key]: value }; const storage = StorageTool.getChromeStorage(); if (!storage) { @@ -24,7 +26,7 @@ export class StorageTool { storage.set({ [this.id]: newData }); } - async getBool(key: string) { + async getBool(key: Keys) { const storage = StorageTool.getChromeStorage(); if (!storage) { console.error("Storage is not supported"); @@ -35,7 +37,7 @@ export class StorageTool { return IsTrue(rawdata); } - async get(key: string) { + async get(key: Keys) { const storage = StorageTool.getChromeStorage(); if (!storage) { console.error("Storage is not supported"); diff --git a/src/class/UnivWebsite/index.ts b/src/class/UnivWebsite/index.ts index d26ed10..a51c6d9 100644 --- a/src/class/UnivWebsite/index.ts +++ b/src/class/UnivWebsite/index.ts @@ -51,14 +51,15 @@ export class UnivWebsite { site.dark.disable(); } - const isHiddenEnabled = await new StorageTool("other").getBool("enabled-hidden"); + const otherStorage = new StorageTool("other"); + const isHiddenEnabled = await otherStorage.getBool("enabled-hidden"); if (isHiddenEnabled) { document.documentElement.dataset.gaming_gundai_hidden = "true"; - site.storage.set("hidden", "true"); + otherStorage.set("enabled-hidden", "true"); site.hidden.enable(); } else { document.documentElement.dataset.gaming_gundai_hidden = "false"; - site.storage.set("hidden", "false"); + site.storage.set("enabled-hidden", "false"); site.hidden.disable(); } } diff --git a/src/components/SwitchItem.tsx b/src/components/SwitchItem.tsx index 809c7ec..8d80f9d 100644 --- a/src/components/SwitchItem.tsx +++ b/src/components/SwitchItem.tsx @@ -6,13 +6,14 @@ import { useCallback, useEffect, useState } from "react"; import { WebSites } from "../class"; import IsTrue from "../utils/isTrue"; import { FrontConfig } from "./config"; +import { Category } from "./type"; -export function SwitchItem({ config, className }: { config: FrontConfig; className?: string }) { +export function SwitchItem({ config, className, category }: { config: FrontConfig; className?: string; category: Category }) { const [enabled, setEnabled] = useState(false); console.log(`Render SwitchItem with ${config.name}`); useEffect(() => { - WebSites[config.id].storage.get("enabled").then((value) => { + WebSites[config.id].storage.get(category).then((value) => { setEnabled(IsTrue(value)); }); }, []); @@ -20,7 +21,7 @@ export function SwitchItem({ config, className }: { config: FrontConfig; classNa const genericChangeHandle = useCallback(() => { return (e: React.ChangeEvent) => { setEnabled(e.target.checked); - WebSites[config.id].storage.set("enabled", e.target.checked.toString()); + WebSites[config.id].storage.set(category, e.target.checked.toString()); chrome.runtime.sendMessage("reload"); }; }, []); diff --git a/src/components/Switches.tsx b/src/components/Switches.tsx index a44731c..a95441a 100644 --- a/src/components/Switches.tsx +++ b/src/components/Switches.tsx @@ -1,11 +1,12 @@ import { FrontConfigs } from "./config"; import { SwitchItem } from "./SwitchItem"; +import { Category } from "./type"; -export function Switches({ className }: { className?: string }) { +export function Switches({ className, category }: { className?: string; category: Category }) { return ( <> {FrontConfigs.map((config) => { - return ; + return ; })} ); diff --git a/src/components/type.ts b/src/components/type.ts new file mode 100644 index 0000000..3303d3b --- /dev/null +++ b/src/components/type.ts @@ -0,0 +1 @@ +export type Category = "rainbow" | "dark"; diff --git a/src/options/pages/Top.tsx b/src/options/pages/Top.tsx index 54c8ed5..51e5473 100644 --- a/src/options/pages/Top.tsx +++ b/src/options/pages/Top.tsx @@ -10,9 +10,15 @@ import IsTrue from "../../utils/isTrue"; export default function Top() { return ( <> - +
- + +
+ + + +
+
diff --git a/src/popup/components/Main.tsx b/src/popup/components/Main.tsx index 8f31191..91e5d63 100644 --- a/src/popup/components/Main.tsx +++ b/src/popup/components/Main.tsx @@ -18,7 +18,7 @@ export default function Main(props: MainProps) { [], ); - const switches = ; + const switches = ; const hiddenMsg =

設定画面を表示中はポップアップを利用できません

; return ( diff --git a/src/scripts/content_sso.ts b/src/scripts/content_sso.ts index 3bf50e1..cafefe4 100644 --- a/src/scripts/content_sso.ts +++ b/src/scripts/content_sso.ts @@ -3,6 +3,4 @@ import "/styles/sso.css"; import { SSO } from "../class"; import loadGamingWebsite from "../utils/loadGamingWebsite"; -//window.addEventListener("load", async () => await runFuncIfEnabled(SSO.EnableRainbow)); - loadGamingWebsite(SSO); From 70b5de0e6c6aa4e205e0d34b18f5f93c611a5282 Mon Sep 17 00:00:00 2001 From: hayao Date: Sat, 28 Oct 2023 01:49:14 +0900 Subject: [PATCH 06/14] Update: Make base private --- src/class/ClassApplicator.ts | 12 ++++++------ src/class/Moodle/EnableRainbow.ts | 4 ++-- tsconfig.json | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/class/ClassApplicator.ts b/src/class/ClassApplicator.ts index 7280452..851088b 100644 --- a/src/class/ClassApplicator.ts +++ b/src/class/ClassApplicator.ts @@ -10,22 +10,22 @@ const rainbowTextShadow = "rainbow-text-shadow"; // selectorで適用されるセレクタを取得できます // baseは初期化に必ず指定する必要があり書き換えるべきではありませんが、classesは追加で個別の設定を行うために指定できます export class classApplicator { - base: string[]; + #base: string[]; classes: string[]; constructor(base: string[]) { - this.base = base; + this.#base = base; this.classes = []; } apply(...elements: Elements[]) { - addClass(elements, [...this.base, ...this.classes]); + addClass(elements, [...this.#base, ...this.classes]); } remove(...elements: Elements[]) { - removeClass(elements, [...this.base, ...this.classes]); + removeClass(elements, [...this.#base, ...this.classes]); } selector() { - if (this.classes.length === 0) return `.${this.base}`; - else return `.${this.base}.${this.classes.join(".")}`; + if (this.classes.length === 0) return `.${this.#base}`; + else return `.${this.#base}.${this.classes.join(".")}`; } } diff --git a/src/class/Moodle/EnableRainbow.ts b/src/class/Moodle/EnableRainbow.ts index be6138e..25c0f52 100644 --- a/src/class/Moodle/EnableRainbow.ts +++ b/src/class/Moodle/EnableRainbow.ts @@ -1,4 +1,3 @@ -import { removeClass } from "../../utils/addClass"; import changeQueryInnerHTML from "../../utils/changeQueryInnerHTML"; import { RainbowApplicator } from "../ClassApplicator"; import { GundaiWebSite } from "../UnivWebsite"; @@ -14,7 +13,8 @@ export const EnableRainbowTextAndBg = (rainbow: RainbowApplicator) => { // rainbowBgの中のrainbowTextを無効化 const rainbowBgSelector = rainbow.bg.selector(); const targetElementsSelector = `${rainbowBgSelector} ${rainbow.text.selector()}`; - removeClass([targetElementsSelector], rainbow.text.base); + //removeClass([targetElementsSelector], rainbow.text.base); + rainbow.text.remove(targetElementsSelector); }; export const InjectLink = () => { diff --git a/tsconfig.json b/tsconfig.json index ac05d4d..0b76c0d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,6 @@ { "compilerOptions": { - "target": "es5", + "target": "ES2015", "module": "commonjs", "outDir": "dist", "strict": true, From 2719aa4d6e2f0acbff77d3c2d06d69c4f672ccc4 Mon Sep 17 00:00:00 2001 From: hayao Date: Sun, 29 Oct 2023 01:09:57 +0900 Subject: [PATCH 07/14] Add: Moodle darkmode --- src/class/ClassApplicator.ts | 31 +++++++++++----- src/class/Moodle/EnableRainbow.ts | 4 +- src/class/Moodle/index.ts | 19 ++++++++-- src/scripts/content_common.ts | 1 + src/styles/darkmode.scss | 41 ++++++++++++++++++++ src/styles/gaming.scss | 62 ++++++++++++++++--------------- src/styles/moodle.scss | 16 ++++++++ 7 files changed, 130 insertions(+), 44 deletions(-) create mode 100644 src/styles/darkmode.scss diff --git a/src/class/ClassApplicator.ts b/src/class/ClassApplicator.ts index 851088b..0b2971e 100644 --- a/src/class/ClassApplicator.ts +++ b/src/class/ClassApplicator.ts @@ -55,18 +55,29 @@ export class HiddenApplicator extends ApplicatorBase {} // classApplicatorを用いてダークテーマにするクラス export class DarkApplicator extends ApplicatorBase { - base: classApplicator; - baseDarker: classApplicator; - content: classApplicator; - neutral: classApplicator; - accent: classApplicator; + bgBase: classApplicator; + bgBaseDarker: classApplicator; + bgContent: classApplicator; + bgNeutral: classApplicator; + bgAccent: classApplicator; + textBase: classApplicator; + textBaseDarker: classApplicator; + textContent: classApplicator; + textNeutral: classApplicator; + textAccent: classApplicator; constructor() { super(); - this.base = new classApplicator(["dark-base"]); - this.baseDarker = new classApplicator(["dark-base-darker"]); - this.content = new classApplicator(["dark-content"]); - this.neutral = new classApplicator(["dark-neutral"]); - this.accent = new classApplicator(["dark-accent"]); + + this.bgBase = new classApplicator(["bg-base"]); + this.bgBaseDarker = new classApplicator(["bg-base-darker"]); + this.bgContent = new classApplicator(["bg-content"]); + this.bgNeutral = new classApplicator(["bg-neutral"]); + this.bgAccent = new classApplicator(["bg-accent"]); + this.textBase = new classApplicator(["text-base"]); + this.textBaseDarker = new classApplicator(["text-base-darker"]); + this.textContent = new classApplicator(["text-content"]); + this.textNeutral = new classApplicator(["text-neutral"]); + this.textAccent = new classApplicator(["text-accent"]); } } diff --git a/src/class/Moodle/EnableRainbow.ts b/src/class/Moodle/EnableRainbow.ts index 25c0f52..1bb5066 100644 --- a/src/class/Moodle/EnableRainbow.ts +++ b/src/class/Moodle/EnableRainbow.ts @@ -25,11 +25,13 @@ export const InjectLink = () => { `Gaming Edition開発者に連絡する`; }; -export const ReplaceImagesToGamimg = () => { +export const ReplaceLMSLogo = () => { document.querySelectorAll(".logo").forEach((e) => { if (e.getAttribute("src")) e.setAttribute("src", chrome.runtime.getURL("assets/GULMS.png")); }); +}; +export const ReplaceImagesToGamimg = () => { document.querySelectorAll("img.userpicture").forEach((e) => { if (e.getAttribute("src")) e.setAttribute("src", chrome.runtime.getURL("assets/partyparrot.gif")); }); diff --git a/src/class/Moodle/index.ts b/src/class/Moodle/index.ts index b9864d3..6358da3 100644 --- a/src/class/Moodle/index.ts +++ b/src/class/Moodle/index.ts @@ -2,7 +2,7 @@ // 個人の信頼性は家庭の構築において重要な要素である import { GundaiWebSite } from "../UnivWebsite"; import { DisableRainbowBg, ReplaceImagesToDefault } from "./DisableRainbow"; -import { EnableRainbowTextAndBg, InjectLink, ReplaceImagesToGamimg, ReplaceTextToGaimg } from "./EnableRainbow"; +import { EnableRainbowTextAndBg, InjectLink, ReplaceImagesToGamimg, ReplaceLMSLogo, ReplaceTextToGaimg } from "./EnableRainbow"; import { MoodleAdditionalInfo } from "./type"; export const Moodle = new GundaiWebSite("moodle"); @@ -33,6 +33,7 @@ Moodle.rainbow.enable = function () { Moodle.rainbow.disable = function () { DisableRainbowBg(this); ReplaceImagesToDefault(); + ReplaceLMSLogo(); const headerText = Moodle.additionalInfo.headerText; document.querySelectorAll(".page-header-headings h1").forEach((e) => { @@ -49,6 +50,18 @@ Moodle.hidden.enable = () => { playCountUnderTextElement.innerHTML = "想定最大利用者乳首数：4,000"; }; -Moodle.dark.enable = () => { - Moodle.dark.base.apply("#page"); +Moodle.dark.enable = function () { + // 画像差し替え + ReplaceLMSLogo(); + + // トップページ + Moodle.dark.bgBase.apply("#page,#page.drawers .main-inner,#region-main"); + this.textContent.apply("#page"); + this.bgNeutral.apply(".activity-item .description .activity-altcontent.course-description-item"); + this.bgBase.apply(".bg-white"); + + // Header + this.textContent.apply(".navbar-light .navbar-nav .nav-link"); + this.textAccent.apply(".navbar-nav .nav-link.active"); + this.textContent.apply(".primary-navigation .navigation .nav-link"); }; diff --git a/src/scripts/content_common.ts b/src/scripts/content_common.ts index ee7978f..53d4dd6 100644 --- a/src/scripts/content_common.ts +++ b/src/scripts/content_common.ts @@ -1,4 +1,5 @@ import "/styles/gaming.scss"; +import "/styles/darkmode.scss"; chrome.runtime.onMessage.addListener((message) => { if (message === "reload") { diff --git a/src/styles/darkmode.scss b/src/styles/darkmode.scss new file mode 100644 index 0000000..ac6ac19 --- /dev/null +++ b/src/styles/darkmode.scss @@ -0,0 +1,41 @@ +[data-gaming_gundai_dark="true"] { + * { + --base: #1d232a; + --base-darker: #191e25; + --content: #a6acba; + --neutral: #29323c; + --accent: #21b2a5; + } + + .bg-base { + background-color: var(--base) !important; + } + .bg-base-darker { + background-color: var(--base-darker) !important; + } + .bg-content { + background-color: var(--content) !important; + } + .bg-neutral { + background-color: var(--neutral) !important; + } + .bg-accent { + background-color: var(--accent) !important; + } + + .text-base { + color: var(--base) !important; + } + .text-base-darker { + color: var(--base-darker) !important; + } + .text-content { + color: var(--content) !important; + } + .text-neutral { + color: var(--neutral) !important; + } + .text-accent { + color: var(--accent) !important; + } +} diff --git a/src/styles/gaming.scss b/src/styles/gaming.scss index 6567515..8d572e1 100644 --- a/src/styles/gaming.scss +++ b/src/styles/gaming.scss @@ -1,38 +1,40 @@ -@keyframes gaming { - 100% { - background-position-x: 200%; +[data-gaming_gundai="true"] { + @keyframes gaming { + 100% { + background-position-x: 200%; + } } -} -.rainbow-bg { - animation-duration: 0.7s; + .rainbow-bg { + animation-duration: 0.7s; - background: linear-gradient(to right, Magenta, yellow, Cyan, Magenta) 0% center/200%; - animation-name: gaming; - animation-timing-function: linear; - animation-iteration-count: infinite; - text-shadow: 0 0 2px white; -} + background: linear-gradient(to right, Magenta, yellow, Cyan, Magenta) 0% center/200%; + animation-name: gaming; + animation-timing-function: linear; + animation-iteration-count: infinite; + text-shadow: 0 0 2px white; + } -.rainbow-text { - animation-duration: 0.7s; + .rainbow-text { + animation-duration: 0.7s; - background: linear-gradient(to right, Magenta, yellow, Cyan, Magenta) 0% center/200%; - animation-name: gaming; - animation-timing-function: linear; - animation-iteration-count: infinite; + background: linear-gradient(to right, Magenta, yellow, Cyan, Magenta) 0% center/200%; + animation-name: gaming; + animation-timing-function: linear; + animation-iteration-count: infinite; - // For Text - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - font-weight: bold; - color: transparent; -} + // For Text + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-weight: bold; + color: transparent; + } -.rainbow-text-shadow { - text-shadow: 0px 0px 80px black; -} + .rainbow-text-shadow { + text-shadow: 0px 0px 80px black; + } -.rainbow-bg-shadow { - box-shadow: 0px 0px 40px white; + .rainbow-bg-shadow { + box-shadow: 0px 0px 40px white; + } } diff --git a/src/styles/moodle.scss b/src/styles/moodle.scss index ad36242..4ba4891 100644 --- a/src/styles/moodle.scss +++ b/src/styles/moodle.scss @@ -1,4 +1,5 @@ @import "./gaming.scss"; +@import "./darkmode.scss"; [data-gaming_gundai="true"] { .menu-action-text, @@ -22,3 +23,18 @@ background-color: transparent !important; } } + +[data-gaming_gundai_dark="true"] { + #page.drawers .main-inner, + #region-main { + background-color: transparent !important; + } + + .bg-white { + background-color: var(--base) !important; + } + + .logo { + filter: invert(1) grayscale(100%); + } +} From 4f9f094d6207bbbec0c40e25ec96a3605982b4b8 Mon Sep 17 00:00:00 2001 From: hayao Date: Sun, 29 Oct 2023 01:18:53 +0900 Subject: [PATCH 08/14] Fix: Do not filter logo if rainbow is enabled --- src/styles/moodle.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/styles/moodle.scss b/src/styles/moodle.scss index 4ba4891..f179ab2 100644 --- a/src/styles/moodle.scss +++ b/src/styles/moodle.scss @@ -33,7 +33,9 @@ .bg-white { background-color: var(--base) !important; } +} +[data-gaming_gundai_dark="true"]:not([data-gaming_gundai="true"]) { .logo { filter: invert(1) grayscale(100%); } From 5cef82e047b5a27ae565820b63a51836942248ec Mon Sep 17 00:00:00 2001 From: hayao Date: Sun, 29 Oct 2023 01:26:32 +0900 Subject: [PATCH 09/14] Docs: Update Todo --- Todo.md | 34 +++++++++++++++++++++++++++++----- 1 file changed, 29 insertions(+), 5 deletions(-) diff --git a/Todo.md b/Todo.md index 6fad85d..a6bf1ed 100644 --- a/Todo.md +++ b/Todo.md @@ -1,11 +1,35 @@ ## Todo -### ウェブサイト +### ゲーミング -- [ ] [mdl.media.gunma-u.ac.jp](https://mdl.media.gunma-u.ac.jp/GU/index.php) -- [ ] [www.kyomu-sys.gunma-u.ac.jp](https://www.kyomu-sys.gunma-u.ac.jp/Portal/) -- [ ] [www.media.gunma-u.ac.jp](https://www.media.gunma-u.ac.jp/) -- [ ] [www.gunma-u.ac.jp](https://www.gunma-u.ac.jp/) +- SSOログイン画面 + - [x] 基本的な実装 + - [ ] 見やすさの改善 +- [mdl.media.gunma-u.ac.jp](https://mdl.media.gunma-u.ac.jp/GU/index.php) + - [x] 基本的な実装 +- [www.kyomu-sys.gunma-u.ac.jp](https://www.kyomu-sys.gunma-u.ac.jp/Portal/) + - [x] 基本的な実装 +- [www.media.gunma-u.ac.jp](https://www.media.gunma-u.ac.jp/) + - [x] 基本的な実装 +- [opac.lib.gunma-u.ac.jp](https://opac.lib.gunma-u.ac.jp/opc/) + - [x] 基本的な実装 +- [www.gunma-u.ac.jp](https://www.gunma-u.ac.jp/) + - [ ] 基本的な実装 + +### ダークモード + +- SSOログイン画面 + - [ ] 基本的な実装 +- [mdl.media.gunma-u.ac.jp](https://mdl.media.gunma-u.ac.jp/GU/index.php) + - [ ] 基本的な実装 +- [www.kyomu-sys.gunma-u.ac.jp](https://www.kyomu-sys.gunma-u.ac.jp/Portal/) + - [ ] 基本的な実装 +- [www.media.gunma-u.ac.jp](https://www.media.gunma-u.ac.jp/) + - [ ] 基本的な実装 +- [opac.lib.gunma-u.ac.jp](https://opac.lib.gunma-u.ac.jp/opc/) + - [ ] 基本的な実装 +- [www.gunma-u.ac.jp](https://www.gunma-u.ac.jp/) + - [ ] 基本的な実装 ### 開発 From 774559e3984ba04afe6f748b7333d5f21e5d2424 Mon Sep 17 00:00:00 2001 From: hayao Date: Sun, 29 Oct 2023 01:59:10 +0900 Subject: [PATCH 10/14] Docs: Add auto-reload issue --- Todo.md | 5 +++-- src/components/SwitchItem.tsx | 1 - 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Todo.md b/Todo.md index a6bf1ed..8bdc17e 100644 --- a/Todo.md +++ b/Todo.md @@ -34,9 +34,10 @@ ### 開発 - [ ] [webpack-chrome-extension-reloader](https://www.npmjs.com/package/webpack-chrome-extension-reloader)でホットリロードに対応する -- [ ] SCSSで直にスタイルを書き込んだ場合に無効化できない問題を修正する +- [x] SCSSで直にスタイルを書き込んだ場合に無効化できない問題を修正する - [ ] リロードなしで有効化/無効化できるようにする - [ ] Reactコンポーネントを最適化する - [ ] テストを書く - [ ] ドキュメントを書く -- [ ] 設定を開いている間はポップアップを無効化する +- [x] 設定を開いている間はポップアップを無効化する +- [ ] ポップアップでの設定変更後に手動でリロードする必要がある問題を修正する diff --git a/src/components/SwitchItem.tsx b/src/components/SwitchItem.tsx index 8d80f9d..b8e547d 100644 --- a/src/components/SwitchItem.tsx +++ b/src/components/SwitchItem.tsx @@ -22,7 +22,6 @@ export function SwitchItem({ config, className, category }: { config: FrontConfi return (e: React.ChangeEvent) => { setEnabled(e.target.checked); WebSites[config.id].storage.set(category, e.target.checked.toString()); - chrome.runtime.sendMessage("reload"); }; }, []); From bbe17161d6ee33477f31682fe8181ac201d123d6 Mon Sep 17 00:00:00 2001 From: hayao Date: Sun, 29 Oct 2023 02:33:17 +0900 Subject: [PATCH 11/14] Update: Add moodle darkmode --- src/class/Moodle/index.ts | 3 +++ src/styles/moodle.scss | 5 +++++ 2 files changed, 8 insertions(+) diff --git a/src/class/Moodle/index.ts b/src/class/Moodle/index.ts index 6358da3..579edab 100644 --- a/src/class/Moodle/index.ts +++ b/src/class/Moodle/index.ts @@ -64,4 +64,7 @@ Moodle.dark.enable = function () { this.textContent.apply(".navbar-light .navbar-nav .nav-link"); this.textAccent.apply(".navbar-nav .nav-link.active"); this.textContent.apply(".primary-navigation .navigation .nav-link"); + + // dashboard + this.bgBase.apply(".card-body"); }; diff --git a/src/styles/moodle.scss b/src/styles/moodle.scss index f179ab2..c2bbd30 100644 --- a/src/styles/moodle.scss +++ b/src/styles/moodle.scss @@ -33,6 +33,11 @@ .bg-white { background-color: var(--base) !important; } + + .list-group-item, + .form-control { + @extend .bg-base; + } } [data-gaming_gundai_dark="true"]:not([data-gaming_gundai="true"]) { From 631bdc0de1fdd7c925188f905ff54f145ef69f19 Mon Sep 17 00:00:00 2001 From: hayao Date: Sun, 29 Oct 2023 02:34:03 +0900 Subject: [PATCH 12/14] Update: NodeJS version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7c48b6c..e377e5b 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,7 @@ "webpack-merge": "^5.10.0" }, "volta": { - "node": "18.18.1" + "node": "20.9.0" }, "dependencies": { "classnames": "^2.3.2", From 4a68a55cfc74f20b461ae28b86bdae610628261d Mon Sep 17 00:00:00 2001 From: hayao Date: Sun, 29 Oct 2023 02:39:59 +0900 Subject: [PATCH 13/14] Update: Add methods to get status --- src/class/UnivWebsite/index.ts | 27 ++++++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/src/class/UnivWebsite/index.ts b/src/class/UnivWebsite/index.ts index a51c6d9..f40fd42 100644 --- a/src/class/UnivWebsite/index.ts +++ b/src/class/UnivWebsite/index.ts @@ -1,6 +1,7 @@ // 無駄とは人生である。無駄を極めよ。無駄を愛せ。無駄を生きろ。 // 無駄を以て物を成す者は、無駄を以て物を滅ぼす者に勝る。x +import isTrue from "../../utils/isTrue"; import { DarkApplicator, HiddenApplicator, RainbowApplicator } from "../ClassApplicator"; import { StorageTool } from "../StorageTool"; //import Storage from "../../utils/Storage"; @@ -26,9 +27,25 @@ export class UnivWebsite { this.hidden = new HiddenApplicator(); } + async isRainbowEnabled() { + const isRainbowEnabled = await this.storage.get("rainbow"); + return isTrue(isRainbowEnabled); + } + + async isDarkEnabled() { + const isDarkEnabled = await this.storage.get("dark"); + return isTrue(isDarkEnabled); + } + + async isHiddenEnabled() { + const otherStorage = new StorageTool("other"); + const isHiddenEnabled = await otherStorage.getBool("enabled-hidden"); + return isTrue(isHiddenEnabled); + } + static async load(site: UnivWebsite) { - const isRainbowEnabled = await site.storage.get("rainbow"); - if (isRainbowEnabled === "true") { + const isRainbowEnabled = await site.isRainbowEnabled(); + if (isRainbowEnabled) { // CSSのためにHTML要素にデータ属性を追加 document.documentElement.dataset.gaming_gundai = "true"; site.storage.set("rainbow", "true"); @@ -40,8 +57,8 @@ export class UnivWebsite { site.rainbow.disable(); } - const isDarkEnabled = await site.storage.get("dark"); - if (isDarkEnabled === "true") { + const isDarkEnabled = await site.isDarkEnabled(); + if (isDarkEnabled) { document.documentElement.dataset.gaming_gundai_dark = "true"; site.storage.set("dark", "true"); site.dark.enable(); @@ -51,8 +68,8 @@ export class UnivWebsite { site.dark.disable(); } + const isHiddenEnabled = await site.isHiddenEnabled(); const otherStorage = new StorageTool("other"); - const isHiddenEnabled = await otherStorage.getBool("enabled-hidden"); if (isHiddenEnabled) { document.documentElement.dataset.gaming_gundai_hidden = "true"; otherStorage.set("enabled-hidden", "true"); From c74ba43659c6e144da4c2cb5babb1a8b0105d57d Mon Sep 17 00:00:00 2001 From: hayao Date: Sun, 29 Oct 2023 02:44:01 +0900 Subject: [PATCH 14/14] Clean: Rename files --- .../{DisableRainbow.ts => disable-utils.ts} | 0 .../{EnableRainbow.ts => enable-utils.ts} | 10 +++++----- src/class/Moodle/index.ts | 17 +++++++++-------- 3 files changed, 14 insertions(+), 13 deletions(-) rename src/class/Moodle/{DisableRainbow.ts => disable-utils.ts} (100%) rename src/class/Moodle/{EnableRainbow.ts => enable-utils.ts} (89%) diff --git a/src/class/Moodle/DisableRainbow.ts b/src/class/Moodle/disable-utils.ts similarity index 100% rename from src/class/Moodle/DisableRainbow.ts rename to src/class/Moodle/disable-utils.ts diff --git a/src/class/Moodle/EnableRainbow.ts b/src/class/Moodle/enable-utils.ts similarity index 89% rename from src/class/Moodle/EnableRainbow.ts rename to src/class/Moodle/enable-utils.ts index 1bb5066..2eb39bd 100644 --- a/src/class/Moodle/EnableRainbow.ts +++ b/src/class/Moodle/enable-utils.ts @@ -3,7 +3,7 @@ import { RainbowApplicator } from "../ClassApplicator"; import { GundaiWebSite } from "../UnivWebsite"; import { MoodleAdditionalInfo } from "./type"; -export const EnableRainbowTextAndBg = (rainbow: RainbowApplicator) => { +export const enableRainbowTextAndBg = (rainbow: RainbowApplicator) => { rainbow.bg.apply(".navbar", "#action-menu-0-menu"); rainbow.text.apply(".page-header-headings h1"); @@ -17,7 +17,7 @@ export const EnableRainbowTextAndBg = (rainbow: RainbowApplicator) => { rainbow.text.remove(targetElementsSelector); }; -export const InjectLink = () => { +export const injectLink = () => { const supportSection = document.querySelector(".footer-support-link"); if (supportSection) supportSection.innerHTML = @@ -25,19 +25,19 @@ export const InjectLink = () => { `Gaming Edition開発者に連絡する`; }; -export const ReplaceLMSLogo = () => { +export const replaceLMSLogo = () => { document.querySelectorAll(".logo").forEach((e) => { if (e.getAttribute("src")) e.setAttribute("src", chrome.runtime.getURL("assets/GULMS.png")); }); }; -export const ReplaceImagesToGamimg = () => { +export const replaceImagesToGamimg = () => { document.querySelectorAll("img.userpicture").forEach((e) => { if (e.getAttribute("src")) e.setAttribute("src", chrome.runtime.getURL("assets/partyparrot.gif")); }); }; -export const ReplaceTextToGaimg = (moodle: GundaiWebSite) => { +export const replaceTextToGaimg = (moodle: GundaiWebSite) => { const headerText = moodle.additionalInfo.headerText; document.querySelectorAll(".page-header-headings h1").forEach((e) => { diff --git a/src/class/Moodle/index.ts b/src/class/Moodle/index.ts index 579edab..882d724 100644 --- a/src/class/Moodle/index.ts +++ b/src/class/Moodle/index.ts @@ -1,8 +1,8 @@ // 情報の信頼性は社会の構築において重要な要素である // 個人の信頼性は家庭の構築において重要な要素である import { GundaiWebSite } from "../UnivWebsite"; -import { DisableRainbowBg, ReplaceImagesToDefault } from "./DisableRainbow"; -import { EnableRainbowTextAndBg, InjectLink, ReplaceImagesToGamimg, ReplaceLMSLogo, ReplaceTextToGaimg } from "./EnableRainbow"; +import { DisableRainbowBg, ReplaceImagesToDefault } from "./disable-utils"; +import { enableRainbowTextAndBg, injectLink, replaceImagesToGamimg, replaceLMSLogo, replaceTextToGaimg } from "./enable-utils"; import { MoodleAdditionalInfo } from "./type"; export const Moodle = new GundaiWebSite("moodle"); @@ -11,10 +11,11 @@ Moodle.additionalInfo = { }; Moodle.rainbow.enable = function () { - EnableRainbowTextAndBg(this); - InjectLink(); - ReplaceImagesToGamimg(); - ReplaceTextToGaimg(Moodle); + enableRainbowTextAndBg(this); + injectLink(); + replaceImagesToGamimg(); + replaceTextToGaimg(Moodle); + replaceLMSLogo(); // メニューバーでホバー時にclassを追加 document.querySelectorAll(".moremenu .nav-link").forEach((e) => { @@ -33,7 +34,7 @@ Moodle.rainbow.enable = function () { Moodle.rainbow.disable = function () { DisableRainbowBg(this); ReplaceImagesToDefault(); - ReplaceLMSLogo(); + ReplaceImagesToDefault(); const headerText = Moodle.additionalInfo.headerText; document.querySelectorAll(".page-header-headings h1").forEach((e) => { @@ -52,7 +53,7 @@ Moodle.hidden.enable = () => { Moodle.dark.enable = function () { // 画像差し替え - ReplaceLMSLogo(); + replaceLMSLogo(); // トップページ Moodle.dark.bgBase.apply("#page,#page.drawers .main-inner,#region-main");