gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
389 lines (388 loc) • 16.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FloatingUI = exports.FloatingUITypes = exports.FloatingUIPlacements = exports.FloatingUILib = void 0;
var dom_1 = require("@floating-ui/dom");
var common_1 = require("../common");
exports.FloatingUILib = require("@floating-ui/dom");
/**
* Floating UI Placements
*/
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 = exports.FloatingUIPlacements || (exports.FloatingUIPlacements = {}));
/**
* Floating UI Types
*/
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 = exports.FloatingUITypes || (exports.FloatingUITypes = {}));
/**
* Floating UI Element
*/
var _FloatingUI = /** @class */ (function () {
// Constructor
function _FloatingUI(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.appendChild(props.elContent);
this._elContent.setAttribute("data-theme", this.getTheme(this._props.theme));
(0, common_1.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
_FloatingUI.prototype.addEvents = function (trigger) {
var _this = this;
if (trigger === void 0) { trigger = ""; }
// Events
if (trigger.indexOf("mouse") >= 0) {
this._elTarget.addEventListener("mouseenter", function () { _this.show(); });
this._elTarget.addEventListener("mouseleave", function () { _this.hide(); });
}
if (trigger.indexOf("focus") >= 0) {
this._elTarget.addEventListener("focus", function () { _this.show(); });
this._elTarget.addEventListener("blur", function () { _this.hide(); });
}
if (trigger.indexOf("click") >= 0) {
this._elTarget.addEventListener("click", function (ev) {
// Call the event
_this.isVisible ? _this.hide() : _this.show();
});
}
// Create the event
document.addEventListener("click", function (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 (var 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", function (ev) {
// Wait for the other events to run
setTimeout(function () {
// Refresh the content
_this.refresh();
}, 10);
});
};
// Creates the floating ui
_FloatingUI.prototype.create = function () {
var _a;
var placement = this.getPlacement(this._props.placement);
var 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((0, dom_1.arrow)({ element: this._elArrow }));
middleware = [(0, dom_1.offset)(6)].concat(middleware);
}
// Set the options
this._options = {
middleware: middleware,
placement: placement.placement
};
};
// Returns the plugins
_FloatingUI.prototype.getMiddleware = function (placement) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
var 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" ? (0, dom_1.offset)() : (0, dom_1.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" ? (0, dom_1.autoPlacement)() : (0, dom_1.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((0, dom_1.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" ? (0, dom_1.hide)() : (0, dom_1.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" ? (0, dom_1.inline)() : (0, dom_1.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" ? (0, dom_1.shift)() : (0, dom_1.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" ? (0, dom_1.size)() : (0, dom_1.size)((_j = this._props.options) === null || _j === void 0 ? void 0 : _j.size));
}
// Return the middle ware
return middleware;
};
// Returns the placement information
_FloatingUI.prototype.getPlacement = function (placementValue) {
var autoPlacement = false;
var 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: autoPlacement, placement: placement };
};
// Returns the theme
_FloatingUI.prototype.getTheme = function (themeValue) {
var 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
_FloatingUI.prototype.refresh = function () {
var _this = this;
// Create the floating ui
(0, dom_1.computePosition)(this._elTarget, this._elContent, this._options).then(function (_a) {
var _b;
var _c;
var x = _a.x, y = _a.y, middlewareData = _a.middlewareData;
// Update the location
Object.assign(_this._elContent.style, {
left: "".concat(x, "px"),
top: "".concat(y, "px")
});
// See if the arrow exists
if (_this._elArrow) {
var arrowX = middlewareData.arrow.x;
var arrowY = middlewareData.arrow.y;
var placement = (((_c = middlewareData.offset) === null || _c === void 0 ? void 0 : _c.placement) || _this._options.placement).split('-')[0];
var 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, (_b = {
left: arrowX != null ? "".concat(arrowX, "px") : '',
top: arrowY != null ? "".concat(arrowY, "px") : '',
right: '',
bottom: ''
},
_b[side] = '-4px',
_b));
}
});
};
/**
* Public Methods
*/
_FloatingUI.prototype.addIgnoreElement = function (el) { this._elIgnore.push(el); };
_FloatingUI.prototype.removeIgnoreElement = function (el) {
// Parse the elements
for (var 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;
}
}
};
_FloatingUI.prototype.setContent = function (el) { this._elContent = el; this.refresh(); };
// Hides the content
_FloatingUI.prototype.hide = function () {
// 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;
}
};
Object.defineProperty(_FloatingUI.prototype, "isVisible", {
// Determines if the content is visible
get: function () { return !this._elContent.classList.contains("d-none"); },
enumerable: false,
configurable: true
});
// Refreshes the position of the floating ui
_FloatingUI.prototype.refreshPosition = function () { this.refresh(); };
// Shows the content
_FloatingUI.prototype.show = function () {
// 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
_FloatingUI.prototype.toggle = function () { this.isVisible ? this.hide() : this.show(); };
return _FloatingUI;
}());
var FloatingUI = function (props) { return new _FloatingUI(props); };
exports.FloatingUI = FloatingUI;