Перейти к основному содержимому

States

Секция "Состояния" позволяет добавить состояния к виджету. Вот так выглядит данная секция:

Pasted image 20241025164239

  • Отключено / Disabled - виджет выключен
  • Выбрано / Selected - виждет выбран
  • Посещено / Visited - виджет посещен
  • Корректно / Correct - виджет корректен
  • Некорректно / Incorrect - виджет некорректен

Состояния работают на основе States.js

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

При включении состояния открывается поле ввода для групп. Если нужно задать несколько групп, то они вводятся через пробел. Виджет всегда принадлежит к группе с именем соответствующем id виджета. Группы нужны, чтобы одной командой изменять состояние у множества виджетов. Например, если у трех виджетов включено disabled состояние и у всех трех указана groupName группа, то при вызове window.states.disabled.add('groupName') всем трем виджетам будет добавлено состояние disabled.

Если для html элемента включена поддержка состояния, то ему добавляется data атрибут data-state-<stateName>. Внутри этого атрибута перечислены все группы, к которым он принадлежит. Если состояние активируется, то добавляется класс .state-<stateName>

Состояния Disabled, Visited, Correct, Incorrect сохраняются в оболочку и восстанавливаются при перезагрузке страницы. Только состояние Selected не сохраняется в оболочку

Disabled​

Данное состояние делает элемент неактивным. Добавляется стиль cursor: not-allowed!important; и отключается возможность нажать на элемент.

[data-state-disabled] {} // Стилизация всех включенных элементов 
[data-state-selected].state-disabled {} // Стилизация всех задизебленных элементов 
[data-state-disabled~="<group_name>"] {} // Стилизация включенного элемента из определенной группы
[data-state-disabled~="<group_name>"].state-disabled {} // Стилизация задизебленного элемента из определенной группы

Selected​

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

У таких виджетов, пока они в обычном состоянии (еще не перешли в Selected), при наведении срабатывает свойство cursor pointer, после перехода в Selected курсор при наведении должен быть стандартным. Данный момент реализован с помощью следующего css правила: [data-state-selected]:not(.state-selected){cursor: pointer!important;}

[data-state-selected] {} // Стилизация всех доступных для выбора элементов 
[data-state-selected].state-selected{} // Стилизация всех выбранных элементов 
[data-state-selected~="<group_name>"] {} // Стилизация доступного для выбора элемента из определенной группы
[data-state-selected~="<group_name>"].state-selected{} // Стилизация выбранного элемента из определенной группы

Visited​

Это состояние включается для виджета после клика по нему, если при клике он не был в состоянии Disabled

[data-state-visited] {} // Стилизация всех доступных для посещения элементов
[data-state-visited].state-visited{} // Стилизация всех посещенных элементов
[data-state-visited~="<group_name>"] {} // Стилизация доступного для посещения элемента из определенной группы
[data-state-visited~="<group_name>"].state-visited{} // Стилизация посещенного элемента из определенной группы

Correct и Incorrect​

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

[data-state-correct] {} // Стилизация всех виджетов поодерживающих состояние "Корректно"
[data-state-correct].state-correct{} // Стилизация всех корректных элементов
[data-state-correct~="<group_name>"] {} // Стилизация элементов определенной группы, поодерживающих состояние "Корректно"
[data-state-correct~="<group_name>"].state-correct{} // Стилизация корректных элементов определенной группы

[data-state-incorrect] {} // Стилизация всех виджетов поодерживающих состояние "Некорректно"
[data-state-incorrect].state-incorrect{} // Стилизация всех некорректных элементов
[data-state-incorrect~="<group_name>"] {} // Стилизация элементов определенной группы, поодерживающих состояние "Некорректно"
[data-state-incorrect~="<group_name>"].state-incorrect{} // Стилизация некорректных элементов определенной группы

Больше технической информации на странице States.js