ftd
The change in the state of an object is known as an Event. In fastn
, there are
various events which represents that some activity is performed by the user. A
function reacts over these events and allow the execution. This process of
reacting over the events is called Event Handling.
We can create our own function or use built-in function
.
fastn
on-click
on-click
event can be used to call a function when the user clicks on the
element.-- boolean $show: true
-- ftd.text: Click me!
$on-click$: $ftd.toggle($a = $show)
-- ftd.text: Hide and Seek
if: { show }
on-click-outside
on-click-outside
event can be used to call a function when the user
clicked outside the element-- boolean $show: false
-- ftd.text: Click me and click outside then
$on-click$: $ftd.set-bool($a = $show, v = true)
$on-click-outside$: $ftd.set-bool($a = $show, v = false)
-- ftd.text: Hide and Seek
if: { show }
on-mouse-enter
on-mouse-enter
event can be used to call a function when the mouse cursor
enters the element.-- boolean $show: true
-- ftd.text: Enter mouse cursor over me
$on-mouse-enter$: $ftd.toggle($a = $show)
-- ftd.text: Hide and Seek
if: { show }
on-mouse-leave
on-mouse-leave
event can be used to call a function when the mouse cursor
leaves the element.-- boolean $show: true
-- ftd.text: Enter mouse cursor over me
$on-mouse-enter$: $ftd.set-bool($a = $show, v = true)
$on-mouse-leave$: $ftd.set-bool($a = $show, v = false)
-- ftd.text: Hide and Seek
if: { show }
on-input
The on-input
event can be used to call a function when the user inputs
something into the element.
VALUE
which is
available for ftd.text-input
component. This gives the value typed by user on
this element.-- string $txt: Fifthtry
-- ftd.text: $txt
-- ftd.text-input:
placeholder: Type any text ...
type: text
width.fixed.px: 400
border-width.px: 2
$on-input$: $ftd.set-string($a = $txt, v = $VALUE)
on-change
The on-change
event can be used to call a function when the value of the
element changes and focus is moved out of the element.
VALUE
which is
available for ftd.text-input
component. This gives the value typed by user on
this element.-- string $txt: Fifthtry
-- ftd.text: $txt
-- ftd.text-input:
placeholder: Type any text ...
type: text
width.fixed.px: 400
border-width.px: 2
$on-change$: $ftd.set-string($a = $txt, v = $VALUE)
on-blur
on-blur
event can be used to call a function when an element loses focus.on-focus
on-focus
event can be used to call a function when an element receives
focus.-- boolean $flag: false
-- ftd.text-input:
placeholder: Type any text ...
type: text
width.fixed.px: 400
border-width.px: 2
background.solid if { flag }: $inherited.colors.background.step-1
background.solid: $inherited.colors.background.step-2
$on-focus$: $ftd.set-bool($a = $flag, v = true)
$on-blur$: $ftd.set-bool($a = $flag, v = false)
on-global-key[<hyphen-seperated-keys>]
on-global-key
event can be used to call a function when gives keys are
pressed simultaneously. For instance, on-global-key[ctrl-a-s]
triggers the
event when keys ctrl
, a
and s
are pressed simultaneously.-- boolean $flag: true
-- ftd.text: Press ctrl, a and s simultaneously
color: purple
color if { flag }: green
$on-global-key[ctrl-a-s]$: $ftd.toggle($a = $flag)
on-global-key-seq[<hyphen-seperated-keys>]
on-global-key
event can be used to call a function when gives keys are
pressed sequentially i.e. one after another. For instance,
on-global-key-seq[ctrl-ctrl-ctrl]
triggers the event when keys ctrl
, ctrl
and ctrl
are pressed sequentially.-- boolean $flag: true
-- ftd.text: Press ctrl, ctrl and ctrl sequentially
color: purple
color if { flag }: green
$on-global-key-seq[ctrl-ctrl-ctrl]$: $ftd.toggle($a = $flag)