Source: widget/tour/BubbleFooterControl.js

(function() {
    /**
     * @typedef {Help4.control2.bubble.footer.BubbleFooter.Params} Help4.widget.tour.BubbleFooterControl.Params
     * @property {boolean} [showPrevButton = true] - whether to show the prev button
     * @property {boolean} [showNextButton = true] - whether to show the next button
     * @property {boolean} [showFinishButton = false] - whether to show the finish button
     * @property {Help4.widget.tour.BubbleControl.APPEARANCES} [appearance = ''] - bubble appearance
     */

    /**
     * Footer class for tour bubbles.
     * @augments Help4.control2.bubble.footer.BubbleFooter
     * @property {boolean} showPrevButton - whether to show the prev button
     * @property {boolean} showNextButton - whether to show the next button
     * @property {boolean} showFinishButton - whether to show the finish button
     * @property {Help4.widget.tour.BubbleControl.APPEARANCES} appearance - bubble appearance
     * @property {?Help4.control2.button.Button} _prev
     * @property {?Help4.control2.button.Button} _next
     * @property {?Help4.control2.button.Button} _finish
     */
    Help4.widget.tour.BubbleFooterControl = class extends Help4.control2.bubble.footer.BubbleFooter {
        /**
         * @override
         * @param {Help4.widget.tour.BubbleFooterControl.Params} [params]
         */
        constructor(params) {
            const T = Help4.jscore.ControlBase.TYPES;
            super(params, {
                params: {
                    showPrevButton:   {type: T.boolean, init: true},
                    showNextButton:   {type: T.boolean, init: true},
                    showFinishButton: {type: T.boolean},
                    appearance:       {type: T.string, readonly: true}
                },
                statics: {
                    _prev:   {},
                    _next:   {},
                    _finish: {}
                }
            });
        }

        /** focus a button */
        focusButton() {
            const {_prev, _next, _finish} = this;
            _next.visible
                ? _next.focus()
                : _finish.visible
                    ? _finish.focus()
                    : _prev.visible && _prev.focus();
        }

        /**
         * @override
         * @param {HTMLElement} dom - control DOM
         */
        _onDomCreated(dom) {
            super._onDomCreated(dom);

            const {id, language} = this;
            const document = this.getDocument();
            const {
                Localization,
                control2: {ICONS, button: {Button, APPEARANCES, TEXT_POSITIONS}}
            } = Help4;

            const isStart = this.appearance === Help4.widget.tour.BubbleControl.APPEARANCES.start;
            const map = [{
                buttonId: 'prev',
                icon: ICONS.prev,
                appearance: APPEARANCES.bubble,
                text: Localization.getText('button.tourprev'),
                title: Localization.getText('tooltip.tourprev'),
                visible: this.showPrevButton
            }, {
                buttonId: 'next',
                icon: ICONS.next,
                appearance: isStart ? APPEARANCES.exposed : APPEARANCES.bubble,
                textPosition: TEXT_POSITIONS.start,
                text: Localization.getText(isStart ? 'button.tourstartnow' : 'button.tournext'),
                title: Localization.getText(isStart ? 'tooltip.tourstartnow' : 'tooltip.tournext'),
                css: isStart ? 'start' : 'next',
                visible: this.showNextButton
            }, {
                buttonId: 'finish',
                appearance: APPEARANCES.exposed,
                text: Localization.getText('button.tourfinish'),
                title: Localization.getText('tooltip.tourfinish'),
                visible: this.showFinishButton,
                type: 'close'
            }];
            for (const {buttonId, icon, appearance, textPosition, text, title, css, visible, type} of map) {
                this[`_${buttonId}`] = this._createControl(Button, {
                    id: `${id}-${buttonId}`,
                    dom,
                    document,
                    icon,
                    appearance,
                    textPosition,
                    text,
                    title,
                    ariaLabel: title,
                    css: css || buttonId,
                    visible,
                    contentLanguage: language
                }).addListener('click', event => {
                    event.type = type || buttonId;
                    this._fireEvent(event);
                });
            }
        }

        /**
         * @override
         * @param {Help4.jscore.ControlBase.PropertyChangeEvent} event - the change event
         */
        _applyPropertyToDom({name, value, oldValue}) {
            switch (name) {
                case 'showPrevButton':
                case 'showNextButton':
                case 'showFinishButton':
                    const button = {
                        showPrevButton: this._prev,
                        showNextButton: this._next,
                        showFinishButton: this._finish
                    }[name];
                    if (button) button.visible = value;
                    break;

                default:
                    super._applyPropertyToDom({name, value, oldValue});
                    break;
            }
        }
    }
})();