118 lines
4.4 KiB
JavaScript
118 lines
4.4 KiB
JavaScript
(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>',
|
||
modalButtonTemplate = '<button type="button" class="{{button_class}}" data-handler={{button_handler}}>{{button_text}}</button>',
|
||
modalHTML,
|
||
modal_content,
|
||
modalFooterHTML = '';
|
||
|
||
elemModal.classList.add('modal');
|
||
modalHTML = modalTemplate.replace('{{title}}', options.title || 'Новое окно');
|
||
//modalHTML = modalHTML.replace('{{content}}', options.content || '');
|
||
|
||
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);
|
||
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()
|
||
}
|
||
}) |