gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
378 lines (377 loc) • 15.7 kB
JavaScript
import { arrow, autoPlacement, computePosition, flip, hide, inline, offset, shift, size } from "@floating-ui/dom";
import { setClassNames } from "../common";
import * as FloatingUILib_1 from "@floating-ui/dom";
export { FloatingUILib_1 as FloatingUILib };
/**
* Floating UI Placements
*/
export var FloatingUIPlacements;
(function (FloatingUIPlacements) {
FloatingUIPlacements[FloatingUIPlacements["Auto"] = 1] = "Auto";
FloatingUIPlacements[FloatingUIPlacements["AutoStart"] = 2] = "AutoStart";
FloatingUIPlacements[FloatingUIPlacements["AutoEnd"] = 3] = "AutoEnd";
FloatingUIPlacements[FloatingUIPlacements["Bottom"] = 4] = "Bottom";
FloatingUIPlacements[FloatingUIPlacements["BottomStart"] = 5] = "BottomStart";
FloatingUIPlacements[FloatingUIPlacements["BottomEnd"] = 6] = "BottomEnd";
FloatingUIPlacements[FloatingUIPlacements["Left"] = 7] = "Left";
FloatingUIPlacements[FloatingUIPlacements["LeftStart"] = 8] = "LeftStart";
FloatingUIPlacements[FloatingUIPlacements["LeftEnd"] = 9] = "LeftEnd";
FloatingUIPlacements[FloatingUIPlacements["Right"] = 10] = "Right";
FloatingUIPlacements[FloatingUIPlacements["RightStart"] = 11] = "RightStart";
FloatingUIPlacements[FloatingUIPlacements["RightEnd"] = 12] = "RightEnd";
FloatingUIPlacements[FloatingUIPlacements["Top"] = 13] = "Top";
FloatingUIPlacements[FloatingUIPlacements["TopStart"] = 14] = "TopStart";
FloatingUIPlacements[FloatingUIPlacements["TopEnd"] = 15] = "TopEnd";
})(FloatingUIPlacements || (FloatingUIPlacements = {}));
/**
* Floating UI Types
*/
export var FloatingUITypes;
(function (FloatingUITypes) {
FloatingUITypes[FloatingUITypes["Danger"] = 1] = "Danger";
FloatingUITypes[FloatingUITypes["Dark"] = 2] = "Dark";
FloatingUITypes[FloatingUITypes["Info"] = 3] = "Info";
FloatingUITypes[FloatingUITypes["Light"] = 4] = "Light";
FloatingUITypes[FloatingUITypes["LightBorder"] = 5] = "LightBorder";
FloatingUITypes[FloatingUITypes["Material"] = 6] = "Material";
FloatingUITypes[FloatingUITypes["Primary"] = 7] = "Primary";
FloatingUITypes[FloatingUITypes["Secondary"] = 8] = "Secondary";
FloatingUITypes[FloatingUITypes["Success"] = 9] = "Success";
FloatingUITypes[FloatingUITypes["Translucent"] = 10] = "Translucent";
FloatingUITypes[FloatingUITypes["Warning"] = 11] = "Warning";
})(FloatingUITypes || (FloatingUITypes = {}));
/**
* Floating UI Element
*/
class _FloatingUI {
// Constructor
constructor(props) {
var _a;
this._elArrow = null;
this._elContent = null;
this._elIgnore = null;
this._elTarget = null;
this._options = null;
this._props = null;
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.id = props.id || "fui-" + Date.now();
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((_a = props.options) === null || _a === void 0 ? void 0 : _a.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
addEvents(trigger = "") {
// 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) => {
var _a;
// Do nothing if we do not want to hide on click
if (((_a = this._props.options) === null || _a === void 0 ? void 0 : _a.hideOnClick) == false) {
return;
}
// Do nothing if we toggled this component
if (this._elTarget.contains(ev.target)) {
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)) {
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
create() {
var _a;
let placement = this.getPlacement(this._props.placement);
let middleware = this.getMiddleware(placement);
// See if we are adding an arrow
if ((_a = this._props.options) === null || _a === void 0 ? void 0 : _a.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
};
}
// Returns the plugins
getMiddleware(placement) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
let middleware = [];
// See if we are adding the offset option
if ((_a = this._props.options) === null || _a === void 0 ? void 0 : _a.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 (((_b = this._props.options) === null || _b === void 0 ? void 0 : _b.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 ((_c = this._props.options) === null || _c === void 0 ? void 0 : _c.flip) {
middleware.push(flip());
}
// See if we are adding the hide option
if ((_d = this._props.options) === null || _d === void 0 ? void 0 : _d.hide) {
middleware.push(typeof (this._props.options.hide) === "boolean" ? hide() : hide(this._props.options.hide));
}
// See if we are adding the inline option
if ((_e = this._props.options) === null || _e === void 0 ? void 0 : _e.inline) {
middleware.push(typeof (this._props.options.inline) === "boolean" ? inline() : inline(this._props.options.inline));
}
// See if we are adding the shift option
if ((_f = this._props.options) === null || _f === void 0 ? void 0 : _f.shift) {
middleware.push(typeof (this._props.options.shift) === "boolean" ? shift() : shift((_g = this._props.options) === null || _g === void 0 ? void 0 : _g.shift));
}
// See if we are adding the size option
if ((_h = this._props.options) === null || _h === void 0 ? void 0 : _h.size) {
middleware.push(typeof (this._props.options.size) === "boolean" ? size() : size((_j = this._props.options) === null || _j === void 0 ? void 0 : _j.size));
}
// Return the middle ware
return middleware;
}
// Returns the placement information
getPlacement(placementValue) {
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
getTheme(themeValue) {
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
refresh() {
// Create the floating ui
computePosition(this._elTarget, this._elContent, this._options).then(({ x, y, middlewareData }) => {
var _a;
// 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 = (((_a = middlewareData.offset) === null || _a === void 0 ? void 0 : _a.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) { this._elIgnore.push(el); }
removeIgnoreElement(el) {
// 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");
// Get the element
let elContent = document.getElementById(this._elContent.id);
if (elContent) {
// Remove the element from the page
document.body.removeChild(elContent);
// Call the event
this._props.onHide ? this._props.onHide() : null;
}
}
// Determines if the content is visible
get isVisible() { 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) => { return new _FloatingUI(props); };