@jay-js/ui
Version:
A library of UI components for Jay JS with Tailwind CSS and daisyUI.
107 lines (106 loc) • 5.04 kB
JavaScript
function _define_property(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _object_spread(target) {
for(var i = 1; i < arguments.length; i++){
var source = arguments[i] != null ? arguments[i] : {};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === "function") {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function(key) {
_define_property(target, key, source[key]);
});
}
return target;
}
function _object_without_properties(source, excluded) {
if (source == null) return {};
var target = _object_without_properties_loose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for(i = 0; i < sourceSymbolKeys.length; i++){
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function _object_without_properties_loose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for(i = 0; i < sourceKeys.length; i++){
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
import { Base } from "../Base/Base.js";
export function ResizableSplitter(_param = {}) {
var { direction = "vertical" } = _param, props = _object_without_properties(_param, [
"direction"
]);
const splitter = Base(_object_spread({
className: "bg-base-300 flex flex-shrink-0",
style: {
cursor: direction === "horizontal" ? "row-resize" : "col-resize",
width: direction === "horizontal" ? "100%" : "0.25rem",
height: direction === "horizontal" ? "0.25rem" : "100%"
}
}, props));
bindColumnResizeHandler(splitter, direction);
return splitter;
}
function bindColumnResizeHandler(handle, direction) {
let isDragging = false;
let previousElement;
let nextElement;
handle.addEventListener("mousedown", (e)=>{
isDragging = true;
if (e.target instanceof HTMLElement) {
previousElement = e.target.previousElementSibling;
nextElement = e.target.nextElementSibling;
}
});
document.addEventListener("mousemove", (e)=>{
if (!isDragging) return;
e.preventDefault();
const minColumnSize = 50;
if (direction === "horizontal") {
const parent = handle.parentElement;
const mousePosition = e.clientY;
var _parent_offsetTop, _previousElement_offsetTop;
const newSizePrevious = Math.max(mousePosition - ((_parent_offsetTop = parent === null || parent === void 0 ? void 0 : parent.offsetTop) !== null && _parent_offsetTop !== void 0 ? _parent_offsetTop : 0) - ((_previousElement_offsetTop = previousElement === null || previousElement === void 0 ? void 0 : previousElement.offsetTop) !== null && _previousElement_offsetTop !== void 0 ? _previousElement_offsetTop : 0), minColumnSize);
const newSizeNext = Math.max(((nextElement === null || nextElement === void 0 ? void 0 : nextElement.offsetTop) || 0) + ((nextElement === null || nextElement === void 0 ? void 0 : nextElement.clientHeight) || 0) - mousePosition, minColumnSize);
previousElement === null || previousElement === void 0 ? void 0 : previousElement.style.setProperty("height", `${newSizePrevious}px`);
nextElement === null || nextElement === void 0 ? void 0 : nextElement.style.setProperty("height", `${newSizeNext}px`);
return;
}
const mousePosition = e.clientX;
const newSizePrevious = Math.max(mousePosition - ((previousElement === null || previousElement === void 0 ? void 0 : previousElement.offsetLeft) || 0), minColumnSize);
const newSizeNext = Math.max(((nextElement === null || nextElement === void 0 ? void 0 : nextElement.offsetLeft) || 0) + ((nextElement === null || nextElement === void 0 ? void 0 : nextElement.clientWidth) || 0) - mousePosition, minColumnSize);
previousElement === null || previousElement === void 0 ? void 0 : previousElement.style.setProperty("width", `${newSizePrevious}px`);
nextElement === null || nextElement === void 0 ? void 0 : nextElement.style.setProperty("width", `${newSizeNext}px`);
});
document.addEventListener("mouseup", ()=>{
isDragging = false;
});
}