@medyll/idae-be
Version:
A modern, lightweight, and extensible DOM manipulation library built with TypeScript. Designed for precise element targeting and manipulation using a callback-based approach. Features include advanced DOM traversal, event handling, style management, attri
95 lines (94 loc) • 4.16 kB
TypeScript
import { Be } from '../be.js';
import type { CommonHandler, HandlerCallBack, HandlerCallBackFn, PositionSnapOptions } from '../types.js';
declare enum positionMethods {
clonePosition = "clonePosition",
overlapPosition = "overlapPosition",
snapTo = "snapTo"
}
export interface PositionHandlerHandle {
clonePosition?: {
source: string | HTMLElement;
options?: PositionSnapOptions;
} & HandlerCallBack;
overlapPosition?: {
source: string | HTMLElement;
options: PositionSnapOptions;
} & HandlerCallBack;
snapTo?: {
target: string | HTMLElement;
options?: PositionSnapOptions;
} & HandlerCallBack;
}
export declare class PositionHandler implements CommonHandler<PositionHandler, PositionHandlerHandle> {
private beElement;
static methods: positionMethods[];
constructor(beElement: Be);
methods: string[] | keyof PositionHandler;
handle(actions: PositionHandlerHandle): Be;
/**
* Clones the position of a source element to this element.
* @param source - The element or selector of the element whose position is to be cloned.
* @param options - Additional options for positioning.
* @param options.offsetX - Horizontal offset from the source position.
* @param options.offsetY - Vertical offset from the source position.
* @param options.useTransform - Whether to use CSS transform for positioning.
* @param callback - Optional callback function to execute after cloning the position.
* @returns The Be instance for method chaining.
* @example
* // HTML: <div id="source"></div><div id="target"></div>
* const beInstance = be('#target');
* beInstance.clonePosition('#source', { offsetX: 10, offsetY: 20 });
*/
clonePosition(source: string | HTMLElement, options?: {
offsetX?: number;
offsetY?: number;
useTransform?: boolean;
}, callback?: HandlerCallBackFn): Be;
/**
* Positions this element to overlap a target element.
* @param targetElement - The element or selector of the element to overlap.
* @param options - Additional options for positioning.
* @param options.alignment - The alignment of this element relative to the target.
* @param options.offset - The distance to offset from the target element.
* @param options.useTransform - Whether to use CSS transform for positioning.
* @param callback - Optional callback function to execute after positioning.
* @returns The Be instance for method chaining.
* @example
* // HTML: <div id="source"></div><div id="target"></div>
* const beInstance = be('#target');
* beInstance.overlapPosition('#source', { alignment: 'center', offset: 10 });
*/
overlapPosition(targetElement: string | HTMLElement, options?: {
alignment?: 'center' | 'top' | 'bottom' | 'left' | 'right';
offset?: number;
useTransform?: boolean;
}, callback?: HandlerCallBackFn): Be;
/**
* Snaps the element to a target element with specified anchor points.
* @param targetElement - The element or selector of the element to snap to.
* @param options - Snapping options.
* @param options.sourceAnchor - The anchor point on the source element.
* @param options.targetAnchor - The anchor point on the target element.
* @param options.offset - Optional offset from the target anchor point.
* @param callback - Optional callback function to execute after snapping.
* @returns The Be instance for method chaining.
* @example
* // HTML: <div id="source"></div><div id="target"></div>
* const beInstance = be('#target');
* beInstance.snapTo('#source', {
* sourceAnchor: 'center',
* targetAnchor: 'top left',
* offset: { x: 10, y: 20 }
* });
*/
snapTo(targetElement: string | HTMLElement, options: {
sourceAnchor: PositionSnapOptions;
targetAnchor: PositionSnapOptions;
offset?: {
x: number;
y: number;
};
}, callback?: HandlerCallBackFn): Be;
valueOf(): DOMRect | null;
}
export {};