Source: widget/help/view2/GlobalHelpDialogControl.js

(function() {
    /**
     * @typedef {Help4.control2.bubble.Bubble.Params} Help4.widget.help.view2.GlobalHelpDialogControl.Params
     * @property {string} [caption = ''] - caption of bubble
     * @property {string} [content = ''] - content
     */

    /**
     * The bubble for tour playback.
     * @augments Help4.control2.bubble.Bubble
     * @property {string} caption - caption of bubble
     * @property {string} content - content
     */
    Help4.widget.help.view2.GlobalHelpDialogControl = class extends Help4.control2.bubble.Bubble {
        /**
         * @override
         * @param {Help4.widget.help.view2.GlobalHelpDialogControl.Params} [params]
         */
        constructor(params) {
            params ||= {};

            const {
                HEADER_LAYOUT,
                CONTENT_LAYOUT,
                FOOTER_LAYOUT
            } = Help4.control2.bubble;

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

                    headerLayout:   {init: HEADER_LAYOUT.CaptionTranslateClose},
                    contentLayout:  {init: CONTENT_LAYOUT.Html},
                    footerLayout:   {init: FOOTER_LAYOUT.Close},
                    resizableAlign: {init: true},
                    size:           {init: 'm'},
                    modal:          {init: true},

                    enableDragDrop: {init: true},
                    remoteMode:     {type: T.boolean}
                },
                config: {
                    css: 'bubble-global-help-dialog bubble-appear-info'
                }
            });
        }

        /**
         * @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;
                default:
                    super._applyPropertyToDom({name, value, oldValue});
                    break;
            }
        }

        /**
         * incompatible override!
         * @protected
         */
        _onCreateHeader() {
            const {MODE: {help: mode}} = Help4.control2.bubble.header.CaptionTranslateClose;
            super._onCreateHeader({showCaption: true, mode});
            this._header?.addListener('translate', event => void this._fireEvent(event));
        }

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

        /** @override */
        _onGetDragDropParams() {
            const {_header, remoteMode} = this;
            return {
                object: this.getDom(),
                area: _header.getDragDropElement(),
                remoteMode
            }
        }
    }
})();