Подключение в Svelte

Tingle.js — это легковесная и простая в использовании библиотека для создания модальных окон. Она позволяет быстро добавить всплывающие окна с кастомизируемыми настройками, такими как анимация, кнопки, размер и т. д. Интеграция tingle.js в проект на Svelte — это простой процесс, который включает несколько шагов. В этой статье рассмотрим, как подключить и использовать tingle.js в Svelte-проекте.

Установка tingle.js

Для начала необходимо установить tingle.js в проект. Библиотека доступна через npm, поэтому для её добавления достаточно выполнить команду:

npm install tingle.js

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

Интеграция tingle.js в компонент Svelte

После установки библиотеки, нужно правильно импортировать и использовать tingle.js внутри компонента Svelte. Для этого создадим Svelte-компонент, который будет отвечать за отображение модального окна.

<script>
  import { onMount } from 'svelte';
  import Tingle from 'tingle.js';

  let modal;

  onMount(() => {
    // Инициализация модального окна
    modal = new Tingle();

    modal.setContent('<h2>Добро пожаловать в Svelte</h2><p>Это модальное окно с tingle.js!</p>');
    modal.addFooterBtn('Закрыть', 'tingle-btn tingle-btn--primary', () => {
      modal.close();
    });
  });

  function openModal() {
    modal.open();
  }
</script>

<button on:click={openModal}>Открыть модальное окно</button>

В этом примере используется хук onMount, который гарантирует, что модальное окно будет инициализировано только после того, как компонент будет смонтирован в DOM. Мы создаем экземпляр tingle.js с помощью конструктора new Tingle(), затем задаем содержимое модального окна с помощью метода setContent и добавляем кнопку для закрытия через addFooterBtn.

Обработка закрытия модального окна

При закрытии модального окна важно корректно освободить ресурсы и при необходимости обновить состояние компонента. С использованием tingle.js закрытие модального окна можно настроить через метод close(). Однако для полноценного управления состоянием окна и предотвращения ошибок при повторном открытии окна, стоит добавить небольшую логику.

<script>
  import { onMount, onDestroy } from 'svelte';
  import Tingle from 'tingle.js';

  let modal;

  onMount(() => {
    modal = new Tingle();

    modal.setContent('<h2>Пример с закрытием окна</h2><p>Нажмите кнопку для закрытия.</p>');
    modal.addFooterBtn('Закрыть', 'tingle-btn tingle-btn--primary', () => {
      modal.close();
    });
  });

  onDestroy(() => {
    // Освобождение ресурсов, если компонент удаляется
    if (modal) modal.destroy();
  });

  function openModal() {
    modal.open();
  }
</script>

<button on:click={openModal}>Открыть модальное окно</button>

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

Управление состоянием модального окна

Для управления состоянием модального окна в Svelte можно использовать реактивные переменные. Например, можно отслеживать, открыто ли окно, и использовать это состояние для выполнения дополнительных действий.

<script>
  import { onMount } from 'svelte';
  import Tingle from 'tingle.js';

  let modal;
  let isOpen = false;

  onMount(() => {
    modal = new Tingle();

    modal.setContent('<h2>Реактивное состояние</h2><p>Состояние окна отслеживается с помощью переменной isOpen.</p>');
    modal.addFooterBtn('Закрыть', 'tingle-btn tingle-btn--primary', () => {
      modal.close();
      isOpen = false;
    });
  });

  function openModal() {
    modal.open();
    isOpen = true;
  }
</script>

<button on:click={openModal} disabled={isOpen}>Открыть модальное окно</button>
<p>{isOpen ? 'Окно открыто' : 'Окно закрыто'}</p>

В этом примере переменная isOpen используется для отслеживания состояния модального окна. Когда окно открывается, isOpen устанавливается в true, а когда оно закрывается, переменная возвращается в значение false. Эта реактивность позволяет контролировать интерфейс и предотвращать повторное открытие модального окна, пока оно не будет закрыто.

Использование CSS для стилизации

Tingle.js предоставляет стандартную стилизацию для модальных окон, но можно также легко настроить собственный стиль для элементов. Для этого можно переопределить классы или добавить собственные CSS-правила.

Пример:

<style>
  .tingle-modal {
    background-color: #f1f1f1;
    border-radius: 10px;
  }

  .tingle-btn--primary {
    background-color: #007bff;
    color: white;
  }
</style>

<script>
  import { onMount } from 'svelte';
  import Tingle from 'tingle.js';

  let modal;

  onMount(() => {
    modal = new Tingle();
    modal.setContent('<h2>Стилизация модального окна</h2><p>Вы можете кастомизировать модальное окно с помощью CSS.</p>');
    modal.addFooterBtn('Закрыть', 'tingle-btn tingle-btn--primary', () => {
      modal.close();
    });
  });

  function openModal() {
    modal.open();
  }
</script>

<button on:click={openModal}>Открыть модальное окно</button>

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

Заключение

Интеграция tingle.js в Svelte-проект — это удобный способ добавить модальные окна с минимальными усилиями. Благодаря простому API библиотеки, можно легко управлять окнами, настраивать их содержимое, добавлять кнопки и анимацию. Реактивность Svelte позволяет гибко управлять состоянием модальных окон и интегрировать их в более сложные интерфейсы.

Оглавление