WE Javascript example page

WE Javascript is a JS ressources register. It index all javascript (and some specificaly named css) files and offer to load it by AJAX when function is called. It optionnaly can compress JS files in the same time using the Dean Edwards JavaScript's Packer.

This page is used to test several behaviors of WE Javascript (beta version) for Drupal 6.x. First, sorry if everything is not clear in this documentation, or if my english is not pretty good.Hope this module will be usefull. To understand the interest of these tests, you can process like that :

If test succeed, you will see a javascript alert box, then, the source of the tested object will change, replaced by the requested function definition. See into your debug console the AJAX content loaded by WE Javascript.

HOWTO : Create a Drupal module using WE Javascript

1. Create / enable your custom module
2. Add this hook to detect js files :
   /**
 * Implements hook_we_javascript_scripts()
 */
function mymodule_we_javascript_scripts() {
    return we_javascript_scan_module('mymodule');
}
3. Follow HOWTOs for witch kind of script you need

Javascript functions

Functions loaded with WE uses global namespace for functions. After first loading, if you are sure function exists, you can load it directly with my_function();

HOWTO : Add a function to my module

1. Create a Drupal module using WE Javascript (see previous HOWTO)
2. Add your function in a file and name it like : function.my_function.js
3. Your function definition must look like return function() { ... } . This is an anonymous function.
4. Call your function like this $we.call_function("my_function",["arg1","arg2",...]);

Javascript class objects

The button below will execute this test code :

$we.load_class('we_javascript_example_class',{
    async:true,
    complete:function(){
      var obj = new we_javascript_example_class(); 
      obj.test();
}}); 

HOWTO : Add a javascript class to my module

1. Create a Drupal module using WE Javascript (see previous HOWTO)
2. Add your class in a file and name it like : class.my_class.js
3. Your class definition must look like return { ... class object prototype ... } .
4. Load your class like this $we.load_class("my_class");
5. Play with it : obj = new my_class();

jQuery plugin

We have created a standard jquery plugin called example (jquery.example.js), we can use it like that : $(document).example();.

HOWTO : Add a jQuery plugin to my module

1. Create a Drupal module using WE Javascript (see previous HOWTO)
2. Add your jQuery plugin file and name it like : jquery.myplugin.js
3. Have fun : just call your plugin when needed $("selector").myplugin("arg");

Inline javascript

You can add inline javascript by several ways in PHP.

In javascript you can only load an execute javascript name like inline.my_script.js. You can't load complete javascript path via AJAX for security reasons.

If you want to load remote JS files like <script src="yourfile.js"></script> see add_js_link jQuery plugin into WE Javascript tools module.

CSS files

CSS files are parsed by WE Javascript and loaded as a json object. Image files are loaded by javascript and styles declaration are append to a specific <style> tag at the top of the document. CSS content is append only when all contained images are completly loaded.

Images

$we.load_image($we.url_module('we_javascript_example') + '/images/big_one.jpg',{async:true,complete:function() {
  alert('Image loaded,\nyou can use it now,\nin CSS or in a img tag.');
}});

Cascading calls / Code parsing

Most of the time, javascript functions are not called alone. Scripts can be a long imbrication of different calls. For this case, javascripts files are parsed before sending to AJAX, and all functions calls are included into response.

Add related Javascripts

If you want to trigger a script loading and add other script to the package (from an other module for example) you can use the hook_we_javascript_add_script($function_type,$function_name,$script)

Startup package

You can still use the API into Drupal to preload content at page loadin without AJAX call.

See Drupal API section below for more info.

Javascript compression

WE Javascript can compress automatically all javascripts before send it in AJAX. This option can be disabled into WE configuration.

Javascript API

Inheritance plugin was used for define $we object, in order to keep a similar approach of PHP class constructors. I choose to create a separate $we object instead using functions as a jQuery plugin. First to have a separate namespace, secondly beceause any of theses object's method can be used alone, without the main object, and without Drupal too. Yet we can imagine to make this object a part of Drupal javascript object. $we object uses jQuery but has no relation (D'ont be confused by the $ in $we) Here is the list of the most usefull functions of this object :

Drupal API

Here is the list of hooks created by the we_javascript Drupal module.

All the loading functions present into $we object have equivalent into we_javascript module. You can use it to preload all these datas on page startup without add an AJAX call, or to add related data into the AJAX response.