• 1000 1005 * Если ключевое слово return используется в теле функции, значение возвращается (или отправляется) обратно туда, где вызывается функция. Если ключевое слово return используется в обработчике событий, возвращается значение ( или отправлено) в браузер.
У меня есть следующий код js, который предназначен для настраиваемого модального окна подтверждения, которое должно возвращать true / false. Я хочу, чтобы он закончился mimi c в собственном окне подтверждения браузера.
В приведенном ниже коде js есть оператор switch, который содержит обработчик событий. Обработчик событий должен запустить функцию и вернуть true, но опять же я не знаю, куда он возвращается и как его найти. Есть ли в dev-tools инструмент для просмотра этого значения?
const dialog = {
open (options) {
options = Object.assign({}, {
title: '',
message: '',
type: 'I',
buttonGroup: 'okonly',
okText: 'OK',
cancelText: 'Cancel',
yesText: 'Yes',
npText: 'No',
onok: function () {return true;},
oncancel: function () {return false;},
onyes: function () {return true;},
onno: function () {return false;}
}, options);
const html = `
<div id="dds-dialogoverlay" class="dds-dialogoverlay">
<div id="dds-dialogbox" class="dds-dialogbox">
<div class="dds-dialogbox__head">
<span>Deployable Disbursing System (DDS) - ${options.title}</span>
<button id="dds-dialogbox__close" class="dds-dialogbox__close">×</button>
</div>
<div class="dds-dialogbox__body">
<div id="dds-dialogbox__body-left" class="dds-dialogbox__body-left"></div>
<div id="dds-dialogbox__body-right" class="dds-dialogbox__body-right">${options.message}</div>
</div>
<div id="dds-dialogbox__footer" class="dds-dialogbox__footer">
<div id="btn-groups">
<div id="okonly-btn-group" class="btn-group">
<button id="okonly_ok-btn" class="t-button" type="button" value="ok">${options.okText}</button>
</div>
<div id="okcancel-btn-group" class="btn-group">
<button id="okcancel_ok-btn" class="t-button" type="button" value="ok">${options.okText}</button>
<button id="okcancel_cancel-btn" class="t-button" type="button" value="cancel">${options.cancelText}</button>
</div>
<div id="yesno-btn-group" class="btn-group">
<button id="yesno_yes-btn" class="t-button" type="button" value="yes"${options.yesText}</button>
<button id="yesno_no-btn" class="t-button" type="button" value="no">${options.noText}</button>
</div>
<div id="yesnocancel-btn-group" class="btn-group">
<button id="yesnocancel_yes-btn" class="t-button" type="button" value="yes"${options.yesText}</button>
<button id="yesnocancel_no-btn" class="t-button" type="button" value="no">${options.noText}</button>
<button id="yesnocancel_cancel-btn" class="t-button" type="button" value="cancel">${options.cancelText}</button>
</div>
</div>
</div>
</div>
</div>`;
const template = document.createElement('template');
template.innerHTML = html;
// Elements
const dialogOverlay = template.content.querySelector('#dds-dialogoverlay')
const dialogbox = template.content.querySelector('#dds-dialogbox');
const dialogbox__head = template.content.querySelector('#dds-dialogbox__head');
const dialogbox__body = template.content.querySelector('#dds-dialogbox__body');
const dialogbox__footer = template.content.querySelector('#dds-dialogbox__footer');
const dialogbox__okonlyBtnGrp = template.content.querySelector('#okonly-btn-group');
const dialogbox__okcancelBtnGrp = template.content.querySelector('#okcancel-btn-group');
const dialogbox__yesnoBtnGrp = template.content.querySelector('#yesno-btn-group');
const dialogbox__yesnocancelBtnGrp = template.content.querySelector('#yesnocancel-btn-group');
const btnClose = template.content.querySelector('.dds-dialogbox__close');
const btnOk = template.content.querySelector('#okonly_ok-btn');
const btnOkCancel_ok = template.content.querySelector('#okcancel_ok-btn');
const btnOkCancel_cancel = template.content.querySelector('#okcancel_cancel-btn');
const btnYesNo_yes = template.content.querySelector('#yesno_yes-btn');
const btnYesNo_no = template.content.querySelector('#yesno_no-btn');
const btnYesNoCancel_yes = template.content.querySelector('#yesnocancel_yes-btn');
const btnYesNoCancel_no = template.content.querySelector('#yesnocancel_no-btn');
const btnYesNoCancel_cancel = template.content.querySelector('#yesnocancel_cancel-btn');
var dialog_type_class;
switch (options.type) {
case 'I':
dialog_type_class = 'dds-dialogbox--info';
break;
case 'E':
dialog_type_class = 'dds-dialogbox--error';
break;
case 'W':
dialog_type_class = 'dds-dialogbox--warning';
case 'S':
dialog_type_class = 'dds-dialogbox--success';
}
dialogOverlay.classList.add('dds-dialogoverlay--show');
dialogbox.classList.add(dialog_type_class);
switch (options.buttonGroup) {
case 'okonly':
dialogbox__okonlyBtnGrp.classList.add("btn-group--show");
btnOk.addEventListener('click', () => {
response = options.onok();
this._close(dialogbox, dialogOverlay);
console.log('response is ' + response);
return response;
});
break;
case 'okcancel':
dialogbox__okcancelBtnGrp.classList.add("btn-group--show");
btnOkCancel_ok.addEventListener('click', () => {
response = options.onok();
this._close(dialogbox, dialogOverlay, response);
});
btnOkCancel_cancel.addEventListener('click', () => {
response = options.oncancel();
this._close(dialogbox, dialogOverlay, response);
});
break;
case 'yesno':
dialogbox__yesnoBtnGrp.classList.add("btn-group--show");
btnYesNoCancel_yes.addEventListener('click', () => {
response = options.onyes();
this._close(dialogbox, dialogOverlay, response);
});
btnYesNo_no.addEventListener('click', () => {
response = options.onno();
this._close(dialogbox, dialogOverlay, response);
});
break;
case 'yesnocancel':
dialogbox__yesnocancelBtnGrp.classList.add("btn-group--show");
btnYesNoCancel_yes.addEventListener('click', () => {
response = options.onyes();
this._close(dialogbox, dialogOverlay, response);
});
btnYesNoCancel_no.addEventListener('click', () => {
response = options.onno();
this._close(dialogbox, dialogOverlay, response);
});
btnYesNoCancel_cancel.addEventListener('click', () => {
response = options.oncancel();
this._close(dialogbox, dialogOverlay, response);
});
}
dialogOverlay.addEventListener('click', e => {
if (e.target === dialogOverlay) {
options.oncancel();
this._close(dialogbox, dialogOverlay);
}
})
dialogbox.addEventListener('click', e => {
if (e.target === dialogbox) {
options.oncancel();
this._close(dialogbox, dialogOverlay);
}
});
document.body.appendChild(template.content);
},
_close (dialogbox, dialogOverlay) {
dialogbox.classList.remove(dialogbox.classList.item(1));
dialogOverlay.classList.remove("dds-dialogoverlay--show");
document.body.removeChild(dialogOverlay);
}
};
function Dialogbox(dialog_type = 'I', dialog_title, dialog_mess, dialog_buttons = 'okonly') {
dialog.open({
title: dialog_title,
message: dialog_mess,
type: dialog_type,
buttonGroup: dialog_buttons
});
}