ref: rename functions and css classes

src/components/index.ts

@@ -1,3 +1,3 @@
 export * from "./BytmDialog";
 export * from "./hotkeyInput";
-export * from "./toggle";
+export * from "./toggleInput";

src/components/toggle.css → src/components/toggleInput.css

@@ -1,6 +1,4 @@
-/* #MARKER toggle */
-
-.bytm-toggle-wrapper {
+.bytm-toggle-input-wrapper {
   --toggle-height: 24px;
   --toggle-width: 48px;
   --toggle-knob-offset: 4px;
@@ -12,7 +10,7 @@
   align-items: center;
 }
 
-.bytm-toggle-wrapper .bytm-toggle-label {
+.bytm-toggle-input-wrapper .bytm-toggle-input-label {
   cursor: pointer;
   font-size: 1.5rem;
   padding: 3px 12px;
@@ -20,12 +18,12 @@
 
 /* sauce: https://danklammer.com/articles/simple-css-toggle-switch/ */
 
-.bytm-toggle {
+.bytm-toggle-input {
   display: flex;
   align-items: center;
 }
 
-.bytm-toggle input {
+.bytm-toggle-input input {
   appearance: none;
   display: inline-block;
   width: var(--toggle-width);
@@ -42,11 +40,11 @@
   transition: justify-content 0.2s ease, background-color 0.2s ease;
 }
 
-.bytm-toggle input[data-toggled="true"] {
+.bytm-toggle-input input[data-toggled="true"] {
   background-color: var(--toggle-color-on);
 }
 
-.bytm-toggle input .bytm-toggle-knob {
+.bytm-toggle-input input .bytm-toggle-input-knob {
   --toggle-knob-calc-width: calc(var(--toggle-height) - (var(--toggle-knob-offset) * 2));
   --toggle-knob-calc-height: calc(var(--toggle-height) - (var(--toggle-knob-offset) * 2));
   width: var(--toggle-knob-calc-width);
@@ -60,6 +58,6 @@
   transition: left 0.2s ease;
 }
 
-.bytm-toggle input[data-toggled="true"] .bytm-toggle-knob {
+.bytm-toggle-input input[data-toggled="true"] .bytm-toggle-input-knob {
   left: calc(var(--toggle-width) - var(--toggle-knob-offset) - var(--toggle-knob-calc-width));
 }

src/components/toggle.ts → src/components/toggleInput.ts

@@ -1,8 +1,8 @@
 import { randomId } from "@sv443-network/userutils";
 import { t } from "../utils";
-import "./toggle.css";
+import "./toggleInput.css";
 
-export interface ToggleProps {
+export interface ToggleInputProps {
   /** Callback function that is called when the toggle is changed */
   onChange: (value: boolean) => void;
   /** Initial value of the toggle - defaults to false */
@@ -14,27 +14,27 @@ export interface ToggleProps {
 }
 
 /** Creates a simple toggle element */
-export async function createToggle({
+export async function createToggleInput({
   onChange,
   initialValue = false,
   id = randomId(8, 26),
   labelPos = "left",
-}: ToggleProps) {
+}: ToggleInputProps) {
   const wrapperEl = document.createElement("div");
-  wrapperEl.classList.add("bytm-toggle-wrapper", "bytm-no-select");
+  wrapperEl.classList.add("bytm-toggle-input-wrapper", "bytm-no-select");
   wrapperEl.role = "switch";
   wrapperEl.tabIndex = 0;
 
   const labelEl = labelPos !== "off" && document.createElement("label");
   if(labelEl) {
-    labelEl.classList.add("bytm-toggle-label");
+    labelEl.classList.add("bytm-toggle-input-label");
     labelEl.textContent = t(`toggled_${initialValue ? "on" : "off"}`);
     if(id)
-      labelEl.htmlFor = `bytm-toggle-${id}`;
+      labelEl.htmlFor = `bytm-toggle-input-${id}`;
   }
 
   const toggleWrapperEl = document.createElement("div");
-  toggleWrapperEl.classList.add("bytm-toggle");
+  toggleWrapperEl.classList.add("bytm-toggle-input");
   toggleWrapperEl.tabIndex = -1;
 
   const toggleEl = document.createElement("input");
@@ -43,10 +43,10 @@ export async function createToggle({
   toggleEl.dataset.toggled = String(Boolean(initialValue));
   toggleEl.tabIndex = -1;
   if(id)
-    toggleEl.id = `bytm-toggle-${id}`;
+    toggleEl.id = `bytm-toggle-input-${id}`;
 
   const toggleKnobEl = document.createElement("div");
-  toggleKnobEl.classList.add("bytm-toggle-knob");
+  toggleKnobEl.classList.add("bytm-toggle-input-knob");
   toggleKnobEl.innerHTML = " ";
 
   const toggleElClicked = (e: Event) => {

src/dialogs/versionNotif.ts

@@ -1,6 +1,6 @@
 import { host, scriptInfo } from "../constants";
 import { getChangelogMd, parseMarkdown, t } from "../utils";
-import { BytmDialog, createToggle } from "../components";
+import { BytmDialog, createToggleInput } from "../components";
 import { getFeatures, saveFeatures } from "../config";
 import pkg from "../../package.json" assert { type: "json" };
 
@@ -90,7 +90,7 @@ async function renderBody({
   const disableUpdCheckEl = document.createElement("div");
   disableUpdCheckEl.id = "bytm-disable-update-check-wrapper";
 
-  const disableToggleEl = await createToggle({
+  const disableToggleEl = await createToggleInput({
     id: "disable-update-check",
     initialValue: false,
     labelPos: "off",

src/menu/menu_old.ts

@@ -7,7 +7,7 @@ import { formatVersion } from "../config";
 import { emitSiteEvent, siteEvents } from "../siteEvents";
 import type { FeatureCategory, FeatureKey, FeatureConfig, HotkeyObj, FeatureInfo } from "../types";
 import "./menu_old.css";
-import { createHotkeyInput, createToggle } from "../components";
+import { createHotkeyInput, createToggleInput } from "../components";
 import pkg from "../../package.json" assert { type: "json" };
 
 //#MARKER create menu elements
@@ -435,15 +435,15 @@ async function addCfgMenu() {
           switch(type) {
           case "hotkey":
             wrapperElem = createHotkeyInput({
-              initialValue: initialVal as HotkeyObj,
+              initialValue: typeof initialVal === "object" ? initialVal as HotkeyObj : undefined,
               onChange: (hotkey) => confChanged(featKey as keyof FeatureConfig, initialVal, hotkey),
             });
             break;
           case "toggle":
-            wrapperElem = await createToggle({
+            wrapperElem = await createToggleInput({
+              initialValue: Boolean(initialVal),
               onChange: (checked) => confChanged(featKey as keyof FeatureConfig, initialVal, checked),
               id: `ftconf-${featKey}`,
-              initialValue: Boolean(initialVal),
               labelPos: "left",
             });
             break;