multy-stub/server/routers/questioneer/public/static/js/common.js
Primakov Alexandr Alexandrovich 1fcc5ed70d init Questionnaire
2025-03-11 23:50:50 +03:00

236 lines
7.4 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.

/* global $, document */
// Функция для создания модального окна
function createModal(options) {
// Если модальное окно уже существует, удаляем его
$('.modal-overlay').remove();
// Опции по умолчанию
const defaultOptions = {
title: 'Сообщение',
content: '',
closeText: 'Закрыть',
onClose: null,
showCancel: false,
cancelText: 'Отмена',
confirmText: 'Подтвердить',
onConfirm: null,
onCancel: null,
size: 'normal', // 'normal', 'large', 'small'
customClass: '',
autoClose: false, // Автоматическое закрытие по таймеру
autoCloseTime: 2000 // Время до автоматического закрытия (2 секунды)
};
// Объединяем пользовательские опции с опциями по умолчанию
const settings = $.extend({}, defaultOptions, options);
// Создаем структуру модального окна
const $modalOverlay = $('<div>', { class: 'modal-overlay' });
const $modal = $('<div>', { class: `modal ${settings.customClass}` });
// Устанавливаем ширину в зависимости от размера
if (settings.size === 'large') {
$modal.css('max-width', '700px');
} else if (settings.size === 'small') {
$modal.css('max-width', '400px');
}
// Создаем заголовок
const $modalHeader = $('<div>', { class: 'modal-header' });
const $modalTitle = $('<h3>', { text: settings.title });
const $modalClose = $('<button>', {
class: 'modal-close',
html: '&times;',
click: function() {
closeModal();
if (typeof settings.onClose === 'function') {
settings.onClose();
}
}
});
$modalHeader.append($modalTitle, $modalClose);
// Создаем тело
const $modalBody = $('<div>', { class: 'modal-body' });
if (typeof settings.content === 'string') {
$modalBody.html(settings.content);
} else {
$modalBody.append(settings.content);
}
// Создаем футер
const $modalFooter = $('<div>', { class: 'modal-footer' });
// Если нужно показать кнопку отмены
if (settings.showCancel) {
const $cancelButton = $('<button>', {
class: 'btn btn-secondary',
text: settings.cancelText,
click: function() {
closeModal();
if (typeof settings.onCancel === 'function') {
settings.onCancel();
}
}
});
$modalFooter.append($cancelButton);
}
// Кнопка подтверждения/закрытия
const $confirmButton = $('<button>', {
class: settings.showCancel ? 'btn btn-primary' : 'btn',
text: settings.showCancel ? settings.confirmText : settings.closeText,
click: function() {
closeModal();
if (settings.showCancel && typeof settings.onConfirm === 'function') {
settings.onConfirm();
} else if (!settings.showCancel && typeof settings.onClose === 'function') {
settings.onClose();
}
}
});
$modalFooter.append($confirmButton);
// Добавляем прогресс-бар, если включено автоматическое закрытие
if (settings.autoClose) {
const $progressBar = $('<div>', { class: 'modal-progress' });
$modal.append($progressBar);
}
// Собираем модальное окно
$modal.append($modalHeader, $modalBody, $modalFooter);
$modalOverlay.append($modal);
// Добавляем модальное окно в DOM
$('body').append($modalOverlay);
// Закрытие по клику на фоне
$modalOverlay.on('click', function(e) {
if (e.target === this) {
closeModal();
if (typeof settings.onClose === 'function') {
settings.onClose();
}
}
});
// Функция закрытия модального окна
function closeModal() {
$modalOverlay.removeClass('active');
setTimeout(function() {
$modalOverlay.remove();
}, 300);
}
// Активируем модальное окно
setTimeout(function() {
$modalOverlay.addClass('active');
// Активируем прогресс-бар и запускаем таймер закрытия, если включено автоматическое закрытие
if (settings.autoClose) {
const $progressBar = $modal.find('.modal-progress');
setTimeout(() => {
$progressBar.addClass('active');
}, 50);
setTimeout(() => {
closeModal();
if (typeof settings.onClose === 'function') {
settings.onClose();
}
}, settings.autoCloseTime);
}
}, 10);
// Возвращаем объект модального окна
return {
$modal: $modal,
$overlay: $modalOverlay,
close: closeModal
};
}
// Функция для отображения модального окна с сообщением (замена alert)
function showAlert(message, title, callback, autoClose = false) {
return createModal({
title: title || 'Сообщение',
content: message,
onClose: callback,
autoClose: autoClose,
autoCloseTime: 2000
});
}
// Функция для отображения модального окна с подтверждением (замена confirm)
function showConfirm(message, callback, title) {
return createModal({
title: title || 'Подтверждение',
content: message,
showCancel: true,
onConfirm: function() {
if (typeof callback === 'function') {
callback(true);
}
},
onCancel: function() {
if (typeof callback === 'function') {
callback(false);
}
}
});
}
// Функция для генерации QR-кода
function generateQRCode(data, size) {
const typeNumber = 0; // Автоматическое определение
const errorCorrectionLevel = 'L'; // Низкий уровень коррекции ошибок
const qr = qrcode(typeNumber, errorCorrectionLevel);
qr.addData(data);
qr.make();
return qr.createImgTag(size || 8, 0);
}
// Функция для отображения QR-кода в модальном окне
function showQRCodeModal(url, title) {
const qrCode = generateQRCode(url);
const content = `
<div class="qr-container">
<div class="qr-code">
${qrCode}
</div>
<div class="qr-link-container">
<input type="text" class="qr-link-input" value="${url}" readonly>
<button class="btn btn-copy-link">Копировать</button>
</div>
</div>
`;
const modal = createModal({
title: title || 'QR-код для доступа',
content: content,
size: 'large'
});
// Добавляем обработчик для кнопки копирования
modal.$modal.find('.btn-copy-link').on('click', function() {
const input = modal.$modal.find('.qr-link-input');
input.select();
document.execCommand('copy');
// Показываем уведомление о копировании
const $button = $(this);
const originalText = $button.text();
$button.text('Скопировано!');
$button.addClass('copied');
setTimeout(function() {
$button.text(originalText);
$button.removeClass('copied');
}, 1500);
});
return modal;
}