(function() {
/**
* @typedef {Help4.control2.bubble.header.BubbleHeader.Params} Help4.control2.bubble.header.CaptionTranslateClose.Params
* @property {string} [caption = ''] - caption
* @property {boolean} [showCaption = false] - whether to show caption
* @property {boolean} [showClose = false] - whether to show close button
* @property {boolean} [showDragBar = false] - whether to show a bar for drag and drop
* @property {boolean} [showTranslation = false] - whether to show translation button
* @property {boolean} [activeTranslation = false] - whether translation button is active
* @property {string} [mode = 'help'] - mode of usage, e.g. help or tour
*/
const TRANSLATE_CSS = 'translate';
const CLOSE_CSS = 'close';
/**
* Bubble header that shows Caption, Translate button and Close button.
* @augments Help4.control2.bubble.header.BubbleHeader
* @property {string} caption - caption
* @property {boolean} showCaption - whether to show caption
* @property {boolean} showClose - whether to show close button
* @property {boolean} showDragBar - whether to show a bar for drag and drop
* @property {boolean} showTranslation - whether to show translation button
* @property {boolean} activeTranslation - whether translation button is active
* @property {string} mode - mode of usage, e.g. help or tour
*/
Help4.control2.bubble.header.CaptionTranslateClose = class extends Help4.control2.bubble.header.BubbleHeader {
/**
* @override
* @param {Help4.control2.bubble.header.CaptionTranslateClose.Params} [params]
*/
constructor(params) {
const {MODE} = Help4.control2.bubble.header.CaptionTranslateClose;
const {
TYPES: T,
TEXT_TYPES: TT
} = Help4.jscore.ControlBase;
super(params, {
params: {
// all defaults are handled by bubble; do not handle here!
// keep in sync with bubble!
caption: {type: T.string},
showCaption: {type: T.boolean, readonly: true},
showClose: {type: T.boolean, readonly: true},
showDragBar: {type: T.boolean, readonly: true},
showTranslation: {type: T.boolean},
activeTranslation: {type: T.boolean},
mode: {type: T.string, init: MODE.help, readonly: true}
},
statics: {
_caption: {destroy: false},
_translate: {},
_close: {},
_dragBar: {destroy: false}
},
config: {
css: 'control-bubble-header-caption-translate-close'
},
texts: {
caption: TT.innerText
}
});
}
/**
* @memberof Help4.control2.bubble.header.CaptionTranslateClose
* @enum {string}
* @property {'help'} help
* @property {'tour'} tour
*/
static MODE = {
help: 'help',
tour: 'tour'
}
/**
* provides access to element for drag and drop
* @returns {HTMLElement}
*/
getDragDropElement() {
return this._dragBar || this._caption;
}
/**
* @override
* @param {HTMLElement} dom - control DOM
*/
_onDomCreated(dom) {
super._onDomCreated(dom);
const {id, activeTranslation, showTranslation, showClose, __bubble, showDragBar, language} = this;
const bubbleDom = __bubble.getDom();
const caption = this._caption = this._createElement('h2', {id: '-caption', css: 'caption'});
Help4.Element.setAttribute(bubbleDom, {ariaLabelledby: caption.id});
const {
bubble: {header: {CaptionTranslateClose: {MODE}}},
button: {Button, APPEARANCES},
ICONS
} = Help4.control2;
const title = Help4.Localization.getText('tooltip.translate');
showTranslation && this.addCss(TRANSLATE_CSS);
this._translate = this._createControl(Button, {
id: `${id}-tr`,
dom,
icon: ICONS.flag,
appearance: APPEARANCES.icon,
css: TRANSLATE_CSS,
title,
ariaLabel: title,
active: activeTranslation,
visible: showTranslation,
contentLanguage: language // use language for button which is the system language
})
.addListener('click', event => {
event.type = 'translate';
this._fireEvent(event);
});
if (showClose) {
const {mode} = this;
const title = Help4.Localization.getText(mode === MODE.help ? 'tooltip.closehelp' : 'tooltip.tourclose');
this.addCss(CLOSE_CSS);
this._close = this._createControl(Button, {
id: `${id}-cl`,
dom,
icon: ICONS.close,
appearance: APPEARANCES.icon,
css: CLOSE_CSS,
title,
ariaLabel: title,
contentLanguage: language // use language for button which is the system language
})
.addListener('click', event => {
event.type = 'close';
this._fireEvent(event);
});
}
if (showDragBar) this._dragBar = this._createElement('div', {id: '-drag', css: 'dragbar', dom});
}
/**
* @override
* @param {Help4.jscore.ControlBase.PropertyChangeEvent} event - the change event
*/
_applyPropertyToDom({name, value, oldValue}) {
const {_translate} = this;
switch (name) {
case 'caption':
if (this.showCaption) {
const {_caption} = this;
Help4.Element.setText(_caption, value);
this._applyTextAttribute(_caption, 'caption', !!value);
}
break;
case 'activeTranslation':
_translate && (_translate.active = value);
break;
case 'showTranslation':
_translate && (_translate.visible = value);
value
? this.addCss(TRANSLATE_CSS)
: this.removeCss(TRANSLATE_CSS);
break;
default:
super._applyPropertyToDom({name, value, oldValue});
break;
}
}
}
})();