Отличия версий 1.x и 2.x

Отличия версий 1.x и 2.x библиотеки SweetAlert

SweetAlert — это популярная JavaScript-библиотека, предназначенная для создания модальных окон с красивым и удобным интерфейсом. Она значительно улучшает пользовательский опыт, позволяя заменять стандартные alert-диалоги на более гибкие и стильные модальные окна. С момента своего выпуска библиотека прошла через несколько крупных изменений, включая значительную трансформацию в версии 2.x. В этой части рассматриваются ключевые отличия между версиями 1.x и 2.x, которые важны для разработчиков при переходе на новую версию или при использовании определённой версии в проекте.

Одним из самых заметных изменений между версиями 1.x и 2.x является переписанное API. В первой версии SweetAlert использовался простой объект конфигурации, в котором можно было задать текст, кнопки и другие параметры. Однако, в версии 2.x API стало более мощным и гибким.

Использование Promises

Версия 2.x библиотеки значительно улучшила работу с асинхронностью, добавив поддержку Promise. Это изменение позволило более удобно обрабатывать пользовательские действия, такие как нажатие на кнопки в модальном окне. Теперь можно использовать конструкции then и catch для обработки событий после закрытия модального окна. В версии 1.x такой возможности не было, и приходилось использовать callback-функции.

Пример использования Promise:

Swal.fire({
  title: 'Вы уверены?',
  text: 'После этого действия его нельзя будет отменить!',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Да',
  cancelButtonText: 'Отмена'
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Действие подтверждено');
  } else {
    console.log('Действие отменено');
  }
});

В версии 1.x приходилось использовать обработчики событий для реализации подобного поведения, что делало код менее чистым и более громоздким.

Новая структура настроек

В версии 2.x была изменена структура объекта настроек. В первой версии настройки были достаточно ограниченными и простыми. В версии 2.x были добавлены новые параметры для более гибкой настройки внешнего вида и поведения модального окна.

Пример изменения настроек между версиями:

// Версия 1.x
swal('Привет!', 'Это сообщение!', 'success');

// Версия 2.x
Swal.fire({
  title: 'Привет!',
  text: 'Это сообщение!',
  icon: 'success',
  confirmButtonText: 'Ок'
});

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

Новые типы уведомлений

Версия 2.x добавила поддержку различных типов уведомлений, которые позволяют использовать стандартные иконки (например, «успех», «ошибка», «предупреждение») с различными стилями отображения. В первой версии иконки можно было устанавливать лишь через текстовые строки или через собственные изображения. Во второй версии поддерживаются стандартные иконки с параметрами, такими как:

  • success — для успешных операций.
  • error — для ошибок.
  • warning — для предупреждений.
  • info — для информационных сообщений.
  • question — для запросов.

Использование этих типов значительно упрощает добавление стандартных уведомлений в приложение.

Swal.fire({
  icon: 'success',
  title: 'Успешно сохранено',
  text: 'Ваши данные были сохранены.'
});

Поддержка кастомных анимаций

SweetAlert 2.x позволил значительно расширить возможности кастомизации внешнего вида окон с помощью анимаций. В версии 1.x возможности по анимации были ограничены базовыми переходами, такими как плавное появление окна. В новой версии появилась возможность настраивать анимации для различных состояний окна (например, появление, скрытие и другие), а также изменять их с помощью CSS.

Swal.fire({
  title: 'Заголовок',
  text: 'Текст уведомления',
  icon: 'info',
  showClass: {
    popup: 'animate__animated animate__fadeIn'
  },
  hideClass: {
    popup: 'animate__animated animate__fadeOut'
  }
});

В данном примере используются анимации библиотеки animate.css, которые могут быть подключены и настроены для улучшения визуальных эффектов.

Поддержка модальных окон с несколькими кнопками

В версии 1.x было доступно всего две кнопки для модальных окон — подтверждения и отмены. В SweetAlert 2.x появилась возможность добавления произвольного количества кнопок. Это расширяет возможности для взаимодействия с пользователем, позволяя создавать более сложные и многозадачные интерфейсы.

Пример с несколькими кнопками:

Swal.fire({
  title: 'Выберите действие',
  showDenyButton: true,
  showCancelButton: true,
  confirmButtonText: 'Сохранить',
  denyButtonText: 'Отменить',
  cancelButtonText: 'Закрыть'
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Сохранено');
  } else if (result.isDenied) {
    console.log('Отменено');
  }
});

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

Интеграция с изображениями и медиа

SweetAlert 2.x предоставляет возможность добавлять изображения и медиа-ресурсы непосредственно в модальные окна, что было невозможно в предыдущей версии. Это позволяет значительно улучшить внешний вид уведомлений, добавив графику, анимации или даже видео. В SweetAlert 1.x изображения могли быть добавлены только в виде сторонних элементов, что требовало дополнительных усилий.

Пример с изображением:

Swal.fire({
  title: 'Праздничное уведомление',
  text: 'Поздравляем вас с праздником!',
  imageUrl: 'path/to/celebration-image.png',
  imageWidth: 400,
  imageHeight: 200
});

Поддержка темной темы

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

Swal.fire({
  title: 'Заголовок',
  text: 'Сообщение',
  icon: 'info',
  customClass: {
    popup: 'dark-mode'
  }
});

Темную тему можно активировать через CSS или с помощью встроенных параметров конфигурации.

Заключение

Основные различия между версиями 1.x и 2.x заключаются в значительно улучшенном API, расширенных возможностях кастомизации, поддержке асинхронности и Promise, а также в добавлении новых типов уведомлений и анимаций. Вторая версия предлагает более гибкие и мощные инструменты для создания красивых и функциональных пользовательских интерфейсов, делая библиотеку SweetAlert ещё более удобной и подходящей для работы в современных веб-приложениях.

Оглавление