devextreme/cjs/__internal/scheduler/tooltip_strategies/mobile_tooltip_strategy.js

JavaScript/TypeScript Component Suite for Responsive Web Development

/**
 * DevExtreme (cjs/__internal/scheduler/tooltip_strategies/mobile_tooltip_strategy.js)
 * Version: 25.2.8
 * Build date: Mon Jun 08 2026
 *
 * Copyright (c) 2012 - 2026 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.MobileTooltipStrategy = void 0;
var _size = require("../../../core/utils/size");
var _window = require("../../../core/utils/window");
var _ui = _interopRequireDefault(require("../../../ui/overlay/ui.overlay"));
var _tooltip_strategy_base = require("./tooltip_strategy_base");

function _interopRequireDefault(e) {
    return e && e.__esModule ? e : {
        default: e
    }
}
const CLASS = {
    slidePanel: "dx-scheduler-overlay-panel",
    scrollableContent: ".dx-scrollable-content"
};
const MAX_TABLET_OVERLAY_HEIGHT_FACTOR = .9;
const MAX_HEIGHT = {
    PHONE: 250,
    TABLET: "90%",
    DEFAULT: "auto"
};
const MAX_WIDTH = {
    PHONE: "100%",
    TABLET: "80%"
};
const animationConfig = {
    show: {
        type: "slide",
        duration: 300,
        from: {
            position: {
                my: "top",
                at: "bottom",
                of: (0, _window.getWindow)()
            }
        },
        to: {
            position: {
                my: "center",
                at: "center",
                of: (0, _window.getWindow)()
            }
        }
    },
    hide: {
        type: "slide",
        duration: 300,
        to: {
            position: {
                my: "top",
                at: "bottom",
                of: (0, _window.getWindow)()
            }
        },
        from: {
            position: {
                my: "center",
                at: "center",
                of: (0, _window.getWindow)()
            }
        }
    }
};
const createPhoneDeviceConfig = listHeight => ({
    shading: false,
    width: MAX_WIDTH.PHONE,
    height: listHeight > MAX_HEIGHT.PHONE ? MAX_HEIGHT.PHONE : MAX_HEIGHT.DEFAULT,
    position: {
        my: "bottom",
        at: "bottom",
        of: (0, _window.getWindow)()
    }
});
const createTabletDeviceConfig = listHeight => {
    const currentMaxHeight = .9 * (0, _size.getHeight)((0, _window.getWindow)());
    return {
        shading: true,
        width: MAX_WIDTH.TABLET,
        height: listHeight > currentMaxHeight ? MAX_HEIGHT.TABLET : MAX_HEIGHT.DEFAULT,
        position: {
            my: "center",
            at: "center",
            of: (0, _window.getWindow)()
        }
    }
};
class MobileTooltipStrategy extends _tooltip_strategy_base.TooltipStrategyBase {
    isDesktop() {
        return false
    }
    setTooltipConfig() {
        var _this$tooltip;
        const isTabletWidth = (0, _size.getWidth)((0, _window.getWindow)()) > 700;
        const listHeight = (0, _size.getOuterHeight)(this.list.$element().find(CLASS.scrollableContent));
        null === (_this$tooltip = this.tooltip) || void 0 === _this$tooltip || _this$tooltip.option(isTabletWidth ? createTabletDeviceConfig(listHeight) : createPhoneDeviceConfig(listHeight))
    }
    async onShowing() {
        var _this$tooltip2;
        null === (_this$tooltip2 = this.tooltip) || void 0 === _this$tooltip2 || _this$tooltip2.option("height", MAX_HEIGHT.DEFAULT);
        this.setTooltipConfig();
        await Promise.all([...this.asyncTemplatePromises]);
        this.setTooltipConfig()
    }
    createTooltip(dataList) {
        const element = this.createTooltipElement(CLASS.slidePanel);
        return this._options.createComponent(element, _ui.default, {
            target: (0, _window.getWindow)(),
            hideOnOutsideClick: true,
            animation: animationConfig,
            onShowing: () => this.onShowing(),
            onShown: this.onShown.bind(this),
            contentTemplate: this.getContentTemplate(dataList),
            wrapperAttr: {
                class: CLASS.slidePanel
            }
        })
    }
}
exports.MobileTooltipStrategy = MobileTooltipStrategy;