Merge branch 'class-based-styling'

REFER.md

@@ -10,3 +10,6 @@
 -   [chibat/chrome\-extension\-typescript\-starter: Chrome Extension TypeScript Starter](https://github.com/chibat/chrome-extension-typescript-starter)
 -   [TypeScriptで document\.getElementById\("hoge"\)\.value をすると出るThe property ‘hoge' does not exist on value of type 'HTMLElement' というエラーを解消する \- Qiita](https://qiita.com/Sekky0905/items/a88721f2af41050c93f2#typescript%E3%81%A7-documentgetelementbyidhogevalue-%E3%82%92%E3%81%99%E3%82%8B%E3%81%A8%E5%87%BA%E3%82%8Bthe-property-hoge-does-not-exist-on-value-of-type-htmlelement-%E3%81%A8%E3%81%84%E3%81%86%E3%82%A8%E3%83%A9%E3%83%BC%E3%82%92%E8%A7%A3%E6%B6%88%E3%81%99%E3%82%8B)
 -   [Step by Stepで始めるESLint \- Qiita](https://qiita.com/howdy39/items/6e2c75861bc5a14b2acf)
+-   [javascriptでthisがundefinedになる実例が分からない](https://teratail.com/questions/331287)
+-   ['this' is undefined in JavaScript class methods \- Stack Overflow](https://stackoverflow.com/questions/4011793/this-is-undefined-in-javascript-class-methods)
+-   [JavaScript の this を理解する多分一番分かりやすい説明 \#JavaScript \- Qiita](https://qiita.com/takkyun/items/c6e2f2cf25327299cf03)

src/class/GundaiWebsite/index.ts

@@ -1,17 +1,67 @@
 // 無駄とは人生である。無駄を極めよ。無駄を愛せ。無駄を生きろ。
 // 無駄を以て物を成す者は、無駄を以て物を滅ぼす者に勝る。x
 
+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";
+
 // GundaiWebSiteはゲーミング化するウェブサイトを定義したクラス
 // 型変数とAdditionalInfoプロパティによって任意の情報を追加できる
 export default class GundaiWebSite<T> {
+    classes: {
+        RainbowText: string[];
+        RainbowTextShadow: string[];
+        RainbowBg: string[];
+        RainbowBgShadow: string[];
+    };
+
     constructor(enable?: () => void, disable?: () => void) {
         if (enable) this.EnableRainbow = enable;
         if (disable) this.DisableRainbow = disable;
-        this.AdditionalInfo = {} as T;
+
+        this.additionalInfo = {} as T;
+        this.classes = {
+            RainbowText: [],
+            RainbowTextShadow: [],
+            RainbowBg: [],
+            RainbowBgShadow: [],
+        };
+
+        this.EnableRainbow.bind(this);
+        this.DisableRainbow.bind(this);
     }
     EnableRainbow() {}
     DisableRainbow() {}
-    AdditionalInfo: T;
+    additionalInfo: T;
+
+    AddRainbowBg(...elements: Elements[]) {
+        AddClass(elements, [rainbowBg, ...this.classes.RainbowBg]);
+    }
+    AddRainbowBgWithShadow(...elements: Elements[]) {
+        AddClass(elements, [rainbowBg, rainbowBgShadow, ...this.classes.RainbowBgShadow]);
+    }
+    AddRainbowText(...elements: Elements[]) {
+        AddClass(elements, [rainbowText, ...this.classes.RainbowText]);
+    }
+    AddRainbowTextWithShadow(...elements: Elements[]) {
+        AddClass(elements, [rainbowText, rainbowTextShadow, ...this.classes.RainbowTextShadow]);
+    }
+
+    RemoveRainbowBg(...elements: Elements[]) {
+        RemoveClass(elements, [rainbowBg, ...this.classes.RainbowBg]);
+    }
+    RemoveRainbowBgWithShadow(...elements: Elements[]) {
+        RemoveClass(elements, [rainbowBg, rainbowBgShadow, ...this.classes.RainbowBgShadow]);
+    }
+    RemoveRainbowText(...elements: Elements[]) {
+        RemoveClass(elements, [rainbowText, ...this.classes.RainbowText]);
+    }
+    RemoveRainbowTextWithShadow(...elements: Elements[]) {
+        RemoveClass(elements, [rainbowText, rainbowTextShadow, ...this.classes.RainbowTextShadow]);
+    }
 }
 
 // 型変数使うとかっこいいよね

src/class/Kyomu/index.ts

@@ -1,10 +1,11 @@
 // 教務は学生の未来を担い、ゲーミングは学生の人生に彩りを加える
 // この二つのシステムを統合することで、学生の人生をより豊かにすることができる
-import { AddRainbowBg, AddRainbowText } from "../../utils/AddClass";
 import ChangeQueryInnerHTML from "../../utils/ChangeQueryInnerHTML";
 import GundaiWebSite from "../GundaiWebsite";
 
-const EnableRainbow = () => {
+export const Kyomu = new GundaiWebSite();
+
+Kyomu.EnableRainbow = function () {
     // ログインボタン
     // https://qiita.com/Sekky0905/items/a88721f2af41050c93f2
     const loginBtn: HTMLInputElement = <HTMLInputElement>document.getElementById("ctl21_btnLoginShibbolethGunma");
@@ -13,19 +14,19 @@ const EnableRainbow = () => {
     }
 
     // ページ遷移リンク
-    AddRainbowText(".commonTopPageLink", ".commonTopPageLinkWithPadding");
+    this.AddRainbowText(".commonTopPageLink", ".commonTopPageLinkWithPadding");
 
-    AddRainbowText(
+    this.AddRainbowText(
         "#CtlInfLstBfrLginEmrgncy_LblTitle",
         "#CtlInfLstBfrLginNrml_LblTitle",
         "#AllAnnualList_LblTitle",
         "#JeLblSyllabiHeader_lbl",
     );
-    AddRainbowBg(".infoListEntryOrgName");
-    AddRainbowBg(".infoListBeforeLoginGrid");
+    this.AddRainbowBg(".infoListEntryOrgName");
+    this.AddRainbowBg(".infoListBeforeLoginGrid");
 
     // ログイン後のトップページ
-    AddRainbowBg(".top_title_header", ".top_now_title");
+    this.AddRainbowBg(".top_title_header", ".top_now_title");
 
     // トップページのウェルカムメッセージ
     ChangeQueryInnerHTML("#loginHeader_lblWelcome_1_lbl", "よおこそ、群馬大学ゲーミング教務システムへ");
@@ -38,7 +39,7 @@ const EnableRainbow = () => {
     ChangeQueryInnerHTML("#AllAnnualList_LblTitle", "ゲーミング ライフ スタイル");
 
     // 受信メッセージ一覧
-    AddRainbowBg("#ctl00_phContents_ctlMesReceive_gridMes tr");
+    this.AddRainbowBg("#ctl00_phContents_ctlMesReceive_gridMes tr");
 
     // リンクを挿入
     if (["/portal/login.aspx", "/portal/"].includes(location.pathname.toLowerCase())) {
@@ -50,5 +51,3 @@ const EnableRainbow = () => {
         });
     }
 };
-
-export const Kyomu = new GundaiWebSite(EnableRainbow);

src/class/Media/index.ts

@@ -1,12 +1,13 @@
 // メディアは人類にとっての第四の権力である 権力を持つ者はそれを正しく使わなければならない
 // 情報は現代の石油である 情報を多く持つものは資本主義で言うところの富を得る
-import { AddClass, AddRainbowBg, AddRainbowBgWithShadow, AddRainbowText } from "../../utils/AddClass";
+import { AddClass } from "../../utils/AddClass";
 import GundaiWebSite from "../GundaiWebsite";
 
-export const Media = new GundaiWebSite(() => {
-    AddRainbowBgWithShadow(".banner_list li");
+export const Media = new GundaiWebSite();
+Media.EnableRainbow = function () {
+    this.AddRainbowBgWithShadow(".banner_list li");
     AddClass([".banner_list li a"], ["rainbow-bg-shadow"]);
-    AddRainbowBgWithShadow(".menu_category h3");
-    AddRainbowText("#news_list li a");
-    AddRainbowBg("#news_category_list .active");
-});
+    this.AddRainbowBgWithShadow(".menu_category h3");
+    this.AddRainbowText("#news_list li a");
+    this.AddRainbowBg("#news_category_list .active");
+};

src/class/Moodle/DisableRainbow.ts

@@ -1,10 +1,10 @@
-import { RemoveRainbowBg } from "../../utils/AddClass";
 import changeQueryInnerHTML from "../../utils/ChangeQueryInnerHTML";
+import { Moodle } from "./type";
 
-export const DisableRainbowBg = () => {
-    RemoveRainbowBg(".navbar", ".addinghtml");
-    RemoveRainbowBg(".page-header-headings h1");
-    RemoveRainbowBg("a");
+export const DisableRainbowBg = (moodle: Moodle) => {
+    moodle.RemoveRainbowBg(".navbar", ".addinghtml");
+    moodle.RemoveRainbowBg(".page-header-headings h1");
+    moodle.RemoveRainbowBg("a");
 };
 
 export const ReplaceImagesToDefault = () => {

src/class/Moodle/EnableRainbow.ts

@@ -1,21 +1,21 @@
-import { AddRainbowBg, AddRainbowText, AddRainbowTextWithShadow } from "../../utils/AddClass";
 import changeQueryInnerHTML from "../../utils/ChangeQueryInnerHTML";
 import GundaiWebSite from "../GundaiWebsite";
+import { Moodle } from "./type";
 import { MoodleAdditionalInfo } from "./type";
 
-export const EnableRainbowText = () => {
-    AddRainbowText(".page-header-headings h1");
+export const EnableRainbowText = (moodle: Moodle) => {
+    moodle.AddRainbowText(".page-header-headings h1");
 
     // 科目リスト
     if (document.getElementById("inst301")) {
-        AddRainbowTextWithShadow("#inst301 a");
+        moodle.AddRainbowTextWithShadow("#inst301 a");
     }
 
-    AddRainbowText("a");
+    moodle.AddRainbowText("a");
 };
 
-export const EnableRainbowBg = () => {
-    AddRainbowBg(".navbar", ".addinghtml");
+export const EnableRainbowBg = (moodle: Moodle) => {
+    moodle.AddRainbowBg(".navbar", ".addinghtml");
 };
 
 export const InjectLink = () => {
@@ -36,19 +36,17 @@ export const ReplaceImagesToGamimg = () => {
     });
 };
 
-export const ReplaceTextToGaimgFunc = (moodle: GundaiWebSite<MoodleAdditionalInfo>) => {
+export const ReplaceTextToGaimg = (moodle: GundaiWebSite<MoodleAdditionalInfo>) => {
     if (!moodle) return () => {};
 
-    return () => {
-        const headerText = moodle.AdditionalInfo.headerText;
+    const headerText = moodle.additionalInfo.headerText;
 
-        document.querySelectorAll(".page-header-headings h1").forEach((e) => {
-            if (!e.innerHTML.includes(headerText)) e.innerHTML = e.innerHTML + headerText;
-        });
-        document.querySelectorAll(".page-header-headings h1").forEach((e) => {
-            if (!e.innerHTML.includes(headerText)) e.innerHTML = e.innerHTML + headerText;
-        });
+    document.querySelectorAll(".page-header-headings h1").forEach((e) => {
+        if (!e.innerHTML.includes(headerText)) e.innerHTML = e.innerHTML + headerText;
+    });
+    document.querySelectorAll(".page-header-headings h1").forEach((e) => {
+        if (!e.innerHTML.includes(headerText)) e.innerHTML = e.innerHTML + headerText;
+    });
 
-        changeQueryInnerHTML("#instance-320-header", "現在のプレイ人数");
-    };
+    changeQueryInnerHTML("#instance-320-header", "現在のプレイ人数");
 };

src/class/Moodle/index.ts

@@ -2,27 +2,27 @@
 // 個人の信頼性は家庭の構築において重要な要素である
 import GundaiWebSite from "../GundaiWebsite";
 import { DisableRainbowBg, ReplaceImagesToDefault } from "./DisableRainbow";
-import { EnableRainbowBg, EnableRainbowText, InjectLink, ReplaceImagesToGamimg, ReplaceTextToGaimgFunc } from "./EnableRainbow";
+import { EnableRainbowBg, EnableRainbowText, InjectLink, ReplaceImagesToGamimg, ReplaceTextToGaimg } from "./EnableRainbow";
 import { MoodleAdditionalInfo } from "./type";
 
 export const Moodle = new GundaiWebSite<MoodleAdditionalInfo>();
-Moodle.AdditionalInfo = {
+Moodle.additionalInfo = {
     headerText: " Gaming Edition🎮",
 };
 
 Moodle.EnableRainbow = function () {
-    EnableRainbowBg();
-    EnableRainbowText();
+    EnableRainbowBg(this);
+    EnableRainbowText(this);
     InjectLink();
     ReplaceImagesToGamimg();
-    ReplaceTextToGaimgFunc(this)();
+    ReplaceTextToGaimg(this);
 };
 
 Moodle.DisableRainbow = function () {
-    DisableRainbowBg();
+    DisableRainbowBg(this);
     ReplaceImagesToDefault();
 
-    const headerText = this.AdditionalInfo.headerText;
+    const headerText = this.additionalInfo.headerText;
     document.querySelectorAll(".page-header-headings h1").forEach((e) => {
         if (e.innerHTML.includes(headerText)) e.innerHTML.replace(headerText, "");
     });

src/class/Moodle/type.ts

@@ -1,3 +1,7 @@
+import GundaiWebSite from "../GundaiWebsite";
+
 export interface MoodleAdditionalInfo {
     headerText: string;
 }
+
+export type Moodle = GundaiWebSite<MoodleAdditionalInfo>;

src/class/MyLibrary/index.ts

@@ -1,8 +1,9 @@
-import { AddRainbowBg, AddRainbowText } from "../../utils/AddClass";
 import ChangeQueryInnerHTML from "../../utils/ChangeQueryInnerHTML";
 import GundaiWebSite from "../GundaiWebsite";
 
-export const MyLibrary = new GundaiWebSite(() => {
+export const MyLibrary = new GundaiWebSite();
+
+MyLibrary.EnableRainbow = function () {
     if (location.pathname == "/portal/portal/selectLogin/") {
         //document.getElementById("explanation")
         ChangeQueryInnerHTML(
@@ -12,11 +13,11 @@ export const MyLibrary = new GundaiWebSite(() => {
         ChangeQueryInnerHTML("#ssoLoginTitle", "全学ゲーミングアカウントでログイン");
 
         // フッターをレインボー
-        AddRainbowBg("#footer");
+        this.AddRainbowBg("#footer");
         document.getElementById("footer")!.id = "";
     }
 
     // ヘッダーとタイトルをレインボー
-    AddRainbowBg("#header", "h2");
-    AddRainbowText("#lblTitle", "#mainTitle");
-});
+    this.AddRainbowBg("#header", "h2");
+    this.AddRainbowText("#lblTitle", "#mainTitle");
+};

src/utils/AddClass.ts

@@ -1,25 +1,46 @@
-export function AddClass(queries: string[], classNames: string[]) {
-    queries.forEach((query) => {
-        const elements = document.querySelectorAll(query);
-        elements.forEach((element) => {
-            //console.log("adding classes to", element);
-            element.classList.add(...classNames);
-        });
+export type Elements = HTMLElement | NodeListOf<HTMLElement> | string;
+
+export function AddClass(elements: Elements[], classNames: string[]) {
+    elements.forEach((element) => {
+        if (typeof element === "string") {
+            const elements = document.querySelectorAll(element);
+            elements.forEach((element) => {
+                //console.log("adding classes to", element);
+                element.classList.add(...classNames);
+            });
+        } else {
+            let list: HTMLElement[];
+            if (element instanceof HTMLElement) list = [element];
+            else list = Array.from(element);
+
+            list.forEach((element) => {
+                //console.log("adding classes to", element);
+                element.classList.add(...classNames);
+            });
+        }
     });
 }
 
-export function RemoveClass(queries: string[], classNames: string[]) {
-    queries.forEach((query) => {
-        const elements = document.querySelectorAll(query);
-        elements.forEach((element) => {
-            //console.log("removing classes from", element);
-            classNames.forEach((className) => {
-                if (element.classList.contains(className)) element.classList.remove(className);
+export function RemoveClass(elements: Elements[], classNames: string[]) {
+    elements.forEach((element) => {
+        if (typeof element === "string") {
+            const elements = document.querySelectorAll(element);
+            elements.forEach((element) => {
+                element.classList.remove(...classNames);
+            });
+        } else {
+            let list: HTMLElement[];
+            if (element instanceof HTMLElement) list = [element];
+            else list = Array.from(element);
+
+            list.forEach((element) => {
+                element.classList.remove(...classNames);
             });
-        });
+        }
     });
 }
 
+/*
 export function AddRainbowBg(...queries: string[]) {
     AddClass(queries, ["rainbow-bg"]);
 }
@@ -47,3 +68,4 @@ export function RemoveRainbowBgWithShadow(...queries: string[]) {
 export function RemoveRainbowText(...queries: string[]) {
     RemoveClass(queries, ["rainbow-text", "rainbow-text-shadow"]);
 }
+*/

src/utils/LoadGamingWebsite.ts

@@ -3,5 +3,5 @@ import RunFuncIfEnabled from "./RunFuncIfEnabled";
 
 // ウィンドウが読み込まれたらGundaiWebsiteのEnableRainbowを実行する
 export default function LoadGamingWebsite(website: GundaiWebSite<unknown>) {
-    window.addEventListener("load", async () => await RunFuncIfEnabled(website.EnableRainbow));
+    window.addEventListener("load", () => RunFuncIfEnabled(() => website.EnableRainbow()));
 }