javascript frameworks for joomla
TRANSCRIPT
Leveraging JavaScript Frameworks in your
Joomla Sites
Alonzo Turner
A Quick HistoryWhy we need JavaScript
Frameworks in the first place.
First, there was the Internet, and it was good.
Then there was Netscape, and it had a <blink> tag.
And, then came Internet Explorer.
Then came Firefox and things got a lot better but...
It was complicated.
What Frameworks ProvideDOM Manipulation
Class Structures
Event Listeners
AJAX
Binding
Effects
The Default JavaScript Framework Provided by Joomla
jimport('joomla.html.html.behavior');JHtmlBehavior::framework(boolean);
/media/system/js/mootools-core.js/media/system/js/mootools-more.js
MooTools Libraries
Classesvar someObject = new Class({ initialize: function(){ // some constructor actions }});
Event Listeners$$('a').invoke('addEvent', 'click' function(evt){ var someAnchor = evt.target; window.console.log(someAnchor.href);});
DOM Manipulation$(selector) //returns extended element$$(selector) //returns an array of elements
MooTools LibrariesAJAX
Binding
var someRequest = new Request({ method: 'post', url: '/index.php', onSuccess: function(textResult, xmlResult){}, onFailure: function(xhr){}});someRequest.send({'data': obj});
var myObject = {name: 'Alonzo', title: 'dev'};var myFunction = function(){ window.console.log(this.name);}var bound = myFunction.bind(myObject);bound(); // OUTPUTS: Alonzo
Effects
MooTools Libraries
var myTween = new Fx.Tween('someElement', { duration: 1000.0, property: 'left'});myTween.start(0,400);
var myMorph = new Fx.Morph('someElement', { duration: 2500.0, transition: Fx.Transitions.Sine.easeInOut, chain: 'cancel'});myMorph.start({'height': 300, 'width': 100});
Tween A single Property
Morph any number of styles in tandem
var myInterface = new Class({ initialize: function(){ this.links = this.listenToLinks.bind(this);
this.buttons = this.listenToButtons.bind(this);this.startListening();
}, startListening: function(){ $$('a').invoke('addEvent', this.links); $$('button').invoke('addEvent', this.buttons); }, listenToLinks: function(evt){ // do something with links }, listenToButtons: function(evt){ // do something with buttons }});
MooTools LibrariesPutting It All Together
JHtml Behaviors
Form ValidationJHtml::_(‘behavior.formvalidation’);
Modal WindowsJHtml::_(‘behavior.modal’);
ToolTipsJHtml::_(‘behavior.tooltip’);
No-FramesJHtml::_(‘behavior.noframes’);
CalendarJHtml::_(‘behavior.calendar’);
UploaderJHtml::_(‘behavior.uploader’);
Loading the Built-In Javascript Libraries
Inserting Javascript $doc =& JFactory::getDocument();$doc->addScript('path/to/script');$doc->addScriptDeclaration('script as text');
// FILTER OUT MOOTOOLS JAVASCRIPT$header = $this->getHeadData();$scripts = $header['scripts'];$allow = array();foreach($scripts as $script => $type){ if(strpos($script, "/media/system/js") === FALSE){ $allow[$script] = $type; }}// RESET THE PRELOADED JAVASCRIPT LIBRARIES$header['scripts'] = $allow;$this->setHeadData($header);
Template index.php file
Google Loader APIDecrease page load times and offset network traffic by implementing the
loader API
http://code.google.com/apis/loader/signup.html
First, sign up for an API key
Implement the google loader<script type="text/javascript" src="http://www.google.com/jsapi?key=xxxx"></script><script type="text/javascript">google.load(script, version)</script>
// USE GOOGLE LOADER API TO PRELOAD COMMON JAVASCRIPT LIBRARIES$js = '{"modules":{"name":"mootools","version":"1.4.1"}}';$key = $this->params->get('google_api');if($key){ $source = "www.google.com/jsapi?autoload=".urlencode($js)."&key="; $document->addScript(HTTP_PROTOCOL.$source.$key);}else{ $document->addScript("templates/yourtemplate/javascript/mootools.js"); $document->addScript("templates/inkandpaper/javascript/swfobject.js");}
Google Loader APIImplement the Google Loader in your
Template index.php file
Additional Resources
http://code.google.com/apis/loaderhttps://groups.google.com/group/joomla-dev-generalhttp://docs.joomla.org/Developershttp://mootools.net/docs/corehttp://jquery.comhttp://www.prototypejs.org
Special Thanks
Lokesh Dhakar - lightboxSam Stephenson - prototype
Thomas Fuchs - scriptaculousValerio Proietti - mootools
John Resig - jquery
The Joomla and Open Source Communities
