Обучение. Начало Frontend части

2023-01-12 21:38:13 +01:00
parent d9ec810f7f
commit 9ec0f42e17
9 changed files with 264 additions and 22 deletions
--- a/js/training/index.js
+++ b/js/training/index.js
--- a/js/training/modal.js
+++ b/js/training/modal.js
@@ -0,0 +1,118 @@
+(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()
+    }
+})