Another Asset Helper with Dependency for CodeIgniter

A huge collection of JQuery, Mootools and other javascript frameworks plugins helps enhancing the user experience.  But everything comes with a drawback. Too many plugins and their dependant js and css files. Usually when you start working on a real life project, sooner it gets crowded with over 10 to 15 js files cause you are using many plugins like: lightbox, accordion, portlet, ajax form, form validation .. etc.  An asset helpers comes up with a helping hand. It helps to manage the js, css files and you can load particular js, css files necessary for that particular page.

I was looking for a suitable solution for such asset management. I found some, but those focused on managing the folder wise specification of js and css files on individual plugins. Still,  in the matter of loading particular plugins, you have to select the js & css files for that particular plugin individulally.

Here is an idea with a library to manage assets based on plugins. It mainly focuses on dependency and plugin component.  The plugins totally depends on the config file set by the developer.  Here is the config file:

$config[‘component_location’] = array(
‘js’ => ‘rabbit-assets/’,
‘css’ => ‘css/’,
);

$config[‘component_mandatory’] = array(
‘template.css’
);

$config[‘component_list’] = array(
‘thickbox’ => array(
‘resource’ => array( ‘thickbox.js’, ‘thickbox.css’ ),
‘dependency’ => array( ‘jquery.js’ ),
),
‘facebox’ => array(
‘resource’ => array( ‘facebox.js’, ‘thickbox.js’, ‘facebox.css’),
‘dependency’ => array( ‘jquery.js’ ),
)
);

First the component location has to be set relative to base_path(). Then you can set the mandatory js & css files. These files will always be in views. Then in component list define the plugins with their resource of js and css files and their dependent js or css files.

Now in controller load the library and helper:

$this->load->library(‘component’);
$this->load->helper(‘component’);

To load a particular component call :  $this->component->add_component(‘thickbox’);  To add multiple components write again: $this->component->add_component(‘facebox’);

At last to print the <link> and <script> files in your view just write this in your view file:

<?=print_components();?>

The library itselft priotorizes and prints js and css files. It handles duplicate files too.

I am planning to integrate it with some other features from other Asset libraries but it will be great if someone adds this to their asset library.

Please comment if there is any bugs.      Source Code

Advertisements

8 thoughts on “Another Asset Helper with Dependency for CodeIgniter

  1. Mark Pemberton says:

    Getting some errors on this line in the library:
    var $component_list = array( ‘js’ = array() , ‘css’ => array() );

    Parse error: parse error, expecting `’)” in C:\wamp\www\pm_ci\application\libraries\component.php on line 26

    Thoughts?

  2. tohin says:

    Change
    var $component_list = array( ‘js’ = array() , ‘css’ => array() );
    to
    var $component_list = array( ‘js’ => array() , ‘css’ => array() );

    I have uploaded the code into server ..

  3. Mark Pemberton says:

    Found one more typo in libraries/component.php. Line 139 replace css with js:

    if( isset( $this->component_list[‘js’][$prior] ) == false ) continue;

    Going to look at Carabiner. And just when I was getting comfortable with your code…. 🙂

    Cheers.

  4. tohin says:

    😦 .. damn, i lost a potential fan .. 😦 .. haha
    thanks for finding the typo. This asset library was just one of the starter ideas.. i wanted to use minify, combine css/jss files .. but later i found carabiner which supported all my next todo lists.. 😦 .. if you use carabiner well planned then priority will not be an issue for you. best of luck 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s