init Questionnaire
This commit is contained in:
Primakov Alexandr Alexandrovich
236
server/routers/questioneer/public/static/js/common.js
Normal file
236
server/routers/questioneer/public/static/js/common.js
Normal file
@@ -0,0 +1,236 @@
|
||||
/* 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: '×',
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user