@stackoverflow/stacks 0.74.0 → 1.0.0-beta.0

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

@@ -1,247 +1,246 @@
-namespace Stacks {
-    export interface TooltipOptions {
-        placement: string;
-    }
-
-    export class TooltipController extends BasePopoverController {
-        static targets = [];
+import * as Stacks from "../stacks";
+import { BasePopoverController, PopoverController } from "./s-popover";
 
-        protected popoverSelectorAttribute = "aria-describedby";
+export interface TooltipOptions {
+    placement: string;
+}
 
-        private boundScheduleShow!: any;
-        private boundHide!: any;
-        private boundHideIfWithin!: any;
-        private activeTimeout!: any;
+export class TooltipController extends BasePopoverController {
+    static targets = [];
 
-        /**
-         * Binds mouseover and mouseout events in addition to BasePopoverController.connect
-         */
-        connect() {
-            super.connect();
+    protected popoverSelectorAttribute = "aria-describedby";
 
-            // Only bind to mouse events if the pointer device supports hover behavior.
-            // Otherwise we run into issues with mobile browser showing popovers for
-            // click events and not being able to hide them.
-            if (window.matchMedia("(hover: hover)").matches) {
-                this.bindMouseEvents();
-            }
-        }
+    private boundScheduleShow!: any;
+    private boundHide!: any;
+    private boundHideIfWithin!: any;
+    private activeTimeout!: any;
 
-        /**
-         * Unbinds mouse events in addition to BasePopoverController.disconnect
-         */
-        disconnect() {
-            this.unbindMouseEvents();
-            super.disconnect();
+    /**
+     * Binds mouseover and mouseout events in addition to BasePopoverController.connect
+     */
+    connect() {
+        super.connect();
+
+        // Only bind to mouse events if the pointer device supports hover behavior.
+        // Otherwise we run into issues with mobile browser showing popovers for
+        // click events and not being able to hide them.
+        if (window.matchMedia("(hover: hover)").matches) {
+            this.bindMouseEvents();
         }
+    }
 
-        /**
-         * Attempts to show the tooltip popover so long as no other Stacks-managed popover is
-         * present on the page.
-         */
-        show(dispatcher: Event|Element|null = null) {
-            // check and see if this controller coexists with a popover
-            var controller = Stacks.application.getControllerForElementAndIdentifier(this.element, "s-popover");
-
-            // if the controller exists and already has a visible popover, don't show the tooltip
-            if (controller && (<PopoverController>controller).isVisible) {
-                return;
-            }
+    /**
+     * Unbinds mouse events in addition to BasePopoverController.disconnect
+     */
+    disconnect() {
+        this.unbindMouseEvents();
+        super.disconnect();
+    }
 
-            super.show(dispatcher);
-        }
+    /**
+     * Attempts to show the tooltip popover so long as no other Stacks-managed popover is
+     * present on the page.
+     */
+    show(dispatcher: Event|Element|null = null) {
+        // check and see if this controller coexists with a popover
+        var controller = Stacks.application.getControllerForElementAndIdentifier(this.element, "s-popover");
 
-        /**
-         * Sets up a tooltip popover show after a delay.
-         */
-        scheduleShow(dispatcher: Event | Element | null = null) {
-            window.clearTimeout(this.activeTimeout);
-            this.activeTimeout = window.setTimeout(() => this.show(dispatcher), 300);
+        // if the controller exists and already has a visible popover, don't show the tooltip
+        if (controller && (<PopoverController>controller).isVisible) {
+            return;
         }
 
-        /**
-         * Cancels the scheduled tooltip popover display and hides it if already displayed
-         */
-        hide(dispatcher: Event | Element | null = null) {
-            window.clearTimeout(this.activeTimeout);
-            this.activeTimeout = null;
-
-            super.hide(dispatcher);
-        }
+        super.show(dispatcher);
+    }
 
-        /**
-         * Applies data-s-tooltip-html-title and title attributes.
-         */
-        applyTitleAttributes() {
+    /**
+     * Sets up a tooltip popover show after a delay.
+     */
+    scheduleShow(dispatcher: Event | Element | null = null) {
+        window.clearTimeout(this.activeTimeout);
+        this.activeTimeout = window.setTimeout(() => this.show(dispatcher), 300);
+    }
 
-            var content: Node;
+    /**
+     * Cancels the scheduled tooltip popover display and hides it if already displayed
+     */
+    hide(dispatcher: Event | Element | null = null) {
+        window.clearTimeout(this.activeTimeout);
+        this.activeTimeout = null;
 
-            var htmlTitle = this.data.get("html-title");
-            if (htmlTitle) {
-                content = document.createRange().createContextualFragment(htmlTitle);
-            } else {
-                var plainTitle = this.element.getAttribute("title");
-                if (plainTitle) {
-                    content = document.createTextNode(plainTitle);
-                } else {
-                    return null;
-                }
-            }
+        super.hide(dispatcher);
+    }
 
-            this.data.delete("html-title");
-            this.element.removeAttribute("title");
+    /**
+     * Applies data-s-tooltip-html-title and title attributes.
+     */
+    applyTitleAttributes() {
 
-            var popoverId = this.element.getAttribute("aria-describedby");
-            if (!popoverId) {
-                popoverId = TooltipController.generateId();
-                this.element.setAttribute("aria-describedby", popoverId);
-            }
+        var content: Node;
 
-            var popover = document.getElementById(popoverId);
-            if (!popover) {
-                popover = document.createElement("div");
-                popover.id = popoverId;
-                popover.className = "s-popover s-popover__tooltip pe-none";
-                popover.setAttribute("aria-hidden", "true");
-                popover.setAttribute("role", "tooltip");
-
-                var parentNode = this.element.parentNode;
-                if (parentNode) {
-                    // insertBefore inserts at end if element.nextSibling is null.
-                    parentNode.insertBefore(popover, this.element.nextSibling);
-                } else {
-                    document.body.appendChild(popover);
-                }
+        var htmlTitle = this.data.get("html-title");
+        if (htmlTitle) {
+            content = document.createRange().createContextualFragment(htmlTitle);
+        } else {
+            var plainTitle = this.element.getAttribute("title");
+            if (plainTitle) {
+                content = document.createTextNode(plainTitle);
+            } else {
+                return null;
             }
+        }
 
-            const arrow = popover.querySelector(".s-popover--arrow");
+        this.data.delete("html-title");
+        this.element.removeAttribute("title");
 
-            // clear and set the content of the popover
-            popover.innerHTML = "";
-            popover.appendChild(content);
+        var popoverId = this.element.getAttribute("aria-describedby");
+        if (!popoverId) {
+            popoverId = TooltipController.generateId();
+            this.element.setAttribute("aria-describedby", popoverId);
+        }
 
-            // create the arrow if necessary
-            if (arrow) {
-                popover.appendChild(arrow);
+        var popover = document.getElementById(popoverId);
+        if (!popover) {
+            popover = document.createElement("div");
+            popover.id = popoverId;
+            popover.className = "s-popover s-popover__tooltip pe-none";
+            popover.setAttribute("aria-hidden", "true");
+            popover.setAttribute("role", "tooltip");
+
+            var parentNode = this.element.parentNode;
+            if (parentNode) {
+                // insertBefore inserts at end if element.nextSibling is null.
+                parentNode.insertBefore(popover, this.element.nextSibling);
             } else {
-                popover.insertAdjacentHTML("beforeend", `<div class="s-popover--arrow"></div>`);
+                document.body.appendChild(popover);
             }
-
-            this.scheduleUpdate();
-
-            return popover;
         }
 
-        /**
-         * Automatically hides the tooltip popover when a Stacks popover is shown anywhere on
-         * the page.
-         */
-        protected bindDocumentEvents() {
-            this.boundHideIfWithin = this.boundHideIfWithin || this.hideIfWithin.bind(this);
+        const arrow = popover.querySelector(".s-popover--arrow");
 
-            document.addEventListener("s-popover:shown", this.boundHideIfWithin);
-        }
+        // clear and set the content of the popover
+        popover.innerHTML = "";
+        popover.appendChild(content);
 
-        /**
-         * Unbinds all document events
-         */
-        protected unbindDocumentEvents() {
-            document.removeEventListener("s-popover:shown", this.boundHideIfWithin);
+        // create the arrow if necessary
+        if (arrow) {
+            popover.appendChild(arrow);
+        } else {
+            popover.insertAdjacentHTML("beforeend", `<div class="s-popover--arrow"></div>`);
         }
 
-        /**
-         * Attempts to generate a new tooltip popover from the title attribute if no popover
-         * was present when requested, otherwise throws an error.
-         */
-        protected generatePopover(): HTMLElement | null {
-            return this.applyTitleAttributes();
-        }
+        this.scheduleUpdate();
 
-        /**
-         * Hides the tooltip if is or is within the event's target.
-         * @param event An event object from s-popover:shown
-         */
-        private hideIfWithin(event: Event) {
-            if ((<Element>event.target!).contains(this.referenceElement)) {
-                this.hide();
-            }
-        }
+        return popover;
+    }
 
-        /**
-         * Binds mouse events to show/hide on reference element hover
-         */
-        private bindMouseEvents() {
-            this.boundScheduleShow = this.boundScheduleShow || this.scheduleShow.bind(this);
-            this.boundHide = this.boundHide || this.hide.bind(this);
-
-            this.referenceElement.addEventListener("mouseover", this.boundScheduleShow);
-            this.referenceElement.addEventListener("mouseout", this.boundHide);
-            this.referenceElement.addEventListener("focus", this.boundScheduleShow);
-            this.referenceElement.addEventListener("blur", this.boundHide);
-        }
+    /**
+     * Automatically hides the tooltip popover when a Stacks popover is shown anywhere on
+     * the page.
+     */
+    protected bindDocumentEvents() {
+        this.boundHideIfWithin = this.boundHideIfWithin || this.hideIfWithin.bind(this);
 
-        /**
-         * Unbinds all mouse events
-         */
-        private unbindMouseEvents() {
-            this.referenceElement.removeEventListener("mouseover", this.boundScheduleShow);
-            this.referenceElement.removeEventListener("mouseout", this.boundHide);
-            this.referenceElement.removeEventListener("focus", this.boundScheduleShow);
-            this.referenceElement.removeEventListener("blur", this.boundHide);
-        }
+        document.addEventListener("s-popover:shown", this.boundHideIfWithin);
+    }
+
+    /**
+     * Unbinds all mouse events
+     */
+    protected unbindDocumentEvents() {
+        document.removeEventListener("s-popover:shown", this.boundHideIfWithin);
+    }
+
+    /**
+     * Attempts to generate a new tooltip popover from the title attribute if no popover
+     * was present when requested, otherwise throws an error.
+     */
+    protected generatePopover(): HTMLElement | null {
+        return this.applyTitleAttributes();
+    }
 
-        /**
-         * Generates an ID for tooltips created with setTooltip.
-         */
-        private static generateId() {
-            // generate a random number, then convert to a well formatted string
-            return "--stacks-s-tooltip-" + Math.random().toString(36).substring(2, 10);
+    /**
+     * Hides the tooltip if is or is within the event's target.
+     * @param event An event object from s-popover:shown
+     */
+    private hideIfWithin(event: Event) {
+        if ((<Element>event.target!).contains(this.referenceElement)) {
+            this.hide();
         }
     }
 
     /**
-     * Adds or updates a Stacks tooltip on a given element, initializing the controller if necessary
-     * @param element The element to add a tooltip to.
-     * @param html An HTML string to populate the tooltip with.
-     * @param options Options for rendering the tooltip.
+     * Binds mouse events to show/hide on reference element hover
      */
-    export function setTooltipHtml(element: Element, html: string, options?: TooltipOptions) {
-        element.setAttribute("data-s-tooltip-html-title", html);
-        element.removeAttribute("title");
-        applyOptionsAndTitleAttributes(element, options);
+    private bindMouseEvents() {
+        this.boundScheduleShow = this.boundScheduleShow || this.scheduleShow.bind(this);
+        this.boundHide = this.boundHide || this.hide.bind(this);
+
+        this.referenceElement.addEventListener("mouseover", this.boundScheduleShow);
+        this.referenceElement.addEventListener("mouseout", this.boundHide);
+        this.referenceElement.addEventListener("focus", this.boundScheduleShow);
+        this.referenceElement.addEventListener("blur", this.boundHide);
     }
 
     /**
-     * Adds or updates a Stacks tooltip on a given element, initializing the controller if necessary
-     * @param element The element to add a tooltip to.
-     * @param text A plain text string to populate the tooltip with.
-     * @param options Options for rendering the tooltip.
+     * Unbinds all mouse events
      */
-    export function setTooltipText(element: Element, text: string, options?: TooltipOptions) {
-        element.setAttribute("title", text);
-        element.removeAttribute("data-s-tooltip-html-title");
-        applyOptionsAndTitleAttributes(element, options);
+    private unbindMouseEvents() {
+        this.referenceElement.removeEventListener("mouseover", this.boundScheduleShow);
+        this.referenceElement.removeEventListener("mouseout", this.boundHide);
+        this.referenceElement.removeEventListener("focus", this.boundScheduleShow);
+        this.referenceElement.removeEventListener("blur", this.boundHide);
     }
 
     /**
-     * Shared helper for setTooltip* to initialize and set tooltip content
-     * @param element The element to add a tooltip to.
-     * @param options Options for rendering the tooltip.
+     * Generates an ID for tooltips created with setTooltip.
      */
-    function applyOptionsAndTitleAttributes(element: Element, options?: TooltipOptions) {
+    private static generateId() {
+        // generate a random number, then convert to a well formatted string
+        return "--stacks-s-tooltip-" + Math.random().toString(36).substring(2, 10);
+    }
+}
 
-        if (options && options.placement) {
-            element.setAttribute("data-s-tooltip-placement", options.placement);
-        }
+/**
+ * Adds or updates a Stacks tooltip on a given element, initializing the controller if necessary
+ * @param element The element to add a tooltip to.
+ * @param html An HTML string to populate the tooltip with.
+ * @param options Options for rendering the tooltip.
+ */
+export function setTooltipHtml(element: Element, html: string, options?: TooltipOptions) {
+    element.setAttribute("data-s-tooltip-html-title", html);
+    element.removeAttribute("title");
+    applyOptionsAndTitleAttributes(element, options);
+}
 
-        var controller = <TooltipController>Stacks.application.getControllerForElementAndIdentifier(element, "s-tooltip");
+/**
+ * Adds or updates a Stacks tooltip on a given element, initializing the controller if necessary
+ * @param element The element to add a tooltip to.
+ * @param text A plain text string to populate the tooltip with.
+ * @param options Options for rendering the tooltip.
+ */
+export function setTooltipText(element: Element, text: string, options?: TooltipOptions) {
+    element.setAttribute("title", text);
+    element.removeAttribute("data-s-tooltip-html-title");
+    applyOptionsAndTitleAttributes(element, options);
+}
 
-        if (controller) {
-            controller.applyTitleAttributes();
-        } else {
-            element.setAttribute("data-controller", element.getAttribute("data-controller") + " s-tooltip");
-        }
+/**
+ * Shared helper for setTooltip* to initialize and set tooltip content
+ * @param element The element to add a tooltip to.
+ * @param options Options for rendering the tooltip.
+ */
+function applyOptionsAndTitleAttributes(element: Element, options?: TooltipOptions) {
+
+    if (options && options.placement) {
+        element.setAttribute("data-s-tooltip-placement", options.placement);
     }
-}
 
-Stacks.application.register("s-tooltip", Stacks.TooltipController);
+    var controller = <TooltipController>Stacks.application.getControllerForElementAndIdentifier(element, "s-tooltip");
+
+    if (controller) {
+        controller.applyTitleAttributes();
+    } else {
+        element.setAttribute("data-controller", element.getAttribute("data-controller") + " s-tooltip");
+    }
+}