HUBzero comes with the jQuery Javascript Framework included by a system plugin. jQuery is not only a visual effects library–it also support Ajax request and JSON notation, table sort, drag & drop operations and much more. All current HUBzero JavaScripts are built on this framework.

Note: If running extensions that require the MooTools Javascript framework (Joomla's default), the jQuery system plugin can be run in compatibility mode or turned off completely.

jQuery

The jQuery framework can be found within the /media/system/js directory. It is a compressed version used for production. An uncompressed version may be found at jquery.com.

/hubzero
  /media
    /system
      /js
        jquery.js
        jquery.noconflict.js

Most HUBzero templates will include some scripts of their own for basic setup, visual effects, etc. These are generally stored in (but not limited to) a sub-directory, named /js, of the template's main directory.

/hubzero
  /media
    /system
      /js
        jquery.fancybox.js
        jquery.fileuploader.js
        jquery.tools.js
        jquery.ui.js

Of the scripts commonly found in a HUBzero template, hub.jquery.js is perhaps the most important and it is strongly encouraged that developers include these files in their template.

MooTools

The MooTools framework can be found within the /media/system/js directory. Joomla! includes both a compressed version used for production and an uncompressed version used for debug mode and developer reference.

/hubzero
  /media
    /system
      /js
        mootools-uncompressed.js
        mootools.js

Most HUBzero templates will include some scripts of their own for basic setup, visual effects, etc. These are generally stored in (but not limited to) a sub-directory, named /js, of the template's main directory.

/hubzero
  /templates
    /{TemplateName}
      /js
        globals.js
        hub.js
        modal.js
        tooltips.js
        ...

Of the scripts commonly found in a HUBzero template, hub.js and globals.js are perhaps the most important and it is strongly encouraged that developers include these files in their template.

jQuery

//-----------------------------------------------------------
//  Create our namespace
//-----------------------------------------------------------
if (!HUB) {
	var HUB = {};
}

//-----------------------------------------------------------
//  Various functions - encapsulated in HUB namespace
//-----------------------------------------------------------
if (!jq) {
	var jq = $;

	$.getDocHeight = function(){
		var D = document;
		return Math.max(Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
	};
} else {
	jq.getDocHeight = function(){
		var D = document;
		return Math.max(Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
	};
}

HUB.Base = {
	// Container for jquery. 
	// Needed for noconflict mode compatibility
	jQuery: jq,

	// Set the base path to this template
	templatepath: '/templates/hubbasic2012/',

	// launch functions
	initialize: function() {
		var $ = this.jQuery, w = 760, h = 520;

		// Set focus on username field for login form
		if ($('#username').length > 0) {
			$('#username').focus();
		}

		// Set the search box's placeholder text color
		if ($('#searchword').length > 0) {
			$('#searchword')
				.css('color', '#777')
				.on('focus', function(){
					if ($(this).val() == 'Search') {
						$(this).val('').css('color', '#ddd');
					}
				})
				.on('blur', function(){
					if ($(this).val() == '' || $(this).val() == 'Search') {
						$(this).val('Search').css('color', '#777');
					}
				});
		}

		// Turn links with specific classes into popups
		$('a').each(function(i, trigger) {
			if ($(trigger).is('.demo, .popinfo, .popup, .breeze')) {
				$(trigger).on('click', function (e) {
					e.preventDefault();

					if ($(this).attr('class')) {
						var sizeString = $(this).attr('class').split(' ').pop();
						if (sizeString && sizeString.match('/d+xd+/')) {
							var sizeTokens = sizeString.split('x');
							w = parseInt(sizeTokens[0]);
							h = parseInt(sizeTokens[1]);
						}
					}

					window.open($(this).attr('href'), 'popup', 'resizable=1,scrollbars=1,height='+ h + ',width=' + w);
				});
			}
			if ($(trigger).attr('rel') && $(trigger).attr('rel').indexOf('external') !=- 1) {
				$(trigger).attr('target', '_blank');
			}
		});

		// Set the overlay trigger for launch tool links
		$('.launchtool').on('click', function(e) {
			$.fancybox({
				closeBtn: false, 
				href: HUB.Base.templatepath + 'images/anim/circling-ball-loading.gif'
			});
		});

		// Set overlays for lightboxed elements
		$('a[rel=lightbox]').fancybox();

		// Init tooltips
		$('.hasTip, .tooltips').tooltip({
			position: 'top center',
			effect: 'fade',
			offset: [-4, 0],
			onBeforeShow: function(event, position) {
				var tip = this.getTip(),
					tipText = tip[0].innerHTML;
					
				if (tipText.indexOf('::') != -1) {
					var parts = tipText.split('::');
					tip[0].innerHTML = '' + parts[0] + '' + parts[1] + '';
				}
			}
		});

		// Init fixed position DOM: tooltips
		$('.fixedToolTip').tooltip({
			relative: true
		});
	}
};

jQuery(document).ready(function($){
	HUB.Base.initialize();
});

MooTools

If a template includes hub.js, it will be auto-loaded by the system (thus, no reason to specifically declare it in your layout file). When loaded successfully, it will check for the inclusion of the MooTools framework and its version. Should everything pass, the script will then load any other scripts you declare in a comma-separated string.

var HUBzero = {
  Version: '1.1',
  require: function(libraryName) {
    // inserting via DOM fails in Safari 2.0, so brute force approach
    document.write('<script type="text/javascript" src="'+libraryName+'"></script>');
  },
  load: function() {
    if((typeof MooTools=='undefined') ||
      parseFloat(MooTools.version) < 1.1)
      throw("This HUB requires the MooTools JavaScript framework >= 1.1.0");

    $A(document.getElementsByTagName("script")).each( function(s) {
      if (s.src && s.src.match(/hub.js(?.*)?$/)) {
	  var path = s.src.replace(/hub.js(?.*)?$/,'');
      var includes = s.src.match(/?.*load=([a-z,]*)/);
      (includes ? includes[1] : 'globals,tooltips').split(',').each(
       function(include) { HUBzero.require(path+include+'.js') });
	  }
    });
  }
}

HUBzero.load();

Wether using MooTools or jQuery, the template will include a file (hub.jquery.js) that first establishes a HUB namespace and then proceeds through some basic setup routines. All HUBzero built components, modules, and templates that employ JavaScript place scripts within this HUB namespace. This helps prevent any naming collisions with third-party libraries. While it is recommended that any scripts you may add to your code is also placed within the HUB namespace, it is not required.

Note: When not using jQuery, the template will include a global.js file that establishes the HUB namespace.

Some additional sub-spaces for further organization are available within the HUB namespace. Separate spaces for Modules, Components, and Plugins are created. Once again, this further helps avoid possible naming/script collisions. Additionally, one more Base space is created for basic setup and utilities that may be used in other scripts.

//  Create our namespace
if (!HUB) {
	var HUB = {};
	
	// Establish a space for setup/init and utilities
	HUB.Base = {};
	
	// Establish sub-spaces for the various extensions
	HUB.Components = {};
	HUB.Modules = {};
	HUB.Plugins = {};
}

To demonstrate adding code to the namespace, below is code from a script in a component named com_example.

//  Create our namespace
if (!HUB) {
	var HUB = {};
 	
	// sub-space for components
	HUB.Components = {};
}

// The Example namespace and init method
HUB.Components.Example = {
	init: function() {
		// do something
	}
}

// Initialize the code (jQuery)
jQuery(document).ready(function($){
	Components.Example.init();
});

/*
// Initialize the code (MooTools)
window.addEvent('domready', HUB.Components.Example.init);
*/

Components

Occasionally a component will have scripts of its own. Pushing JavaScript to the template from a component is quite easy and involves only a few lines of code.

// Get the document object
$document =& JFactory::getDocument();
// Check if the file actually exist
if (is_file(JPATH_ROOT.DS.'components'.DS.'com_example'.DS.'example.js')) {
	// Add the file to the list of scripts to be outputted in the template
	$document->addScript('components'.DS.'com_example'.DS.'example.js');
}

First, we load the document object. Next we check for the existence of the JavaScript file we wish to load. If found, we add it to the array of scripts that will be outputted in the <head> of the site template.

Modules

Loading JavaScript from a module is the same as loading from a component save one minor difference: the path to the JavaScript file is obviously different.

// Get the document object
$document =& JFactory::getDocument();
// Check if the file actually exist
if (is_file(JPATH_ROOT.DS.'modules'.DS.'mod_example'.DS.'mod_example.js')) {
	// Add the file to the list of scripts to be outputted in the template
	$document->addScript('modules'.DS.'mod_example'.DS.'mod_example.js');
}

Plugins

Loading JavaScript from a plugin is the same as loading from a component or module save one minor difference: the path to the JavaScript file is obviously different.

// Get the document object
$document =& JFactory::getDocument();
// Check if the file actually exist
if (is_file(JPATH_ROOT.DS.'plugins'.DS.'examples'.DS.'test.js')) {
	// Add the file to the list of scripts to be outputted in the template
	$document->addScript('plugins'.DS.'examples'.DS.'test.js');
}