Good-Production/Fakel-Gym
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

переработал систему модалок и добавил блоки

Browse Source
This commit is contained in:
GP_DEV
2025-06-07 23:28:58 +03:00
parent 9aa5906efa
commit 5e346cfa36
10 changed files with 348 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
template-parts/la-components/js/modals.js
View File

@@ -1,13 +1,13 @@
document.addEventListener('DOMContentLoaded', function() {
window.ModalSystem = {
const ModalSystem = {
overlay: null,
content: null,
container: null,
closeBtn: null,
isOpen: false,
currentModal: null,
modalStack: [],
init: function() {
init() {
this.overlay = document.getElementById('modal-overlay');
if (!this.overlay) return;
@@ -16,21 +16,20 @@ document.addEventListener('DOMContentLoaded', function() {
this.closeBtn = document.getElementById('modal-close');
this.bindEvents();
this.initFormHandling();
},
bindEvents: function() {
bindEvents() {
if (this.closeBtn) {
this.closeBtn.addEventListener('click', () => this.close());
}
this.overlay.addEventListener('click', (e) => {
if (e.target === this.overlay) {
this.close();
}
if (e.target === this.overlay) this.close();
});
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && this.isOpen) {
this.close();
}
if (e.key === 'Escape' && this.isOpen()) this.close();
});
document.addEventListener('click', (e) => {
@@ -38,7 +37,8 @@ document.addEventListener('DOMContentLoaded', function() {
if (modalTrigger) {
e.preventDefault();
const modalName = modalTrigger.getAttribute('data-modal');
this.open(modalName);
const cardId = modalTrigger.getAttribute('data-card-id');
this.open(modalName, { cardId });
}
});
@@ -50,71 +50,140 @@ document.addEventListener('DOMContentLoaded', function() {
});
},
initFormHandling() {
console.log('Form handling initialized');
open: function(modalName) {
if (this.isOpen) {
this.close();
document.addEventListener('fluentform_submission_success', (e) => {
const form = e.target.closest('.ff-el-form-wrapper form');
if (form) {
setTimeout(() => {
if (this.isOpen()) {
this.replace('form-success');
} else {
this.open('form-success');
}
}, 300);
}
}, true);
if (typeof jQuery !== 'undefined') {
jQuery(document).ajaxSuccess((event, xhr, settings) => {
if (settings.url && settings.url.includes('admin-ajax.php') &&
settings.data && settings.data.includes('fluentform_submit')) {
try {
const response = JSON.parse(xhr.responseText);
console.log('Response:', response);
if (response.success && response.data && response.data.insert_id) {
setTimeout(() => {
if (this.isOpen()) {
this.replace('form-success');
} else {
this.open('form-success');
}
}, 300);
}
} catch (e) {
}
}
});
} else {
}
},
open(modalName, params = {}) {
const template = document.getElementById(`modal-template-${modalName}`);
if (!template) return;
this.modalStack.push({
name: modalName,
params: params,
content: template.innerHTML
});
this.content.innerHTML = template.innerHTML;
if (this.modalStack.length === 1) {
this.show();
}
const template = document.getElementById(`modal-template-${modalName}`);
if (!template) {
console.error(`модальное окно ${modalName} не найдено`);
this.injectParams(params);
},
replace(modalName, params = {}) {
if (this.modalStack.length === 0) {
this.open(modalName, params);
return;
}
this.currentModal = modalName;
const template = document.getElementById(`modal-template-${modalName}`);
if (!template) return;
this.modalStack[this.modalStack.length - 1] = {
name: modalName,
params: params,
content: template.innerHTML
};
this.content.innerHTML = template.innerHTML;
this.show();
this.injectParams(params);
},
show: function() {
injectParams(params) {
if (params.cardId) {
setTimeout(() => {
const hiddenInput = this.content.querySelector('input[name="hidden"]');
if (hiddenInput && !hiddenInput.dataset.cardInjected) {
const currentValue = hiddenInput.value || '';
hiddenInput.value = currentValue + ` | Карта ID: ${params.cardId}`;
hiddenInput.dataset.cardInjected = 'true';
}
}, 100);
}
},
show() {
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();
if (this.closeBtn) this.closeBtn.focus();
}, 350);
},
close: function() {
if (!this.isOpen) return;
close() {
if (this.modalStack.length === 0) return;
this.modalStack.pop();
if (this.modalStack.length > 0) {
const prevModal = this.modalStack[this.modalStack.length - 1];
this.content.innerHTML = prevModal.content;
this.injectParams(prevModal.params);
} else {
this.hide();
}
},
hide() {
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;
this.modalStack = [];
},
getState: function() {
return {
isOpen: this.isOpen,
currentModal: this.currentModal
};
isOpen() {
return this.modalStack.length > 0;
}
};
ModalSystem.init();
window.openModal = function(modalName) {
ModalSystem.open(modalName);
};
window.closeModal = function() {
ModalSystem.close();
};
});