Difference between revisions of "Scripts Class"

Revision as of 23:30, 19 March 2011

Introduction

As of version 1.8.0, Geeklog introduced the Scripts class. The Scripts Class has been designed to allow themes and plugins to easily add JavaScript, JavaScript files and CSS files to the header and/or footer of a page. It also allows plugins and themes to enable the use of jQuery and the jQuery UI plugin. By default Geeklog will place all JavaScript in the footer unless told otherwise.

In previous versions of Geeklog, JavaScript and the CSS files where handled solely by the plugin usually by including the functions plugin_getheadercode_xxxx or plugin_getfootercode_xxxx.

The advantages of using the Scripts class ... jQuery Library, Caching/Compression, remove of inline scripting, Only loads files when needed

Usage

The Scripts class is set near the beginning of lib-common.php as $_SCRIPTS. It uses the template variable plg_headercode (which is set in the function COM_SiteHeader) to put information in the header and the template variable plg_footercode (which is set in the function COM_SiteFooter) to put JavaScript in the footer. All of your JavaScript code and CSS files for the header needs to be set in the class before COM_SiteHeader is run or, for plugins, in your plugin_getheadercode_xxxx function, and themes, in the functions.php file. All JavaScript for the footer must be set by the time you call COM_SiteFooter (this shouldn't be a problem since this is one of the last functions you should be calling anyways on a page).

All JavaScript in the footer will also have access to the GeeklogConfig object. This object contains commonly used attributes taken right from Geeklogs configuration array ($_CONF) and uses the same keys.

Setting a CSS File

To set a CSS file for your plugin you would point the Scripts class to the file like so:

global $_SCRIPTS;
    
$_SCRIPTS->setCSSFile('polls', '/polls/style.css');

This tells the Scripts class to include the style sheet called polls. It is also telling the class that you plan to always include this CSS file. The reason you want to tell Geeklog that you plan to always include this CSS file is that it will then be marked for caching and compressing (future feature). If you plan to only include this CSS file on pages that the plugin displays you may want to include an extra parameter in the call to the class:

global $_SCRIPTS;
    
$_SCRIPTS->setCSSFile('polls', '/polls/style.css', false);

As stated before this needs to be done before you run the function COM_SiteHeader or in your plugins plugin_getheadercode_xxxx function. If your plugin has a block or uses Autotags that need the CSS file then you should always make sure it is included since Geeklog has no way of knowing if a block or Autotag will be displayed before the header is written.

Setting JavaScript

To set JavaScript for your plugin or theme you would do the following:

global $_SCRIPTS;
    
$js = 'some JavaScript';
$_SCRIPTS->setJavaScript($js, true);

Setting a JavaScript File

Setting a JavaScript Library