game/js/training/modal.js

164 lines
5.7 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

const request = new XMLHttpRequest();
const training_handler = () => {
const url = (condition) => {
return condition ? '/api/training/complete' : '/api/training/go_back';
};
request.open('POST', url(training_data().answer == null || training_data().answer == get_user_answer()))
request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
request.onreadystatechange = function () {//Call a function when the state changes.
if (request.readyState == 4) {
if(request.status == 200) {
parent.frames['main'].location.reload();
}
if(request.responseText != '') {
let response = JSON.parse(request.responseText);
if (response.message != undefined) {
alert(response.message);
}
}
}
}
request.send(JSON.stringify({
time: training_data().time,
token: training_data().token,
short_name: training_data().short_name,
answer: get_user_answer(),
}))
}
function get_user_answer() {
if(training_data().answer == '') {
return '';
}
return document.getElementsByName('user_answer')[0].value;
}
(function () {
if (typeof window.CustomEvent == "function") return false;
function CustomEvent(event, params) {
params = params || { bubbles: false, cancelable: false, detail: null };
var evt = document.createEvent('CustomEvent');
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
return evt;
}
window.CustomEvent = CustomEvent;
})();
$modal = function (options) {
var
_elemModal,
_eventShowModal,
_eventHideModal,
_hiding = false,
_destroyed = false,
_animationSpeed = 200;
function _createModal(options) {
var
elemModal = document.createElement('div'),
modalTemplate = '<div class="modal__backdrop" data-dismiss="modal"><div class="modal__content"><div class="modal__header"><div class="modal__title" data-modal="title">{{title}}</div><span class="modal__btn-close" data-dismiss="modal" title="Закрыть">×</span></div><div id="modal_content" class="modal__body" data-modal="content">{{content}}</div>{{footer}}</div></div>',
modalFooterTemplate = '<div class="modal__footer">{{buttons}}</div>',
modalInputAnswer = '',
modalButtonTemplate = '<button type="button" class="{{button_class}}" data-handler={{button_handler}}>{{button_text}}</button>',
modalHTML,
modal_content,
modalFooterHTML = '';
if(training_data().answer != '') {
modalInputAnswer = '<br><br><input name="user_answer" placeholder="Укажите ответ"/>';
}
elemModal.classList.add('modal');
modalHTML = modalTemplate.replace('{{title}}', options.title || 'Новое окно');
if (options.footerButtons) {
for (var i = 0, length = options.footerButtons.length; i < length; i++) {
var modalFooterButton = modalButtonTemplate.replace('{{button_class}}', options.footerButtons[i].class);
modalFooterButton = modalFooterButton.replace('{{button_handler}}', options.footerButtons[i].handler);
modalFooterButton = modalFooterButton.replace('{{button_text}}', options.footerButtons[i].text) + modalInputAnswer;
modalFooterHTML += modalFooterButton;
}
modalFooterHTML = modalFooterTemplate.replace('{{buttons}}', modalFooterHTML);
}
modalHTML = modalHTML.replace('{{footer}}', modalFooterHTML);
elemModal.innerHTML = modalHTML;
document.body.appendChild(elemModal);
modal_content = document.getElementById('modal_content')
modal_content.innerHTML = options.content
return elemModal;
}
function _showModal() {
if (!_destroyed && !_hiding) {
_elemModal.classList.add('modal__show');
document.dispatchEvent(_eventShowModal);
}
}
function _hideModal() {
_hiding = true;
_elemModal.classList.remove('modal__show');
_elemModal.classList.add('modal__hiding');
setTimeout(function () {
_elemModal.classList.remove('modal__hiding');
_hiding = false;
}, _animationSpeed);
document.dispatchEvent(_eventHideModal);
}
function _handlerCloseModal(e) {
if (e.target.dataset.dismiss == 'modal') {
_hideModal();
}
}
_elemModal = _createModal(options || {});
_elemModal.addEventListener('click', _handlerCloseModal);
_eventShowModal = new CustomEvent('show.modal', { detail: _elemModal });
_eventHideModal = new CustomEvent('hide.modal', { detail: _elemModal });
return {
show: _showModal,
hide: _hideModal,
destroy: function () {
_elemModal.parentElement.removeChild(_elemModal),
_elemModal.removeEventListener('click', _handlerCloseModal),
_destroyed = true;
},
setContent: function (html) {
_elemModal.querySelector('[data-modal="content"]').innerHTML = html;
},
setTitle: function (text) {
_elemModal.querySelector('[data-modal="title"]').innerHTML = text;
}
}
};
let modal = $modal({
title: training_data().title,
content: training_data().content,
footerButtons: [
{
class: 'btn btn__ok',
text: 'Продолжить',
handler: 'next_step'
}
]
});
document.addEventListener('click', function (e) {
if (e.target.dataset.handler == 'next_step') {
training_handler()
}
})