multy-stub/server/routers/questioneer/public/static/js/common.js

/* 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;
}