Source: control2/bubble/footer/Panel.js

(function() {
    /**
     * @typedef {Help4.control2.bubble.footer.BubbleFooter.Params} Help4.control2.bubble.footer.Panel.Params
     * @property {boolean} [showEditButton = false] - whether to show the edit button
     * @property {boolean} [showPublishViewButton = false] - whether to show the publish view button
     * @property {boolean} [showWmButton = false] - whether to show the world map button
     * @property {boolean} [publishView = false] - whether publish view is enabled
     * @property {?string} [publishedState = null] - published state of the widget content
     */

    /**
     * Footer control for SAP Companion 4 panel.
     * @augments Help4.control2.bubble.footer.BubbleFooter
     * @property {boolean} showEditButton - whether to show the edit button
     * @property {boolean} showPublishViewButton - whether to show the publish view button
     * @property {boolean} showWmButton - whether to show the WalkMe button
     * @property {boolean} publishView - whether publish view is enabled
     * @property {?string} publishedState - published state of the widget content
     */
    Help4.control2.bubble.footer.Panel = class extends Help4.control2.bubble.footer.BubbleFooter {
        /**
         * @override
         * @param {Help4.control2.bubble.footer.Panel.Params} [params]
         */
        constructor(params) {
            const {TYPES: T} = Help4.jscore.ControlBase;

            super(params, {
                // all defaults are handled by bubble.Panel; do not handle here!
                // keep in sync with bubble.Panel!
                params: {
                    showEditButton:        {type: T.boolean},
                    showPublishViewButton: {type: T.boolean},
                    showWmButton:          {type: T.boolean},
                    publishView:           {type: T.boolean},
                    publishedState:        {type: T.string_null}
                },
                statics: {
                    _edit:        {},
                    _publishView: {},
                    _wm:          {},
                    _translation: {}
                },
                config: {
                    css: 'control-bubble-footer-panel'
                }
            });
        }

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

            const {
                Localization,
                control2: {
                    ICONS,
                    button: {APPEARANCES, Button}
                }
            } = Help4;

            const buttons = [{
                id: 'wm',
                text: 'text.wm.button',
                icon: ICONS.nosort,
                visible: this.showWmButton,
                appearance: APPEARANCES.bubble,
            }, {
                id: 'publishView',
                title: 'tooltip.publishedview',
                icon: ICONS.world,
                visible: this.showPublishViewButton,
                role: 'status',
                active: this.publishView,
                toggle: true
            }, {
                id: 'edit',
                title: 'tooltip.editmode',
                icon: ICONS.edit,
                visible: this.showEditButton
            }];

            // encapsulate as IE is unable to deal with closures properly
            const {id} = this;

            for (const button of buttons) {
                const title = button.title ? Localization.getText(button.title) : null;
                const text = button.text ? Localization.getText(button.text) : null;
                this['_' + button.id] = this._createControl(Button, {
                    id: `${id}-${button.id}`,
                    dom,
                    icon: button.icon,
                    appearance: button.appearance || APPEARANCES.icon,
                    css: `${button.id} panel compact`,
                    title,
                    text,
                    ariaLabel: title,
                    role: button.role,
                    active: button.active,
                    toggle: button.toggle,
                    visible: button.visible
                }).addListener('click', (event) => {
                    event.type = button.id;
                    this._fireEvent(event);
                });
            }
        }

        /**
         * @override
         * @param {Help4.jscore.ControlBase.PropertyChangeEvent} event - the change event
         */
        _applyPropertyToDom({name, value, oldValue}) {
            switch (name) {
                case 'showEditButton':
                    this._edit.visible = value;
                    break;
                case 'showPublishViewButton':
                    this._publishView.visible = value;
                    break;
                case 'showWmButton':
                    this._wm.visible = value;
                    break;
                case 'publishView':
                    this._publishView.active = value;
                    break;
                case 'publishedState':
                    this._publishView.setAttribute('data-state', value || undefined);
                    break;
                default:
                    super._applyPropertyToDom({name, value, oldValue});
                    break;
            }
        }
    }
})();