Introduction

This package provides the foundation to implement overlay elements that take overflow-considered.

See Also, If you want the change-log by version for this package. refer to Change Log for details.

Details This package provides offers a comprehensive solution for managing content that extends beyond the boundaries of its container, ensuring seamless integration and optimal user experience across various display contexts.

Preview

How to add overlay to target element.

This when you want to attach an overlay element to a specific element rather than a specific static position by calling to Overlay.attach function.

When only required properties.

The example below define only required values to adding the overlay element to the target element.

const overlay = ...;
const overlayTarget = ...;

Overlay.attach({
    element: overlay,
    target: overlayTarget,
    parent: overlayTarget.parentElement, // default is body
});

When adding options about overlay.

The example below define behaviors in the behavior that is properties key.

Overlay.attach({
    ...,
    behavior: {
        viewportPadding: 15,
        targetGap: 10,
        direction: OverlayDirection.BOTTOM_CENTER,
        animation: {...},

        // Define how to correct overflowed.
        alignment: OverlayAlignment.ALL,
        
        // Define how to correct overflowed by direction.
        alignment: {
            horizontal: OverlayAlignment.ALL,
            vertical: OverlayAlignment.SIZE
        },
    }
});

The Properties of OverlayDirection

This constants values that defines overlay layout objects that defines alignment directions of an overlay element.

export const OverlayDirection = {
    BOTTOM_CENTER: new BottomCenterOverlayLayout(),
    BOTTOM_RIGHT: new BottomRightOverlayLayout(),
    BOTTOM_LEFT: new BottomLeftOverlayLayout(),
    TOP_CENTER: new TopCenterOverlayLayout(),
    TOP_RIGHT: new TopRightOverlayLayout(),
    TOP_LEFT: new TopLeftOverlayLayout(),
    LEFT: new LeftOverlayLayout(),
    RIGHT: new RightOverlayLayout()
}

The Properties of OverlayAlignment

Signature for the types about the overlay alignment behavior.

export const OverlayAlignment = {
    ALL: new PositionedOverlayLayoutModifier(new SizedOverlayLayoutModifier()),
    NONE: new AbsoluateOverlayLayoutModifier(),
    SIZE: new SizedOverlayLayoutModifier(),
    POSITION: new PositionedOverlayLayoutModifier()
}

The Properties of OverlayBehavior<T>

Signature for the interface that defines overlay behaviors about measure position of an overlay element and post-processing or other tasks.

| Name | Description | Type | | ---- | ----------- | ---- | | direction | The property that defines an instance that defines where the overlay element is placed in the viewport. | OverlayLayout | alignment? | The property that defines an instance for post-processing when an overlay element overflows the viewport. | OverlayLayoutModifier | OverlayLayoutModifierByDirection | animation? | The property that defines a CSS Keyframes for an overlay element about fade-in and fade-out animation. | OverlayAnimation | targetGap? | The pixel value for how far the overlay element should be relative to the particular element(target) that should be placed. | number | viewportPadding? | The pixel value representing the padding around the viewport to ensure that the overlay element does not overlap the edges of the viewport or to provide additional spacing. | number | onLayoutBehind? | The callback function that is invoked after the layout calculation has been completed. And this function receives the overlay element and the final layout result, allowing for additional processing or adjustments once the layout has been finalized. | OverlayLayoutBehindCallback