Javascript Frameworks for Joomla
Upcoming SlideShare
Loading in...5

Javascript Frameworks for Joomla






Total Views
Views on SlideShare
Embed Views



1 Embed 25 25



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Javascript Frameworks for Joomla Javascript Frameworks for Joomla Presentation Transcript

  • Alonzo TurnerLeveraging JavaScriptFrameworks in your Joomla Sites
  • A Quick History Why 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 Provide DOM Manipulation Class Structures Event Listeners AJAX Binding Effects View slide
  • The Default JavaScript Framework Provided by Joomlajimport(joomla.html.html.behavior);JHtmlBehavior::framework(boolean);/media/system/js/mootools-core.js/media/system/js/mootools-more.js View slide
  • MooTools Libraries DOM Manipulation $(selector) //returns extended element $$(selector) //returns an array of elements Classes var someObject = new Class({ initialize: function(){ // some constructor actions } }); Event Listeners$$(a).invoke(addEvent, click function(evt){ var someAnchor =; window.console.log(someAnchor.href);});
  • MooTools Libraries AJAXvar someRequest = new Request({ method: post, url: /index.php, onSuccess: function(textResult, xmlResult){}, onFailure: function(xhr){}});someRequest.send({data: obj}); Bindingvar myObject = {name: Alonzo, title: dev};var myFunction = function(){ window.console.log(;}var bound = myFunction.bind(myObject);bound(); // OUTPUTS: Alonzo
  • MooTools Libraries Effects Tween A single Propertyvar myTween = new Fx.Tween(someElement, { duration: 1000.0, property: left});myTween.start(0,400);Morph any number of styles in tandemvar myMorph = new Fx.Morph(someElement, { duration: 2500.0, transition: Fx.Transitions.Sine.easeInOut, chain: cancel});myMorph.start({height: 300, width: 100});
  • MooTools Libraries Putting It All Togethervar 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 }});
  • JHtml Behaviors Loading the Built-In Javascript LibrariesForm Validation No-FramesJHtml::_(‘behavior.formvalidation’); JHtml::_(‘behavior.noframes’);Modal Windows CalendarJHtml::_(‘behavior.modal’); JHtml::_(‘behavior.calendar’);ToolTips UploaderJHtml::_(‘behavior.tooltip’); JHtml::_(‘behavior.uploader’);
  • Inserting Javascript Template index.php file$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);
  • Google Loader API Decrease page load times and offset network traffic by implementing the loader API First, sign up for an API key Implement the google loader<script type="text/javascript" src=""></script><script type="text/javascript">google.load(script, version)</script>
  • Google Loader API Implement the Google Loader in your Template index.php file// 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 = "".urlencode($js)."&amp;key="; $document->addScript(HTTP_PROTOCOL.$source.$key);}else{ $document->addScript("templates/yourtemplate/javascript/mootools.js"); $document->addScript("templates/inkandpaper/javascript/swfobject.js");}
  • Additional Resources
  • Special Thanks Lokesh Dhakar - lightbox Sam Stephenson - prototypeThomas Fuchs - scriptaculous Valerio Proietti - mootools John Resig - jqueryThe Joomla and Open Source Communities