New Codefight Asset Manager a codeigniter library

2009-03-14 09:52:28Damodar Bashyal

Today i wrote new asset manager for my cms by taking ideas from contributions on codeigniter. This is very useful for my cms. I am going to modify more in the future as i have time. But for now i would like to show how it works.

STEP 1:

I have a config file called MY_config. And, i autoload this config on config/autoload.php

<?php
$autoload['config'] = array('MY_config');
?>

Also, i autoload my new library in this file, along with other libraries as:

<?php
$autoload['libraries'] = array('database', 'session','login', 'assets');
?>

STEP 2:

Now i need to edit MY_config.php file.

<?php
   /*
    * DEFFINE BELOW ITEMS FOR ASSETS MANAGEMENT
    * dir is relative to base dir
    * filenames should not have extensions i.e. no .css or .js
    */

    //Base Path where index.php or admin.php is located
    $config['cf']['base_path'] = dirname(FCPATH) . '/';

    /*
    * assets directory relative to base_path above
    * trailing slash (/) required if not empty e.g. 'assets/'
    * if empty then just ''
    */
    $config['cf']['assets_dir'] = 'assets/';
  
   /*
    * js (script) directory
    * No trailing or leading slashes (/)
    */
    $config['cf']['js_dir'] = 'js';
    
   /*
    * css directory
    * No trailing or leading slashes (/)
    */
    $config['cf']['css_dir'] = 'css';
    
    //do js and css located in multifolder like admin, frontend, common
    //default is false
    $config['cf']['is_js_css_split'] = true;
    
   /*
    * if is_js_css_split is true, define directories they can be found according to preferences in an array
    * e.g. css can be found at: assets/common/css or, assets/admin/css etc...
    * Script stops search when it finds one.
    */
    $config['cf']['js_css_dir'] = array(
    'frontend',
    'common',
    'admin'
    );
  
   /*
    * Define css that need to be autoloaded in every page
    */
    $config['cf']['defaults']['css'] = array(
    'all' => array('helper','header', 'menuLeft', 'jquery.jdMenu', 'footer')
    );
  
   /*
    * Define js that need to be autoloaded in every page
    */
  $config['cf']['defaults']['js'] = array('jquery', 'jquery.dimensions', 'jquery.positionBy', 'jquery.bgiframe', 'jquery.jdMenu');
?>

STEP 3:

Now on controller, or view file load css and js as follow:

<?php
    $assets = array();

    //load all required css
    //if media type not defined, screen is default.
    //$assets['css'] = array('admin','swiff','box','upload');
    $assets['css'] = array('all' => array('page', 'special'));

    //load all required js
    $assets['js'] = array('xyz','abc');

    $this->assets->load($assets);
?>

STEP 4:

Now its time to echo loaded css and js. Put the below code wherever you want to echo it. definitely its between <head> & </head>:

<?php
$this->assets->get();
?>

It'll echo css|js as: If you view source of this page, you'll understand what i'm talking about.

<link rel=" stylesheet" href="http://www.codefight.org/ assets/frontend/css/page.css" type="text/css" media="all" />
...
<script type="text/javascript" src="http://www.codefight.org/assets/frontend/js/jquery.js"></script>
...