Source: control2/bubble/Help.js

(function() {
    /**
     * @typedef {Help4.control2.bubble.Bubble.Params} Help4.control2.bubble.Help.Params
     * @property {string} [caption = ''] - caption of bubble
     * @property {boolean} [showCaption = true] - whether to show the caption
     * @property {boolean} [showClose = true] - whether to show the close button
     * @property {string} [content = ''] - content
     * @property {string} [checkboxText = ''] - text for possible checkbox
     */

    /**
     * The bubble for static help playback.
     * @augments Help4.control2.bubble.Bubble
     * @property {string} caption - caption of bubble
     * @property {boolean} showCaption - whether to show the caption
     * @property {boolean} showClose - whether to show the close button
     * @property {string} content - content
     * @property {string} checkboxText - text for possible checkbox
     */
    Help4.control2.bubble.Help = class extends Help4.control2.bubble.Bubble {
        /**
         * @override
         * @param {Help4.control2.bubble.Help.Params} [params]
         */
        constructor(params) {
            params ||= {};

            const css = params.showCaption !== false ? '' : 'notitlebar';
            const {
                HEADER_LAYOUT,
                CONTENT_LAYOUT,
                FOOTER_LAYOUT
            } = Help4.control2.bubble;

            const {TYPES: T} = Help4.jscore.ControlBase;
            super(params, {
                params: {
                    // header; keep in sync with bubble.header.*!
                    caption:        {type: T.string},
                    showCaption:    {type: T.boolean, init: true, readonly: true},
                    showClose:      {type: T.boolean, init: true, readonly: true},
                    // content; keep in sync with bubble.content.*!
                    content:        {type: T.string},
                    // footer; keep in sync with bubble.footer.*!
                    checkboxText:   {type: T.string},

                    headerLayout:   {init: HEADER_LAYOUT.CaptionTranslateClose},
                    contentLayout:  {init: CONTENT_LAYOUT.Html},
                    footerLayout:   {init: FOOTER_LAYOUT.Checkbox},
                    resizableAlign: {init: true}
                },
                config: {
                    css: css + ' bubble-help'
                }
            });
        }

        /**
         * @override
         * @param {Help4.jscore.ControlBase.PropertyChangeEvent} event - the change event
         */
        _applyPropertyToDom({name, value, oldValue}) {
            switch (name) {
                case 'caption':
                    const {_header} = this;
                    if (_header) {
                        _header.caption = value;
                        this.resetAlignmentCache();
                    }
                    break;
                case 'content':
                    const {_content} = this;
                    if (_content) {
                        _content.content = value;
                        this.resetAlignmentCache();
                    }
                    break;
                case 'checkboxText':
                    const {_footer} = this;
                    if (_footer) {
                        _footer.visible = !!value;
                        _footer.text = value;
                        this.resetAlignmentCache();
                    }
                    break;
                default:
                    super._applyPropertyToDom({name, value, oldValue});
                    break;
            }
        }

        /**
         * incompatible override!
         * @protected
         */
        _onCreateHeader() {
            const {showCaption, showClose} = this;
            super._onCreateHeader({showCaption, showClose});
            this._header?.addListener(['translate', 'close'], event => void this._fireEvent(event));
        }

        /**
         * incompatible override!
         * @protected
         */
        _onCreateFooter() {
            super._onCreateFooter();
            this._footer?.addListener('checkbox', event => void this._fireEvent(event));
        }
    }
})();