WIP: append messages

__docs__/wonder-blocks-announcer/announcer.stories.tsx

@@ -12,13 +12,21 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import ComponentInfo from "../../.storybook/components/component-info";
 import packageConfig from "../../packages/wonder-blocks-announcer/package.json";
 
+import "./announcer.styles.css";
+
 const AnnouncerExample = ({
     message = "Clicked!",
     level,
     timeoutDelay,
 }: SendMessageProps) => {
     return (
-        <Button onClick={() => sendMessage({message, level, timeoutDelay})}>
+        <Button
+            onClick={() => {
+                // TODO: explore making method async for consistent return string
+                const id = sendMessage({message, level, timeoutDelay});
+                console.log(id);
+            }}
+        >
             Save
         </Button>
     );

__docs__/wonder-blocks-announcer/announcer.styles.css

@@ -0,0 +1,13 @@
+.wbARegion {
+    border: 1px solid red;
+    margin-bottom: 0.5em;
+    position: relative;
+}
+.wbARegion::before {
+    background-color: white;
+    border: 1px solid red;
+    content: attr(id);
+    display: block;
+    font-size: 0.75rem;
+    padding: 0.25em;
+}

packages/wonder-blocks-announcer/src/__tests__/send-message.test.ts

@@ -9,27 +9,66 @@ describe("Announcer.sendMessage", () => {
         sendMessage({message});
 
         // ASSERT: expect live regions to exist
-        const wrapperElement = document.getElementById("wbAnnouncer");
+        const wrapperElement = document.getElementById("wbAnnounce");
+        const regionElements = document.querySelectorAll("[id^='wbARegion']");
         expect(wrapperElement).toBeInTheDocument();
+        expect(regionElements).toHaveLength(4);
     });
 
-    xit("appends to polite live regions by default", () => {
+    it("appends to polite live regions by default", () => {
         // ARRANGE
-        const message = "Ta-da!";
+        const message = "Ta-da, nicely!";
 
         // ACT: call function
         sendMessage({message});
 
         // ASSERT: expect live regions to exist
-        const wrapperElement = document.getElementById("wbAnnounceWrapper");
+        const politeRegions = document.querySelectorAll(
+            "[id^='wbARegion-polite']",
+        );
+        const wrapperElement = document.getElementById("wbAnnounce");
         expect(wrapperElement).toBeInTheDocument();
+        expect(politeRegions).toHaveLength(2);
+        expect(politeRegions[0]).toHaveAttribute("aria-live", "polite");
+        expect(politeRegions[0]).toHaveAttribute("id", "wbARegion-polite0");
+        expect(politeRegions[1]).toHaveAttribute("aria-live", "polite");
+        expect(politeRegions[1]).toHaveAttribute("id", "wbARegion-polite1");
     });
 
-    xit("appends messages in alternating polite live region elements", () => {});
+    it("appends messages in alternating polite live region elements", async () => {
+        // ARRANGE
+        const message1 = "Rainier McCheddarton";
+        const message2 = "Bagley Fluffpants";
+
+        // ACT: post two messages
+        sendMessage({message: message1, timeoutDelay: 10});
+        // sendMessage({message: message2});
+
+        // ASSERT: check messages were appended to elements
+        const politeRegions = document.querySelectorAll(
+            "[id^='wbARegion-polite']",
+        );
+        console.log("test:", politeRegions[0].textContent);
+        // The second region will be targeted first
+        expect(politeRegions[0].textContent).toBe(message2);
+        expect(politeRegions[1].textContent).toBe(message1);
+    });
+
+    it("returns a targeted element IDREF", () => {
+        // ARRANGE
+        const message1 = "One Fish Two Fish";
+        const message2 = "Red Fish Blue Fish";
+
+        // ACT
+        const announcement1 = sendMessage({message: message1});
+        const announcement2 = sendMessage({message: message2});
+
+        // ASSERT
+        expect(announcement1).toBe("wbARegion-polite0");
+        expect(announcement2).toBe("wbARegion-polite1");
+    });
 
     xit("appends messages in alternating assertive live region elements", () => {});
 
     xit("appends messages after an optional delay", () => {});
-
-    xit("returns a targeted element IDREF", () => {});
 });

packages/wonder-blocks-announcer/src/index.ts

@@ -3,6 +3,12 @@
 
 export type PolitenessLevel = "polite" | "assertive";
 
+type RegionFactory = {
+    count: number;
+    aIndex: number;
+    pIndex: number;
+};
+
 const TIMEOUT_DELAY = 5000;
 let announcer: Announcer | null = null;
 
@@ -14,83 +20,223 @@ export type SendMessageProps = {
 
 export function sendMessage({
     message,
-    level = "polite", // TODO: find way to factor in `timer`
+    level = "polite", // TODO: decide whether to allow role=`timer`
     timeoutDelay,
-}: SendMessageProps): string {
-    if (!announcer) {
-        announcer = new Announcer();
+}: SendMessageProps): string | void {
+    announcer = Announcer.getInstance();
 
-        return announcer.announce(message, level, timeoutDelay);
+    if (typeof jest === "undefined") {
+        setTimeout(() => {
+            return announcer?.announce(message, level, timeoutDelay);
+        }, 100);
     } else {
+        // If we are in a test environment, announce without waiting
         return announcer.announce(message, level, timeoutDelay);
     }
 }
 
 export function clearMessages(id?: string) {
     if (id && document?.getElementById(id)) {
-        // clear target element
+        // announcer?.clear(id);
     } else if (document) {
-        // clear all elements
+        // announcer?.clear();
     }
 }
 
 class Announcer {
+    private static _instance: Announcer;
     node: HTMLElement | null = null;
-    assertiveRegions: HTMLElement | null = null;
-    politeRegions: HTMLElement | null = null;
-
-    constructor() {
+    assertiveRegions: HTMLElement[] | null = null;
+    politeRegions: HTMLElement[] | null = null;
+    regionFactory: RegionFactory = {
+        count: 2,
+        aIndex: 0,
+        pIndex: 0,
+    };
+    delayNum: number = TIMEOUT_DELAY;
+
+    private constructor() {
         if (typeof document !== "undefined") {
-            this.node = document.createElement("div");
-            this.node.id = `wbAnnouncer`;
-
-            Object.assign(this.node.style, srOnly);
-
-            this.assertiveRegions = this.createElements("assertive");
-            this.node.appendChild(this.assertiveRegions);
+            const topLevelId = `wbAnnounce`;
+
+            // Prevent duplicates in HMR
+            const announcerCheck = document.getElementById(topLevelId);
+            console.log(announcerCheck);
+            if (announcerCheck === null) {
+                this.init(topLevelId);
+            }
+        }
+    }
 
-            this.politeRegions = this.createElements("polite");
-            this.node.appendChild(this.politeRegions);
+    rebootForHMR() {
+        // Recover in the event regions get lost
+        // This happens in Storybook when saving a file:
+        // Announcer exists, but it loses the connection to element Refs
+        const announcerCheck = document.getElementById(`wbAnnounce`);
+        if (announcerCheck !== null) {
+            this.node = announcerCheck;
+            const pRegions = Array.from(
+                announcerCheck.querySelectorAll<HTMLElement>(
+                    "[id^='wbARegion-polite'",
+                ),
+            );
+            if (pRegions.length) {
+                this.politeRegions = pRegions;
+            }
+            const aRegions = Array.from(
+                announcerCheck.querySelectorAll<HTMLElement>(
+                    "[id^='wbARegion-assertive'",
+                ),
+            );
+            if (aRegions.length) {
+                this.assertiveRegions = aRegions;
+            }
+        }
+    }
 
-            document.body.prepend(this.node);
+    static getInstance() {
+        if (!Announcer._instance) {
+            Announcer._instance = new Announcer();
+            console.log(Announcer._instance);
         }
+
+        Announcer._instance.rebootForHMR();
+        return Announcer._instance;
     }
 
-    createElements(level: PolitenessLevel) {
-        const wrapper = document.createElement("div");
-        wrapper.id = `wbAnnounceWrapper-${level}`;
+    init(id: string) {
+        this.node = document.createElement("div");
+        this.node.id = id;
+
+        // Object.assign(this.node.style, srOnly);
 
-        const region1 = this.createRegion(level, 1);
-        const region2 = this.createRegion(level, 2);
+        const aWrapper = this.createRegionWrapper("assertive");
+        this.assertiveRegions = this.createDuplicateRegions(
+            aWrapper,
+            "assertive",
+        );
+        this.node?.appendChild(aWrapper);
 
-        wrapper.appendChild(region1);
-        wrapper.appendChild(region2);
+        const pWrapper = this.createRegionWrapper("polite");
+        this.politeRegions = this.createDuplicateRegions(pWrapper, "polite");
+        this.node.appendChild(pWrapper);
+
+        document.body.prepend(this.node);
+    }
 
+    isAttached() {
+        return this.node?.isConnected;
+    }
+
+    createRegionWrapper(level: PolitenessLevel) {
+        const wrapper = document.createElement("div");
+        wrapper.id = `wbAWrap-${level}`;
         return wrapper;
     }
 
+    createDuplicateRegions(
+        wrapper: HTMLElement,
+        level: PolitenessLevel,
+    ): HTMLElement[] {
+        const result = new Array(this.regionFactory.count)
+            .fill(0)
+            .map((el, i) => {
+                const region = this.createRegion(level, i);
+                wrapper.appendChild(region);
+                return region;
+            });
+        return result;
+    }
+
     createRegion(level: PolitenessLevel, id: number, role = "log") {
         const region = document.createElement("div");
         // TODO: test combinations of attrs
         region.setAttribute("role", role);
         region.setAttribute("aria-live", level);
-        region.id = `wbAnnounce-${level}${id}`;
+        region.classList.add("wbARegion");
+        region.id = `wbARegion-${level}${id}`;
         return region;
     }
 
     announce(
         message: string,
         level: PolitenessLevel,
         timeoutDelay = TIMEOUT_DELAY,
-    ): string {
-        if (level === "polite") {
-            // do polite things
-        } else if (level === "assertive") {
-            // do assertive things
+    ): string | void {
+        if (!this.node) {
+            return;
+        }
+
+        if (timeoutDelay) {
+            this.delayNum = timeoutDelay;
+        }
+        let targetedId = "";
+
+        if (level === "polite" && this.politeRegions) {
+            const index = this.appendMessage(
+                message,
+                this.politeRegions,
+                this.regionFactory.pIndex,
+            );
+            this.regionFactory.pIndex = index;
+            // console.log(
+            //     "code:",
+            //     this.politeRegions[this.regionFactory.pIndex].textContent,
+            // );
+            targetedId = this.politeRegions[this.regionFactory.pIndex].id || "";
+        } else if (level === "assertive" && this.assertiveRegions) {
+            const index = this.appendMessage(
+                message,
+                this.assertiveRegions,
+                this.regionFactory.aIndex,
+            );
+            this.regionFactory.aIndex = index;
+            targetedId =
+                this.assertiveRegions[this.regionFactory.aIndex].id || "";
+        }
+        return targetedId;
+    }
+
+    appendMessage(
+        message: string,
+        targetRegions: HTMLElement[],
+        index: number,
+    ): number {
+        // empty region at the previous index
+        targetRegions[index].replaceChildren();
+
+        // overwrite index passed in to update locally
+        index = this.alternateIndex(index);
+
+        // create element for new message
+        const messageEl = document.createElement("p");
+        messageEl.textContent = message;
+
+        // append message to new index
+        targetRegions[index].appendChild(messageEl);
+
+        setTimeout(() => {
+            messageEl.remove();
+        }, this.delayNum);
+
+        return index;
+    }
+
+    alternateIndex(index: number): number {
+        index += 1;
+        index = index % this.regionFactory.count;
+        return index;
+    }
+
+    clear(targetRegions?: HTMLElement[] | null, index?: number) {
+        if (!this.node) {
+            return;
         }
 
-        // TODO: return ID of element targeted for announcement
-        return "";
+        // if (index && targetRegions) {
+        //     targetRegions[index].replaceChildren();
+        // } else {
+        // }
     }
 }