gd-bs

import { arrow, autoPlacement, computePosition, flip, hide, inline, offset, shift, size, ComputePositionConfig } from "@floating-ui/dom"; import { setClassNames } from "../common"; import { IFloatingUIProps, IFloatingUI } from "./types"; export * as FloatingUILib from "@floating-ui/dom"; /** * Floating UI Placements */ export enum FloatingUIPlacements { Auto = 1, AutoStart = 2, AutoEnd = 3, Bottom = 4, BottomStart = 5, BottomEnd = 6, Left = 7, LeftStart = 8, LeftEnd = 9, Right = 10, RightStart = 11, RightEnd = 12, Top = 13, TopStart = 14, TopEnd = 15 } /** * Floating UI Types */ export enum FloatingUITypes { Danger = 1, Dark = 2, Info = 3, Light = 4, LightBorder = 5, Material = 6, Primary = 7, Secondary = 8, Success = 9, Translucent = 10, Warning = 11 } /** * Floating UI Element */ class _FloatingUI { private _elArrow: HTMLElement = null; private _elContent: HTMLElement = null; private _elIgnore: HTMLElement[] = null; private _elTarget: HTMLElement = null; private _options: ComputePositionConfig = null; private _props: IFloatingUIProps = null; // Constructor constructor(props: IFloatingUIProps) { this._elIgnore = []; this._elTarget = props.elTarget; this._props = props; // Create the content element this._elContent = document.createElement("div"); this._elContent.classList.add("bs"); this._elContent.classList.add("floating-ui"); this._elContent.appendChild(props.elContent); this._elContent.setAttribute("data-theme", this.getTheme(this._props.theme)); setClassNames(this._elContent, this._props.className); // Add the events this.addEvents(props.options?.trigger); // Create the floating ui element this.create(); // Set the visibility this._props.show ? this.show() : this.hide(); } // Add the events to trigger, refresh and hide the element private addEvents(trigger: string = "") { // Events if (trigger.indexOf("mouse") >= 0) { this._elTarget.addEventListener("mouseenter", () => { this.show(); }); this._elTarget.addEventListener("mouseleave", () => { this.hide(); }); } if (trigger.indexOf("focus") >= 0) { this._elTarget.addEventListener("focus", () => { this.show(); }); this._elTarget.addEventListener("blur", () => { this.hide(); }); } if (trigger.indexOf("click") >= 0) { this._elTarget.addEventListener("click", (ev) => { // Call the event this.isVisible ? this.hide() : this.show(); }); } // Create the event document.addEventListener("click", (ev) => { // Do nothing if we do not want to hide on click if (this._props.options?.hideOnClick == false) { return; } // Do nothing if we toggled this component if (this._elTarget.contains(ev.target as HTMLElement)) { return; } // Parse the elements to ignore for (let i = 0; i < this._elIgnore.length; i++) { // Do nothing if it triggered the click if (this._elIgnore[i].contains(ev.target as HTMLElement)) { return; } } // Hide the element this.hide(); }); // Create the scroll event window.addEventListener("scroll", (ev) => { // Wait for the other events to run setTimeout(() => { // Refresh the content this.refresh(); }, 10); }); } // Creates the floating ui private create() { let placement = this.getPlacement(this._props.placement); let middleware = this.getMiddleware(placement); // See if we are adding an arrow if (this._props.options?.arrow) { // Create the element this._elArrow = document.createElement("div"); this._elArrow.classList.add("arrow"); this._elContent.appendChild(this._elArrow); // Add the plugin middleware.push(arrow({ element: this._elArrow })); middleware = [offset(6)].concat(middleware); } // Set the options this._options = { middleware, placement: placement.placement as any }; } // Returns the plugins private getMiddleware(placement: { autoPlacement: boolean; placement: string; }) { let middleware = []; // See if we are adding the offset option if (this._props.options?.offset) { middleware.push(typeof (this._props.options.offset) === "boolean" ? offset() : offset(this._props.options.offset)); } // See if we are adding the auto placement option if (this._props.options?.autoPlacement || placement.autoPlacement) { middleware.push(typeof (this._props.options.autoPlacement) === "boolean" ? autoPlacement() : autoPlacement(this._props.options.autoPlacement)); } // Else, see if we are adding the flip option else if (this._props.options?.flip) { middleware.push(flip()); } // See if we are adding the hide option if (this._props.options?.hide) { middleware.push(typeof (this._props.options.hide) === "boolean" ? hide() : hide(this._props.options.hide)); } // See if we are adding the inline option if (this._props.options?.inline) { middleware.push(typeof (this._props.options.inline) === "boolean" ? inline() : inline(this._props.options.inline)); } // See if we are adding the shift option if (this._props.options?.shift) { middleware.push(typeof (this._props.options.shift) === "boolean" ? shift() : shift(this._props.options?.shift)); } // See if we are adding the size option if (this._props.options?.size) { middleware.push(typeof (this._props.options.size) === "boolean" ? size() : size(this._props.options?.size)); } // Return the middle ware return middleware; } // Returns the placement information private getPlacement(placementValue: number): { autoPlacement: boolean; placement: string; } { let autoPlacement = false; let placement = "top-end"; switch (placementValue) { // Auto case FloatingUIPlacements.Auto: autoPlacement = true; break; case FloatingUIPlacements.AutoEnd: placement = 'end'; autoPlacement = true; break; case FloatingUIPlacements.AutoStart: placement = 'start'; autoPlacement = true; break; // Bottom case FloatingUIPlacements.Bottom: placement = "bottom"; break; case FloatingUIPlacements.BottomEnd: placement = "bottom-end"; break; case FloatingUIPlacements.BottomStart: placement = "bottom-start"; break; // Left case FloatingUIPlacements.Left: placement = "left"; break; case FloatingUIPlacements.LeftEnd: placement = "left-end"; break; case FloatingUIPlacements.LeftStart: placement = "left-start"; break; // Right case FloatingUIPlacements.Right: placement = "right"; break; case FloatingUIPlacements.RightEnd: placement = "right-end"; break; case FloatingUIPlacements.RightStart: placement = "right-start"; break; // Top case FloatingUIPlacements.Top: placement = "top"; break; case FloatingUIPlacements.TopEnd: placement = "top-end"; break; case FloatingUIPlacements.TopStart: placement = "top-start"; break; } // Return the placement return { autoPlacement, placement }; } // Returns the theme private getTheme(themeValue: number) { let theme = null; // Set the theme switch (themeValue) { // Dark case FloatingUITypes.Dark: theme = "dark"; break; // Danger case FloatingUITypes.Danger: theme = "danger"; break; // Info case FloatingUITypes.Info: theme = "info"; break; // Light case FloatingUITypes.Light: theme = "light"; break; case FloatingUITypes.LightBorder: theme = "light-border"; break; // Material case FloatingUITypes.Material: theme = "material"; break; // Primary case FloatingUITypes.Primary: theme = "primary"; break; // Secondary case FloatingUITypes.Secondary: theme = "secondary"; break; // Success case FloatingUITypes.Success: theme = "success"; break; // Translucent case FloatingUITypes.Translucent: theme = "translucent"; break; // Warning case FloatingUITypes.Warning: theme = "warning"; break; // Default - Light Border default: theme = "light-border"; break; } // Return the theme return theme; } // Refresh the element position private refresh() { // Create the floating ui computePosition(this._elTarget, this._elContent, this._options).then(({ x, y, middlewareData }) => { // Update the location Object.assign(this._elContent.style, { left: `${x}px`, top: `${y}px` }); // See if the arrow exists if (this._elArrow) { let arrowX = middlewareData.arrow.x; let arrowY = middlewareData.arrow.y; let placement = (middlewareData.offset?.placement || this._options.placement).split('-')[0]; let side = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[placement] // Set the placement this._elContent.setAttribute("data-placement", placement); // Update the location Object.assign(this._elArrow.style, { left: arrowX != null ? `${arrowX}px` : '', top: arrowY != null ? `${arrowY}px` : '', right: '', bottom: '', [side]: '-4px' }); } }); } /** * Public Methods */ addIgnoreElement(el: HTMLElement) { this._elIgnore.push(el); } removeIgnoreElement(el: HTMLElement) { // Parse the elements for (let i = 0; i < this._elIgnore.length; i++) { // See if this is the element to remove if (this._elIgnore[i].isEqualNode(el)) { // Remove it this._elIgnore.splice(i, 1); return; } } } setContent(el) { this._elContent = el; this.refresh(); } // Hides the content hide() { // Remove it from the document this._elContent.classList.add("d-none"); if (document.body.contains(this._elContent)) { // Remove the element from the page document.body.removeChild(this._elContent); // Call the event this._props.onHide ? this._props.onHide() : null; } } // Determines if the content is visible get isVisible(): boolean { return !this._elContent.classList.contains("d-none"); } // Refreshes the position of the floating ui refreshPosition() { this.refresh(); } // Shows the content show() { // Append it to the document this._elContent.classList.remove("d-none"); if (!document.body.contains(this._elContent)) { // Add the element to the page document.body.appendChild(this._elContent); // Refresh the position this.refresh(); // Call the event this._props.onShow ? this._props.onShow() : null; } } // Toggles the floating ui toggle() { this.isVisible ? this.hide() : this.show(); } } export const FloatingUI = (props: IFloatingUIProps): IFloatingUI => { return new _FloatingUI(props); }