(function() {
/**
* @typedef {Help4.control2.bubble.header.BubbleHeader.Params} Help4.control2.bubble.header.Panel.Params
* @property {?string} [logoSrc = null] - URL to possible logo
* @property {boolean} [showBackButton = false] - whether to show back button
* @property {boolean} [showDockButton = false] - whether to show dock button
* @property {boolean} [showMinimizeButton = false] - whether to show minimize button
* @property {boolean} [showCloseButton = false] - whether to show close button
* @property {boolean} [docked = false] - whether panel is docked
* @property {boolean} [minimized = false] - whether panel is minimized
* @property {boolean} [showTranslationButton = false] - whether to show the translation button
* @property {boolean} [translation = false] - whether translation is enabled
* @property {boolean} [animateTranslationButton = false] - whether to animate the translation button
*/
/**
* Bubble header for SAP Companion 4 panel bubble.
* @augments Help4.control2.bubble.header.BubbleHeader
* @property {string|null} logoSrc - URL to possible logo
* @property {boolean} showBackButton - whether to show back button
* @property {boolean} showDockButton - whether to show dock button
* @property {boolean} showMinimizeButton - whether to show minimize button
* @property {boolean} showCloseButton - whether to show close button
* @property {boolean} docked - whether panel is docked
* @property {boolean} minimized - whether panel is minimized
* @property {boolean} showTranslationButton - whether to show the translation button
* @property {boolean} translation - whether translation is enabled
* @property {boolean} animateTranslationButton - whether to animate the translation button
*/
Help4.control2.bubble.header.Panel = class extends Help4.control2.bubble.header.BubbleHeader {
/**
* @override
* @param {Help4.control2.bubble.header.Panel.Params} [params]
*/
constructor(params) {
const {
TYPES: T,
TEXT_TYPES: TT
} = Help4.jscore.ControlBase;
super(params, {
params: {
// all defaults are handled by bubble.Panel; do not handle here!
// keep in sync with bubble.Panel!
logoSrc: {type: T.string_null},
showBackButton: {type: T.boolean},
showDockButton: {type: T.boolean},
showMinimizeButton: {type: T.boolean},
showCloseButton: {type: T.boolean},
docked: {type: T.boolean},
minimized: {type: T.boolean},
showTranslationButton: {type: T.boolean},
translation: {type: T.boolean},
animateTranslationButton: {type: T.boolean}
},
statics: {
_logo: {destroy: false},
_back: {},
_dock: {},
_minimize: {},
_close: {}
},
config: {
css: 'control-bubble-header-panel'
},
texts: {
logo: TT.alt,
header: TT.innerText
}
});
}
/**
* @override
* @param {HTMLElement} dom - control DOM
*/
_onDomCreated(dom) {
super._onDomCreated(dom);
const {Element, Localization} = Help4;
const document = this.getDocument();
const {logoSrc} = this;
const logoCss = !!logoSrc ? 'logo' : 'logo hidden';
this._logo = Element.create('img', {
dom,
document,
css: logoCss,
src: logoSrc || '',
alt: Localization.getText('description.panel.logo'),
role: 'presentation'
});
const {ICONS} = Help4.control2;
const buttons = [{
id: 'translate',
title: 'tooltip.translate',
icon: ICONS.flag,
visible: this.showTranslationButton,
active: this.translation,
toggle: true
}, {
id: 'back',
title: 'tooltip.carouselback',
icon: ICONS.prev,
visible: this.showBackButton
}, {
id: 'dock',
title: 'tooltip.carouseldock',
icon: ICONS.panelTop,
active: this.docked,
toggle: true,
visible: this.showDockButton
}, {
id: 'minimize',
title: 'tooltip.carouselhide',
icon: ICONS.minus,
active: this.minimized,
visible: this.showMinimizeButton
}, {
id: 'close',
title: 'tooltip.helpclose',
icon: ICONS.close,
active: false,
visible: this.showCloseButton
}];
// encapsulate as IE is unable to deal with closures properly
const {id} = this;
const {APPEARANCES, Button} = Help4.control2.button;
const appearance = APPEARANCES.icon;
for (const button of buttons) {
const title = Localization.getText(button.title);
this['_' + button.id] = this._createControl(Button, {
id: id + '-' + button.id,
dom,
icon: button.icon,
appearance,
css: `${button.id} panel compact`,
title,
ariaLabel: title,
active: button.active,
toggle: button.toggle,
visible: button.visible
}).addListener('click', event => {
event.type = button.id;
this._fireEvent(event);
});
}
const h2 = Element.create('h2', {dom, document, css: 'title', text: Localization.getText('header.panel.title')});
this._applyTextAttribute(h2, 'header', true);
// XRAY-5984: Assit-Unite POC
// In case these lines are dropped also remove
// plugin-joule and plugin-bis rules from Panel.less
// this._createControl(Button, {
// id: id + '-joule',
// dom,
// text: 'Joule',
// css: 'rect tertiary plugin-joule compact'
// })
// .addListener('click', event => {
// console.log('CMP: Closing CMP - "Help4.API.close();"');
// Help4.API.close();
//
// console.log('CMP: Opening Joule - "window.sap?.das?.webclient?.show?.();"');
// window.sap?.das?.webclient?.show?.();
// });
//
// this._createControl(Button, {
// id: id + '-bis',
// dom,
// text: 'BiS',
// css: 'rect tertiary plugin-bis compact'
// })
// .addListener('click', event => {
// console.log('CMP: Closing CMP - "Help4.API.close();"');
// Help4.API.close();
//
// console.log('CMP: Opening BiS - "postMessage to sap.companion.services.OpenBiS"');
// postMessage({
// service: 'sap.companion.services.OpenBiS',
// type: 'request',
// body: {}
// });
// });
}
/**
* @override
* @param {Help4.jscore.ControlBase.PropertyChangeEvent} event - the change event
*/
_applyPropertyToDom({name, value, oldValue}) {
switch (name) {
case 'logoSrc':
const {_logo} = this;
_logo.src = value || '';
this._applyTextAttribute(_logo, 'logo', !!value);
value
? Help4.Element.removeClass(_logo, 'hidden')
: Help4.Element.addClass(_logo, 'hidden');
break;
case 'showBackButton':
this._back.visible = value;
break;
case 'showDockButton':
this._dock.visible = value;
break;
case 'showMinimizeButton':
this._minimize.visible = value;
break;
case 'showCloseButton':
this._close.visible = value;
break;
case 'showTranslationButton':
this._translate.visible = value;
break;
case 'translation':
this._translate.active = value;
break;
case 'animateTranslationButton':
this._translate.animated = value;
break;
case 'docked':
this._dock.active = value;
break;
case 'minimized':
this._minimize.active = value;
break;
default:
super._applyPropertyToDom({name, value, oldValue});
break;
}
}
}
})();