(function() {
/**
* @typedef {Help4.control2.bubble.footer.BubbleFooter.Params} Help4.widget.learning.FeedbackBubbleFooterControl.Params
* @property {boolean} [disableSend = true] - flag to enable/disable send button
*/
/**
* Feedback bubble footer.
* @augments Help4.control2.bubble.footer.BubbleFooter
* @property {boolean} disableSend - flag to enable/disable send button
*/
Help4.widget.learning.FeedbackBubbleFooterControl = class extends Help4.control2.bubble.footer.BubbleFooter {
/**
* @override
* @param {Help4.control2.bubble.footer.BubbleFooter.Params} params
*/
constructor(params) {
const {TYPES: T} = Help4.jscore.ControlBase;
super(params, {
params: {
disableSend: {init: true, type: T.boolean}
},
statics: {
_send: {},
_close: {}
},
config: {
css: 'bubble-feedback-footer'
}
});
}
/**
* @override
* @param {HTMLElement} dom - control DOM
*/
_onDomCreated(dom) {
super._onDomCreated(dom);
const {Localization} = Help4;
const {Button, APPEARANCES} = Help4.control2.button;
const buttons = [{
id: 'send',
title: 'button.dialogsend',
css: 'primary',
disabled: this.disableSend
}, {
id: 'close',
title: 'button.dialogcancel',
css: 'tertiary'
}];
const {id} = this;
for (const button of buttons) {
const title = Localization.getText(button.title);
this[`_${button.id}`] = this._createControl(Button, {
id: `${id}-${button.id}`,
dom,
appearance: APPEARANCES.rect,
css: button.css,
text: title,
ariaLabel: title,
role: 'button',
disabled: !!button.disabled
})
.addListener('click', event => {
event.type = button.id;
this._fireEvent(event);
});
}
}
/**
* @override
* @param {Help4.jscore.ControlBase.PropertyChangeEvent} event - the change event
*/
_applyPropertyToDom({name, value, oldValue}) {
if (name === 'disableSend') {
this._send.disabled = value;
} else {
super._applyPropertyToDom({name, value, oldValue});
}
}
}
})();