autoload javascript and css in extended controller

[eluser]raiah[/eluser]
Hi, How can I autoload javascript and css in extended controller? Any pattern please?
TIA

[eluser]nimimca[/eluser]
Some of the javascript and Cascading sheets are helping us to do autoload but I don't know about it. I welcome if someone explain about it here.

[eluser]jonez[/eluser]
There's a few ways to do this, depending on your client side requirements. Here's how I did it;

1. Extend CI_Controller and create methods called add_script, add_style, get_scripts, get_styles. Create a private variable called data that's a key pair array with two keys, one called scripts and one called styles (arrays).

2. In the construct of MY_Controller, include all the system wide assets.

3. In extended controllers, include all the module level assets.

4. Extend CI_Loader, add a method called page. Normally to create a view you use the loader class to call view, which returns a partial. Our new page method will be used to take a partial (page body) and compile it into a complete page. When this method is called, it calls get_scripts/styles (they return arrays of file paths built from calling add_script/style) and builds the script/style tags in the header.

Using a setup like that, you can define arrays of required files and have them automatically included. Depending on your requirements or number of assets, you have a few options to speed this along.

1. If you only have 1 script per module (or one base and one module) and always name your script/style the same thing you don't have to add files manually. In that case you can do a file exists check and include them dynamically. Ex: if you name all your JS files script.js, in your load->page method you can check the router's class and guess the file path to see if a script.js exists for that module, and include if it does.

2. If you have lots of scripts, include order will matter. This is the case I found myself in, so my private data variables are numeric arrays. Ex: styles( 0 => array( ... ), 1 => array( ... ) ). 0 is app wide assets, 1 is module level assets, etc. Having included assets grouped allows you to include them in the correct order.

A setup like this has other benefits. I compartmentalize my JS and use inheritance to build client side modules. This results in a lot of small files being included. To keep with best practices on the number of HTTP requests, I added two more options:

1. ENV=DEV: include the files individually, and add a ?t=1231231290 timestamp to the file name. In dev, this prevents files from ever being cached.

2. ENV!=DEV: Loop through all the files, merge/minify them into a single file, output the file with a modified stamp (to check for stale cache), and include the combined result. The first page view builds the cache, subsequent page views verify the cache is up to date and serve it (or regenerate if needed).

I chose the library Minify http://code.google.com/p/minify/ to handle CSS/JS minification.

I've been meaning to package up my modification, it's all core extensions and a few new methods that mimic other CI methods. If there's any interest I'll try to get it up on Github.

Hope this helps!

[eluser]raiah[/eluser]
Thanks Guy will try this out