phpBB AJAX as jQuery Plugin

gistfile1.js

// setup global config variable
if (!phpbb)
{
	var phpbb = {};
}

phpbb.alert_fade_time = 100;

(function($, window, document) {
	var overlay, // overlay overlay for alerts
		loading_alert; // the alert
	
	// constants for keyboard actions
	var ENTER = 13,
		ESC = 27;
		
	// ajax callbacks
	var ajax_callbacks = {};
	
	$.fn.extend({
		//phpbb : {
			/**
			* Makes a link use AJAX instead of loading an entire page.
			*
			* This function will work for links (both standard links and links which
			* invoke confirm_box) and forms. It will be called automatically for links
			* and forms with the data-ajax attribute set, and will call the necessary
			* callback.
			*
			* For more info, view the following page on the phpBB wiki:
			* http://wiki.phpbb.com/JavaScript_Function.phpbb.ajaxify
			*
			* @param object options Options, if a string will be the selector.
			* @param bool/function refresh If we are sent back a refresh, should it be
			* 	acted upon? This can either be true / false / a function.
			* @param function callback Callback to call on completion of event. Has
			* 	three parameters: the element that the event was evoked from, the JSON
			* 	that was returned and (if it is a form) the form action.
			*/
			ajaxify : (function() {
				var doit = function(options) {
					var selector = $(this),
						refresh = selector.data('refresh'),
						callback = (selector.data('ajax') !== 'true') ? selector.data('ajax') : null;
						
					var is_form = selector.is('form');
					if (is_form)
					{
						selector = selector.find('input:submit');
					}
				
					selector.click(function() {
						var action,
							data,
							path,
							that = this,
							$this = $(this);
				
						if ($this.data('ajax') == false)
						{
							return true;
						}
				
						/**
						 * This is a private function used to handle the callbacks, refreshes
						 * and alert. It calls the callback, refreshes the page if necessary, and
						 * displays an alert to the user and removes it after an amount of time.
						 *
						 * It cannot be called from outside this function, and is purely here to
						 * avoid repetition of code.
						 *
						 * @param object response The object sent back by the server.
						 */
						function return_handler(response)
						{
							if (typeof response.S_CONFIRM_ACTION === 'undefined')
							{
								// It is a standard link, no confirm_box required.
								if (typeof response.MESSAGE_TITLE !== 'undefined')
								{
									var alert = $.phpbb.alert(response.MESSAGE_TITLE, response.MESSAGE_TEXT);
								}
								else
								{
									dark.fadeOut(phpbb.alert_time);
								}
				
								$.phpbb.call_ajax_callback(callback, that, [response, (is_form) ? act : null]);
				
								if (response.REFRESH_DATA)
								{
									if (typeof refresh === 'function')
									{
										refresh = refresh(response.REFRESH_DATA.url);
									}
									else if (typeof refresh !== 'boolean')
									{
										refresh = false;
									}
				
									setTimeout(function() {
										if (refresh)
										{
											window.location = response.REFRESH_DATA.url;
										}
				
										dark.fadeOut(phpbb.alert_time, function() {
											alert.hide();
										});
									}, response.REFRESH_DATA.time * 1000);
								}
							}
							else
							{
								// confirm_box - confirm with the user and send back
								$.phpbb.confirm(response.MESSAGE_TEXT, function(del) {
									if (del)
									{
										$.phpbb.loading_alert();
										data =  $('<form>' + response.S_HIDDEN_FIELDS + '</form>').serialize();
										$.post(response.S_CONFIRM_ACTION, data + '&confirm=' + response.YES_VALUE, return_handler);
									}
								}, false);
							}
						}
				
						var run_exception = (typeof options.exception === 'function');
						if (is_form)
						{
							action = /action\[([a-z]+)\]/.exec(this.name);
							data = decodeURI($this.closest('form').serialize());
							path = $this.closest('form').attr('action').replace('&amp;', '&');
				
							if (action)
							{
								action = action[1]
								data += '&action=' + action;
							}
							else
							{
								data += '&' + this.name + '=' + this.value;
							}
				
							if (run_exception && options.exception.call($this.parents('form')[0], action, data))
							{
								return true;
							}
							$.phpbb.loading_alert();
							$.post(path, data, return_handler);
						}
						else
						{
							if (run_exception && options.exception.call(this))
							{
								return true;
							}
							$.phpbb.loading_alert();
							$.get(this.href, return_handler);
						}
				
						return false;
					});
					return this;
				}
				
				return function() {
					this.each(doit);
				}
			})()
		//}
	});
	
	$.extend({
		phpbb : {
			/**
			* Display a simple alert similar to JSs native alert().
			*
			* You can only call one alert or confirm box at any one time.
			*
			* @param string title Title of the message, eg "Information" (HTML).
			* @param string msg Message to display (HTML).
			* @param bool fade_overlay Remove the overlay background when done? Defaults
			* 	to yes.
			*
			* @returns object Returns the div created.
			*/
			alert : function(title, msg, fade_overlay) {
				if (!overlay) {
					overlay = $('#darkenwrapper');
				}
				
				if (!loading_alert) {
					loading_alert = $('#loadingalert');
				}
				
				var alert_box = $('#phpbb_alert');
				alert_box.find('.alert_title').html(title);
				alert_box.find('.alert_text').html(msg);
			
				alert_box.bind('click.alert', function(e) {
					e.stopPropagation();
					return true;
				});
				
				// close the box when clicking on the overlay
				overlay.bind('click.alert', function(e) {
					alert_box.find('.alert_close').unbind('click');
					var fade = (typeof fade_overlay !== 'undefined' && !fade_overlay) ? alert_box : overlay;
					fade.fadeOut(phpbb.alert_time, function() {
						alert_box.hide();
					});
					
					// unbind the alert events
					overlay.unbind('.alert');
					$(document).unbind('.alert');
					alert_box.find('.alert_close').unbind('.alert');
					
					return false;
				});
			
				// keyboard events for enter or esc to close the alert
				$(document).bind('keydown.alert', function(e) {
					console.log('document keydown event');
					if (e.keyCode === ENTER || e.keyCode === ESC) {
						overlay.trigger('click');
						return false;
					}
					return true;
				});
			
				// x to close the alert
				alert_box.find('.alert_close').bind('click', function() {
					overlay.trigger('click');
				});
			
				if (loading_alert.is(':visible'))
				{
					loading_alert.fadeOut(phpbb.alert_time, function() {
						overlay.append(alert_box);
						alert_box.fadeIn(phpbb.alert_time);
					});
				}
				else if (overlay.is(':visible'))
				{
					overlay.append(alert_box);
					alert_box.fadeIn(phpbb.alert_time);
				}
				else
				{
					overlay.append(alert_box);
					alert_box.show();
					overlay.fadeIn(phpbb.alert_time);
				}
			
				return alert_box;
			},
			
			/**
			* Display a loading screen.
			*
			* @returns object Returns loading_alert.
			*/
			loading_alert : function() {
				if (!overlay) {
					overlay = $('#darkenwrapper');
				}
				
				if (!loading_alert) {
					loading_alert = $('#loadingalert');
				}
				
				if (overlay.is(':visible'))
				{
					loading_alert.fadeIn(phpbb.alert_fade_time);
				}
				else
				{
					loading_alert.show();
					overlay.fadeIn(phpbb.alert_fade_time, function() {
						// Wait five seconds and display an error if nothing has been returned by then.
						setTimeout(function() {
							if (loading_alert.is(':visible'))
							{
								$.phpbb.alert($('body').data('l-err'), $('body').data('l-err-processing-req'));
							}
						}, 5000);
					});
				}
			
				return loading_alert;
			},
			
			/**
			* Display a simple yes / no box to the user.
			*
			* You can only call one alert or confirm box at any one time.
			*
			* @param string msg Message to display (HTML).
			* @param function callback Callback. Bool param, whether the user presponsesed
			* 	yes or no (or whatever their language is).
			* @param bool fade_overlay Remove the overlay background when done? Defaults
			* 	to yes.
			*
			* @returns object Returns the div created.
			*/
			confirm : function(msg, callback, fade_overlay) {
				if (!overlay) {
					overlay = $('#darkenwrapper');
				}
				
				if (!loading_alert) {
					loading_alert = $('#loadingalert');
				}
			
				var div = $('#phpbb_confirm');
				div.find('.alert_text').html(msg);
				
				div.bind('click', function(e) {
					e.stopPropagation();
					return true;
				});
				div.find('input[type="button"]').one('click', function() {
					var response = this.className === 'button1';
					var fade = (typeof fade_overlay !== 'undefined' && !fade_overlay && response) ? div : overlay;
					fade.fadeOut(phpbb.alert_time, function() {
						div.hide();
					});
					div.find('input[type="button"]').unbind('click');
					callback(response);
					return false;
				});
				
				overlay.one('click', function(e) {
					div.find('.alert_close').unbind('click');
					var fade = (typeof fade_overlay !== 'undefined' && !fade_overlay && response) ? div : overlay;
					fade.fadeOut(phpbb.alert_time, function() {
						div.hide();
					});
					callback(false);
					return false;
				});
				
				$(document).bind('keydown', function(e) {
					if (e.keyCode === ENTER) {
						$('input[type="button"].button1').trigger('click');
						return false;
					} else if (e.keyCode === ESC) {
						$('input[type="button"].button2').trigger('click');
						return false;
					}
					return true;
				});
				
				div.find('.alert_close').one('click', function() {
					var fade = (typeof fade_overlay !== 'undefined' && fade_overlay) ? div : overlay;
					fade.fadeOut(phpbb.alert_time, function() {
						div.hide();
					});
					callback(false);
				});
				
				if (loading_alert.is(':visible'))
				{
					loading_alert.fadeOut(phpbb.alert_time, function() {
						overlay.append(div);
						div.fadeIn(phpbb.alert_time);
					});
				}
				else if (overlay.is(':visible'))
				{
					overlay.append(div);
					div.fadeIn(phpbb.alert_time);
				}
				else
				{
					overlay.append(div);
					div.show();
					overlay.fadeIn(phpbb.alert_time);
				}
				
				return div;
			},
			
			/**
			* Adds an AJAX callback to be used by phpbb.ajaxify.
			*
			* See the phpbb.ajaxify comments for information on stuff like parameters.
			*
			* @param string id The name of the callback.
			* @param function callback The callback to be called.
			*/
			add_ajax_callback : function(id, callback)
			{
				if ($.isFunction(callback))
				{
					if (!ajax_callbacks[id])
					{
						ajax_callbacks[id] = [];
					}
					
					ajax_callbacks[id].push(callback);
				}
				return this;
			},
			
			/**
			* Calls AJAX callbacks to be used by phpbb.ajaxify.
			*
			* @param string id The name of the callback.
			* @param object obj The object to use as this in the callback
			*/
			call_ajax_callback : function(id, obj, params)
			{
				if (ajax_callbacks[id]) {
					for (var i = 0, total = ajax_callbacks[id].length; i < total; i++) {
						var callback = ajax_callbacks[id][i];
						if ($.isFunction(callback)) {
							callback.apply(obj, params);
						}
					}
				}
			},
			
			/**
			* Turn a querystring into an array.
			*
			* @argument string string The querystring to parse.
			* @returns object The object created.
			*/
			parse_querystring : function(string) {
				var params = {},
					i,
					split;
			 
				string = string.split('&');
				for (i = 0; i < string.length; i++)
				{
					split = string[i].split('=');
					params[split[0]] = decodeURIComponent(split[1]);
				}
				return params;
			}
		}
	});
	
	/**
	* This callback alternates text - it replaces the current text with the text in
	* the alt-text data attribute, and replaces the text in the attribute with the
	* current text so that the process can be repeated.
	*/
	$.phpbb.add_ajax_callback('alt_text', function(element) {
		element = $(element);
		var alt_text = element.data('alt-text');
		element.data('alt-text', element.text());
		element.text(el[0].title = alt_text);
	});	
})(jQuery, window, document);