[geeklog-devel] Geeklog New Scripts Class

[Tom]

Hi All,

I just pushed an update that adds a script class to Geeklog. This scripts
class is meant to handle all CSS files and JavaScript in Geeklog as we move
forward. It is pretty much complete but will probably need some tweaking
here and there.

I have also updated Geeklog Core to use this new class. Further work needs
to be done (like with the plugins) but for now the advance editor for
Comments and Articles uses the new class along with the Configuration and My
Account page. This also means in the header.thml file, css_url and
advanced_editor template variables are not needed any more. JavaScript in
general also needs a bit of cleanup in Geeklog which I hope to get to in the
future. Things like common.js is always loaded. This now doesn't have to be
the case with the new Scripts class but I have not taken the time yet to
find all the spots that use the functions in this file. When I do (or
someone else) all they would have to do is tell it to load when needed in
the php code.

Here are some highlights of the class:

-	When the class is used, only the JavaScript and CSS files that are
needed will load
-	Admin can specify to use Google's CDN files for jQuery
-	Class will fall back and use Google's CDN files if jQuery files
missing from Geeklog
-	Will do away with inline scripting (ie scripts in template files) as
you will now pass the required Javascript to the class
- 	Can specify to load JavaScript in header or footer (defaults to
footer and jQuery always loads in the footer)
-	Possible future feature includes Caching/Compressing of regularly
included JavaScript Files and CSS files (hence the unused constant variable
in some of the classes functions)

(As I am writing this I just realized I forgot to add in the config option
in the Configuration to enable the use of Google's CDN files, I will push
this change later this week)

The class is set near the beginning of lib-common.php as $_SCRIPTS. It uses
the template variable plg_headercode in COM_SiteHeader to put information in
the header and COM_SiteFooter with plg_footercode to put JavaScript in the
footer. Obviously all your JavaScript code (and CSS files) needs to be set
in the class before COM_SiteHeader is run (at least for the CSS files and
any JavaScript in the header). All JavaScript 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).

So how do you use the new class?

To pass in some JavaScript code and a JavaScript file to the footer you
would do something like so:

                // Add JavaScript
                $js = 'geeklogEditorBasePath = "' . $_CONF['site_url'] .
'/fckeditor/";';
                $_SCRIPTS->setJavaScript($js, true);
                $_SCRIPTS->setJavaScriptFile('submitcomment_fckeditor',
'/javascript/submitcomment_fckeditor.js');


Or if you wanted to tell Geeklog to include a jQuery library

	$_SCRIPTS->setJavaScriptLibrary('jquery');

Or to use a widget of the jquery ui plugin

	$_SCRIPTS->setJavaScriptLibrary('jquery.ui.autocomplete');

If you tell the script to use a widget there is no need to tell the Scripts
class to load jQuery as it will automatically add it in.

To add a CSS file you would do something like this

	$this->setCSSFile('theme', $theme_path . '/style.css');   

If JavaScript is included in any page a bunch of Core JavaScript variables
will automatically be inserted for use by any JavaScript code that needs
them. These variables are geeklogSiteUrl, geeklogLayoutUrl, geeklogAdminUrl
and geeklogThemeName. 

Finally, the order of placement for JavaScript in the footer is

1. Core JavaScript variables
2. JavaScript Library files (jQuery, etc..)
3. JavaScript Code (from setJavaScript)
4. JavaScript Files (from setJavaScriptFile)


Thanks

Tom