Actions

YOI Actions provide a CSS-like interface for pre-defined JavaScript functions.

Purpose

Use an action to make one element interact with another element. For example, add an action to a <button> to hide a <div> on click.

The Action Attribute

Add an action-attribute to an element to make it execute an action. You must always add at least one key/value pair: the action name and the target element selector:

<div yoi-action="Actionname:#id;">...</div>

Actions are limited! You can only use one action per element. If you need more complex interactivity, it’s much better to write your own JavaScript.

Example

Add the action Hide to a <button> and set the target element selector to match the #id of the element we wish to hide:

<!-- example -->
<button class="button button--large" yoi-action="Hide:#example-1;">Hide #example-1</button>
<div id="example-1" class="m-t-4">
    <div class="box p-4 c-gray-15 fs-2">#example-1</div>
</div>

Parameters

Formatting

Make sure you write the parameters correctly, otherwise the action might not work. If you know CSS, the syntax should look familiar to you:

An action may accept many parameters.
An action must have at least one parameter.
Write parameters in key/value-pairs.
Keys are seperated from values with a colon.
Each key/value-pair must end with a semicolon.
This is how you write a valid key/value-pair: key:value;.
If at least one value contains special characters (slashes, colons etc.), wrap all values in single quotation marks: foo:'some//value:with_special?charactes'; bar:'12'; foobar:'abc'.
Values must not include single nor double quotation marks!
Write Parameters in any order you prefer.
Action names start with an upper case character.

The Target Value

Set the target value to a valid CSS selector to select the element you wish to manipulate.

The Target Value self

Use the keyword self (written in lowercase) to select the very element you added the action to:

<!-- example -->
<button class="button button--large" yoi-action="Hide:self;">Hide Myself</button>

The Target Value parent

Use the keyword parent (written in lowercase), to select the parent (= enclosing) element of the element you added the action to:

<!-- example -->
<div class="box p-4">
    <p class="fs-2 c-gray-15 m-b-2">This is the parent element of the button.</p>
    <button class="button button--large" yoi-action="Hide:parent;">Hide my Parent Element</button>
</div>

The on Parameter

By default, every action is executed on click. Use the on parameter to call the action on another event:

<!-- example -->
<p class="fs-2 c-gray-15 m-b-4">Use the buttons and the text input to make the example target blink:</p>
<div class="buttons">
    <button class="button button--large" yoi-action="Blink:#example-2;">click</button>
    <button class="button button--large" yoi-action="Blink:#example-2; on:dblclick;">double-click</button>
    <button class="button button--large" yoi-action="Blink:#example-2; on:mouseover;">mouseover</button>
    <button class="button button--large" yoi-action="Blink:#example-2; on:mouseout;">mouseout</button>
</div>
<input class="input input--large w-20 m-t-2" type="text" value="focus" yoi-action="Blink:#example-2; on:focus;" />
<div id="example-2" class="m-t-4">
    <div class="box p-4 c-gray-15 fs-2">#example-2</div>
</div>

Option Parameters

Some actions implement options. Available options are listed on each action’s documentation page. In the following example, the target element gets hidden with an optional slide-transition:

<!-- example -->
<p class="fs-2 c-gray-15 m-b-4">Click the button to hide the target element with a fade-out transition:</p>
<button class="button button--large" yoi-action="Hide:#example-4; fx:fade-out;">Hide #example-4</button>
<div id="example-4" class="m-t-4">
    <div class="box p-4 c-gray-15 fs-2">#example-4</div>
</div>

The trigger Parameter

There are two ways to use actions:

Add yoi-action to an element to let it control another element.
Add yoi-action to an element to listen to an event fired by another element. The other element becomes the trigger.

The first method is used in all previous examples. However, sometimes the second method might make more sense:

<!-- example -->
<p class="fs-2 c-gray-15 m-b-4">An example element will <i>listen</i> to the <code>yoi-switch-on</code> and <code>yoi-switch-off</code> events and hide itself accordingly:</p>
<div id="exampleTrigger-1" class="switch switch--large" yoi-switch></div>
<div class="m-t-4" yoi-action="Hide:self; on:yoi-switch-on; trigger:#exampleTrigger-1;">
    <div class="box p-4 c-gray-15 fs-2">Hello.</div>
</div>

Components Can Have Actions, Too!

In addition to YOI global actions described in this chapter, many YOI components expose their own actions. Available actions are listed on each component’s documentation page. In the following example, one switch toggles another switch:

<!-- example -->
<p class="fs-2 c-gray-15 m-b-4">Use the first switch to toggle the second switch:</p>
<div class="switch switch--large" yoi-switch yoi-action="Switch.toggle:#exampleSwitch;"></div>
<div id="exampleSwitch" class="switch switch--large" yoi-switch="state:on;"></div>

Edit this page