(function() {
/**
* @typedef {Help4.control2.bubble.Bubble.Params} Help4.widget.tour.BubbleControl.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} [content = ''] - content
* @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 = 'action'] - bubble appearance
* @property {boolean} [remoteMode = false] - whether DA/WA mode is enabled
*/
/**
* The bubble for tour playback.
* @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} content - content
* @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 {boolean} remoteMode - whether DA/WA mode is enabled
* @property {boolean} _useDragBar
*/
Help4.widget.tour.BubbleControl = class extends Help4.control2.bubble.Bubble {
/**
* @override
* @param {Help4.widget.tour.BubbleControl.Params} [params]
*/
constructor(params) {
params ||= {};
let css = 'bubble-tour';
const {APPEARANCES} = Help4.widget.tour.BubbleControl;
const {showCaption, appearance= APPEARANCES.action} = params;
if (appearance) css += ` bubble-appear-${appearance}`;
if (showCaption === false) css += ' notitlebar';
const {
HEADER_LAYOUT,
CONTENT_LAYOUT
} = Help4.control2.bubble;
const T = Help4.jscore.ControlBase.TYPES;
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.*!
content: {type: T.string},
// footer; keep in sync with bubble.footer.*!
showPrevButton: {type: T.boolean, init: true},
showNextButton: {type: T.boolean, init: true},
showFinishButton: {type: T.boolean},
appearance: {type: T.string, init: APPEARANCES.action, readonly: true},
headerLayout: {init: HEADER_LAYOUT.CaptionTranslateClose},
contentLayout: {init: CONTENT_LAYOUT.Html},
footerLayout: {init: 'Help4.widget.tour.BubbleFooterControl'},
resizableAlign: {init: true},
enableDragDrop: {init: true},
remoteMode: {type: T.boolean}
},
statics: {
_useDragBar: {init: false, destroy: false}
},
config: {
css
}
});
}
/**
* @memberof Help4.widget.tour.BubbleControl
* @enum {string}
* @property {'action'} action
* @property {'start'} start
* @property {'end'} end
* @property {'info'} info
* @property {'important'} important
*/
static APPEARANCES = {
action: 'action',
start: 'start',
end: 'end',
info: 'info',
important: 'important'
}
/** focus button in footer */
focusButton() {
this._footer?.focusButton();
}
/**
* @override
* @param {Help4.widget.tour.BubbleControl.Params} params
*/
_onAfterInit(params) {
super._onAfterInit(params);
const {APPEARANCES} = Help4.widget.tour.BubbleControl;
const {showCaption, appearance} = this;
this._useDragBar = !showCaption || appearance === APPEARANCES.start || appearance === APPEARANCES.end;
}
/**
* @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 'content':
const {_content} = this;
if (_content) {
_content.content = value;
this.resetAlignmentCache();
}
break;
case 'showPrevButton':
case 'showNextButton':
case 'showFinishButton':
const {_footer} = this;
if (_footer) {
_footer[name] = value;
this.resetAlignmentCache();
}
break;
default:
super._applyPropertyToDom({name, value, oldValue});
break;
}
}
/**
* incompatible override!
* @protected
*/
_onCreateHeader() {
const {showCaption, showClose, _useDragBar: showDragBar} = this;
const {MODE} = Help4.control2.bubble.header.CaptionTranslateClose;
super._onCreateHeader({showCaption, showClose, showDragBar, mode: MODE.tour});
this._header?.addListener(['translate', 'close'], event => void this._fireEvent(event));
}
/**
* incompatible override!
* @protected
*/
_onCreateFooter() {
const {showPrevButton, showNextButton, showFinishButton, appearance} = this;
super._onCreateFooter({showPrevButton, showNextButton, showFinishButton, appearance});
this._footer?.addListener(['prev', 'next', 'close'], event => void this._fireEvent(event));
}
/** @override */
_onGetDragDropParams() {
const {_header, remoteMode} = this;
return {
object: this.getDom(),
area: _header.getDragDropElement(),
remoteMode
}
}
}
})();