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