Add 'template-parts/la-components/' from commit '54eb8e266ffe2f57afb812d18c8f78030562f62a'

git-subtree-dir: template-parts/la-components git-subtree-mainline: 7c5a7f373a git-subtree-split: 54eb8e266f
2025-06-01 12:42:07 +03:00
parent 7c5a7f373a 54eb8e266f
commit d2bec21994
21 changed files with 2178 additions and 0 deletions
--- a/template-parts/la-components/js/modals.js
+++ b/template-parts/la-components/js/modals.js
@@ -0,0 +1,120 @@
+document.addEventListener('DOMContentLoaded', function() {
+    window.ModalSystem = {
+        overlay: null,
+        content: null,
+        container: null,
+        closeBtn: null,
+        isOpen: false,
+        currentModal: null,
+
+        init: function() {
+            this.overlay = document.getElementById('modal-overlay');
+            if (!this.overlay) return;
+
+            this.content = document.getElementById('modal-content');
+            this.container = this.overlay.querySelector('.bg-white');
+            this.closeBtn = document.getElementById('modal-close');
+
+            this.bindEvents();
+        },
+        bindEvents: function() {
+            if (this.closeBtn) {
+                this.closeBtn.addEventListener('click', () => this.close());
+            }
+            this.overlay.addEventListener('click', (e) => {
+                if (e.target === this.overlay) {
+                    this.close();
+                }
+            });
+
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape' && this.isOpen) {
+                    this.close();
+                }
+            });
+
+            document.addEventListener('click', (e) => {
+                const modalTrigger = e.target.closest('[data-modal]');
+                if (modalTrigger) {
+                    e.preventDefault();
+                    const modalName = modalTrigger.getAttribute('data-modal');
+                    this.open(modalName);
+                }
+            });
+
+            document.addEventListener('click', (e) => {
+                if (e.target.closest('[data-modal-close]')) {
+                    e.preventDefault();
+                    this.close();
+                }
+            });
+        },
+
+
+        open: function(modalName) {
+            if (this.isOpen) {
+                this.close();
+            }
+
+            const template = document.getElementById(`modal-template-${modalName}`);
+            if (!template) {
+                console.error(`модальное окно ${modalName} не найдено`);
+                return;
+            }
+
+            this.currentModal = modalName;
+            this.content.innerHTML = template.innerHTML;
+            this.show();
+        },
+
+        show: function() {
+
+            this.overlay.classList.remove('opacity-0', 'invisible');
+            this.overlay.classList.add('opacity-100', 'visible');
+
+
+            setTimeout(() => {
+                this.container.classList.remove('scale-90');
+                this.container.classList.add('scale-100');
+            }, 10);
+
+            this.isOpen = true;
+
+            setTimeout(() => {
+                this.closeBtn.focus();
+            }, 350);
+        },
+
+        close: function() {
+            if (!this.isOpen) return;
+
+            this.container.classList.remove('scale-100');
+            this.container.classList.add('scale-90');
+
+            this.overlay.classList.remove('opacity-100', 'visible');
+            this.overlay.classList.add('opacity-0', 'invisible');
+
+            this.isOpen = false;
+            this.currentModal = null;
+
+        },
+
+
+        getState: function() {
+            return {
+                isOpen: this.isOpen,
+                currentModal: this.currentModal
+            };
+        }
+    };
+
+    ModalSystem.init();
+
+    window.openModal = function(modalName) {
+        ModalSystem.open(modalName);
+    };
+
+    window.closeModal = function() {
+        ModalSystem.close();
+    };
+});