Dev:Adding Javascript and CSS

From Habari Project

Jump to: navigation, search

If you want your plugin to add Javascript or CSS to a theme or to the admin area, it should be included using the Stack class. Elements that are added to stacks are output in the appropriate place in the HTML.


Adding Javascript

There are two types of javascript that can be added to a page. Javascript includes are separate, pre-written javascript files that are references from the output page. Inline javascript is javascript that is inserted directly into the HTML page on output.

Javascript Includes

The Stack can be used to add an external Javascript file like this:

Stack::add('template_header_javascript', $this->get_url(true) . 'yourscript.js', 'yourscript');

The first parameter, template_header_javascript, is the name of the stack to use, so in this case the Javascript will be inserted where the theme calls $theme->header(). Use the template_footer_javascript to insert into the footer. You then specify the URL of your Javascript file, and finally a name for the entry in the stack. This code should be placed in an appropriate hook, such as theme_header.

Inline Javascript

You can also add Javascript code directly into the page output:

$js = "$(function() {$('body').css('background-color', 'green');});";
Stack::add('template_header_javascript', $js, 'yourscript');

This javascript will be embedded within the page output, rather than included as a separate file.

Including jQuery Manually

As the jQuery Javascript library is included with Habari, it's available for use in plugins and themes. It's located in Habari's scripts directory, and can be included in a theme as follows. jQuery is included on all pages in the admin, so your plugin can use it without including it, though the Stack class is smart enough not to include it twice if you add it anyway.

jQuery is not included by default in any custom theme. To include a reference to the jQuery that Habari supplies in a custom theme:

Stack::add('template_header_javascript', Site::get_url('scripts') . '/jquery.js', 'jquery');

Stack Dependencies

The name of a stack can also be used to indicate dependencies. If your script relies on jQuery, you can indicate that your script should be loaded after it by specifying jQuery as a dependency:

// Make sure that jQuery is loaded first.
Stack::add('template_header_javascript', $this->get_url(TRUE) . 'yourscript.js', 'yourscript', 'jquery');

The dependencies can also be an array of scripts. For example, if your script relies on jQuery and jQuery UI, you would do this:

// Make sure jQuery and jQuery UI are loaded
  Site::get_url('scripts') . '/yourscript.js',

Checking Stack Contents

You might want to load Javascript in the footer. If you do so it's good to check if the Javascript already been loaded by another Stack.

if ( !Stack::has('template_header_javascript', 'jquery') ) {

Commonly Used Javascript Stacks

The following stacks are commonly used to add Javascript to particular places in Habari's output.

Adds Javascript to the admin header.
Adds Javascript to the admin footer.
Adds Javascript to the theme header.
Adds Javascript to the theme footer.

Adding CSS

The following stacks can be used to add CSS.

Adds CSS to the admin.
Adds CSS to the theme header.

The following code adds some CSS to the publish page in the admin for a particular content type.

public function action_admin_header($theme)
  if ( $theme->page == 'publish' && $theme->post->content_type == Post::type('imprint') ) {
    Stack::add('admin_stylesheet', array($this->get_url() . '/imprint.css', 'screen'));
Other Development Pages · Developer Introduction
Personal tools