Объект имеет несколько состояний с разными стилями

Соглашения

КЛАСС равно СОСТОЯНИЕ

Изменения в документе представляют собой конечный автомат. Конечный автомат более удобно задать как некую матрицу, вместо того, чтобы писать функции JavaScript, выполняющие эти изменения на экране. Рассмотрим, как может быть записан конечный автомат для изменения стиля объектов в зависимости от нажатия пользователем тех или иных клавиш клавиатуры и кнопок мыши.

Пусть, например, имеется форум (пусть реплики будут элементами списка <li></li>).

• первая реплика
• вторая реплика
• ответ на вторую
• второй на вторую
• следующий уровень
• третий ответ

В книжках делают закладки и пометки, но как сделать пометки здесь? Если вы проанализировали реплики и проранжировали их в 5 уровней (важно, задуматься, обычное, бестолково, вредно), то было бы удобно, чтобы "важно" были написаны красным, "задуматься" - оранжевым, "обычное" - зеленым, "бестолково" - черным, "вредно" - бледно-серым (серебряным).

• первая реплика
• вторая реплика
• ответ на вторую
• второй на вторую
• следующий уровень
• третий ответ

Как же подобные изменения произвести в окне браузера и отправить на сервер? Если расположить рядом с каждой репликой набор радио-кнопок (кругленьких, с черной точечкой внутри), то это захламляет страницу, не нравится пользователю.

Предлагаю кликать мышкой непосредственно на репликах: щелчок - поднять статус реплики на один уровень, двойной щелчок - опустить на один.

Transition Sheet

li.r5 { color: red }
li.r4 { color: orange }
li.r3 { color: green }
li.r2 { color: black }
li.r1 { color: silver }

r1 enter r2
r2 enter r3
r3 enter r4
r4 enter r5
r5 enter r1 /* последовательность изменений замкнута в кольцо */

r5 bksp r4
r4 bksp r3
r3 bksp r2
r2 bksp r1
r1 bksp r5 /* последовательность изменений замкнута в кольцо */

r1,r3 enter r2

, enter r2

Состояния по умолчанию

Стиль, который использует браузер по умолчанию (когда отсутствует тег class) для не выделенного объекта называется default.

Например, переход из default-состояния выглядит так

default enter r2

r2 enter default

Незаполненное поле "новое состояние" изменяет прежний стиль на стиль default.

r1 enter

Перечисление команд

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

r1 enter,bksp r2

Упаковка

<link src="./a.txt" type="transition">

Вложенность

Дополнительное свойство: движение цвета

li.r5 {
 color: red;
 color-time: 1.5;
}

Форма отправляет

Теги <li> могут быть расположены внутри тега form, при этом их атрибуты name должны быть определены (в примере ниже - в значение A). Одинарный или двойной щелчек мышкой приводит к формированию с следующего XML-текста (далее такие xml-теги будем называть действиями).

<obj name=A cmd=cmd_name os=old_class_name ns=new_class_name>

<obj name=A cmd=enter os=r1 ns=r2>

Момент отправки

Появление нового окна

Если для нового состояния в css-файле не найден стиль, то смысл щелканья мышью другой: это выбор некоторой операции "operation_name". Немедленно отправляется XML-текст

<obj name=A cmd=cmd_name os=old_class_name ns=operation_name>

Команды

Любая команда (или комбинация команд) записывается в поле "команда" в Transition Sheet. Если команд (или комбинаций) несколько, то они перечисляются в этом поле через запятую.

r1 enter,bksp r2

r1 a-b,c-d r2

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

Клавиатурный курсор отменяется - существует только мышиный курсор.

Систематика

Команды бывают зарезервированные браузером и придуманные пользователем (например он может придумать команды cool, fine). Зарезервированные команды могут быть вызваны как непосредственно клавиатурой или мышью, так и из меню, пользовательские команды могут быть вызваны только из меню.

Можно использовать комбинация зарезервированных команд.

Мышиные команды:

• enter - команду подает одиночный щелчек левой клавишей мыши
• bksp - команду подает двойной щелчек левой клавишей мыши
• drag - команда подается объекту каждый раз, когда его зацепили мышью и потащили (drag-and-drop)
• drop - команда подается объекту каждый раз, когда на него положили перетащенный объект (drag-and-drop)
• ins - команду подает обвод мышью объекта (обвод при нажатой левой клавише), место нажатия клавиши мыши не совпадает ни с одним объектом (точнее, совпадает с объектом form). Команда имеет предопределенные последствия - выделение объекта.

Клавиатурные команды - это одновременное нажатие одной или нескольких следующих клавиш:

• enter, bksp
• любая буква английского алфавита

Все комбинации с функциональными клавишами ctrl и alt (не являющимися командами) предназначены не для программиста документа, а для управления браузером. Такое разделение позволяет создавать html-документы, которые будут способны работать в будущих версиях браузера.

Предопределенные последствия

Команда enter, вызванная для некоторых объектов, дает предопределенные последствия.

Если пользователь вывозет bksp во время загрузки документа, то остановится загрузка, а если во время выполнения модуля - остановится выполнение модуля.

Клавиша space (не являющаяся командой) осуществляет drag-and-drop объекта под курсором мыши и посылает две команды: первое нажатие - drag (затем движение курсора клавишами-стрелками), второе нажатие - drop, после второго нажатия подаются команды "drag" и "drop" соответствующим объектам.

Соглашение

Команда h обычно используется для вызова справки для объекта под курсором мыши (h=help).

Меню для объекта

<select id="menu_name">
<option value="cmd_to_r5"> важно      </option>
<option value="cmd_to_r4"> задуматься </option>
<option value="cmd_to_r3"> обычное    </option>
<option value="cmd_to_r2"> бестолково </option>
<option value="cmd_to_r1"> вредно     </option>
</select>

Атрибут src со значением "site/~user/^service/path/filename" тега option указывает изображение, которое должно быть использовано в качестве маркера элементов выпадающего списка.

На меню распространяется действие css-файлов.

Указание в документе

Объект ссылается в атрибуте menu на необходимое ему меню, т.е.

<li menu="menu_name">    какой-то текст </li>

<body menu="menu_name2"> какой-то текст </body>

Упаковка

<link src="./a.htm" type="menu">

<obj name= cmd= os= ns= >