Object has several states with different styles

Agreements

CLASS is STATE

Changes in document are finite automaton. It's more comfortable to set finite automaton as some matrix, instead of writing functions JavaScript, executing these change on screen. Let's consider how write finite automaton for change stile of objects depending of pressing of keyboard's keys and buttons of mouse by user.

Let, for example, there is a forum (let items are list elements <li></li>).

• first phrase
• second phrase
• first answer to second phrase
• second answer to second phrase
• next level of phrases
• third answer to second phrase

We do bookmarks and marks in a books, but how to make marks in forum? If you analyse phrases and sort them into 5 levels (important, for think, usual, foolish, harmfully), then it would be convenient, that "important" are red, "for think" are orange, "usual" are green, "foolish" are black, "harmfully" are grey (silver).

• first phrase
• second phrase
• first answer to second phrase
• second answer to second phrase
• next level of phrases
• third answer to second phrase

How to make such changes in a browser window and send to server? If you locate a set of radio-buttons near each phrase, it's not pleasant for a user.

I offer to click on phrases directly: click increase phrase state by one level, double click reduce phrase state by one level.

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 /* sequence is closed into a ring */

r5 bksp r4
r4 bksp r3
r3 bksp r2
r2 bksp r1
r1 bksp r5 /* sequence is closed into a ring */

r1,r3 enter r2

, enter r2

Default states

Style, which is used by browser by default (when tag class is absent) for not inserted object, is named as default.

For example, transition from default-state looks so

default enter r2

r2 enter default

Blank field "new state" changes previous style into style default.

r1 enter

Listing of commands

Listing of several commands through a comma is possible.

r1 enter,bksp r2

Packing

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

Enclosure

Additional characteristic: colour move

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

Form sends

Tags <li> may be inside tag form, and their attributes name must be specified (in example below - into value A). Click or double-click creates following XML-text (further we shall name such xml-tags as actions).

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

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

Moment of sending

Occurrence of a new window

If style for a new state is not found in a css-file, than sense of click is other: it's a choice of some operation "operation_name". XML-text is sent immediately

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

Commands

Any command (or combination of commands) is written in field "command" in Transition Sheet. If there are several commands (or combination), then they are listed in this field through a comma.

r1 enter,bksp r2

r1 a-b,c-d r2

If style is not specified for final state in a css-file, then final state is interpreted as name of operation, and browser immediately send all actions, which have collected to this moment.

Keyboard's cursor is cancelled - exists only mouse cursor.

Systematics

Commands is diveded into reserved by a browser and invented by a user (for example he can invent commands cool, fine). Reserved command can be called both directly by keyboard or mouse, and from a menu, user commands can be called only from a menu.

Combination of reserved commands is possible to use.

Mouse's commands:

• enter - command is called by single click by left mouse key
• bksp - command is called by double click by left mouse key
• drag - browser give command to object each time, when object have dragged (drag-and-drop) by mouse
• drop - browser give command to object each time, when dragged object have put to it
• ins - command is called by leading a mouse round object (leading a mouse with pressed left key), place of pressing a mouse key does not equal to any object (more precisely, it's equal to object form). Command has predetermined results - inserting an object.

Keyboard commands are simultaneous pressing of one or several following keys:

• enter, bksp
• any letter of English alphabet

All combinations with function keys ctrl and alt (which are not a commands) are intended not for programmer of a document, but for management of a browser. Such division allows to create html-documents, which will able to work in future versions of a browser.

Predetermined results

Command enter, called for some objects, make the predetermined results.

If user call bksp during loading a document, then loading will stop, and if during executing a module - executing a module will stop.

Keys space (which is not a command) make drag-and-drop of object under mouse cursor and sends two commands: first pressing - drag (then movement of cursor by keys-arrows), second pressing - drop, commands "drag" and "drop" is called for an appropriate objects after second pressing.

Agreement

Command h is usually used for call help for object under mouse cursor (h=help)

Menu for object

<select id="menu_name">
<option value="cmd_to_r5"> important </option>
<option value="cmd_to_r4"> for think </option>
<option value="cmd_to_r3"> usual     </option>
<option value="cmd_to_r2"> foolish   </option>
<option value="cmd_to_r1"> harmfully </option>
</select>

Attribute src of tag option with value "site/~user/^service/path/filename" specifies an image, which should be used as a marker of elements of falling list.

Influence of css-files are distributed on a menu.

Instruction in a document

Object refers in attribute menu to its own menu, i.e.

<li menu="menu_name">    any text </li>

<body menu="menu_name2"> any text </body>

Packing

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

<obj name= cmd= os= ns= >