Source: control2/bubble/LanguageSelection.js

(function() {
    /**
     * @typedef {Help4.control2.bubble.Bubble.Params} Help4.control2.bubble.LanguageSelection.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[]} [languages = []] - list of languages
     * @property {string} [value] - selected language
     */

    /**
     * The bubble for language selection.
     * @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[]} languages - list of languages
     * @property {string} value - selected language
     */
    Help4.control2.bubble.LanguageSelection = class extends Help4.control2.bubble.Bubble {
        /**
         * @override
         * @param {Help4.control2.bubble.LanguageSelection.Params} [params]
         */
        constructor(params) {
            params ||= {};
            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.*!
                    languages:      {type: T.array},
                    value:          {type: T.string_null, init: null},

                    headerLayout:   {init: HEADER_LAYOUT.CaptionTranslateClose},
                    contentLayout:  {init: CONTENT_LAYOUT.Selection},
                    footerLayout:   {init: FOOTER_LAYOUT.Apply},
                    enableDragDrop: {init: true},
                    modal:          {init: true},
                    resizableAlign: {init: true},
                    size:           {init: 's'}
                },
                config: {
                    css: 'bubble-language-selection'
                }
            });
        }

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

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

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

        /**
         * incompatible override!
         * @protected
         */
        _onCreateContent() {
            const {Localization} = Help4;
            const {languages: data, value} = this;
            const message = Localization.getText('label.translationdialogmessage');

            super._onCreateContent({message, data, value});

            const {_content} = this;
            if (_content) {
                _content.addListener('selectionchange', ({value}) => {
                    this.value = value;

                    const {_footer} = this;
                    if (_footer) _footer.disableApply = !value;
                });

                _content.focus();
            }
        }

        /**
         * incompatible override!
         * @protected
         */
        _onCreateFooter() {
            super._onCreateFooter();

            const {_footer} = this;

            if (_footer) {
                _footer
                .addListener('apply', () => this._fireEvent({type: 'apply', value: this.value}))
                .addListener('close', event => this._fireEvent(event));

                _footer.disableApply = !this.value;
            }
        }
    }
})();