Clock without variable binding
This example uses a JavaScript expression in an action value to create a mobile-friendly interactive clock.
The syntax for inserting an expression is: {= javascript expression}. An expression is simply the right-hand side of an equation in JavaScript, which, in this case brings back a string containing the local time for rendering (or in other words, drawing).
There are explanatory notes for this clock further down the page.
Clock without variable binding
- The draw event on #clock2 is a special Cause event. Draw events are triggered when an element is first drawn on the page. In this example, we put a CSS selector before it as we also trigger it later on in the code to simulate a ticking action.
- trigger runs the specified event on the same element. In this example, the draw event is run on the element #clock2.
Same example but with explanatory comments:
body:not(.clockOff) #clock:draw { /* Run every 1s after #clock element is drawn if clockOff class is not in body tag. */
render: {= new Date().toLocaleTimeString() =}; /* Draw the time. */
trigger: draw after 1s; /* Run this event again after one second to keep the clock ticking. */
}
#clock:touchstart, #clock:mousedown { /* Runs when you mousedown or touch the clock. */
add-class: .clockPress; /* Put press styling on the clock. */
prevent-default: true; /* Needed for the touch event to work consistently on mobile. */
}
#clock:touchend, #clock:mouseup { /* Runs when you come up from touching or mouse-up on the clock. */
body {
toggle-class: .clockOff; /* Add or remove the clockOff class and styling from the body tag. */
}
remove-class: .clockPress; /* Remove the press styling on the clock. */
trigger: draw after stack; /* Run the draw event on the clock element after the other actions are done. */
prevent-default: true; /* Needed for the touch event to work consistently on mobile. */
}
Note that you can also use JavaScript expressions in target selectors, conditionals and inside components.