@jay-js/ui
Version:
A library of UI components for Jay JS with Tailwind CSS and daisyUI.
64 lines (63 loc) • 2.63 kB
JavaScript
function _extends() {
_extends = Object.assign || function(target) {
for(var i = 1; i < arguments.length; i++){
var source = arguments[i];
for(var key in source){
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _object_destructuring_empty(o) {
if (o === null || o === void 0) throw new TypeError("Cannot destructure " + o);
return o;
}
export function useDrawer(_param) {
var props = _extends({}, _object_destructuring_empty(_param));
return function() {
const drawer = document.querySelector(`#${props.for}`);
if (drawer && drawer instanceof HTMLElement) {
const drawerOverlay = document.querySelector(`[data-drawer-for="${props.for}"]`);
const drawerContent = drawer.querySelector(".drawer-content");
if (drawer.classList.contains("hidden")) {
drawer.classList.remove("hidden");
drawer.classList.add("flex");
if (props.onOpen) {
props.onOpen();
}
} else {
setTimeout(()=>{
drawer.classList.remove("flex");
drawer.classList.add("hidden");
if (props.onClose) {
props.onClose();
}
}, 300);
}
setTimeout(()=>{
if (drawerContent && drawerContent instanceof HTMLElement) {
if (drawerContent.classList.contains("drawer-left")) {
drawerContent.classList.toggle("-translate-x-full");
}
if (drawerContent.classList.contains("drawer-right")) {
drawerContent.classList.toggle("translate-x-full");
}
if (drawerContent.classList.contains("drawer-top")) {
drawerContent.classList.toggle("-translate-y-full");
}
if (drawerContent.classList.contains("drawer-bottom")) {
drawerContent.classList.toggle("translate-y-full");
}
drawerContent.classList.toggle("translate-x-0");
}
if (drawerOverlay && drawerOverlay instanceof HTMLElement) {
drawerOverlay.classList.toggle("opacity-0");
}
}, 20);
}
};
}