feat: le menu

global.d.ts

@@ -1,8 +1,8 @@
 /** Import HTML as modules - https://stackoverflow.com/a/47705264/3323672 */
 declare module "*.html" {
   /** Content of the HTML file as a string */
-  const content: string;
-  export default content;
+  const htmlContent: string;
+  export default htmlContent;
 }
 
 declare module "*.md" {
@@ -10,3 +10,9 @@ declare module "*.md" {
   const htmlContent: string;
   export default htmlContent;
 }
+
+declare module "*.css" {
+  /** Content of the CSS file as a string */
+  const cssContent: string;
+  export default cssContent;
+}

package-lock.json

@@ -23,6 +23,7 @@
         "html-loader": "^4.2.0",
         "markdown-loader": "^8.0.0",
         "nodemon": "^2.0.22",
+        "raw-loader": "^4.0.2",
         "ts-loader": "^9.4.3",
         "ts-node": "^10.9.1",
         "tslib": "^2.5.2",
@@ -1214,7 +1215,6 @@
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
       "dev": true,
-      "peer": true,
       "peerDependencies": {
         "ajv": "^6.9.1"
       }
@@ -1310,6 +1310,15 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -1779,6 +1788,15 @@
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
       "dev": true
     },
+    "node_modules/emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -2826,6 +2844,18 @@
       "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
       "dev": true
     },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -2858,6 +2888,20 @@
         "node": ">=6.11.5"
       }
     },
+    "node_modules/loader-utils": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+      "dev": true,
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
     "node_modules/locate-path": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -3509,6 +3553,26 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/raw-loader": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
+      "integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -3689,7 +3753,6 @@
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.2.tgz",
       "integrity": "sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
@@ -5482,7 +5545,6 @@
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
       "dev": true,
-      "peer": true,
       "requires": {}
     },
     "ansi-colors": {
@@ -5555,6 +5617,12 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true
+    },
     "binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -5903,6 +5971,12 @@
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
       "dev": true
     },
+    "emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+      "dev": true
+    },
     "encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -6704,6 +6778,12 @@
       "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
       "dev": true
     },
+    "json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true
+    },
     "kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -6727,6 +6807,17 @@
       "dev": true,
       "peer": true
     },
+    "loader-utils": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+      "dev": true,
+      "requires": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      }
+    },
     "locate-path": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -7222,6 +7313,16 @@
         }
       }
     },
+    "raw-loader": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
+      "integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      }
+    },
     "readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -7333,7 +7434,6 @@
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.2.tgz",
       "integrity": "sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==",
       "dev": true,
-      "peer": true,
       "requires": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",

package.json

@@ -43,6 +43,7 @@
     "html-loader": "^4.2.0",
     "markdown-loader": "^8.0.0",
     "nodemon": "^2.0.22",
+    "raw-loader": "^4.0.2",
     "ts-loader": "^9.4.3",
     "ts-node": "^10.9.1",
     "tslib": "^2.5.2",

src/BetterYTM.user.ts

@@ -11,7 +11,7 @@ import {
   // input
   initArrowKeySkip, initSiteSwitch,
   // menu
-  addMenu, initChangelog,
+  initMenu, addMenu,
 } from "./features/index";
 
 (async () => {
@@ -32,8 +32,6 @@ import {
     console.error("BetterYTM - General Error:", err);
   }
 
-  await initChangelog();
-
   /** Called when the DOM has finished loading (after `DOMContentLoaded` is emitted) */
   async function onDomLoad() {
     const domain = getDomain();
@@ -70,7 +68,7 @@ import {
           initSiteSwitch(domain);
 
         try {
-          addMenu();
+          addMenu(); // TODO: remove
         }
         catch(err) {
           console.error("BetterYTM: Couldn't add menu:", err);
@@ -81,4 +79,11 @@ import {
       console.error("BetterYTM: General error while executing feature:", err);
     }
   }
+
+  try {
+    initMenu();
+  }
+  catch(err) {
+    console.error("BetterYTM: Couldn't initialize menu:", err);
+  }
 })();

src/features/index.ts

@@ -1,7 +1,8 @@
 export * from "./input";
 export * from "./layout";
 export * from "./lyrics";
-export * from "./menu";
+export { initMenu } from "./menu/menu"; // TODO
+export * from "./menu/menu_old";
 
 /** Contains all possible features with their default values and other config */
 export const featInfo = {

src/features/layout.ts

@@ -2,7 +2,7 @@ import { dbg, info, triesInterval, triesLimit } from "../constants";
 import { getFeatures } from "../config";
 import { addGlobalStyle, insertAfter, siteEvents } from "../utils";
 import type { FeatureConfig } from "../types";
-import { openMenu } from "./menu";
+import { openMenu } from "./menu/menu_old";
 
 let features: FeatureConfig;
 

src/features/menu/menu.css

@@ -1,3 +1,17 @@
-.bytm-menu-tab[data-enabled="false"] {
+#bytm-menu-header-option {
+    display: "flex";
+    justify-content: center;
+    align-items: center;
+}
+
+#bytm-menu-header-option h3 {
+    margin: 0;
+}
+
+.bytm-menu-tab[data-active="true"] {
     display: none;
-}
+}
+
+.bytm-menu-tab[data-active="false"] {
+    display: none;
+}

src/features/menu/menu.html

@@ -1,21 +1,21 @@
 <dialog id="bytm-menu-dialog">
     <div id="bytm-menu-header">
-        <div class="bytm-menu-header-option" onclick="() => setActiveTab('options');">
+        <div class="bytm-menu-header-option" id="bytm-menu-tab-options-header" data-active="true">
             <h3>Options</h3>
         </div>
-        <!-- <div class="bytm-menu-header-option" onclick="() => setActiveTab('info');">
+        <!-- <div class="bytm-menu-header-option" id="bytm-menu-tab-info-header" data-active="false">
             <h3>Info</h3>
         </div> -->
-        <div class="bytm-menu-header-option" onclick="() => setActiveTab('changelog');">
+        <div class="bytm-menu-header-option" id="bytm-menu-tab-changelog-header" data-active="false">
             <h3>Changelog</h3>
         </div>
     </div>
     <div id="bytm-menu-body">
-        <div class="bytm-menu-tab" id="bytm-menu-tab-options" data-enabled="true">
+        <div class="bytm-menu-tab-content" id="bytm-menu-tab-options-content" data-active="true">
         </div>
-        <!-- <div class="bytm-menu-tab" id="bytm-menu-tab-info" data-enabled="false">
+        <!-- <div class="bytm-menu-tab-content" id="bytm-menu-tab-info-content" data-active="false">
         </div> -->
-        <div class="bytm-menu-tab" id="bytm-menu-tab-changelog" data-enabled="false">
+        <div class="bytm-menu-tab-content" id="bytm-menu-tab-changelog-content" data-active="false">
         </div>
     </div>
 </dialog>

src/features/menu/menu.js

@@ -1,22 +0,0 @@
-const tabsSelectors = {
-  options: "bytm-menu-tab-options",
-  // info: "bytm-menu-tab-info",
-  changelog: "bytm-menu-tab-changelog",
-};
-
-/** @param {keyof typeof tabsSelectors} tab */
-function setActiveTab(tab) {
-  const tabs = { ...tabsSelectors };
-  delete tabs[tab];
-  for(const disableTab of Object.keys(tabs))
-    document.querySelector(`#${tabs[disableTab]}`).dataset.enabled = "false";
-  document.querySelector(`#${tabsSelectors[tab]}`).dataset.enabled = "true";
-}
-
-function openMenu() {
-  document.querySelector("#bytm-menu-dialog").showModal();
-}
-
-function closeMenu() {
-  document.querySelector("#bytm-menu-dialog").close();
-}

src/features/menu/menu.ts

@@ -0,0 +1,104 @@
+import { addGlobalStyle } from "../../utils";
+import changelog from "../../../changelog.md";
+import menuContent from "./menu.html";
+import menuStyle from "./menu.css";
+
+/**
+ * These are the base selector values for the menu tabs  
+ * Header selector: `#${baseValue}-header`  
+ * Content selector: `#${baseValue}-content`
+ */
+const tabsSelectors = {
+  options: "bytm-menu-tab-options",
+  // info: "bytm-menu-tab-info",
+  changelog: "bytm-menu-tab-changelog",
+};
+
+export function initMenu() {
+  initChangelog();
+
+  addGlobalStyle(menuStyle, "menu2"); // TODO
+
+  document.addEventListener("DOMContentLoaded", () => {
+    // create menu backdrop element
+    const backdrop = document.createElement("div");
+    backdrop.id = "bytm-menu-backdrop";
+    backdrop.style.display = "none";
+    // add menu html
+    backdrop.innerHTML = menuContent;
+  });
+}
+
+/** Opens the specified tab */
+export function setActiveTab(tab: keyof typeof tabsSelectors) {
+  const tabs = { ...tabsSelectors };
+  delete tabs[tab];
+  // disable all but new active tab
+  for(const disableTab of Object.keys(tabs)) {
+    (document.querySelector(`#${tabs[disableTab as keyof typeof tabs]}-header`) as HTMLElement).dataset.active = "false";
+    (document.querySelector(`#${tabs[disableTab as keyof typeof tabs]}-content`) as HTMLElement).dataset.active = "false";
+  }
+  // enable new active tab
+  (document.querySelector(`#${tabsSelectors[tab]}-header`) as HTMLElement).dataset.active = "true";
+  (document.querySelector(`#${tabsSelectors[tab]}-content`) as HTMLElement).dataset.active = "true";
+}
+  
+/** Opens the modal menu dialog */
+export function openMenu() {
+  (document.querySelector("#bytm-menu-dialog") as HTMLDialogElement).showModal();
+}
+  
+/** Closes the modal menu dialog */
+export function closeMenu() {
+  (document.querySelector("#bytm-menu-dialog") as HTMLDialogElement).close();
+}
+
+//#MARKER changelog
+
+async function initChangelog() {
+  //   const clStyle = `\
+  // #betterytm-changelog-bg {
+  //   display: block;
+  //   position: fixed;
+  //   width: 100vw;
+  //   height: 100vh;
+  //   top: 0;
+  //   left: 0;
+  //   z-index: 15;
+  //   background-color: rgba(0, 0, 0, 0.6);
+  // }
+
+  // #betterytm-changelog {
+  //   display: inline-block;
+  //   position: fixed;
+  //   width: 50vw;
+  //   height: auto;
+  //   min-height: 500px;
+  //   left: 25vw;
+  //   top: 25vh;
+  //   z-index: 16;
+  //   overflow: auto;
+  //   padding: 8px;
+  //   color: #fff;
+  //   background-color: #212121;
+  // }
+
+  // #betterytm-changelog-close {
+  //   cursor: pointer;
+  // }`;
+
+
+  // console.log("#DEBUG _CHANGELOG:", changelog);
+  // const cl = document.createElement("div");
+  // cl.style.position = "fixed";
+  // cl.style.top = "0";
+  // cl.style.left = "0";
+  // cl.style.minWidth = "500px";
+  // cl.style.minHeight = "500px";
+  // cl.style.overflowY = "scroll";
+  // cl.innerHTML = changelog;
+  // document.addEventListener("DOMContentLoaded", () => document.body.appendChild(cl));
+
+
+  void ["TODO", changelog];
+}

src/features/menu/index.ts → src/features/menu/menu_old.ts

@@ -3,7 +3,6 @@ import { dbg, info } from "../../constants";
 import { featInfo } from "../index";
 import { FeatureConfig } from "../../types";
 import { addGlobalStyle } from "../../utils";
-import changelog from "../../../changelog.md";
 
 const branch = dbg ? "develop" : "main";
 
@@ -367,53 +366,3 @@ export function openMenu() {
   menuBg.style.visibility = "visible";
   menuBg.style.display = "block";
 }
-
-//#MARKER changelog
-
-export async function initChangelog() {
-  //   const clStyle = `\
-  // #betterytm-changelog-bg {
-  //   display: block;
-  //   position: fixed;
-  //   width: 100vw;
-  //   height: 100vh;
-  //   top: 0;
-  //   left: 0;
-  //   z-index: 15;
-  //   background-color: rgba(0, 0, 0, 0.6);
-  // }
-
-  // #betterytm-changelog {
-  //   display: inline-block;
-  //   position: fixed;
-  //   width: 50vw;
-  //   height: auto;
-  //   min-height: 500px;
-  //   left: 25vw;
-  //   top: 25vh;
-  //   z-index: 16;
-  //   overflow: auto;
-  //   padding: 8px;
-  //   color: #fff;
-  //   background-color: #212121;
-  // }
-
-  // #betterytm-changelog-close {
-  //   cursor: pointer;
-  // }`;
-
-
-  // console.log("#DEBUG _CHANGELOG:", changelog);
-  // const cl = document.createElement("div");
-  // cl.style.position = "fixed";
-  // cl.style.top = "0";
-  // cl.style.left = "0";
-  // cl.style.minWidth = "500px";
-  // cl.style.minHeight = "500px";
-  // cl.style.overflowY = "scroll";
-  // cl.innerHTML = changelog;
-  // document.addEventListener("DOMContentLoaded", () => document.body.appendChild(cl));
-
-
-  void ["TODO", changelog];
-}

webpack.config.js

@@ -30,6 +30,10 @@ export default {
           },
         ],
       },
+      {
+        test: /\.css$/i,
+        use: "raw-loader",
+      },
     ],
   },
   plugins: [