Close #32

Author: FifthTundraG

public/style.css

@@ -422,6 +422,7 @@ small {
 dialog::backdrop {
     background-color: black;
     opacity: 50%;
+    opacity: var(--dialog-backdrop-opacity); /* for programmatic modification */
 }
 .simple-popup-button-div {
     display: flex;

src/ts/changelogs.ts

@@ -238,6 +238,7 @@ export const versionChangelogs: Changelog[] = [
             "A button in Options to toggle auto-saving (#29)",
             "GitHub issues in changelogs work as hyperlinks, like this one: #13",
             "A \"removed\" section in changelogs",
+            "Advanced popups now have options (#32)",
             "The white background is now visible by default."
         ],
         changed: [

src/ts/mods.ts

@@ -38,6 +38,7 @@ export class Mod extends SaveProvider {
     // -------------------
     // Actual mod stuff
     // -------------------
+    /** See #61 for how this will be used */
     public readonly METADATA: ModMetadata;
 
     /** Mod namespace used for saving */

src/ts/popup.ts

@@ -81,17 +81,36 @@ export class SimplePopup {
     }
 }
 
+export interface AdvancedPopupOptions {
+    /** The `opacity` percentage of the dialog backdrop. Default: 50 */
+    filterLevel?: number;
+    /** The padding to apply to the popup HTML, in `px` */
+    innerPadding?: number;
+}
+const defaultValues: Required<AdvancedPopupOptions> = {
+    filterLevel: 50,
+    innerPadding: 0
+}
+
 export class AdvancedPopup {
     html: HTMLDialogElement
 
-    constructor(x: number, y: number, html: string) { // todo: possibly add HTMLElement to html instead of just string?
+    constructor(x: number, y: number, html: string, options: AdvancedPopupOptions=undefined) { // todo: possibly add HTMLElement to html instead of just string?
         this.html = document.createElement("dialog");
         this.html.className = "popup";
         this.html.style.display = "flex";
         this.html.style.width = `${x}px`;
         this.html.style.height = `${y}px`;
 
         this.html.innerHTML = html;
+
+        const filledOptions = {
+            ...defaultValues,
+            ...options
+        };
+
+        this.html.style.padding = filledOptions.innerPadding+"px";
+        this.html.style.setProperty("--dialog-backdrop-opacity", filledOptions.filterLevel+"%");
 
         document.body.appendChild(this.html);