Agile Toolkit Univ Chain

Often developers behave very neatly on the server - all functions arranged into classes, no global variables; but when it comes to JavaScript functions are defined in a very messy way, they are scattered across several files and are defined in global content.

Agile Toolkit relies on jQuery library but it does want number of it's own functions to be accessible. To implement this, $.univ() function is defined which returns a copy of Universal chain object.

Universal object defines quite a few functions which you can use in your application. For example, executing this in JavaScript console (inspector or firebug) will show a success message on your current page:

$.univ().successMessage('Hello World');

Methods defined inside univ() chain by default return reference to the same chain, so that you can perform multiple actions:

$.univ().alert('hello').dialogOK('agile','world');

Try some more examples:

$.univ().dialogURL('test','/learn');
$.univ().confirm('are you sure').alert('you are');

To see other functions, which are already defined in univ.js chain, see it's source.

Extending Univ() chain

How to override methods in Univ chain?

Start by creating a new file inside templates/js/ folder called mychain.js. Place the following inside the file:

$.each({

  myfunc1: function(a){
    alert(a);
  },

  myfunc2: function(){
    this.jquery.fadeOut();
  }

},$.univ._import);

Pay attention to missing comma. Inserting comma after last function might break Internet Explorer browsers. Next you would need to include this file, therefore you need to call js()->_load('mychain');

The trick is to only call this when you really need it. The standard univ() chain is commonly used and is included inside Application class. In your case you might want to include your file only for particular page, particular view or even from controller.

The 'myfunc2' references this.jquery which is automatically initialized to the selector on which you have executed univ(). For instance after the code above you should be able to fade-out all text from your page by calling:

$('p').univ().myfunc2();