Events and Commands

Events

The AIE Event Module defines a number of structures, keyterms and assembly syntax rules to make it possible to create simple, large and even massive event-drive interactive content.

This section covers the basic scripting commands for directly manipulating class statements within target HTML elements identified by ID or a CSS class attribute.

Standard Event Reserved Terms

EVENT Fixed. Literal An event must be declared, named, have an ID reference and an action. There must be a matching Event Container that uses the same name.

EVENTSTART Fixed. Literal. Must have the event name after it. This declares the start of an Event Container.

EVENTEND Fixed. Literal. Must have the event name after it. This declares the end of an Event Container.

EVENT Usage

This is the required syntax to set up any AIE script within an HTML section or page. The AIE script is contained in a <pre class="aie-events"> ... </pre> element within the body of the HTML.

<pre> is used to allow any text layout to be applied. The pre element is hidden from user view using standard CSS syntax.

.aie-events {display: none; }

<pre class="aie-events">
EVENT name id="abc" click
EVENTSTART name
<!-- Event instructions go here -->
EVENTEND name
</pre>

1. An event name must be exclusive within an HTML document.
2. An event name can be any ID combination of alphanumeric characters and underscore and hyphen. There is no restriction on length.
3. An event must have the ID of the HTML page element that initiates the event.
4. The event must have the action type that launches the event. In this version only click and trigger are supported.
5. Once an event is declared an event container must be defined using EVENTSTART name and EVENTEND name
6. All standard events declarations consist of these three fixed literals. If any is missing an event may run erratically or not at all.
7. There can be any number of events in a script but all must have unique names.
8. The EVENT declaration can occur anywhere in the AIE script. It does not have to be directly associated with the Event Container.

AIE Event Syntax

A command event item consists of:

1. an event time in milliseconds
2. an element reference by ID or class, or using XX if they are self-referencing
3. COMMAND in upper case
4. The required NAME in upper case
5. The CSS selector being targeted by the command in double-quotes, or an event NOT in quotes.

Examples:

0 element-z COMMAND TOGGLECLASS "hide"

0 XX COMMAND TRIGGER event-name

0 XX COMMAND RESET

All of the event item instructions are written in one line separated by a single space

TRIGGER references the target event, not a CSS selector

RESET and RESET all do not have a final event as they are self referencing.

There must be only one space between event instruction line elements. If there is more than one space between any two statements the event will not run.

Standard Event Commands

An event can contain any standard AIE timed instruction or COMMAND

Standard Event Reserved Terms

ONLOAD An onload event is triggered when a page is opened.

COMMAND TOGGLECLASS The CSS class in the target element is changed between two states.

COMMAND ADDCLASS The CSS class in the target element has a class statement inserted.

COMMAND REMOVECLASS The CSS class in the target element has a class statement removed.

COMMAND TRIGGER An event calls and starts another event by Event Name.

COMMAND RESET Resets an event to its initial CSS state.

COMMAND RESETALL Resets a full script and all the events within the script to it initial CSS state.

Usage

ONLOAD

This is a special event to allow something to happen in a controlled manner when a page is opened. It particularly allows operational things such as loading delays for audio and other elements. It allows "scene setting" for larger event scripts.

ONLOAD is used in Event declarations

EVENT eventx id=XX ONLOAD
EVENT eventx id=event1 click
EVENTSTART eventx
<!-- Event instructions go here -->
EVENTEND eventx

This event will be called on page load. Because it does not have an ID the standard XX (no ID required) placeholder is used.

The event being called must be correctly defined in the event declarations. (In this example eventx).

EVENT eventx id=event1 click. It is possible for another event to be tied to the eventx

TOGGLECLASS

This is a standard event.

Syntax: COMMAND TOGGLECLASS

EVENT eventx id="element-y" click
EVENTSTART eventx
0 element-z COMMAND TOGGLECLASS "color"
EVENTEND eventx

ADDCLASS

This is a standard event. Syntax: COMMAND ADDCLASS

EVENT eventx id="element-y" click
EVENTSTART eventx
0 element-z COMMAND ADDCLASS "color"
EVENTEND eventx

REMOVECLASS

This is a standard event.

Syntax: COMMAND REMOVECLASS

EVENT eventx id="element-y" click
EVENTSTART eventx
0 element-z 0 COMMAND REMOVECLASS "color"
EVENTEND eventx

TRIGGER

This is a special event that starts a new event from inside an event..

Syntax: XX COMMAND TRIGGER.

Trigger references another event so does not need an HTML ID or class reference. Trigger uses the XX ID placeholder.

EVENT event-x id="element-x" click
EVENT event-y id="element-y" click
EVENT event-z id="element-z" click
EVENTSTART event-x
1000 XX COMMAND TRIGGER event-y
EVENTEND event-x
EVENTSTART event-y
0 element-x COMMAND ADDCLASS "hide"
1000 XX COMMAND TRIGGER event-z
EVENTEND event-y
EVENTSTART event-z
0 element-x COMMAND REMOVECLASS "hide"
EVENTEND event-z

When element-x was clicked event-x started.

After 1 second event-x TRIGGERed event-y which applied class "hide" to the element with ID element-y.

After 1 more second event-y TRIGGERed eventz which removed the class "hide" from the element with ID element-x

This is an artificial example but illustrates that triggers can be used in a waterfall (or even recursively).

RESET

This is a special event that resets an element to the opening CSS state.

Syntax: COMMAND RESET

EVENT eventx id="element-y" click
EVENTSTART eventx
0 id-z COMMAND RESET
100 .class COMMAND RESET
EVENTEND eventx

In the first ID case only the id-z will be reset to its opening state.

In the second .class case, any and all elements using this class will be reset.

Note that Timeline can be used for these events for any reason. They can all be set to 0 as well.

RESETALL

This is a special event that resets all class statements to the opening CSS state.

Syntax: XX COMMAND RESETALL

EVENT resetall id=reset-button click
EVENTSTART resetall
0 XX COMMAND RESETALL
EVENTEND resetall

This is a very powerful command and can be called from within any Event.