From 9865b8273bdbbe0804f72bc9d82d16dba01816ee Mon Sep 17 00:00:00 2001 From: hayao Date: Tue, 17 Oct 2023 10:25:27 +0900 Subject: [PATCH 1/3] Update: GundaiWebsite have classlist --- src/class/GundaiWebsite/index.ts | 50 ++++++++++++++++++++++++++-- src/class/Kyomu/index.ts | 19 ++++++----- src/class/Media/index.ts | 15 +++++---- src/class/Moodle/DisableRainbow.ts | 10 +++--- src/class/Moodle/EnableRainbow.ts | 34 +++++++++---------- src/class/Moodle/index.ts | 14 ++++---- src/class/Moodle/type.ts | 4 +++ src/class/MyLibrary/index.ts | 13 ++++---- src/utils/AddClass.ts | 52 +++++++++++++++++++++--------- 9 files changed, 141 insertions(+), 70 deletions(-) diff --git a/src/class/GundaiWebsite/index.ts b/src/class/GundaiWebsite/index.ts index 95a35bd..901ebc5 100644 --- a/src/class/GundaiWebsite/index.ts +++ b/src/class/GundaiWebsite/index.ts @@ -1,17 +1,63 @@ // 無駄とは人生である。無駄を極めよ。無駄を愛せ。無駄を生きろ。 // 無駄を以て物を成す者は、無駄を以て物を滅ぼす者に勝る。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 { + 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: [], + }; } 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]); + } } // 型変数使うとかっこいいよね diff --git a/src/class/Kyomu/index.ts b/src/class/Kyomu/index.ts index 347b704..b90f83e 100644 --- a/src/class/Kyomu/index.ts +++ b/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 = 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); diff --git a/src/class/Media/index.ts b/src/class/Media/index.ts index f985f6d..5ce39e9 100644 --- a/src/class/Media/index.ts +++ b/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"); +}; diff --git a/src/class/Moodle/DisableRainbow.ts b/src/class/Moodle/DisableRainbow.ts index 771c916..1439754 100644 --- a/src/class/Moodle/DisableRainbow.ts +++ b/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 = () => { diff --git a/src/class/Moodle/EnableRainbow.ts b/src/class/Moodle/EnableRainbow.ts index 133ac17..943e7c9 100644 --- a/src/class/Moodle/EnableRainbow.ts +++ b/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) => { +export const ReplaceTextToGaimg = (moodle: GundaiWebSite) => { 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", "現在のプレイ人数"); }; diff --git a/src/class/Moodle/index.ts b/src/class/Moodle/index.ts index 9d11a28..855d0e9 100644 --- a/src/class/Moodle/index.ts +++ b/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(); -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, ""); }); diff --git a/src/class/Moodle/type.ts b/src/class/Moodle/type.ts index 05529ac..da6c89b 100644 --- a/src/class/Moodle/type.ts +++ b/src/class/Moodle/type.ts @@ -1,3 +1,7 @@ +import GundaiWebSite from "../GundaiWebsite"; + export interface MoodleAdditionalInfo { headerText: string; } + +export type Moodle = GundaiWebSite; diff --git a/src/class/MyLibrary/index.ts b/src/class/MyLibrary/index.ts index 74ac705..e56c79f 100644 --- a/src/class/MyLibrary/index.ts +++ b/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"); +}; diff --git a/src/utils/AddClass.ts b/src/utils/AddClass.ts index b091fc5..c22882a 100644 --- a/src/utils/AddClass.ts +++ b/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 | 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"]); } +*/ From 17eb23cb542fcc74bf3dbd8776baee16c26ee5d4 Mon Sep 17 00:00:00 2001 From: hayao Date: Tue, 17 Oct 2023 11:07:22 +0900 Subject: [PATCH 2/3] Fix: Fix undefined this https://teratail.com/questions/331287 --- src/class/GundaiWebsite/index.ts | 4 ++++ src/utils/LoadGamingWebsite.ts | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/class/GundaiWebsite/index.ts b/src/class/GundaiWebsite/index.ts index 901ebc5..dc865fc 100644 --- a/src/class/GundaiWebsite/index.ts +++ b/src/class/GundaiWebsite/index.ts @@ -21,6 +21,7 @@ export default class GundaiWebSite { constructor(enable?: () => void, disable?: () => void) { if (enable) this.EnableRainbow = enable; if (disable) this.DisableRainbow = disable; + this.additionalInfo = {} as T; this.classes = { RainbowText: [], @@ -28,6 +29,9 @@ export default class GundaiWebSite { RainbowBg: [], RainbowBgShadow: [], }; + + this.EnableRainbow.bind(this); + this.DisableRainbow.bind(this); } EnableRainbow() {} DisableRainbow() {} diff --git a/src/utils/LoadGamingWebsite.ts b/src/utils/LoadGamingWebsite.ts index f92b31b..2f8b0b5 100644 --- a/src/utils/LoadGamingWebsite.ts +++ b/src/utils/LoadGamingWebsite.ts @@ -3,5 +3,5 @@ import RunFuncIfEnabled from "./RunFuncIfEnabled"; // ウィンドウが読み込まれたらGundaiWebsiteのEnableRainbowを実行する export default function LoadGamingWebsite(website: GundaiWebSite) { - window.addEventListener("load", async () => await RunFuncIfEnabled(website.EnableRainbow)); + window.addEventListener("load", () => RunFuncIfEnabled(() => website.EnableRainbow())); } From 56dfb82314d9af0a418d4f5905517c0ca2bb4505 Mon Sep 17 00:00:00 2001 From: hayao Date: Tue, 17 Oct 2023 11:24:20 +0900 Subject: [PATCH 3/3] Docs: Add links --- REFER.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/REFER.md b/REFER.md index 5f4dd0d..628a0f4 100644 --- a/REFER.md +++ b/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)