Javascript Frameworks for Joomla

Javascript Frameworks for Joomla

• 1.
  Alonzo Turner Leveraging JavaScript Frameworksin your Joomla Sites
• 2.
  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.
• 3.
  What Frameworks Provide DOM Manipulation Class Structures Event Listeners AJAX Binding Effects
• 4.
  The Default JavaScriptFramework Provided by Joomla jimport('joomla.html.html.behavior'); JHtmlBehavior::framework(boolean); /media/system/js/mootools-core.js /media/system/js/mootools-more.js
• 5.
  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 = evt.target; window.console.log(someAnchor.href); });
• 6.
  MooTools Libraries AJAX var someRequest = new Request({ method: 'post', url: '/index.php', onSuccess: function(textResult, xmlResult){}, onFailure: function(xhr){} }); someRequest.send({'data': obj}); Binding var myObject = {name: 'Alonzo', title: 'dev'}; var myFunction = function(){ window.console.log(this.name); } var bound = myFunction.bind(myObject); bound(); // OUTPUTS: Alonzo
• 7.
  MooTools Libraries Effects Tween A single Property var myTween = new Fx.Tween('someElement', { duration: 1000.0, property: 'left' }); myTween.start(0,400); Morph any number of styles in tandem var myMorph = new Fx.Morph('someElement', { duration: 2500.0, transition: Fx.Transitions.Sine.easeInOut, chain: 'cancel' }); myMorph.start({'height': 300, 'width': 100});
• 8.
  MooTools Libraries Putting It All Together 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 } });
• 9.
  JHtml Behaviors Loading the Built-In Javascript Libraries Form Validation No-Frames JHtml::_(‘behavior.formvalidation’); JHtml::_(‘behavior.noframes’); Modal Windows Calendar JHtml::_(‘behavior.modal’); JHtml::_(‘behavior.calendar’); ToolTips Uploader JHtml::_(‘behavior.tooltip’); JHtml::_(‘behavior.uploader’);
• 10.
  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);
• 11.
  Google Loader API Decrease page load times and offset network traffic by implementing the loader API First, sign up for an API key http://code.google.com/apis/loader/signup.html 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>
• 12.
  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 = "www.google.com/jsapi?autoload=".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"); }
• 13.
  Additional Resources http://code.google.com/apis/loader https://groups.google.com/group/joomla-dev-general http://docs.joomla.org/Developers http://mootools.net/docs/core http://jquery.com http://www.prototypejs.org
• 14.
  Special Thanks Lokesh Dhakar - lightbox Sam Stephenson - prototype Thomas Fuchs - scriptaculous Valerio Proietti - mootools John Resig - jquery The Joomla and Open Source Communities
• 15.
  https://www.subtextproductions.com alonzo.turner@subtextproductions.com