Метод toggle

Назначение метода

Метод toggle() предназначен для переключения состояния календаря: если календарь закрыт — он открывается, если открыт — закрывается. Это один из базовых методов программного управления экземпляром Flatpickr, который позволяет синхронизировать поведение календаря с внешними событиями интерфейса.

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

Синтаксис

instance.toggle();

Где instance — экземпляр Flatpickr, созданный через:

const instance = flatpickr("#input", {});

Поведение метода

Метод toggle() выполняет одну из двух операций в зависимости от текущего состояния экземпляра:

  • Если календарь закрыт:

    • вызывается логика open()
    • происходит рендеринг календаря (если он ещё не отрисован)
    • устанавливаются позиции относительно input-элемента
    • активируются обработчики событий

  • Если календарь открыт:

    • вызывается логика close()
    • удаляются/деактивируются временные UI-состояния
    • снимается фокус с календаря (в зависимости от конфигурации)
    • обновляется внутреннее состояние isOpen

Фактически toggle() является обёрткой над двумя ключевыми методами: open() и close().

Внутреннее состояние и логика переключения

В основе работы метода лежит проверка внутреннего флага:

if (instance.isOpen) {
    instance.close();
} else {
    instance.open();
}

Однако реальная реализация в Flatpickr учитывает дополнительные факторы:

  • состояние altInput
  • наличие inline-режима
  • блокировки (disable, minDate, maxDate)
  • пользовательские события onOpen и onClose
  • состояние DOM (например, удалённый input)

Отличие от методов open() и close()

Метод toggle() не является самостоятельной логикой отображения, а лишь диспетчером состояния.

open()

Принудительно открывает календарь независимо от текущего состояния.

close()

Принудительно закрывает календарь.

toggle()

Определяет текущее состояние и выбирает одно из двух действий.

Ключевое отличие заключается в том, что toggle() всегда зависит от текущего UI-состояния, а не от внешней логики.

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

Базовое переключение

const fp = flatpickr("#date", {});

document.querySelector("#btn").addEventListener("click", () => {
    fp.toggle();
});

Кнопка выступает внешним триггером управления календарём.

Использование в кастомных UI-компонентах

const fp = flatpickr("#date", {});

const icon = document.querySelector(".calendar-icon");

icon.addEventListener("click", () => {
    fp.toggle();
});

Часто используется для иконок календаря внутри кастомных input-компонентов.

Переключение с проверкой состояния

if (!fp.isOpen) {
    fp.toggle();
}

Хотя избыточно, подобный подход применяется при интеграции с анимационными слоями интерфейса.

Поведение при повторных вызовах

Повторный вызов toggle() может приводить к частым переключениям состояния, особенно при:

  • двойных кликах
  • внешних debounce-обработчиках
  • синхронизации с клавиатурными событиями

Для предотвращения дребезга иногда используется проверка:

if (!fp.isOpen) {
    fp.toggle();
}

или наоборот:

if (fp.isOpen) {
    fp.toggle();
}

Взаимодействие с событиями

Метод toggle() вызывает те же события, что и open() и close():

  • onOpen
  • onClose
  • onChange (косвенно, при выборе даты)

Порядок вызовов важен:

  1. Проверка состояния
  2. Вызов open() или close()
  3. Срабатывание соответствующих callbacks
  4. Обновление UI

Особенности в inline-режиме

В режиме:

flatpickr("#calendar", {
    inline: true
});

метод toggle() фактически теряет смысл, так как календарь всегда отображается в DOM.

В этом случае:

  • open() и close() не изменяют видимость
  • toggle() может не выполнять визуальных изменений
  • логика ограничивается внутренними флагами

Поведение при disabled input

Если input отключён:

input.disabled = true;

метод toggle() может:

  • игнорировать вызов
  • не открывать календарь
  • сохранять текущее состояние без изменений

Это зависит от конфигурации и версии Flatpickr.

Программные сценарии использования

Управление из внешнего состояния приложения

function toggleCalendar(fpInstance, state) {
    if (state === "invert") {
        fpInstance.toggle();
    }
}

Связка с клавиатурными событиями

document.addEventListener("keydown", (e) => {
    if (e.key === "F2") {
        fp.toggle();
    }
});

Интеграция с UI-фреймворками

В реактивных системах метод используется как мост между состоянием UI и календарём:

watch(isCalendarVisible, (value) => {
    if (value) {
        fp.toggle();
    }
});

Типичные ошибки при использовании

Неконтролируемое переключение

button.addEventListener("click", () => {
    fp.toggle();
    fp.toggle();
});

Результат — мгновенное открытие и закрытие.

Несинхронизированное состояние UI

Если внешний state не отражает isOpen, toggle() может приводить к рассинхронизации интерфейса.

Вызов после уничтожения экземпляра

fp.destroy();
fp.toggle(); // ошибка или no-op

После destroy() метод становится недоступным.

Производственные аспекты

Метод toggle() считается лёгкой операцией, однако его частое использование может:

  • создавать лишние reflow при позиционировании
  • инициировать повторный рендер календаря
  • увеличивать нагрузку при анимациях открытия/закрытия

Поэтому в сложных интерфейсах иногда предпочтительнее явное управление через open() и close().

Роль в архитектуре Flatpickr

Внутри экземпляра Flatpickr метод toggle() является частью публичного API управления состоянием UI-компонента. Он служит связующим звеном между:

  • пользовательскими действиями
  • DOM-событиями
  • внутренним состоянием календаря

и обеспечивает минимальную точку входа для переключения поведения без необходимости анализировать текущее состояние вручную.

Оглавление