@stackoverflow/stacks 1.6.2 → 1.6.3

package/lib/ts/controllers/s-modal.ts

@@ -13,7 +13,7 @@ export class ModalController extends Stacks.StacksController {
 
     private _boundTabTrap!: (event: KeyboardEvent) => void;
 
-    connect () {
+    connect() {
         this.validate();
     }
 
@@ -22,26 +22,26 @@ export class ModalController extends Stacks.StacksController {
      */
     disconnect() {
         this.unbindDocumentEvents();
-    };
+    }
 
     /**
      * Toggles the visibility of the modal
      */
-    toggle (dispatcher: Event|Element|null = null) {
+    toggle(dispatcher: Event | Element | null = null) {
         this._toggle(undefined, dispatcher);
     }
 
     /**
      * Shows the modal
      */
-    show (dispatcher: Event|Element|null = null) {
+    show(dispatcher: Event | Element | null = null) {
         this._toggle(true, dispatcher);
     }
 
     /**
      * Hides the modal
      */
-    hide (dispatcher: Event|Element|null = null) {
+    hide(dispatcher: Event | Element | null = null) {
         this._toggle(false, dispatcher);
     }
 
@@ -52,10 +52,15 @@ export class ModalController extends Stacks.StacksController {
         // check for returnElement support
         const returnElementSelector = this.data.get("return-element");
         if (returnElementSelector) {
-            this.returnElement = <HTMLElement>document.querySelector(returnElementSelector);
+            this.returnElement = <HTMLElement>(
+                document.querySelector(returnElementSelector)
+            );
 
             if (!this.returnElement) {
-                throw "Unable to find element by return-element selector: " + returnElementSelector;
+                throw (
+                    "Unable to find element by return-element selector: " +
+                    returnElementSelector
+                );
             }
         }
     }
@@ -64,9 +69,13 @@ export class ModalController extends Stacks.StacksController {
      * Toggles the visibility of the modal element
      * @param show Optional parameter that force shows/hides the element or toggles it if left undefined
      */
-    private _toggle (show?: boolean | undefined, dispatcher: Event|Element|null = null) {
+    private _toggle(
+        show?: boolean | undefined,
+        dispatcher: Event | Element | null = null
+    ) {
         let toShow = show;
-        const isVisible = this.modalTarget.getAttribute("aria-hidden") === "false";
+        const isVisible =
+            this.modalTarget.getAttribute("aria-hidden") === "false";
 
         // if we're letting the class toggle, we need to figure out if the popover is visible manually
         if (typeof toShow === "undefined") {
@@ -81,10 +90,14 @@ export class ModalController extends Stacks.StacksController {
         const dispatchingElement = this.getDispatcher(dispatcher);
 
         // show/hide events trigger before toggling the class
-        const triggeredEvent = this.triggerEvent(toShow ? "show" : "hide", {
-            returnElement: this.returnElement,
-            dispatcher: this.getDispatcher(dispatchingElement)
-        }, this.modalTarget);
+        const triggeredEvent = this.triggerEvent(
+            toShow ? "show" : "hide",
+            {
+                returnElement: this.returnElement,
+                dispatcher: this.getDispatcher(dispatchingElement),
+            },
+            this.modalTarget
+        );
 
         // if this pre-show/hide event was prevented, don't attempt to continue changing the modal state
         if (triggeredEvent.defaultPrevented) {
@@ -97,29 +110,41 @@ export class ModalController extends Stacks.StacksController {
         if (toShow) {
             this.bindDocumentEvents();
             this.focusInsideModal();
-        }
-        else {
+        } else {
             this.unbindDocumentEvents();
             this.focusReturnElement();
             this.removeModalOnHide();
         }
 
         // check for transitionend support
-        const supportsTransitionEnd = (this.modalTarget).ontransitionend !== undefined;
+        const supportsTransitionEnd =
+            this.modalTarget.ontransitionend !== undefined;
 
         // shown/hidden events trigger after toggling the class
         if (supportsTransitionEnd) {
             // wait until after the modal finishes transitioning to fire the event
-            this.modalTarget.addEventListener("transitionend", () => {
-                //TODO this is firing waaay to soon?
-                this.triggerEvent(toShow ? "shown" : "hidden", {
-                    dispatcher: dispatchingElement
-                }, this.modalTarget);
-            }, { once: true });
+            this.modalTarget.addEventListener(
+                "transitionend",
+                () => {
+                    //TODO this is firing waaay to soon?
+                    this.triggerEvent(
+                        toShow ? "shown" : "hidden",
+                        {
+                            dispatcher: dispatchingElement,
+                        },
+                        this.modalTarget
+                    );
+                },
+                { once: true }
+            );
         } else {
-            this.triggerEvent(toShow ? "shown" : "hidden", {
-                dispatcher: dispatchingElement
-            }, this.modalTarget);
+            this.triggerEvent(
+                toShow ? "shown" : "hidden",
+                {
+                    dispatcher: dispatchingElement,
+                },
+                this.modalTarget
+            );
         }
     }
 
@@ -131,12 +156,19 @@ export class ModalController extends Stacks.StacksController {
             return;
         }
 
-        this.modalTarget.addEventListener("s-modal:hidden", () => {
-            // double check the element still exists when the event is called
-            if (this.returnElement && document.body.contains(this.returnElement)) {
-                this.returnElement.focus();
-            }
-        }, {once: true });
+        this.modalTarget.addEventListener(
+            "s-modal:hidden",
+            () => {
+                // double check the element still exists when the event is called
+                if (
+                    this.returnElement &&
+                    document.body.contains(this.returnElement)
+                ) {
+                    this.returnElement.focus();
+                }
+            },
+            { once: true }
+        );
     }
 
     /**
@@ -147,17 +179,26 @@ export class ModalController extends Stacks.StacksController {
             return;
         }
 
-        this.modalTarget.addEventListener("s-modal:hidden", () => {
-            this.element.remove();
-        }, {once: true });
+        this.modalTarget.addEventListener(
+            "s-modal:hidden",
+            () => {
+                this.element.remove();
+            },
+            { once: true }
+        );
     }
 
     /**
      * Gets all elements within the modal that could receive keyboard focus.
      */
     private getAllTabbables() {
-        return Array.from(this.modalTarget.querySelectorAll<HTMLElement>("[href], input, select, textarea, button, [tabindex]"))
-            .filter((el: Element) => el.matches(":not([disabled]):not([tabindex='-1'])"));
+        return Array.from(
+            this.modalTarget.querySelectorAll<HTMLElement>(
+                "[href], input, select, textarea, button, [tabindex]"
+            )
+        ).filter((el: Element) =>
+            el.matches(":not([disabled]):not([tabindex='-1'])")
+        );
     }
 
     /**
@@ -165,7 +206,7 @@ export class ModalController extends Stacks.StacksController {
      */
     private firstVisible(elements: HTMLElement[]) {
         // https://stackoverflow.com/a/21696585
-        return elements.find(el => el.offsetParent !== null);
+        return elements.find((el) => el.offsetParent !== null);
     }
 
     /**
@@ -181,17 +222,22 @@ export class ModalController extends Stacks.StacksController {
      * Otherwise, the first visible focusable element will receive focus.
      */
     private focusInsideModal() {
-        this.modalTarget.addEventListener("s-modal:shown", () => {
-            const initialFocus = this.firstVisible(this.initialFocusTargets) ?? this.firstVisible(this.getAllTabbables());
-            initialFocus?.focus();
-        }, {once: true });
+        this.modalTarget.addEventListener(
+            "s-modal:shown",
+            () => {
+                const initialFocus =
+                    this.firstVisible(this.initialFocusTargets) ??
+                    this.firstVisible(this.getAllTabbables());
+                initialFocus?.focus();
+            },
+            { once: true }
+        );
     }
 
     /**
      * Returns keyboard focus to the modal if it has left or is about to leave.
      */
     private keepFocusWithinModal(e: KeyboardEvent) {
-
         // If somehow the user has tabbed out of the modal or if focus started outside the modal, push them to the first item.
         if (!this.modalTarget.contains(<Element>e.target)) {
             const focusTarget = this.firstVisible(this.getAllTabbables());
@@ -220,7 +266,7 @@ export class ModalController extends Stacks.StacksController {
                 } else if (!e.shiftKey && e.target === lastTabbable) {
                     e.preventDefault();
                     firstTabbable.focus();
-                } 
+                }
             }
         }
     }
@@ -228,11 +274,14 @@ export class ModalController extends Stacks.StacksController {
     /**
      * Binds global events to the document for hiding popovers on user interaction
      */
-    private bindDocumentEvents () {
+    private bindDocumentEvents() {
         // in order for removeEventListener to remove the right event, this bound function needs a constant reference
-        this._boundClickFn = this._boundClickFn || this.hideOnOutsideClick.bind(this);
-        this._boundKeypressFn = this._boundKeypressFn || this.hideOnEscapePress.bind(this);
-        this._boundTabTrap = this._boundTabTrap || this.keepFocusWithinModal.bind(this);
+        this._boundClickFn =
+            this._boundClickFn || this.hideOnOutsideClick.bind(this);
+        this._boundKeypressFn =
+            this._boundKeypressFn || this.hideOnEscapePress.bind(this);
+        this._boundTabTrap =
+            this._boundTabTrap || this.keepFocusWithinModal.bind(this);
 
         document.addEventListener("mousedown", this._boundClickFn);
         document.addEventListener("keyup", this._boundKeypressFn);
@@ -242,7 +291,7 @@ export class ModalController extends Stacks.StacksController {
     /**
      * Unbinds global events to the document for hiding popovers on user interaction
      */
-    private unbindDocumentEvents () {
+    private unbindDocumentEvents() {
         document.removeEventListener("mousedown", this._boundClickFn);
         document.removeEventListener("keyup", this._boundKeypressFn);
         document.removeEventListener("keydown", this._boundTabTrap);
@@ -251,11 +300,16 @@ export class ModalController extends Stacks.StacksController {
     /**
      * Forces the popover to hide if a user clicks outside of it or its reference element
      */
-    private hideOnOutsideClick (e: Event) {
+    private hideOnOutsideClick(e: Event) {
         const target = <Node>e.target;
         // check if the document was clicked inside either the toggle element or the modal itself
         // note: .contains also returns true if the node itself matches the target element
-        if (!this.modalTarget.querySelector(".s-modal--dialog")!.contains(target) && document.body.contains(target)) {
+        if (
+            !this.modalTarget
+                .querySelector(".s-modal--dialog")
+                ?.contains(target) &&
+            document.body.contains(target)
+        ) {
             this._toggle(false, e);
         }
     }
@@ -263,9 +317,12 @@ export class ModalController extends Stacks.StacksController {
     /**
      * Forces the popover to hide if the user presses escape while it, one of its childen, or the reference element are focused
      */
-    private hideOnEscapePress (e: KeyboardEvent) {
+    private hideOnEscapePress(e: KeyboardEvent) {
         // if the ESC key (27) wasn't pressed or if no popovers are showing, return
-        if (e.which !== 27 || this.modalTarget.getAttribute("aria-hidden") === "true") {
+        if (
+            e.which !== 27 ||
+            this.modalTarget.getAttribute("aria-hidden") === "true"
+        ) {
             return;
         }
 
@@ -276,14 +333,12 @@ export class ModalController extends Stacks.StacksController {
      * Determines the correct dispatching element from a potential input
      * @param dispatcher The event or element to get the dispatcher from
      */
-    private getDispatcher(dispatcher: Event|Element|null = null) : Element {
+    private getDispatcher(dispatcher: Event | Element | null = null): Element {
         if (dispatcher instanceof Event) {
             return <Element>dispatcher.target;
-        }
-        else if (dispatcher instanceof Element) {
+        } else if (dispatcher instanceof Element) {
             return dispatcher;
-        }
-        else {
+        } else {
             return this.element;
         }
     }
@@ -311,7 +366,10 @@ export function hideModal(element: HTMLElement) {
  * @param show whether to force show/hide the modal; toggles the modal if left undefined
  */
 function toggleModal(element: HTMLElement, show?: boolean | undefined) {
-    const controller = Stacks.application.getControllerForElementAndIdentifier(element, "s-modal") as ModalController;
+    const controller = Stacks.application.getControllerForElementAndIdentifier(
+        element,
+        "s-modal"
+    ) as ModalController;
 
     if (!controller) {
         throw "Unable to get s-modal controller from element";

package/lib/ts/controllers/s-navigation-tablist.ts

@@ -1,7 +1,6 @@
 import * as Stacks from "../stacks";
 
 export class TabListController extends Stacks.StacksController {
-
     private boundSelectTab!: (event: MouseEvent) => void;
     private boundHandleKeydown!: (event: KeyboardEvent) => void;
 
@@ -59,8 +58,12 @@ export class TabListController extends Stacks.StacksController {
         }
 
         // Use circular navigation when users go past the first or last tab.
-        if (tabIndex < 0) { tabIndex = tabs.length - 1; }
-        if (tabIndex >= tabs.length) { tabIndex = 0; }
+        if (tabIndex < 0) {
+            tabIndex = tabs.length - 1;
+        }
+        if (tabIndex >= tabs.length) {
+            tabIndex = 0;
+        }
 
         tabElement = tabs[tabIndex];
         this.switchToTab(tabElement);
@@ -74,23 +77,30 @@ export class TabListController extends Stacks.StacksController {
      * the s-navigation-tablist:select event is prevented.
      */
     private switchToTab(newTab: HTMLElement) {
-
         const oldTab = this.selectedTab;
-        if (oldTab === newTab) { return; }
+        if (oldTab === newTab) {
+            return;
+        }
 
-        if (this.triggerEvent("select", { oldTab, newTab }).defaultPrevented) { return; }
+        if (this.triggerEvent("select", { oldTab, newTab }).defaultPrevented) {
+            return;
+        }
 
         this.selectedTab = newTab;
         this.triggerEvent("selected", { oldTab, newTab });
     }
-    
+
     /**
      * Returns the currently selected tab or null if no tabs are selected.
      */
-    public get selectedTab() : HTMLElement | null {
-        return this.tabTargets.find(e => e.getAttribute("aria-selected") === "true") || null;
+    public get selectedTab(): HTMLElement | null {
+        return (
+            this.tabTargets.find(
+                (e) => e.getAttribute("aria-selected") === "true"
+            ) || null
+        );
     }
-    
+
     /**
      * Switches the tablist to the provided tab, updating the tabs and panels
      * to reflect the change.
@@ -99,20 +109,20 @@ export class TabListController extends Stacks.StacksController {
      */
     public set selectedTab(selectedTab: HTMLElement | null) {
         for (const tab of this.tabTargets) {
-            const panelId = tab.getAttribute('aria-controls');
+            const panelId = tab.getAttribute("aria-controls");
             const panel = panelId ? document.getElementById(panelId) : null;
 
             if (tab === selectedTab) {
-                tab.classList.add('is-selected');
-                tab.setAttribute('aria-selected', 'true');
-                tab.removeAttribute('tabindex');
-                panel?.classList.remove('d-none');
+                tab.classList.add("is-selected");
+                tab.setAttribute("aria-selected", "true");
+                tab.removeAttribute("tabindex");
+                panel?.classList.remove("d-none");
             } else {
-                tab.classList.remove('is-selected');
-                tab.setAttribute('aria-selected', 'false');
-                tab.setAttribute('tabindex', '-1');
-                panel?.classList.add('d-none');
+                tab.classList.remove("is-selected");
+                tab.setAttribute("aria-selected", "false");
+                tab.setAttribute("tabindex", "-1");
+                panel?.classList.add("d-none");
             }
         }
     }
-}
+}