squidex/frontend/app/framework/utils/modal-positioner.ts

/*
 * Squidex Headless CMS
 *
 * @license
 * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
 */

const POSITION_TOP_CENTER = 'top';
const POSITION_TOP_LEFT = 'top-left';
const POSITION_TOP_RIGHT = 'top-right';
const POSITION_BOTTOM_CENTER = 'bottom';
const POSITION_BOTTOM_LEFT = 'bottom-left';
const POSITION_BOTTOM_RIGHT = 'bottom-right';
const POSITION_LEFT_CENTER = 'left';
const POSITION_LEFT_TOP = 'left-top';
const POSITION_LEFT_BOTTOM = 'left-bottom';
const POSITION_RIGHT_CENTER = 'right';
const POSITION_RIGHT_TOP = 'right-top';
const POSITION_RIGHT_BOTTOM = 'right-bottom';

export function positionModal(targetRect: DOMRect, modalRect: DOMRect, relativePosition: string, offset: number, fix: boolean, viewportWidth: number, viewportHeight: number): { x: number; y: number } {
    let y = 0;
    let x = 0;

    switch (relativePosition) {
        case POSITION_LEFT_TOP:
        case POSITION_RIGHT_TOP: {
            y = targetRect.top;
            break;
        }
        case POSITION_LEFT_BOTTOM:
        case POSITION_RIGHT_BOTTOM: {
            y = targetRect.bottom - modalRect.height;
            break;
        }
        case POSITION_BOTTOM_CENTER:
        case POSITION_BOTTOM_LEFT:
        case POSITION_BOTTOM_RIGHT: {
            y = targetRect.bottom + offset;

            if (fix && y + modalRect.height > viewportHeight) {
                const candidate = targetRect.top - modalRect.height - offset;

                if (candidate > 0) {
                    y = candidate;
                }
            }
            break;
        }
        case POSITION_TOP_CENTER:
        case POSITION_TOP_LEFT:
        case POSITION_TOP_RIGHT: {
            y = targetRect.top - modalRect.height - offset;

            if (fix && y < 0) {
                const candidate = targetRect.bottom + offset;

                if (candidate + modalRect.height < viewportHeight) {
                    y = candidate;
                }
            }
            break;
        }
        case POSITION_LEFT_CENTER:
        case POSITION_RIGHT_CENTER:
            y = targetRect.top + targetRect.height * 0.5 - modalRect.height * 0.5;
            break;
    }

    switch (relativePosition) {
        case POSITION_TOP_LEFT:
        case POSITION_BOTTOM_LEFT: {
            x = targetRect.left;
            break;
        }
        case POSITION_TOP_RIGHT:
        case POSITION_BOTTOM_RIGHT: {
            x = targetRect.right - modalRect.width;
            break;
        }
        case POSITION_RIGHT_CENTER:
        case POSITION_RIGHT_TOP:
        case POSITION_RIGHT_BOTTOM: {
            x = targetRect.right + offset;

            if (fix && x + modalRect.width > viewportWidth) {
                const candidate = targetRect.left - modalRect.width - offset;

                if (candidate > 0) {
                    x = candidate;
                }
            }
            break;
        }
        case POSITION_LEFT_CENTER:
        case POSITION_LEFT_TOP:
        case POSITION_LEFT_BOTTOM: {
            x = targetRect.left - modalRect.width - offset;

            if (fix && x < 0) {
                const candidate = targetRect.right + offset;

                if (candidate + modalRect.width < viewportWidth) {
                    x = candidate;
                }
            }
            break;
        }
        case POSITION_TOP_CENTER:
        case POSITION_BOTTOM_CENTER:
            x = targetRect.left + targetRect.width * 0.5 - modalRect.width * 0.5;
            break;
    }

    return { x, y };
}