Update: Fix dark header with rainbow

GunmaRamens · Oct 30, 2023 · dbf1b10 · dbf1b10
1 parent 4aeebae
commit dbf1b10
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 5 deletions.
diff --git a/src/class/Moodle/dark.ts b/src/class/Moodle/dark.ts
@@ -2,7 +2,7 @@ import { DarkApplicator } from "../ClassApplicator";
 import { Moodle } from ".";
 import { replaceLMSLogo } from "./common";
 
-export default function enableDark(this: DarkApplicator) {
+export default async function enableDark(this: DarkApplicator) {
     // 画像差し替え
     replaceLMSLogo();
 
@@ -13,9 +13,26 @@ export default function enableDark(this: DarkApplicator) {
     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");
+    // ゲーミングが有効ならそちらに任せる
+    if (!(await Moodle.isRainbowEnabled())) {
+        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");
+
+        // ヘッダーのリンクにホバーしたときの挙動
+        document.querySelectorAll<HTMLElement>(".moremenu .nav-link").forEach((e) => {
+            const menuHasActiveClass = e.classList.contains("active");
+            e.addEventListener("mouseover", () => {
+                this.textAccent.apply(e);
+                if (!menuHasActiveClass) e.classList.add("active");
+            });
+            e.addEventListener("mouseout", () => {
+                //e.classList.remove("rainbow-bg-shadow");
+                this.textAccent.remove(e);
+                if (!menuHasActiveClass) e.classList.remove("active");
+            });
+        });
+    }
 
     // dashboard
     this.bgBase.apply(".card-body");

diff --git a/src/styles/moodle.scss b/src/styles/moodle.scss
@@ -24,6 +24,13 @@
     }
 }
 
+[data-gaming_gundai_dark="true"],
+[data-gaming_gundai="true"] {
+    .moremenu .nav-link:hover {
+        background-color: transparent !important;
+    }
+}
+
 [data-gaming_gundai_dark="true"] {
     #page.drawers .main-inner,
     #region-main {

diff --git a/src/utils/addClass.ts b/src/utils/addClass.ts
@@ -3,7 +3,7 @@ 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);
+            const elements = document.querySelectorAll<HTMLElement>(element);
             elements.forEach((e) => {
                 console.log(`adding classes (${classNames}) to`, e);
                 e.classList.add(...classNames);