forked from hero/www_hero
310 lines
12 KiB
JavaScript
310 lines
12 KiB
JavaScript
|
var __assign = (this && this.__assign) || function () {
|
||
|
|
__assign = Object.assign || function(t) {
|
||
|
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||
|
|
s = arguments[i];
|
||
|
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
||
|
|
t[p] = s[p];
|
||
|
|
}
|
||
|
|
return t;
|
||
|
|
};
|
||
|
|
return __assign.apply(this, arguments);
|
||
|
|
};
|
||
|
|
var Default = {
|
||
|
|
placement: 'left',
|
||
|
|
bodyScrolling: false,
|
||
|
|
backdrop: true,
|
||
|
|
edge: false,
|
||
|
|
edgeOffset: 'bottom-[60px]',
|
||
|
|
backdropClasses: 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-30',
|
||
|
|
onShow: function () { },
|
||
|
|
onHide: function () { },
|
||
|
|
onToggle: function () { },
|
||
|
|
};
|
||
|
|
var Drawer = /** @class */ (function () {
|
||
|
|
function Drawer(targetEl, options) {
|
||
|
|
if (targetEl === void 0) { targetEl = null; }
|
||
|
|
if (options === void 0) { options = Default; }
|
||
|
|
this._targetEl = targetEl;
|
||
|
|
this._options = __assign(__assign({}, Default), options);
|
||
|
|
this._visible = false;
|
||
|
|
this._init();
|
||
|
|
}
|
||
|
|
Drawer.prototype._init = function () {
|
||
|
|
var _this = this;
|
||
|
|
// set initial accessibility attributes
|
||
|
|
if (this._targetEl) {
|
||
|
|
this._targetEl.setAttribute('aria-hidden', 'true');
|
||
|
|
this._targetEl.classList.add('transition-transform');
|
||
|
|
}
|
||
|
|
// set base placement classes
|
||
|
|
this._getPlacementClasses(this._options.placement).base.map(function (c) {
|
||
|
|
_this._targetEl.classList.add(c);
|
||
|
|
});
|
||
|
|
// add keyboard event listener to document
|
||
|
|
document.addEventListener('keydown', function (event) {
|
||
|
|
if (event.key === 'Escape') {
|
||
|
|
// if 'Escape' key is pressed
|
||
|
|
if (_this.isVisible()) {
|
||
|
|
// if the Drawer is visible
|
||
|
|
_this.hide(); // hide the Drawer
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
Drawer.prototype.hide = function () {
|
||
|
|
var _this = this;
|
||
|
|
// based on the edge option show placement classes
|
||
|
|
if (this._options.edge) {
|
||
|
|
this._getPlacementClasses(this._options.placement + '-edge').active.map(function (c) {
|
||
|
|
_this._targetEl.classList.remove(c);
|
||
|
|
});
|
||
|
|
this._getPlacementClasses(this._options.placement + '-edge').inactive.map(function (c) {
|
||
|
|
_this._targetEl.classList.add(c);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._getPlacementClasses(this._options.placement).active.map(function (c) {
|
||
|
|
_this._targetEl.classList.remove(c);
|
||
|
|
});
|
||
|
|
this._getPlacementClasses(this._options.placement).inactive.map(function (c) {
|
||
|
|
_this._targetEl.classList.add(c);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
// set accessibility attributes
|
||
|
|
this._targetEl.setAttribute('aria-hidden', 'true');
|
||
|
|
this._targetEl.removeAttribute('aria-modal');
|
||
|
|
this._targetEl.removeAttribute('role');
|
||
|
|
// enable body scroll
|
||
|
|
if (!this._options.bodyScrolling) {
|
||
|
|
document.body.classList.remove('overflow-hidden');
|
||
|
|
}
|
||
|
|
// destroy backdrop
|
||
|
|
if (this._options.backdrop) {
|
||
|
|
this._destroyBackdropEl();
|
||
|
|
}
|
||
|
|
this._visible = false;
|
||
|
|
// callback function
|
||
|
|
this._options.onHide(this);
|
||
|
|
};
|
||
|
|
Drawer.prototype.show = function () {
|
||
|
|
var _this = this;
|
||
|
|
if (this._options.edge) {
|
||
|
|
this._getPlacementClasses(this._options.placement + '-edge').active.map(function (c) {
|
||
|
|
_this._targetEl.classList.add(c);
|
||
|
|
});
|
||
|
|
this._getPlacementClasses(this._options.placement + '-edge').inactive.map(function (c) {
|
||
|
|
_this._targetEl.classList.remove(c);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._getPlacementClasses(this._options.placement).active.map(function (c) {
|
||
|
|
_this._targetEl.classList.add(c);
|
||
|
|
});
|
||
|
|
this._getPlacementClasses(this._options.placement).inactive.map(function (c) {
|
||
|
|
_this._targetEl.classList.remove(c);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
// set accessibility attributes
|
||
|
|
this._targetEl.setAttribute('aria-modal', 'true');
|
||
|
|
this._targetEl.setAttribute('role', 'dialog');
|
||
|
|
this._targetEl.removeAttribute('aria-hidden');
|
||
|
|
// disable body scroll
|
||
|
|
if (!this._options.bodyScrolling) {
|
||
|
|
document.body.classList.add('overflow-hidden');
|
||
|
|
}
|
||
|
|
// show backdrop
|
||
|
|
if (this._options.backdrop) {
|
||
|
|
this._createBackdrop();
|
||
|
|
}
|
||
|
|
this._visible = true;
|
||
|
|
// callback function
|
||
|
|
this._options.onShow(this);
|
||
|
|
};
|
||
|
|
Drawer.prototype.toggle = function () {
|
||
|
|
if (this.isVisible()) {
|
||
|
|
this.hide();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.show();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Drawer.prototype._createBackdrop = function () {
|
||
|
|
var _a;
|
||
|
|
var _this = this;
|
||
|
|
if (!this._visible) {
|
||
|
|
var backdropEl = document.createElement('div');
|
||
|
|
backdropEl.setAttribute('drawer-backdrop', '');
|
||
|
|
(_a = backdropEl.classList).add.apply(_a, this._options.backdropClasses.split(' '));
|
||
|
|
document.querySelector('body').append(backdropEl);
|
||
|
|
backdropEl.addEventListener('click', function () {
|
||
|
|
_this.hide();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Drawer.prototype._destroyBackdropEl = function () {
|
||
|
|
if (this._visible) {
|
||
|
|
document.querySelector('[drawer-backdrop]').remove();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Drawer.prototype._getPlacementClasses = function (placement) {
|
||
|
|
switch (placement) {
|
||
|
|
case 'top':
|
||
|
|
return {
|
||
|
|
base: ['top-0', 'left-0', 'right-0'],
|
||
|
|
active: ['transform-none'],
|
||
|
|
inactive: ['-translate-y-full'],
|
||
|
|
};
|
||
|
|
case 'right':
|
||
|
|
return {
|
||
|
|
base: ['right-0', 'top-0'],
|
||
|
|
active: ['transform-none'],
|
||
|
|
inactive: ['translate-x-full'],
|
||
|
|
};
|
||
|
|
case 'bottom':
|
||
|
|
return {
|
||
|
|
base: ['bottom-0', 'left-0', 'right-0'],
|
||
|
|
active: ['transform-none'],
|
||
|
|
inactive: ['translate-y-full'],
|
||
|
|
};
|
||
|
|
case 'left':
|
||
|
|
return {
|
||
|
|
base: ['left-0', 'top-0'],
|
||
|
|
active: ['transform-none'],
|
||
|
|
inactive: ['-translate-x-full'],
|
||
|
|
};
|
||
|
|
case 'bottom-edge':
|
||
|
|
return {
|
||
|
|
base: ['left-0', 'top-0'],
|
||
|
|
active: ['transform-none'],
|
||
|
|
inactive: ['translate-y-full', this._options.edgeOffset],
|
||
|
|
};
|
||
|
|
default:
|
||
|
|
return {
|
||
|
|
base: ['left-0', 'top-0'],
|
||
|
|
active: ['transform-none'],
|
||
|
|
inactive: ['-translate-x-full'],
|
||
|
|
};
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Drawer.prototype.isHidden = function () {
|
||
|
|
return !this._visible;
|
||
|
|
};
|
||
|
|
Drawer.prototype.isVisible = function () {
|
||
|
|
return this._visible;
|
||
|
|
};
|
||
|
|
return Drawer;
|
||
|
|
}());
|
||
|
|
var getDrawerInstance = function (id, instances) {
|
||
|
|
if (instances.some(function (drawerInstance) { return drawerInstance.id === id; })) {
|
||
|
|
return instances.find(function (drawerInstance) { return drawerInstance.id === id; });
|
||
|
|
}
|
||
|
|
};
|
||
|
|
export function initDrawers() {
|
||
|
|
var drawerInstances = [];
|
||
|
|
document.querySelectorAll('[data-drawer-target]').forEach(function ($triggerEl) {
|
||
|
|
// mandatory
|
||
|
|
var drawerId = $triggerEl.getAttribute('data-drawer-target');
|
||
|
|
var $drawerEl = document.getElementById(drawerId);
|
||
|
|
if ($drawerEl) {
|
||
|
|
// optional
|
||
|
|
var placement = $triggerEl.getAttribute('data-drawer-placement');
|
||
|
|
var bodyScrolling = $triggerEl.getAttribute('data-drawer-body-scrolling');
|
||
|
|
var backdrop = $triggerEl.getAttribute('data-drawer-backdrop');
|
||
|
|
var edge = $triggerEl.getAttribute('data-drawer-edge');
|
||
|
|
var edgeOffset = $triggerEl.getAttribute('data-drawer-edge-offset');
|
||
|
|
if (!getDrawerInstance(drawerId, drawerInstances)) {
|
||
|
|
drawerInstances.push({
|
||
|
|
id: drawerId,
|
||
|
|
object: new Drawer($drawerEl, {
|
||
|
|
placement: placement ? placement : Default.placement,
|
||
|
|
bodyScrolling: bodyScrolling
|
||
|
|
? bodyScrolling === 'true'
|
||
|
|
? true
|
||
|
|
: false
|
||
|
|
: Default.bodyScrolling,
|
||
|
|
backdrop: backdrop
|
||
|
|
? backdrop === 'true'
|
||
|
|
? true
|
||
|
|
: false
|
||
|
|
: Default.backdrop,
|
||
|
|
edge: edge
|
||
|
|
? edge === 'true'
|
||
|
|
? true
|
||
|
|
: false
|
||
|
|
: Default.edge,
|
||
|
|
edgeOffset: edgeOffset
|
||
|
|
? edgeOffset
|
||
|
|
: Default.edgeOffset,
|
||
|
|
}),
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
console.error("Drawer with id ".concat(drawerId, " not found. Are you sure that the data-drawer-target attribute points to the correct drawer id?"));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
document.querySelectorAll('[data-drawer-toggle]').forEach(function ($triggerEl) {
|
||
|
|
var drawerId = $triggerEl.getAttribute('data-drawer-toggle');
|
||
|
|
var $drawerEl = document.getElementById(drawerId);
|
||
|
|
if ($drawerEl) {
|
||
|
|
var drawer_1 = getDrawerInstance(drawerId, drawerInstances);
|
||
|
|
if (drawer_1) {
|
||
|
|
$triggerEl.addEventListener('click', function () {
|
||
|
|
drawer_1.object.toggle();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
console.error("Drawer with id ".concat(drawerId, " has not been initialized. Please initialize it using the data-drawer-target attribute."));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
console.error("Drawer with id ".concat(drawerId, " not found. Are you sure that the data-drawer-target attribute points to the correct drawer id?"));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
document
|
||
|
|
.querySelectorAll('[data-drawer-dismiss], [data-drawer-hide]')
|
||
|
|
.forEach(function ($triggerEl) {
|
||
|
|
var drawerId = $triggerEl.getAttribute('data-drawer-dismiss')
|
||
|
|
? $triggerEl.getAttribute('data-drawer-dismiss')
|
||
|
|
: $triggerEl.getAttribute('data-drawer-hide');
|
||
|
|
var $drawerEl = document.getElementById(drawerId);
|
||
|
|
if ($drawerEl) {
|
||
|
|
var drawer_2 = getDrawerInstance(drawerId, drawerInstances);
|
||
|
|
if (drawer_2) {
|
||
|
|
$triggerEl.addEventListener('click', function () {
|
||
|
|
drawer_2.object.hide();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
console.error("Drawer with id ".concat(drawerId, " has not been initialized. Please initialize it using the data-drawer-target attribute."));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
console.error("Drawer with id ".concat(drawerId, " not found. Are you sure that the data-drawer-target attribute points to the correct drawer id"));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
document.querySelectorAll('[data-drawer-show]').forEach(function ($triggerEl) {
|
||
|
|
var drawerId = $triggerEl.getAttribute('data-drawer-show');
|
||
|
|
var $drawerEl = document.getElementById(drawerId);
|
||
|
|
if ($drawerEl) {
|
||
|
|
var drawer_3 = getDrawerInstance(drawerId, drawerInstances);
|
||
|
|
if (drawer_3) {
|
||
|
|
$triggerEl.addEventListener('click', function () {
|
||
|
|
drawer_3.object.show();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
console.error("Drawer with id ".concat(drawerId, " has not been initialized. Please initialize it using the data-drawer-target attribute."));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
console.error("Drawer with id ".concat(drawerId, " not found. Are you sure that the data-drawer-target attribute points to the correct drawer id?"));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (typeof window !== 'undefined') {
|
||
|
|
window.Drawer = Drawer;
|
||
|
|
window.initDrawers = initDrawers;
|
||
|
|
}
|
||
|
|
export default Drawer;
|
||
|
|
//# sourceMappingURL=index.js.map
|