EDIT: I’ve created a version 2 of this library here http://ellislab.com/forums/viewthread/181405/ - I’ve added a lot of features that were requested here, so if you liked this version, please check it out. Thanks!
I’ve created a library to manage javascript and css files and code snippets so that it’s very easy to set default files and include different files for individual pages.
You can download the package here http://www.darkhousemedia.com/snippets/ci/External_Library.zip
The usage is pretty simple (that’s the whole idea, right?). First, you should autoload the External library so that you don’t have to add it to each controller’s constructor.
In a controller, you would use it like this:
class Home extends Controller {
function Home(){
parent::Controller();
}
function index(){
$this->external->set(array(
'css' => 'css/form.css',
'js' => 'js/swfobject.js'
));
//or you can do this
$this->external->set_css('css/form.css');
$this->external->set_js('js/swfobject.js');
$this->load->view('home');
}
}
If you have multiple files, you can do this
class Home extends Controller {
function Home(){
parent::Controller();
}
function index(){
$this->external->set(array(
'css' => array('css/master.css', 'css/form.css'),
'js' => array('js/jquery.js', 'js/swfobject.js')
));
$this->load->view('home');
}
}
But that’s not all, it also allows you to add javascript and css that may not necessarily reside in their own files. And you can also add IE and IE6 specific items which uses conditional comments, like so
class Home extends Controller {
function Home(){
parent::Controller();
}
function index(){
$this->external->set(array(
'css' => array(
'css/master.css',
'css/form.css',
array('css/ie.css', 'ie'),
array('css/ie6.css', 'ie6'),
array('css/print.css', 'print'), //this would only be used if a user printed the page
array('.hide { display: none; }', 'custom'),
array('#ie { background-color: #f00; }', 'ie_custom'),
array('#ie6 { display: block; }', 'ie6_custom')
),
'js' => array(
'js/jquery.js',
'js/swfobject.js',
array('js/ie.js', 'ie'),
array('js/ie6.js', 'ie6'),
array('alert("custom");', 'custom'),
array('alert("You are using IE");', 'ie_custom'),
array('alert("Stop using IE6");', 'ie6_custom')
)
));
$this->load->view('home');
}
}
Then all you need to do in your view is this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html >
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<base href="<?=base_url()?>" />
<title>My Site</title>
<?php $this->external->run(); ?>
</head>
<body>
Finally, it also uses a config file, so in the config folder you can add the file external.php with the following code
$config = array(
'all' => array(
'css' => array(
'css/reset.css',
'css/shortcuts.css',
array('.png_bg {behavior: url(iepngfix.htc)}', 'ie6_custom')
),
'js' => array(
'js/functions.js',
array('var base_url = "'.base_url().'";', 'custom'),
array('js/ie_png_fix.js', 'ie6')
)
),
'default' => array('css' => 'css/master.css'),
'admin' => array('css' => 'css/admin/master.css')
);
So as you can see I’ve set mine up with 3 keys in an array. The ‘all’ key contains the javascript and css items that I want to load on every page of my site.
The ‘admin’ key contains all the items it want to load if the user is in a uri that can be ‘admin/*/*/*...’. This allows you to setup groups of items based on the uri. In fact, you could control ALL of the javascript and css for your entire site from this one file if you wanted. So, if you had something setup like ‘admin/login’ => array(...) and the user was trying to login to the admin, it would use all of the items in the ‘admin/login’ key, however it would NOT use any of the ones in the ‘admin’ key. It finds the most specific key relating to the uri and then doesn’t look any further.
If it doesn’t find any items to use based on the uri, then it will use the ‘default’ key. I set mine up so the homepage and any other page that isn’t in the admin area will use the ‘css/master.css’ file.
I hope this isn’t too confusing for anyone, I tried to make it as easy as possible to manage your external files and snippets. I know I run into this a lot, so this library has certainly sped up my development time.
If anyone has any questions, feel free to ask. Enjoy, and happy development!
