devextreme/cjs/__internal/ui/notify.js

HTML5 JavaScript Component Suite for Responsive Web Development

/**
 * DevExtreme (cjs/__internal/ui/notify.js)
 * Version: 25.1.5
 * Build date: Wed Sep 03 2025
 *
 * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */

"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.default = void 0;
var _renderer = _interopRequireDefault(require("../../core/renderer"));
var _type = require("../../core/utils/type");
var _view_port = require("../../core/utils/view_port");
var _window = require("../../core/utils/window");
var _toast = _interopRequireDefault(require("../../ui/toast"));

function _interopRequireDefault(e) {
    return e && e.__esModule ? e : {
        default: e
    }
}

function _extends() {
    return _extends = Object.assign ? Object.assign.bind() : function(n) {
        for (var e = 1; e < arguments.length; e++) {
            var t = arguments[e];
            for (var r in t) {
                ({}).hasOwnProperty.call(t, r) && (n[r] = t[r])
            }
        }
        return n
    }, _extends.apply(null, arguments)
}
const window = (0, _window.getWindow)();
let $notify = null;
const $containers = {};
const COORDINATE_ALIASES = {
    "top left": {
        top: 10,
        left: 10
    },
    "top right": {
        top: 10,
        right: 10
    },
    "bottom left": {
        bottom: 10,
        left: 10
    },
    "bottom right": {
        bottom: 10,
        right: 10
    },
    "top center": dimensions => ({
        top: 10,
        left: Math.round(dimensions.windowWidth / 2 - dimensions.toastWidth / 2)
    }),
    "left center": dimensions => ({
        top: Math.round(dimensions.windowHeight / 2 - dimensions.toastHeight / 2),
        left: 10
    }),
    "right center": dimensions => ({
        top: Math.round(dimensions.windowHeight / 2 - dimensions.toastHeight / 2),
        right: 10
    }),
    center: dimensions => ({
        top: Math.round(dimensions.windowHeight / 2 - dimensions.toastHeight / 2),
        left: Math.round(dimensions.windowWidth / 2 - dimensions.toastWidth / 2)
    }),
    "bottom center": dimensions => ({
        bottom: 10,
        left: Math.round(dimensions.windowWidth / 2 - dimensions.toastWidth / 2)
    })
};
const POSITION_STYLES_MAP = {
    up: (coordinates, dimensions) => ({
        bottom: coordinates.bottom ?? dimensions.windowHeight - dimensions.toastHeight - (coordinates.top ?? 0),
        top: "",
        left: coordinates.left ?? "",
        right: coordinates.right ?? ""
    }),
    down: (coordinates, dimensions) => ({
        top: coordinates.top ?? dimensions.windowHeight - dimensions.toastHeight - (coordinates.bottom ?? 0),
        bottom: "",
        left: coordinates.left ?? "",
        right: coordinates.right ?? ""
    }),
    left: (coordinates, dimensions) => ({
        right: coordinates.right ?? dimensions.windowWidth - dimensions.toastWidth - (coordinates.left ?? 0),
        left: "",
        top: coordinates.top ?? "",
        bottom: coordinates.bottom ?? ""
    }),
    right: (coordinates, dimensions) => ({
        left: coordinates.left ?? dimensions.windowWidth - dimensions.toastWidth - (coordinates.right ?? 0),
        right: "",
        top: coordinates.top ?? "",
        bottom: coordinates.bottom ?? ""
    })
};
const getDefaultDirection = position => {
    const condition = (0, _type.isString)(position) && position.includes("top");
    return condition ? "down-push" : "up-push"
};
const createStackContainer = key => {
    const $container = (0, _renderer.default)("<div>").appendTo((0, _view_port.value)());
    $containers[key] = $container;
    return $container
};
const getStackContainer = key => {
    const $container = $containers[key];
    return $container || createStackContainer(key)
};
const setContainerClasses = (container, direction) => {
    const containerClasses = `dx-toast-stack dx-toast-stack-${direction}-direction`;
    container.removeAttr("class").addClass(containerClasses)
};
const getNotifyCoordinatesByAlias = (alias, dimensions) => {
    const coordinate = alias ? COORDINATE_ALIASES[alias] : COORDINATE_ALIASES["bottom center"];
    return "function" === typeof coordinate ? coordinate(dimensions) : coordinate
};
const getPositionStylesByNotifyCoordinates = (direction, coordinates, dimensions) => {
    const directionKey = direction.replace(/-push|-stack/g, "");
    const styleFunction = POSITION_STYLES_MAP[directionKey];
    return styleFunction ? styleFunction(coordinates, dimensions) : {
        top: "",
        bottom: "",
        left: "",
        right: ""
    }
};
const setContainerStyles = (container, direction, position) => {
    const {
        offsetWidth: toastWidth,
        offsetHeight: toastHeight
    } = container.children().first().get(0);
    const dimensions = {
        toastWidth: toastWidth,
        toastHeight: toastHeight,
        windowHeight: window.innerHeight,
        windowWidth: window.innerWidth
    };
    const coordinates = (0, _type.isString)(position) ? getNotifyCoordinatesByAlias(position, dimensions) : position;
    const styles = getPositionStylesByNotifyCoordinates(direction, coordinates, dimensions);
    container.css(styles)
};
const getToastOptions = (message, typeOrStack, displayTime) => {
    const userOptions = (0, _type.isPlainObject)(message) ? message : {
        message: message
    };
    const stack = (0, _type.isPlainObject)(typeOrStack) ? typeOrStack : void 0;
    const type = (0, _type.isPlainObject)(typeOrStack) ? void 0 : typeOrStack;
    const {
        onHidden: userOnHidden,
        onShowing: userOnShowing
    } = userOptions;
    const defaultConfiguration = {
        onHidden: e => {
            (0, _renderer.default)(e.element).remove();
            null === userOnHidden || void 0 === userOnHidden || userOnHidden(e)
        }
    };
    if (void 0 !== type) {
        defaultConfiguration.type = type
    }
    if (void 0 !== displayTime) {
        defaultConfiguration.displayTime = displayTime
    }
    if (null !== stack && void 0 !== stack && stack.position) {
        const {
            position: position
        } = stack;
        const direction = stack.direction || getDefaultDirection(position);
        const containerKey = (0, _type.isString)(position) ? position : `${position.top}-${position.left}-${position.bottom}-${position.right}`;
        const $container = getStackContainer(containerKey);
        setContainerClasses($container, direction);
        const options = _extends({}, userOptions, defaultConfiguration, {
            container: $container,
            _skipContentPositioning: true,
            onShowing: e => {
                setContainerStyles($container, direction, position);
                null === userOnShowing || void 0 === userOnShowing || userOnShowing(e)
            }
        });
        return options
    }
    const options = _extends({}, userOptions, defaultConfiguration);
    return options
};
const notify = (message, typeOrStack, displayTime) => {
    const options = getToastOptions(message, typeOrStack, displayTime);
    $notify = (0, _renderer.default)("<div>").appendTo((0, _view_port.value)());
    const toast = new _toast.default($notify, options);
    toast.show()
};
var _default = exports.default = notify;