334 lines
8.2 KiB
JavaScript
334 lines
8.2 KiB
JavaScript
/*
|
|
* jQuery Alert Dialogs Plugin
|
|
*
|
|
* Version 1.1
|
|
*
|
|
* Cory S.N. LaViska
|
|
* A Beautiful Site (http://abeautifulsite.net/)
|
|
* 14 May 2009
|
|
*
|
|
* Visit http://abeautifulsite.net/notebook/87 for more information
|
|
*
|
|
* Usage:
|
|
* jAlert(message, [title, callback])
|
|
* jConfirm(message, [title, callback])
|
|
* jPrompt(message, [value, title, callback])
|
|
*
|
|
* License:
|
|
*
|
|
* This plugin is dual-licensed under the GNU General Public License and the MIT License and
|
|
* is copyright 2008 A Beautiful Site, LLC.
|
|
*/
|
|
(function($) {
|
|
|
|
$.alerts = {
|
|
/**
|
|
* Vertical offset (in pixels) of the dialog from center screen.
|
|
*/
|
|
verticalOffset: -75,
|
|
|
|
/**
|
|
* Horizontal offset (in pixels) of the dialog from center screen.
|
|
*/
|
|
horizontalOffset: 0,
|
|
|
|
/**
|
|
* Re-centers the dialog on window resize.
|
|
*/
|
|
repositionOnResize: true,
|
|
|
|
/**
|
|
* Transparency level of overlay.
|
|
*/
|
|
overlayOpacity: .5,
|
|
|
|
/**
|
|
* Base color of overlay.
|
|
*/
|
|
overlayColor: '#fff',
|
|
|
|
/**
|
|
* Text for the OK button.
|
|
*/
|
|
okButton: ' OK ',
|
|
|
|
/**
|
|
* Text for the cancel button.
|
|
*/
|
|
cancelButton: ' Cancel ',
|
|
|
|
/**
|
|
* If specified, this class will be applied to all dialogs.
|
|
*/
|
|
dialogClass: null,
|
|
|
|
/**
|
|
* Shows an alert box.
|
|
*
|
|
* @param message
|
|
* @param title
|
|
* @param callback
|
|
*/
|
|
alert: function(message, title, callback) {
|
|
if (title == null) title = 'Alert';
|
|
$.alerts._show(title, message, null, 'alert', function(result) {
|
|
if (callback) callback(result);
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Shows a confirmation box.
|
|
*
|
|
* @param message
|
|
* @param title
|
|
* @param callback
|
|
*/
|
|
confirm: function(message, title, callback) {
|
|
if (title == null) title = 'Confirmation';
|
|
$.alerts._show(title, message, null, 'confirm', function(result) {
|
|
if (callback) callback(result);
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Shows a prompt box.
|
|
*
|
|
* @param message
|
|
* @param value
|
|
* @param title
|
|
* @param callback
|
|
*/
|
|
prompt: function(message, value, title, callback) {
|
|
if (title == null) title = 'Prompt';
|
|
$.alerts._show(title, message, value, 'prompt', function(result) {
|
|
if (callback) callback(result);
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Shows a popup box with the specified options.
|
|
*
|
|
* @param title
|
|
* @param msg
|
|
* @param value
|
|
* @param type
|
|
* @param callback
|
|
*/
|
|
_show: function(title, msg, value, type, callback) {
|
|
$.alerts._hide();
|
|
$.alerts._overlay('show');
|
|
|
|
$('BODY').append('<div id="popup_container"><h1 id="popup_title"></h1>'
|
|
+ '<div id="popup_content"><div id="popup_message"></div></div></div>');
|
|
|
|
if ($.alerts.dialogClass) {
|
|
$('#popup_container').addClass($.alerts.dialogClass);
|
|
}
|
|
|
|
// IE6 Fix
|
|
var pos = ($.browser.msie && parseInt($.browser.version) <= 6) ? 'absolute' : 'fixed';
|
|
|
|
$('#popup_container').css({
|
|
position: pos,
|
|
zIndex: 99999,
|
|
padding: 0,
|
|
margin: 0
|
|
});
|
|
|
|
$('#popup_title').text(title);
|
|
$('#popup_content').addClass(type);
|
|
$('#popup_message').text(msg);
|
|
$('#popup_message').html($('#popup_message').text().replace(/\n/g, '<br />'));
|
|
|
|
$('#popup_container').css({
|
|
minWidth: $('#popup_container').outerWidth(),
|
|
maxWidth: $('#popup_container').outerWidth()
|
|
});
|
|
|
|
$.alerts._reposition();
|
|
$.alerts._maintainPosition(true);
|
|
|
|
switch (type) {
|
|
case 'alert':
|
|
$('#popup_message').after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /></div>');
|
|
$('#popup_ok').click(function() {
|
|
$.alerts._hide();
|
|
callback(true);
|
|
});
|
|
$('#popup_ok').focus().keypress(function(e) {
|
|
if (e.keyCode == 13 || e.keyCode == 27) {
|
|
$('#popup_ok').trigger('click');
|
|
}
|
|
});
|
|
break;
|
|
case 'confirm':
|
|
$('#popup_message').after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>');
|
|
$('#popup_ok').click(function() {
|
|
$.alerts._hide();
|
|
if (callback) callback(true);
|
|
});
|
|
$('#popup_cancel').click(function() {
|
|
$.alerts._hide();
|
|
if (callback) callback(false);
|
|
});
|
|
$('#popup_ok').focus();
|
|
$('#popup_ok, #popup_cancel').keypress(function(e) {
|
|
if (e.keyCode == 13) $("#popup_ok").trigger('click');
|
|
if (e.keyCode == 27) $("#popup_cancel").trigger('click');
|
|
});
|
|
break;
|
|
case 'prompt':
|
|
$('#popup_message').append('<br /><input type="text" size="30" id="popup_prompt" />').after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>');
|
|
$('#popup_prompt').width($('#popup_message').width());
|
|
$('#popup_ok').click(function() {
|
|
var val = $('#popup_prompt').val();
|
|
$.alerts._hide();
|
|
if (callback) callback(val);
|
|
});
|
|
$('#popup_cancel').click(function() {
|
|
$.alerts._hide();
|
|
if (callback) callback(null);
|
|
});
|
|
$('#popup_prompt, #popup_ok, #popup_cancel').keypress(function(e) {
|
|
if (e.keyCode == 13) $('#popup_ok').trigger('click');
|
|
if (e.keyCode == 27) $('#popup_cancel').trigger('click');
|
|
});
|
|
if (value) $('#popup_prompt').val(value);
|
|
$('#popup_prompt').focus().select();
|
|
break;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Hides the popup box.
|
|
*/
|
|
_hide: function() {
|
|
$('#popup_container').remove();
|
|
$.alerts._overlay('hide');
|
|
$.alerts._maintainPosition(false);
|
|
},
|
|
|
|
/**
|
|
* Toggles the overlay.
|
|
*
|
|
* @param status
|
|
*/
|
|
_overlay: function(status) {
|
|
switch (status) {
|
|
case 'show':
|
|
$.alerts._overlay('hide');
|
|
$('BODY').append('<div id="popup_overlay"></div>');
|
|
$('#popup_overlay').css({
|
|
position: 'absolute',
|
|
zIndex: 99998,
|
|
top: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
height: $(document).height(),
|
|
background: $.alerts.overlayColor,
|
|
opacity: $.alerts.overlayOpacity
|
|
});
|
|
break;
|
|
case 'hide':
|
|
$('#popup_overlay').remove();
|
|
break;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Repositions the popup box on window resize.
|
|
*/
|
|
_reposition: function() {
|
|
var top = (($(window).height() / 2) - ($('#popup_container').outerHeight() / 2)) + $.alerts.verticalOffset;
|
|
var left = (($(window).width() / 2) - ($('#popup_container').outerWidth() / 2)) + $.alerts.horizontalOffset;
|
|
|
|
if (top < 0) {
|
|
top = 0;
|
|
}
|
|
if (left < 0) {
|
|
left = 0;
|
|
}
|
|
|
|
// IE6 fix
|
|
if ($.browser.msie && parseInt($.browser.version) <= 6) {
|
|
top = top + $(window).scrollTop();
|
|
}
|
|
|
|
$('#popup_container').css({
|
|
top: top + 'px',
|
|
left: left + 'px'
|
|
});
|
|
$('#popup_overlay').height($(document).height());
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param status
|
|
*/
|
|
_maintainPosition: function(status) {
|
|
if ($.alerts.repositionOnResize) {
|
|
switch(status) {
|
|
case true:
|
|
$(window).bind('resize', $.alerts._reposition);
|
|
break;
|
|
case false:
|
|
$(window).unbind('resize', $.alerts._reposition);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Shortcut function for alert boxes.
|
|
*/
|
|
jAlert = function(message, title, callback) {
|
|
$.alerts.alert(message, title, callback);
|
|
};
|
|
|
|
/**
|
|
* Shortcut function for confirm boxes.
|
|
*/
|
|
jConfirm = function(message, title, callback) {
|
|
$.alerts.confirm(message, title, callback);
|
|
};
|
|
|
|
/**
|
|
* Asks the user if he is sure to delete an item.
|
|
*
|
|
* @param url
|
|
*/
|
|
deleteConfirm = function(url) {
|
|
var title = 'Delete Confirmation';
|
|
|
|
$.alerts.confirm('Are you sure you want to delete this item?', title, function(answer) {
|
|
if (answer) {
|
|
window.location = url;
|
|
}
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Allows users to change titles.
|
|
*/
|
|
changeTitle = function(value, url) {
|
|
var title = 'Change title';
|
|
|
|
$.alerts.prompt('Enter the new title:', value, title, function(text) {
|
|
if (text) {
|
|
$.post(url, { title: text }, function(data) {
|
|
window.location = data;
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Shortcut function for prompt boxes.
|
|
*/
|
|
jPrompt = function(message, value, title, callback) {
|
|
$.alerts.prompt(message, value, title, callback);
|
|
};
|
|
|
|
})(jQuery);
|