List of articles   Colour designations   Choose language


New control "several styles"


Style = 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>).

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).

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 will make document bulky and will not pleasant for 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

Let's define styles for our phrases. These styles can have different colours, font sizes, etc.

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

Single click by left mouse key call event click, double click by left mouse key call event double. If different tags use the same styles, then they will execute the same transformations. Transition sheet look so

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

r5 double r4
r4 double r3
r3 double r2
r2 double r1
r1 double r5 /* sequence is closed into a ring */
String of table consists of the three fields Fields are separated from each other by blank (space). Each field can consist of several words, listed through a comma. Words of one field follow in any order. Listing of several initial styles through comma is possible. 
r1,r3 click r2
Arbitrary style is designated by sign "comma". 
, click r2
Style, which is used by browser by default (when atribute class is absent in tag) is named as default. For example, transition from default-state looks so 
default click r2
and transition into default-state - so 
r2 click default
Blank field "new state" changes previous style into style default. 
r1 click
Listing of several events through a comma is possible. 
r1 click,double r2
Combination of commands is written by listing of commands through a hyphen. All commands are written down in lower case. 
r1 ctrl-click r2

If an event is called on a not emphasized object, then it change style of only one this object. If an event is called on one of an emphasized objects, then it change style of all emphasized objects (final style of each object depends of its initial style).

Let one html-element (À) is inside another html-element (Â), transition for "Â" is specified in Transition Sheet, and user calls event on "À". If transition for "A"


Let's write down all transition tables in a separate file, for example, "a.txt", and add following html-element inside element head

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

Events

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.

Button enter of keyboard wake event click, button bkspace of keyboard wake event double.

Reserved commands
mouse's keyboard's
left key right key
click, double   ins, del, any letter

Keys space (which does not wake event itself) 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.

Menu for object

Menu for object looks so (to_r5, to_r4, to_r3, to_r2, to_r1 are user's events)

<menu type="popup" id="menu_name">
<option value="to_r5"> important </option>
<option value="to_r4"> for think </option>
<option value="to_r3"> usual     </option>
<option value="to_r2"> foolish   </option>
<option value="to_r1"> harmfully </option>
</menu>
Object refers in attribute menu to its own menu 
<li name=A menu=menu_name>any text</li>
Button alt call popup menu (menu for object under mouse cursor).

Speed

Colours (and only colours) can move smoothly. When it's necessary, that colour changed not by jump, but smoothly, during some interval of time, additional property color-time is used, which defines how many seconds should be this change.

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

Form sends

If objects, which change own style, is in tag form, then browser submits xml-element obj (value of attribute name of object is assigned to xml-attribute name, os = old style, ns = new style). For example, click on a phrase of class "r1" creates the following parcel

<obj name=A event=click os=r1 ns=r2>
Form is sent after change of style of object immediately, without pressing button "submit" Results of all operations, executed by mouse from a moment of last sending, are sent at once in all case. For such purpose, that user know object state before sending a form by pressing button "submit", new objects states are displayed by a new style.



Dmitry Turin



List of articles   Colour designations   Choose language