2019-07-05 03:19:24 +08:00
|
|
|
import { KeyState } from 'Common/Enums';
|
|
|
|
import { i18n } from 'Common/Translator';
|
2016-08-17 06:01:20 +08:00
|
|
|
|
2019-07-05 03:19:24 +08:00
|
|
|
import { popup } from 'Knoin/Knoin';
|
|
|
|
import { AbstractViewNext } from 'Knoin/AbstractViewNext';
|
2016-08-17 06:01:20 +08:00
|
|
|
|
2016-09-10 06:38:16 +08:00
|
|
|
@popup({
|
2016-08-17 06:01:20 +08:00
|
|
|
name: 'View/Popup/Ask',
|
|
|
|
templateID: 'PopupsAsk'
|
|
|
|
})
|
2019-07-05 03:19:24 +08:00
|
|
|
class AskPopupView extends AbstractViewNext {
|
2016-08-17 06:01:20 +08:00
|
|
|
constructor() {
|
|
|
|
super();
|
2014-08-25 15:10:51 +08:00
|
|
|
|
2020-10-26 19:54:03 +08:00
|
|
|
this.addObservables({
|
|
|
|
askDesc: '',
|
|
|
|
yesButton: '',
|
|
|
|
noButton: ''
|
|
|
|
});
|
2014-08-21 23:08:34 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
this.fYesAction = null;
|
|
|
|
this.fNoAction = null;
|
2013-12-14 07:27:12 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
this.bFocusYesOnShow = true;
|
|
|
|
this.bDisabeCloseOnEsc = true;
|
|
|
|
this.sDefaultKeyScope = KeyState.PopupAsk;
|
|
|
|
}
|
2013-12-14 07:27:12 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
clearPopup() {
|
|
|
|
this.askDesc('');
|
|
|
|
this.yesButton(i18n('POPUPS_ASK/BUTTON_YES'));
|
|
|
|
this.noButton(i18n('POPUPS_ASK/BUTTON_NO'));
|
2013-12-14 07:27:12 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
this.fYesAction = null;
|
|
|
|
this.fNoAction = null;
|
|
|
|
}
|
2013-12-14 07:27:12 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
yesClick() {
|
|
|
|
this.cancelCommand();
|
2014-04-08 05:03:58 +08:00
|
|
|
|
2020-07-30 03:49:41 +08:00
|
|
|
if (typeof this.fYesAction === 'function') {
|
2016-08-17 06:01:20 +08:00
|
|
|
this.fYesAction.call(null);
|
|
|
|
}
|
2016-06-30 08:02:45 +08:00
|
|
|
}
|
2013-12-14 07:27:12 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
noClick() {
|
|
|
|
this.cancelCommand();
|
2014-04-08 05:03:58 +08:00
|
|
|
|
2020-07-30 03:49:41 +08:00
|
|
|
if (typeof this.fNoAction === 'function') {
|
2016-08-17 06:01:20 +08:00
|
|
|
this.fNoAction.call(null);
|
|
|
|
}
|
2016-06-30 08:02:45 +08:00
|
|
|
}
|
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
/**
|
|
|
|
* @param {string} sAskDesc
|
|
|
|
* @param {Function=} fYesFunc
|
|
|
|
* @param {Function=} fNoFunc
|
|
|
|
* @param {string=} sYesButton
|
|
|
|
* @param {string=} sNoButton
|
|
|
|
* @param {boolean=} bFocusYesOnShow = true
|
|
|
|
* @returns {void}
|
|
|
|
*/
|
|
|
|
onShow(askDesc, fYesFunc = null, fNoFunc = null, yesButton = '', noButton = '', isFocusYesOnShow = true) {
|
|
|
|
this.clearPopup();
|
2013-12-14 07:27:12 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
this.fYesAction = fYesFunc || null;
|
|
|
|
this.fNoAction = fNoFunc || null;
|
2013-12-14 07:27:12 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
this.askDesc(askDesc || '');
|
2013-12-14 07:27:12 +08:00
|
|
|
|
2019-07-05 03:19:24 +08:00
|
|
|
if (yesButton) {
|
2016-08-17 06:01:20 +08:00
|
|
|
this.yesButton(yesButton);
|
|
|
|
}
|
2014-08-21 23:08:34 +08:00
|
|
|
|
2019-07-05 03:19:24 +08:00
|
|
|
if (noButton) {
|
2016-08-17 06:01:20 +08:00
|
|
|
this.noButton(noButton);
|
2014-04-08 05:03:58 +08:00
|
|
|
}
|
2016-08-17 06:01:20 +08:00
|
|
|
|
|
|
|
this.bFocusYesOnShow = !!isFocusYesOnShow;
|
|
|
|
}
|
|
|
|
|
|
|
|
onShowWithDelay() {
|
2019-07-05 03:19:24 +08:00
|
|
|
if (this.bFocusYesOnShow) {
|
2020-08-22 07:03:03 +08:00
|
|
|
this.querySelector('.buttonYes').focus();
|
2014-12-28 03:48:55 +08:00
|
|
|
}
|
2016-08-17 06:01:20 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
onBuild() {
|
2020-09-26 06:02:29 +08:00
|
|
|
// shortcuts.add('tab', 'shift', KeyState.PopupAsk, () => {
|
2020-09-26 16:20:24 +08:00
|
|
|
shortcuts.add('tab,arrowright,arrowleft', '', KeyState.PopupAsk, () => {
|
2020-08-22 07:03:03 +08:00
|
|
|
let btn = this.querySelector('.buttonYes');
|
|
|
|
if (btn.matches(':focus')) {
|
|
|
|
btn = this.querySelector('.buttonNo');
|
2016-08-17 06:01:20 +08:00
|
|
|
}
|
2020-08-22 07:03:03 +08:00
|
|
|
btn.focus();
|
2016-08-17 06:01:20 +08:00
|
|
|
return false;
|
|
|
|
});
|
|
|
|
|
2020-09-26 06:02:29 +08:00
|
|
|
shortcuts.add('escape', '', KeyState.PopupAsk, () => {
|
2016-08-17 06:01:20 +08:00
|
|
|
this.noClick();
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
2016-06-30 08:02:45 +08:00
|
|
|
|
2019-07-05 03:19:24 +08:00
|
|
|
export { AskPopupView, AskPopupView as default };
|