@hummingbirdui/hummingbird
Version:
An open-source system designed for rapid development, without sacrificing the granular control of utility-first CSS.
323 lines (322 loc) • 11.8 kB
JavaScript
"use strict";
const baseComponent = require("./base-component.js");
const selectorEngine = require("./selector-engine.js");
var backdrop$1 = { exports: {} };
/*!
* Bootstrap backdrop.js v5.3.8 (https://getbootstrap.com/)
* Copyright 2011-2025 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
var backdrop = backdrop$1.exports;
var hasRequiredBackdrop;
function requireBackdrop() {
if (hasRequiredBackdrop) return backdrop$1.exports;
hasRequiredBackdrop = 1;
(function(module2, exports2) {
(function(global, factory) {
module2.exports = factory(baseComponent.requireEventHandler(), baseComponent.requireConfig(), baseComponent.requireUtil());
})(backdrop, function(EventHandler, Config, index_js) {
const NAME = "backdrop";
const CLASS_NAME_FADE = "fade";
const CLASS_NAME_SHOW = "show";
const EVENT_MOUSEDOWN = `mousedown.bs.${NAME}`;
const Default = {
className: "modal-backdrop",
clickCallback: null,
isAnimated: false,
isVisible: true,
// if false, we use the backdrop helper without adding any element to the dom
rootElement: "body"
// give the choice to place backdrop under different elements
};
const DefaultType = {
className: "string",
clickCallback: "(function|null)",
isAnimated: "boolean",
isVisible: "boolean",
rootElement: "(element|string)"
};
class Backdrop extends Config {
constructor(config) {
super();
this._config = this._getConfig(config);
this._isAppended = false;
this._element = null;
}
// Getters
static get Default() {
return Default;
}
static get DefaultType() {
return DefaultType;
}
static get NAME() {
return NAME;
}
// Public
show(callback) {
if (!this._config.isVisible) {
index_js.execute(callback);
return;
}
this._append();
const element = this._getElement();
if (this._config.isAnimated) {
index_js.reflow(element);
}
element.classList.add(CLASS_NAME_SHOW);
this._emulateAnimation(() => {
index_js.execute(callback);
});
}
hide(callback) {
if (!this._config.isVisible) {
index_js.execute(callback);
return;
}
this._getElement().classList.remove(CLASS_NAME_SHOW);
this._emulateAnimation(() => {
this.dispose();
index_js.execute(callback);
});
}
dispose() {
if (!this._isAppended) {
return;
}
EventHandler.off(this._element, EVENT_MOUSEDOWN);
this._element.remove();
this._isAppended = false;
}
// Private
_getElement() {
if (!this._element) {
const backdrop2 = document.createElement("div");
backdrop2.className = this._config.className;
if (this._config.isAnimated) {
backdrop2.classList.add(CLASS_NAME_FADE);
}
this._element = backdrop2;
}
return this._element;
}
_configAfterMerge(config) {
config.rootElement = index_js.getElement(config.rootElement);
return config;
}
_append() {
if (this._isAppended) {
return;
}
const element = this._getElement();
this._config.rootElement.append(element);
EventHandler.on(element, EVENT_MOUSEDOWN, () => {
index_js.execute(this._config.clickCallback);
});
this._isAppended = true;
}
_emulateAnimation(callback) {
index_js.executeAfterTransition(callback, this._getElement(), this._config.isAnimated);
}
}
return Backdrop;
});
})(backdrop$1);
return backdrop$1.exports;
}
var focustrap$1 = { exports: {} };
/*!
* Bootstrap focustrap.js v5.3.8 (https://getbootstrap.com/)
* Copyright 2011-2025 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
var focustrap = focustrap$1.exports;
var hasRequiredFocustrap;
function requireFocustrap() {
if (hasRequiredFocustrap) return focustrap$1.exports;
hasRequiredFocustrap = 1;
(function(module2, exports2) {
(function(global, factory) {
module2.exports = factory(baseComponent.requireEventHandler(), selectorEngine.requireSelectorEngine(), baseComponent.requireConfig());
})(focustrap, function(EventHandler, SelectorEngine, Config) {
const NAME = "focustrap";
const DATA_KEY = "bs.focustrap";
const EVENT_KEY = `.${DATA_KEY}`;
const EVENT_FOCUSIN = `focusin${EVENT_KEY}`;
const EVENT_KEYDOWN_TAB = `keydown.tab${EVENT_KEY}`;
const TAB_KEY = "Tab";
const TAB_NAV_FORWARD = "forward";
const TAB_NAV_BACKWARD = "backward";
const Default = {
autofocus: true,
trapElement: null
// The element to trap focus inside of
};
const DefaultType = {
autofocus: "boolean",
trapElement: "element"
};
class FocusTrap extends Config {
constructor(config) {
super();
this._config = this._getConfig(config);
this._isActive = false;
this._lastTabNavDirection = null;
}
// Getters
static get Default() {
return Default;
}
static get DefaultType() {
return DefaultType;
}
static get NAME() {
return NAME;
}
// Public
activate() {
if (this._isActive) {
return;
}
if (this._config.autofocus) {
this._config.trapElement.focus();
}
EventHandler.off(document, EVENT_KEY);
EventHandler.on(document, EVENT_FOCUSIN, (event) => this._handleFocusin(event));
EventHandler.on(document, EVENT_KEYDOWN_TAB, (event) => this._handleKeydown(event));
this._isActive = true;
}
deactivate() {
if (!this._isActive) {
return;
}
this._isActive = false;
EventHandler.off(document, EVENT_KEY);
}
// Private
_handleFocusin(event) {
const {
trapElement
} = this._config;
if (event.target === document || event.target === trapElement || trapElement.contains(event.target)) {
return;
}
const elements = SelectorEngine.focusableChildren(trapElement);
if (elements.length === 0) {
trapElement.focus();
} else if (this._lastTabNavDirection === TAB_NAV_BACKWARD) {
elements[elements.length - 1].focus();
} else {
elements[0].focus();
}
}
_handleKeydown(event) {
if (event.key !== TAB_KEY) {
return;
}
this._lastTabNavDirection = event.shiftKey ? TAB_NAV_BACKWARD : TAB_NAV_FORWARD;
}
}
return FocusTrap;
});
})(focustrap$1);
return focustrap$1.exports;
}
var scrollbar$1 = { exports: {} };
/*!
* Bootstrap scrollbar.js v5.3.8 (https://getbootstrap.com/)
* Copyright 2011-2025 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
var scrollbar = scrollbar$1.exports;
var hasRequiredScrollbar;
function requireScrollbar() {
if (hasRequiredScrollbar) return scrollbar$1.exports;
hasRequiredScrollbar = 1;
(function(module2, exports2) {
(function(global, factory) {
module2.exports = factory(baseComponent.requireManipulator(), selectorEngine.requireSelectorEngine(), baseComponent.requireUtil());
})(scrollbar, function(Manipulator, SelectorEngine, index_js) {
const SELECTOR_FIXED_CONTENT = ".fixed-top, .fixed-bottom, .is-fixed, .sticky-top";
const SELECTOR_STICKY_CONTENT = ".sticky-top";
const PROPERTY_PADDING = "padding-right";
const PROPERTY_MARGIN = "margin-right";
class ScrollBarHelper {
constructor() {
this._element = document.body;
}
// Public
getWidth() {
const documentWidth = document.documentElement.clientWidth;
return Math.abs(window.innerWidth - documentWidth);
}
hide() {
const width = this.getWidth();
this._disableOverFlow();
this._setElementAttributes(this._element, PROPERTY_PADDING, (calculatedValue) => calculatedValue + width);
this._setElementAttributes(SELECTOR_FIXED_CONTENT, PROPERTY_PADDING, (calculatedValue) => calculatedValue + width);
this._setElementAttributes(SELECTOR_STICKY_CONTENT, PROPERTY_MARGIN, (calculatedValue) => calculatedValue - width);
}
reset() {
this._resetElementAttributes(this._element, "overflow");
this._resetElementAttributes(this._element, PROPERTY_PADDING);
this._resetElementAttributes(SELECTOR_FIXED_CONTENT, PROPERTY_PADDING);
this._resetElementAttributes(SELECTOR_STICKY_CONTENT, PROPERTY_MARGIN);
}
isOverflowing() {
return this.getWidth() > 0;
}
// Private
_disableOverFlow() {
this._saveInitialAttribute(this._element, "overflow");
this._element.style.overflow = "hidden";
}
_setElementAttributes(selector, styleProperty, callback) {
const scrollbarWidth = this.getWidth();
const manipulationCallBack = (element) => {
if (element !== this._element && window.innerWidth > element.clientWidth + scrollbarWidth) {
return;
}
this._saveInitialAttribute(element, styleProperty);
const calculatedValue = window.getComputedStyle(element).getPropertyValue(styleProperty);
element.style.setProperty(styleProperty, `${callback(Number.parseFloat(calculatedValue))}px`);
};
this._applyManipulationCallback(selector, manipulationCallBack);
}
_saveInitialAttribute(element, styleProperty) {
const actualValue = element.style.getPropertyValue(styleProperty);
if (actualValue) {
Manipulator.setDataAttribute(element, styleProperty, actualValue);
}
}
_resetElementAttributes(selector, styleProperty) {
const manipulationCallBack = (element) => {
const value = Manipulator.getDataAttribute(element, styleProperty);
if (value === null) {
element.style.removeProperty(styleProperty);
return;
}
Manipulator.removeDataAttribute(element, styleProperty);
element.style.setProperty(styleProperty, value);
};
this._applyManipulationCallback(selector, manipulationCallBack);
}
_applyManipulationCallback(selector, callBack) {
if (index_js.isElement(selector)) {
callBack(selector);
return;
}
for (const sel of SelectorEngine.find(selector, this._element)) {
callBack(sel);
}
}
}
return ScrollBarHelper;
});
})(scrollbar$1);
return scrollbar$1.exports;
}
exports.requireBackdrop = requireBackdrop;
exports.requireFocustrap = requireFocustrap;
exports.requireScrollbar = requireScrollbar;
//# sourceMappingURL=scrollbar.js.map