H-SMILE core. CSSS! (css-script) language.
DOM element events
CSSS! extends classic CSS by the following activation attributes that define event handlers:
hover-on!
- code contained in this attribute is invoked when element is getting :hover state. In other words on MOUSE_ENTER event;
hover-off!
- is fired MOUSE_LEAVE event;
active-on!
- is fired when the element gets :active state (e.g. on MOUSE_DOWN).
is-on-icon()
indicator function can be used in this event handler.
active-off!
- is fired when the element looses :active state (e.g. on MOUSE_UP).
is-on-icon()
indicator function can be used in this event handler.
focus-on!
- is fired when the element gains input focus.
focus-off!
- is fired when the element looses input focus.
key-on!
- is fired when the element receives key-down event, key-code() function returns code of the key.
key-code()
indicator function can be used to get value of key pressed. Use key code constants to define code of the key if needed.
Example: key-code() == 'RETURN' ? self.ok = true;
key-off!
- is fired when the element receives key-up event. Use key-code() function to get code of the key pressed;
click!
- is fired as a result of click events: BUTTON_CLICK, HYPERLINK_CLICK, etc. Note: that to be able to receive this event element shall have behavior: button , hyperlink or clickable assigned.
assigned!
- this event is fired when the element gets this style. In other word when value of the
assigned!
attribute changes.
value-changed!
- is fired when value of the [input] element is getting changed. E.g. EDIT_VALUE_CHANGED, BUTTON_STATE_CHANGED and SELECT_SELECTION_CHANGED are causing this event.
validate!
- is not an event in common sense but rather a helper method for the behavior:form to do validations of input elements before submission.
timer!
- is used for defining code that will run on timer event. Timers are created and destroyed by start-timer(ms) and stop-timer() methods.
animation-start!
- is fired after
element.start-animation()
method is called.
animation-end!
- is fired when animation finished.
animation-step!
- fired on each animation step. This handler shall return integer - number of milliseconds - delay of the next step if element.start-animation() was called without duration parameter. Global function
morph()
is available in context of the animation-step!
event handler.
This function takes three parameters: res = morph("ease-function-name", start-value, end-value )
and produces value according to the ease function and internal animation progress state variable. Here is a list of names of ease functions supported by the morph():
- "quad-in", "quad-out", "quad-in-out",
- "cubic-in", "cubic-out", "cubic-in-out",
- "quart-in", "quart-out", "quart-in-out",
- "quint-in", "quint-out", "quint-in-out",
- "sine-in", "sine-out", "sine-in-out",
- "expo-in", "expo-out", "expo-in-out",
- "circ-in", "circ-out", "circ-in-out",
- "elastic-in", "elastic-out", "elastic-in-out",
- "back-in", "back-out", "back-in-out",
- "bounce-in", "bounce-out", "bounce-in-out",
size-changed!
- fired after the element gets new size.