Conditional inclusion of Jquery UI Libraries

[coldtrick]

A lot has been spoken on trac about the jquery ui libraries. I'm opening a new ticket because i have a proposal for a 'smart' way to include all jquery functionality (or none).

Current situation:

• Elgg Core comes with a custom (read: not complete) jquery ui library
  

• Plugins come with their own extra jquery ui functionality (like datepicker, accordion), this results in conflicts with other plugins using this functionality, and isn't really forward compatible (new version of jquery ui probably breaks older libraries). Also loading twice (or more times) the same library leads to unexpected results.
  

• Some sites need no jquery ui functionality, some need all! Current jquery ui (1.7.2) is in total 188k (minimized) and when you only need the core 8k
  
  

Solution

Let plugins tell (in init) which functionality of the jquery library they need (components, widgets, effects).

Make a dynamic jquery include that only includes functionality that plugins have registered for.

Result

• jquery library will only contain code you gonna use on your site
  

• plugins don't need to bring their own jquery code (and no extra javascript file include), so less conflicts
  

• plugins will be better forward compatible

[milan]

I use a method to extend the metatags view in elgg's header view:

function extend_metatags($view) {
	global $METATAGS_VIEWS;
	
	if (! is_array ( $METATAGS_VIEWS )) {
		$METATAGS_VIEWS = array ();
	}
	
	if (! in_array ( $view, $METATAGS_VIEWS )) {
		extend_view ( 'metatags', $view );
		array_push ( $METATAGS_VIEWS, $view );
		return true;
	} else {
		return false;
	}

}

and also have a view which loads a jquery-ui function into the page header when modules call it. Here is a example view that I store in a module call view_enchancements (where the function above defined in start.php):

jquery-ui/dialog:

<?php global $CONFIG; ?>
<script type="text/javascript" src="<?php echo $CONFIG->url; ?>mod/view_enhancements/vendors/jquery-ui/1.8.2/jquery-ui.dialog.min.js"></script>

I've got minimised fragment files for all non core jquery-ui subcomponents, so in other modules (or the start.php file for view_enchancements) i just call:

extend_metatags('jquery-ui/dialog');

And that jquery-ui dialog function is can be included conditionally for a module or globally for a site, but most importantly it'll only be included once no matter how many times extend_metatags for that view is called.

But that said I've used so many components of jquery-ui now that I'm probably just going to bundle the complete jquery-ui file to all my users as this will reduce HTTP requests and also be cached by browsers!

[milan]

Note: I massively prefer the solution suggested in the trac report, but just included what I've done in case someone wants a quicker solution!

[ewinslow]

I think this situation has been fixed by 1) including the full jquery-ui library in Elgg, and 2) the elgg_register_js functions. Sites that don't need all of jqueryUI should create a custom plugin that uses a custom build appropriate for that site.