j-Exec — Total.js

j-Exec is part of the jComponent library from Total.js. You can find more information about j-Exec on componentator.com or GitHub.

This component is singleton and works for the whole HTML document, where it is used. After adding a class exec, exec2, or exec3 to the element this component captures a click event (or double-click and right-click, depending on usage) and executes a method that you define.

How to use j-Exec

As first step you have to know how to use jComponent library. I wrote about it in my previous blog, so for more information please read this blog post.

Initialization
It is very straightforward to use j-Exec in your applications and here I show you an example.

First of all, you have to initialize it in your code. A good practice is to initialize your singleton components on the top of your document (I have them as the first thing in my body element). It is clear and easy to debug when you know where to look for your components.

<ui-component name="exec"></ui-component>

After this, you can use j-Exec on every element you want as many times as you need.

Usage
To make j-Exec work it is important to add two things to your element. You have to add class exec to a particular element and attribute data-exec, which must contain the method you want to execute.

Example:

This example will include code with plugins, so if you want more information about them, please read my previous blog or documentation (or the example on componentator.com is without plugins).

<ui-plugin path="example">
  <div class="exec" data-exec="?/click">Click</div>
</ui-plugin>

After clicking on our element (in this case, the div element with the text Click), the method click from our PLUGIN will be executed.

PLUGIN('example', function(exports) {
  exports.click = function(element, event) {
    console.log('Click');
  };
});

This is JavaScript PLUGIN with one method click. After executing this method word click will appear in our console. As you can see you can catch the_ element_ which was clicked and the event which invoked this method.

Double-click and right-click
If you want to capture double click or right click you can use the same code as in the example above with two little changes in HTML code. These changes would be class and attribute.

Double-click

<ui-plugin path="example">
  <div class="exec2" data-exec2="?/click">Click</div>
</ui-plugin>

Right-click

<ui-plugin path="example">
  <div class="exec3" data-exec3="?/click">Click</div>
</ui-plugin>

Redirect

j-Exec can be also used directly for redirecting. After clicking on an element with class exec will be executed method REDIRECT().

Example:

<ui-plugin path="example">
  <div class="exec" data-href="home">Click</div>
</ui-plugin>

Clicking on our div element with the text Click will execute method REDIRECT('/home/'). This method performs redirects to relative path /home/. If you want more information about this method, please read the documentation.

Double-click and right-click
Double-click and right-click work the same as in the example with invoking our method. We have to change class and attribute.

Double-click

<ui-plugin path="example">
  <div class="exec2" data-href2="home">Click</div>
</ui-plugin>

Right-click

<ui-plugin path="example">
  <div class="exec3" data-href3="home">Click</div>
</ui-plugin>

Video tutorial