Условная логика отображения

Библиотека SweetAlert предоставляет мощные инструменты для создания красивых и интерактивных уведомлений в веб-приложениях. Одной из ключевых особенностей является возможность использования условной логики для управления отображением различных типов сообщений в зависимости от состояния приложения или данных. Условная логика позволяет динамически изменять поведение уведомлений, что значительно расширяет их функциональность.

Условные выражения в SweetAlert

С помощью функции Swal.fire(), которая является основным способом вызова уведомлений, можно задавать различные параметры. Условная логика используется для изменения этих параметров в зависимости от условий, например, от результата выполнения операции, статуса пользователя, типа ошибки и других факторов.

Для создания гибких условий отображения уведомлений можно использовать стандартные конструкции JavaScript, такие как if, else, switch, а также тернарные операторы.

Пример использования условной логики:

let isSuccess = true;

if (isSuccess) {
  Swal.fire({
    title: 'Успех!',
    text: 'Операция завершена успешно.',
    icon: 'success',
    confirmButtonText: 'Ок'
  });
} else {
  Swal.fire({
    title: 'Ошибка!',
    text: 'Произошла ошибка при выполнении операции.',
    icon: 'error',
    confirmButtonText: 'Повторить'
  });
}

В данном примере в зависимости от значения переменной isSuccess будет отображаться уведомление с разными параметрами: успешное уведомление с зелёной иконкой или ошибка с красной.

Использование тернарного оператора

Тернарный оператор позволяет сократить код, делая его более компактным. Вместо многократных условных операторов if можно использовать тернарный оператор для более лаконичного представления логики.

Пример:

let isUserLoggedIn = false;

Swal.fire({
  title: isUserLoggedIn ? 'Добро пожаловать!' : 'Пожалуйста, войдите в систему',
  text: isUserLoggedIn ? 'Вы успешно авторизованы.' : 'Для продолжения работы выполните вход.',
  icon: isUserLoggedIn ? 'success' : 'warning',
  confirmButtonText: isUserLoggedIn ? 'Перейти в панель' : 'Войти'
});

Здесь в зависимости от того, авторизован ли пользователь, будет отображаться соответствующее сообщение и иконка.

Условия для динамического изменения контента

С помощью условной логики можно динамически изменять содержание уведомлений на основе значений переменных или состояния приложения. Например, при взаимодействии с сервером или обработке формы может возникать необходимость показывать уведомления с разными заголовками, текстами и действиями.

Пример:

let formData = {
  name: 'John Doe',
  email: 'john.doe@example.com'
};

if (!formData.name || !formData.email) {
  Swal.fire({
    title: 'Ошибка!',
    text: 'Все поля должны быть заполнены.',
    icon: 'error',
    confirmButtonText: 'Попробовать снова'
  });
} else {
  Swal.fire({
    title: 'Успех!',
    text: 'Данные успешно отправлены.',
    icon: 'success',
    confirmButtonText: 'Отправить ещё'
  });
}

Здесь проверяется, заполнил ли пользователь все необходимые поля формы. В зависимости от этого будет отображаться либо сообщение об ошибке, либо уведомление об успешной отправке данных.

Условия для цепочки уведомлений

Иногда необходимо создать серию уведомлений, где каждое следующее зависит от результата предыдущего. Это можно реализовать с помощью промисов, поскольку метод Swal.fire() возвращает объект промиса, который можно использовать для создания логики последовательного отображения уведомлений.

Пример:

Swal.fire({
  title: 'Вы уверены?',
  text: 'Вы хотите удалить этот элемент?',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Да',
  cancelButtonText: 'Нет'
}).then((result) => {
  if (result.isConfirmed) {
    // Уведомление о завершении операции
    Swal.fire({
      title: 'Удалено!',
      text: 'Элемент был успешно удалён.',
      icon: 'success',
      confirmButtonText: 'Ок'
    });
  } else {
    // Уведомление об отмене
    Swal.fire({
      title: 'Отменено',
      text: 'Элемент не был удалён.',
      icon: 'info',
      confirmButtonText: 'Понял'
    });
  }
});

В этом примере условие зависит от того, подтвердил ли пользователь действие. Если да, показывается уведомление о том, что элемент был удалён. Если нет, уведомление об отмене действия.

Работа с асинхронными операциями

SweetAlert идеально подходит для отображения уведомлений, связанных с асинхронными операциями, такими как загрузка данных с сервера или выполнение длительных операций. Можно использовать условную логику для обработки статуса выполнения таких операций и динамически изменять уведомления в зависимости от результата.

Пример:

async function fetchData() {
  try {
    Swal.fire({
      title: 'Загрузка...',
      text: 'Пожалуйста, подождите.',
      icon: 'info',
      showConfirmButton: false,
      didOpen: () => {
        Swal.showLoading();
      }
    });

    let response = await fetch('/api/data');
    let data = await response.json();

    Swal.fire({
      title: 'Успех!',
      text: `Данные загружены: ${data.item}`,
      icon: 'success',
      confirmButtonText: 'Ок'
    });
  } catch (error) {
    Swal.fire({
      title: 'Ошибка!',
      text: 'Не удалось загрузить данные.',
      icon: 'error',
      confirmButtonText: 'Попробовать снова'
    });
  }
}

Здесь используется асинхронная операция для загрузки данных с сервера. Пока данные загружаются, отображается уведомление с анимацией загрузки. В зависимости от результата операции будет показано успешное или ошибочное уведомление.

Условные настройки с использованием флагов

Для более сложных сценариев можно использовать флаги, которые управляют настройками уведомлений в зависимости от различных факторов. Например, флаг состояния может изменять внешний вид, кнопки или поведение уведомлений в зависимости от контекста.

Пример:

let isAdmin = true;

Swal.fire({
  title: isAdmin ? 'Добро пожаловать, администратор!' : 'Добро пожаловать, пользователь!',
  text: isAdmin ? 'У вас есть доступ ко всем разделам.' : 'У вас ограниченные права доступа.',
  icon: isAdmin ? 'success' : 'info',
  confirmButtonText: isAdmin ? 'Перейти в админку' : 'Перейти в личный кабинет'
});

В зависимости от роли пользователя (например, администратор или обычный пользователь) отображается разное содержание уведомления.

Заключение

Условная логика отображения в SweetAlert позволяет гибко управлять поведением уведомлений, адаптируя их под различные сценарии. Использование условных выражений, тернарных операторов и промисов помогает создавать динамичные и интерактивные уведомления, которые значительно улучшат пользовательский опыт.