Здесь подробно рассказано о js коде States скриптов. О том как с ними работать в Elementor редакторе можно узнать здесь

States API доступно с помощью глобальной js переменной window.states. В этом объекте находятся 6 объектов для 6 состояний:

• disabled - Отключено / Disabled
• selected - Выбрано / Selected
• visited - Посещено / Visited
• correct - Корректно / Correct
• incorrect - Некорректно / Incorrect

А так же метод reset(el), который сбрасывает все состояния у переданного html элемента

Api

//Disabled состояние (сохраняется в оболочку) (работает по группе)
states.disabled.add('<group_name>') // включить элементы с группой
states.disabled.remove('<group_name>') // отключить элементы с группой
states.disabled.toggle('<group_name>') // переключить элементы с группой
states.disabled.reset(html_element) // отключить все группы у элемента

//Hidden состояние (сохраняется в оболочку) (работает по css селектору)
states.hidden.add('<selector>') // скрыть элементы по селектору
states.hidden.remove('<selector>') // показать элементы по селектору
states.hidden.toggle('<selector>') // переключить элементы по селектору
states.hidden.reset(html_element) // сбросить все селекторы из-за которых скрыт переданный элемент

//Selected состояние (не сохраняется в оболочку) (работает по элементу)
states.selected.select(html_element) // выбрать элемент
states.selected.reset(html_element) // сбросить выделение

//Visited состояние (сохраняется в оболочку) (работает по группе)
states.visited.visit(html_element) // отметить посещенный элемент. Если сам элемент не поддерживает visited состояние, то элемент ищется среди родительских
states.visited.reset(html_element) // сбросить visited состояние у всех групп элемента

//Correct состояние (сохраняется в оболочку) (работает по группе)
states.correct.add('<group_name>') //добавить состояние "корректно"
states.correct.remove('<group_name>') //отключить состояние "корректно"
states.correct.toggle('<group_name>') //переключить состояние "корректно"
states.correct.reset(html_element) // отключить все группы у элемента

//Incorrect состояние (сохраняется в оболочку) (работает по группе)
states.incorrect.add('<group_name>') //добавить состояние "некорректно"
states.incorrect.remove('<group_name>') //отключить состояние "некорректно"
states.incorrect.toggle('<group_name>') //переключить состояние "некорректно"
states.incorrect.reset(html_element) // отключить все группы у элемента

Основные классы

StateDefault

Базовый класс для сборки логики состояния. В нем есть свойство store со Store и elements с ElementsControllerBase. А так же методы:

• constructor(stateName, elementsControllerName) - конструктор класса. StateName - имя состояния, elementsControllerName - один из двух дочерних классов ElementsControllerBase (group или selector )
• init - инициализация состояние. Восстановление активных состояний из оболочки и навешивание обработчиков событий
• resetInWidget(widgetId) - сброс состояния в виджете
• reset(el) - сброс состояния на html элементе. Определяется в дочерних классах

StateApi

Добавляет к дефолтному классу набор методов для удобного взаимодействия с состоянием извне с помощью js кода.

Методы:

• add(groupName) - активирует состояние у группы
• remove(groupName) - отключает состояние у группы
• toggle(groupName) - переключает состояние у группы
• reset(el) - сбрасывает состояние у html элемента

StateVisited

Тот же StateDefault, только в инициализацию добавлен обработчик клика по виджету, чтобы активировать visited состояние. Подробнее про visited состояние здесь

Добавлен метод visit(el), который добавляет элементу visited состояние. Используется в обработчике клика по виджету, но может быть использовано напрямую. Определен метод reset(el) для возможности сброса visited состояния

StateSelected

Тот же StateDefault, но кликнутым элементам с поддержкой этого состояния добавляется selected состояние. Подробнее про selected состояние здесь

Добавлен метод select(el), который добавляет элементу selected состояние. Используется в обработчике клика по виджету, но может быть использовано напрямую. Определен метод reset(el) для возможности сброса selected состояния

StateDisabled

Тот же StateApi, только для отключенных элементов добавляется js обработчик отключающий нажатия. Данный обработчик нужен, так как невозможно добавить одному элементу два css свойства: cursor: not-allowed и pointer-events: none, поэтому второе правило заменено js кодом

Вспомогательные классы

Store

Класс для работы с данными в оболочке курсов. Данные сохраняются в переменной вида state<Statename>. Взаимодействие с классом происходит через свойство store в классе StateDefault и его дочерних классах Класс обладает несколькими методами для работы с данными:

• get - получает все данные о состоянии из оболочки
• set - сохраняет данные состояния в оболочку
• add - добавляет группу в активные
• remove - удаляет группу из активных
• toggle - переключает состояние у группы
• includes - проверяет активно ли состояние для группы

ElementsControllerBase

На основе данных о состоянии из Store нужно обновлять состояние элементов на странице. Для этого предназначены классы ElementsControllerBase.

Конструктор класса требуется stateName - состояние, элементами которого будет управлять данный класс

Методы:

• get(groupName) - возвращает все элементы, которые принадлежат группе groupName. Должен быть определен в дочернем классе
• getAll() - возвращает все элементы с поддержкой состояния. Должен быть определен в дочернем классе
• getGroups(el) - возвращает массив с группами, к которым принадлежит элемент. Должен быть определен в дочернем классе
• addState(el) - активирует состояние
• removeState(el) - отключает состояние

ElementsControllerGroup

Расширяет Base класс для работы с группами. Группа элементов объединяется общим id, который прописан в data атрибуте состояния. Например элемент <p data-state-disabled="elId group1 group2"></p> принадлежит к группам elId, group1 и group2. В одной группе может находиться множество элементов, и как раз для управления состоянием сразу множества элементов создан ElementsControllerGroup. Поддержка состояний и группы, к которым относится виджет задаются в секции States (Состояния), каждый виджет по умолчанию принадлежит к группе со своим id, чтобы всегда иметь возможность задавать состояние одному элементу

Методы:

• get(groupName) - возвращает все элементы переданной группы
• getAll() - возвращает все элементы с поддержкой состояния
• getGroups(el) - возвращает все группы элемента

ElementsControllerSelector

Html элементам под управлением данного класса состояние задается по css селектору. Так что здесь вместо групп используется css селектор и это главная особенность этого класса. В данный момент этот класс используется только для Hidden состояние и может быть задан с помощью js кода или действием "Скрыть/Показать" в триггерах

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

Методы:

• get(selector) - возвращает все массивы по селектору
• getAll() - возвращает все элементы, у которых активировано состояние
• getGroups(el) - возвращает все селекторы, по которым к элементу применено состояние