This commit is contained in:
sasha-astiadi
2024-05-03 06:39:20 +02:00
parent 6bf49421d6
commit 324d5960af
1737 changed files with 254531 additions and 0 deletions

View File

@@ -0,0 +1,21 @@
import type { DrawerOptions, PlacementClasses } from './types';
import { DrawerInterface } from './interface';
declare class Drawer implements DrawerInterface {
_targetEl: HTMLElement;
_triggerEl: HTMLElement;
_options: DrawerOptions;
_visible: boolean;
constructor(targetEl?: HTMLElement | null, options?: DrawerOptions);
_init(): void;
hide(): void;
show(): void;
toggle(): void;
_createBackdrop(): void;
_destroyBackdropEl(): void;
_getPlacementClasses(placement: string): PlacementClasses;
isHidden(): boolean;
isVisible(): boolean;
}
export declare function initDrawers(): void;
export default Drawer;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAkB,aAAa,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC/E,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAe9C,cAAM,MAAO,YAAW,eAAe;IACnC,SAAS,EAAE,WAAW,CAAC;IACvB,UAAU,EAAE,WAAW,CAAC;IACxB,QAAQ,EAAE,aAAa,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;gBAGd,QAAQ,GAAE,WAAW,GAAG,IAAW,EACnC,OAAO,GAAE,aAAuB;IAQpC,KAAK;IAwBL,IAAI;IA+CJ,IAAI;IA8CJ,MAAM;IAQN,eAAe;IAcf,kBAAkB;IAMlB,oBAAoB,CAAC,SAAS,EAAE,MAAM,GAAG,gBAAgB;IAyCzD,QAAQ;IAIR,SAAS;CAGZ;AAQD,wBAAgB,WAAW,SA+H1B;AAOD,eAAe,MAAM,CAAC"}

View File

@@ -0,0 +1,310 @@
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

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,17 @@
import { DrawerOptions, PlacementClasses } from './types';
export declare interface DrawerInterface {
_targetEl: HTMLElement;
_triggerEl: HTMLElement;
_options: DrawerOptions;
_visible: boolean;
_init(): void;
isVisible(): boolean;
isHidden(): boolean;
hide(): void;
show(): void;
toggle(): void;
_createBackdrop(): void;
_destroyBackdropEl(): void;
_getPlacementClasses(placement: string): PlacementClasses;
}
//# sourceMappingURL=interface.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"interface.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE1D,MAAM,CAAC,OAAO,WAAW,eAAe;IAEpC,SAAS,EAAE,WAAW,CAAC;IACvB,UAAU,EAAE,WAAW,CAAC;IACxB,QAAQ,EAAE,aAAa,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAGlB,KAAK,IAAI,IAAI,CAAC;IACd,SAAS,IAAI,OAAO,CAAC;IACrB,QAAQ,IAAI,OAAO,CAAC;IACpB,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,IAAI,IAAI,CAAC;IACb,MAAM,IAAI,IAAI,CAAC;IACf,eAAe,IAAI,IAAI,CAAC;IACxB,kBAAkB,IAAI,IAAI,CAAC;IAC3B,oBAAoB,CAAC,SAAS,EAAE,MAAM,GAAG,gBAAgB,CAAC;CAC7D"}

View File

@@ -0,0 +1,2 @@
export {};
//# sourceMappingURL=interface.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"interface.js","sourceRoot":"","sources":["../../../../src/components/drawer/interface.ts"],"names":[],"mappings":""}

View File

@@ -0,0 +1,22 @@
import { DrawerInterface } from './interface';
export declare type DrawerOptions = {
placement?: string;
bodyScrolling?: boolean;
backdrop?: boolean;
edge?: boolean;
edgeOffset?: string;
backdropClasses?: string;
onShow?: (drawer: DrawerInterface) => void;
onHide?: (drawer: DrawerInterface) => void;
onToggle?: (drawer: DrawerInterface) => void;
};
export declare type PlacementClasses = {
base: string[];
active: string[];
inactive: string[];
};
export declare type DrawerInstance = {
id: string;
object: DrawerInterface;
};
//# sourceMappingURL=types.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C,MAAM,CAAC,OAAO,MAAM,aAAa,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAC3C,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,MAAM,CAAC,OAAO,MAAM,gBAAgB,GAAG;IACnC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,MAAM,EAAE,CAAC;CACtB,CAAC;AAEF,MAAM,CAAC,OAAO,MAAM,cAAc,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,eAAe,CAAC;CAC3B,CAAC"}

View File

@@ -0,0 +1,2 @@
export {};
//# sourceMappingURL=types.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/drawer/types.ts"],"names":[],"mappings":""}