@megant/aktion NPM

aktionJS

Create complex interactions only in HTML5 and CSS3

(for sitebuilders who don't plan to understand a single line of javascript ever)

Long story short, it's simply:

<button data-aktion-value="newClass">Click me and my class will change!</button>

<!-- Results -->
<button data-aktion-value="newClass" class="newClass">Click me and my class will change!</button>

or:

<div>Class comes here!</div>
<button data-aktion-value="newClass" 
        data-aktion-destination-selector="div">
        Click me and I will change the class of the div!
<button>

<!-- Results -->
<div class="newClass">Class comes here!</div>

or:

<div class="changeMe hidden">I'm visible!</div>
<button data-aktion-value="hidden" 
        data-aktion-type="remove"
        data-aktion-event="mouseover"
        data-aktion-destination-selector=".changeMe">
        Hover me and I will show that div!
<button>

<!-- Toggles -->
<div class="changeMe">I'm visible!</div>

Check out some cool examples!

The only thing you have to do to make it come true is:

<script src="aktion.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var aktion = new Aktion();
    });
</script>

How does it work?

The basics

First of all choose an HTML element you want to make interactive! You must determine a "source" and a "destination" HTML element first. It means you want to invoke an action to the destination by doing something on the source. Let's say you have a button! That's your source. Sources are defined by the data-aktion-soure-selector HTML attribute with a valid CSS selector. According to the nature of CSS selectors, source (and destination) can represent one or more DOM elements. The destination is defined by data-aktion-destination-selector. It's like:

<button
    data-aktion-source-selector="button"
    data-aktion-destination-selector="button">
    I'm the "source"
</button>

Of course in this case you can omit source or destination attributes. If you don't want to use data-aktion-source-selector, it means the source is automatically the button element itself.

<button
    data-aktion-destination-selector=".destination-element">
    I'm the "source"
</button>
<div class="destination-element"></div>

If you omit data-aktion-destination-selector attribute, it means the destination is automatically selected by data-aktion-source-selector (in this case the button itsef, because source selector is also omitted).

<button>
    I'm the "source" and the "destination"
</button>

OK. Let's do something real with that destination, giving a class to it for example. In the source, data-aktion-attribute determines the destination's HTML attribute which will be affected by the invoked action. It should be the "class" value in our case. Source's data-aktion-value contains the value which will be given to destination someway. Now it's the name of the class ("newClass").

<button
    data-aktion-attribute="class"
    data-aktion-value="newClass"
    data-aktion-destination-selector=".destination-element">
    I'm the "source"
</button>
<div class="destination-element"></div>

<!-- Click on the button results -->
<div class="destination-element newClass"></div>

Because the default data-aktion-attribute is "class", omitting that will result the same in the example above. As you may notice the class name not only added but also removed when button was clicked. This effect originates from the data-aktion-type attribute which has the "toggle" default value. So if I only want to add that class name for the first time when action is invoking and don't need toggling effect later, it looks like:

<button
    data-aktion-type="add"
    data-aktion-value="newClass"
    data-aktion-destination-selector=".destination-element">
    I'm the "source"
</button>

But what can I do if I want to associate aktions with events other than "click"? A "mouseover" for example, or some custom events? It's possible with the data-aktion-event attribute where you can set any kind of native javascript events and custom events provided by aktionJS.

<ul class="list"
    data-aktion-source-selector=".list li"
    data-aktion-value="hovered"
    data-aktion-event="mouseover">
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
</ul>

Advanced usage

Wanna play with some cool examples?

Available data-aktion-* attributes

data-aktion-name: Unique action name (default: autogenerated)
data-aktion-type: Action type (can be: 'set'|'toggle'|'add'|'remove'|'trigger-event', default: 'toggle')
data-aktion-value: String value which will affect the attribute value of the destination DOM element(s) (required)
data-aktion-value-type: The attribute value of the destination DOM element(s) can be a "static" string, or the name of an "attribute" of the source DOM element which stores the value (can be 'static'|'attribute')
data-aktion-event: Native/custom event fires up action (default: 'click')
data-aktion-event-threshold: Custom event (swipe) threshold value in pixels (default: 10)
data-aktion-source-selector: A valid DOM selector which determines the source DOM element(s) (default: this)
data-aktion-destination-selector: A valid DOM selector which determines the destination DOM element(s) (default: this)
data-aktion-trigger-before: Action will trigger before this named action, which has the same source selector (default: false)
data-aktion-trigger-after: Action will trigger after this named action, which has the same source selector (default: false)
data-aktion-attribute: The attribute of the destination DOM element, which will be affected (default: 'class')
data-aktion-interval-time: Time of the function calling interval (in milliseconds). Currently used at custom scroll event checking (default: 100)
data-aktion-extra-condition: Function name which determines extra condition for the execution of the action (default: true)

Custom events provided by aktionJS

(can be used in data-aktion-event attribute)

scroll-start: Scrolling has been started
scroll-stop: Scrolling has been stopped
scroll: Scrolling is in progress
scroll-up: Scrolling up is in progress
scroll-down: Scrolling down is in progress
scroll-dir-change: The direction of the scrolling has been changed
scroll-dir-change-up: The direction of the scrolling has been changed to up
scroll-dir-change-down: The direction of the scrolling has been changed to down
scroll-reached-top: The scrolled element has reached its top position
scroll-reached-bottom: The scrolled element has reached its bottom position
swipeup: Event triggers when element has been swiped up (by touch)
swipedown: Event triggers when element has been swiped down (by touch)
swipeleft: Event triggers when element has been swiped left (by touch)
swiperight: Event triggers when element has been swiped right (by touch)
anim-end: Event triggers when CSS3 animation of the source element has ended
trans-end: Event triggers when CSS3 transition of the source element has ended

Custom data-aktion-source-selectors

window: The window DOM object
document: The document DOM object

Known limitations/issues

data-aktion-type="trigger-event" cannot trigger scroll events (because those are not classical events)
Event delegation is attached to "body" DOM element (not document)

interact javascript animation html5 css3 event swipe scroll

@everything-registry/sub-chunk-593

0.1.3

7 years ago