feat: more feat help dialog improvements

src/components/BytmDialog.ts

@@ -20,7 +20,7 @@ export interface BytmDialogOptions {
   closeBtnEnabled?: boolean;
   /** Whether the dialog should be destroyed when it's closed - defaults to false */
   destroyOnClose?: boolean;
-  /** Whether the dialog should be unmounted when it's closed - defaults to false */
+  /** Whether the dialog should be unmounted when it's closed - defaults to true - superseded by destroyOnClose */
   unmountOnClose?: boolean;
   /** Whether the dialog should have a smaller overall appearance - defaults to false */
   small?: boolean;
@@ -62,7 +62,7 @@ export class BytmDialog extends NanoEmitter<{
       closeOnEscPress: true,
       closeBtnEnabled: true,
       destroyOnClose: false,
-      unmountOnClose: false,
+      unmountOnClose: true,
       smallHeader: false,
       ...options,
     };
@@ -188,8 +188,8 @@ export class BytmDialog extends NanoEmitter<{
 
     if(this.options.destroyOnClose)
       this.destroy();
-
-    if(this.options.unmountOnClose)
+    // don't destroy *and* unmount at the same time
+    else if(this.options.unmountOnClose)
       this.unmount();
   }
 

src/dialogs/dialogs.css

@@ -33,15 +33,6 @@
   --bytm-menu-width-max: 600px;
 }
 
-#bytm-feat-help-dialog-bg,
-#bytm-feat-help-menu-bg
-{
-  --bytm-dialog-height-max: 400px;
-  --bytm-dialog-width-max: 600px;
-  --bytm-menu-height-max: 400px;
-  --bytm-menu-width-max: 600px;
-}
-
 .bytm-dialog-body p {
   overflow-wrap: break-word;
 }

src/dialogs/featHelp.ts

@@ -4,6 +4,7 @@ import { featInfo } from "../features";
 import type { FeatureKey } from "../types";
 
 let featHelpDialog: BytmDialog | null = null;
+let curFeatKey: FeatureKey | null = null;
 
 export type FeatHelpDialogRenderProps = {
   featKey: FeatureKey;
@@ -13,6 +14,7 @@ export type FeatHelpDialogRenderProps = {
 export async function getFeatHelpDialog({
   featKey,
 }: FeatHelpDialogRenderProps) {
+  curFeatKey = featKey;
   if(!featHelpDialog) {
     featHelpDialog = new BytmDialog({
       id: "feat-help",
@@ -21,14 +23,11 @@ export async function getFeatHelpDialog({
       closeBtnEnabled: true,
       closeOnBgClick: true,
       closeOnEscPress: true,
-      destroyOnClose: true,
       small: true,
       renderHeader,
-      renderBody: () => renderBody({ featKey }),
+      renderBody,
     });
 
-    featHelpDialog.on("destroy", () => featHelpDialog = null);
-
     // make config menu inert while help dialog is open
     featHelpDialog.on("open", () => document.querySelector("#bytm-cfg-menu")?.setAttribute("inert", "true"));
     featHelpDialog.on("close", () => document.querySelector("#bytm-cfg-menu")?.removeAttribute("inert"));
@@ -47,23 +46,19 @@ async function renderHeader() {
   return headerEl;
 }
 
-async function renderBody({
-  featKey,
-}: {
-  featKey: FeatureKey;
-}) {
+async function renderBody() {
   const contElem = document.createElement("div");
 
   const featDescElem = document.createElement("h3");
   featDescElem.role = "subheading";
-  featDescElem.textContent = t(`feature_desc_${featKey}`);
-  featDescElem.id = "bytm-feat-help-menu-desc";
+  featDescElem.textContent = t(`feature_desc_${curFeatKey}`);
+  featDescElem.id = "bytm-feat-help-dialog-desc";
 
   const helpTextElem = document.createElement("div");
-  helpTextElem.id = "bytm-feat-help-menu-text";
+  helpTextElem.id = "bytm-feat-help-dialog-text";
   // @ts-ignore
-  const helpText: string | undefined = featInfo[featKey]?.helpText?.();
-  helpTextElem.textContent = helpText ?? t(`feature_helptext_${featKey}`);
+  const helpText: string | undefined = featInfo[curFeatKey]?.helpText?.();
+  helpTextElem.textContent = helpText ?? t(`feature_helptext_${curFeatKey}`);
 
   contElem.appendChild(featDescElem);
   contElem.appendChild(helpTextElem);

src/menu/menu_old.css

@@ -410,14 +410,14 @@
   font-weight: bolder;
 }
 
-#bytm-feat-help-menu-desc, #bytm-feat-help-menu-text {
+#bytm-feat-help-dialog-desc, #bytm-feat-help-dialog-text {
   overflow-wrap: break-word;
   white-space: pre-wrap;
   font-size: 1.5rem;
   line-height: 1.25em;
 }
 
-#bytm-feat-help-menu-desc {
+#bytm-feat-help-dialog-desc {
   font-size: 1.8rem;
   padding-bottom: 10px;
 }