gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
154 lines (153 loc) • 5.77 kB
JavaScript
import { Button } from "../button";
import { Base } from "../base";
import { appendContent, setClassNames } from "../common";
import { FloatingUI, FloatingUIPlacements } from "../floating-ui";
/**
* Popover Types
*/
export var PopoverTypes;
(function (PopoverTypes) {
PopoverTypes[PopoverTypes["Danger"] = 1] = "Danger";
PopoverTypes[PopoverTypes["Dark"] = 2] = "Dark";
PopoverTypes[PopoverTypes["Info"] = 3] = "Info";
PopoverTypes[PopoverTypes["Light"] = 4] = "Light";
PopoverTypes[PopoverTypes["LightBorder"] = 5] = "LightBorder";
PopoverTypes[PopoverTypes["Material"] = 6] = "Material";
PopoverTypes[PopoverTypes["Primary"] = 7] = "Primary";
PopoverTypes[PopoverTypes["Secondary"] = 8] = "Secondary";
PopoverTypes[PopoverTypes["Success"] = 9] = "Success";
PopoverTypes[PopoverTypes["Translucent"] = 10] = "Translucent";
PopoverTypes[PopoverTypes["Warning"] = 11] = "Warning";
})(PopoverTypes || (PopoverTypes = {}));
/**
* Popover Placements
*/
export { FloatingUIPlacements as PopoverPlacements };
/**
* Popover
*/
class _Popover extends Base {
// Constructor
constructor(props, template = "") {
super(template, props);
this._elContent = null;
this._floatingUI = null;
// Configure the collapse
this.configure();
// Configure the parent, if the target wasn't specified
this.props.target ? null : this.configureParent();
}
// Configure the card group
configure() {
var _a;
// See if we are targeting an element
let elPopover = null;
if (this.props.target) {
// Set the popover to the target element
elPopover = this.props.target;
// Ensure the attributes are set in the target element
elPopover.setAttribute("tabindex", "0");
// Update this element
this.el = elPopover;
}
else {
// Create the button
let btnProps = this.props.btnProps || {};
btnProps.isLink = this.props.isDismissible ? true : false;
btnProps.tabIndex = btnProps.tabIndex || 0;
this.el = Button(btnProps).el;
}
// Create the content element
this._elContent = document.createElement("div");
this._elContent.classList.add("popover");
setClassNames(this._elContent, this.props.className);
this._elContent.innerHTML = '<div class="popover-header"></div><div class="popover-body"></div>';
appendContent(this._elContent.querySelector(".popover-header"), this.props.title);
setClassNames(this._elContent.querySelector(".popover-header"), this.props.classNameHeader);
appendContent(this._elContent.querySelector(".popover-body"), (_a = this.props.options) === null || _a === void 0 ? void 0 : _a.content);
setClassNames(this._elContent.querySelector(".popover-body"), this.props.classNameBody);
// Create the floating ui
this._floatingUI = FloatingUI({
elContent: this._elContent,
elTarget: this.el,
options: Object.assign({ arrow: true, flip: true, shift: { padding: 5 }, trigger: "mouse" }, this.props.options),
placement: this.props.placement || FloatingUIPlacements.Top,
show: this.props.show,
theme: this.props.type
});
}
/**
* Public Interface
*/
// Disables the popover
disable() {
// Disable the target element
this.el.disabled = true;
}
// Enables the popover
enable() {
// Enable the target element
this.el.disabled = false;
}
// Hides the popover
hide() { this._floatingUI.hide(); }
// Determines if the popover is visible
get isVisible() { return this._floatingUI.isVisible; }
// The floating ui instand
get floatingUI() { return this._floatingUI; }
// Sets the popover body element
setBody(content) {
let elBody = this._elContent.querySelector(".popover-body");
if (elBody) {
// Clear the content
while (elBody.firstChild) {
elBody.removeChild(elBody.firstChild);
}
// Update the content
appendContent(elBody, content);
}
}
// Sets the tippy content
setContent(content) {
// See if this is a string
if (typeof (content) === "string") {
// Set the content
this._elContent.innerHTML = content;
}
else {
// Clear the content
while (this._elContent.firstChild) {
this._elContent.removeChild(this._elContent.firstChild);
}
// Append the content
appendContent(this._elContent, content);
}
}
// Sets the popover header element
setHeader(content) {
let elHeader = this._elContent.querySelector(".popover-header");
if (elHeader) {
// Clear the content
while (elHeader.firstChild) {
elHeader.removeChild(elHeader.firstChild);
}
// Update the content
appendContent(elHeader, content);
}
}
// Shows the popover
show() { this._floatingUI.show(); }
// Toggles the popover
toggle() {
// Toggle the element
if (this.isVisible) {
// Hide the element
this.hide();
}
else {
// Show the element
this.show();
}
}
}
export const Popover = (props, template) => { return new _Popover(props, template); };