Skip to content

Instantly share code, notes, and snippets.

@wGEric wGEric/gist:1350388
Created Nov 9, 2011

Embed
What would you like to do?
phpBB AJAX as jQuery Plugin
// 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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.