// 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] ) | |
// jPromptMulti( message, [value, title, callback] ) | |
// | |
// History: | |
// | |
// 1.00 - Released (29 December 2008) | |
// | |
// 1.01 - Fixed bug where unbinding would destroy all resize events | |
// | |
// License: | |
// | |
// This plugin is dual-licensed under the GNU General Public License and the MIT License and | |
// is copyright 2008 A Beautiful Site, LLC. | |
// | |
// UPDATED by Andrew Hart (andrew.f.hart@jpl.nasa.gov) to provide functionality for a | |
// multi-valued prompt. The multi-valued prompt offers the user the ability to specify | |
// more than one value for a given identifier. If providing seed values (values to | |
// place in the editor when first showing the prompt, they need to adhere to the following | |
// two conventions: | |
// | |
// 1) Individual values must be wrapped in <span/> tags | |
// 2) All <span/> tags must be wrapped in a single container tag (can be anything (li,div,td,etc)) | |
// | |
// When calling jPromptMulti, pass a handle to the container tag as the 'value' parameter. | |
// Example: | |
// | |
// given html: <li id="myValues"><span>value1</span>, <span>value2</span></li> | |
// | |
// you would call jPromptMulti('Update values',$('#myValues'),'title',callbackFn); | |
// | |
// If a callback function is provided (and only if the user clicks 'SAVE'), the callback | |
// will be executed. The callback function should expect a single parameter (which will be | |
// the list of user-specified values represented as a regular JavaScript array). | |
// | |
// | |
// jPromptMulti( | |
(function($) { | |
$.alerts = { | |
// These properties can be read/written by accessing $.alerts.propertyName from your scripts at any time | |
verticalOffset: -75, // vertical offset of the dialog from center screen, in pixels | |
horizontalOffset: 0, // horizontal offset of the dialog from center screen, in pixels/ | |
repositionOnResize: true, // re-centers the dialog on window resize | |
overlayOpacity: .01, // transparency level of overlay | |
overlayColor: '#FFF', // base color of overlay | |
draggable: true, // make the dialogs draggable (requires UI Draggables plugin) | |
okButton: ' SAVE ', // text for the OK button | |
cancelButton: ' Cancel ', // text for the Cancel button | |
dialogClass: null, // if specified, this class will be applied to all dialogs | |
// Public methods | |
alert: function(message, title, callback) { | |
if( title == null ) title = 'Alert'; | |
$.alerts._show(title, message, null, 'alert', function(result) { | |
if( callback ) callback(result); | |
}); | |
}, | |
confirm: function(message, title, callback) { | |
if( title == null ) title = 'Confirm'; | |
$.alerts._show(title, message, null, 'confirm', function(result) { | |
if( callback ) callback(result); | |
}); | |
}, | |
prompt: function(message, value, title, callback) { | |
if( title == null ) title = 'title'; | |
$.alerts._show(title, message, value, 'prompt', function(result) { | |
if( callback ) callback(result); | |
}); | |
}, | |
promptMulti: function(message, value, title, callback) { | |
if( title == null) title = 'title'; | |
$.alerts._show(title, message, value, 'promptMulti', function(result) { | |
if( callback ) callback(result); | |
}); | |
}, | |
// Private methods | |
_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; | |
case 'promptMulti': | |
// In the case of a multiple value prompt, 'value' should be a jQuery DOM object containing | |
// a number of individual values wrapped in <span/> elements. Each <span/> element in | |
// the provided message is inspected, and its text value is used. | |
// example: <td><span>value1</span>, <span>value2</span></td> | |
// would translate into 2 values (value1 and value2) being displayed for editing. | |
value.children('span').each(function() { | |
var $input = $('<input>') | |
.attr({'type':'text','size':'30','class':'popup_multiPrompt','value':$(this).text()}); | |
$("#popup_message").append('<br/>').append($input); | |
}); | |
$("#popup_message") | |
.after ('<br/><input type="button" id="multiPromptNewValue" value="+"/> Add a new value' + | |
'<div id="popup_panel"><input type="button" value="' + | |
$.alerts.okButton + | |
'" id="popup_ok" /> <input type="button" value="' + | |
$.alerts.cancelButton + | |
'" id="popup_cancel" /></div>'); | |
$(".popup_multiPrompt").width( $("#popup_message").width() ); | |
$("#multiPromptNewValue").click( function() { | |
$("#popup_message") | |
.append('<br /><input type="text" size="30" class="popup_multiPrompt" value=""/>'); | |
$(".popup_multiPrompt").width( $("#popup_message").width() ); | |
}); | |
$("#popup_ok").click( function() { | |
// Gather values | |
var values = Array(); | |
$(".popup_multiPrompt").each( function() { | |
if ($(this).val()) values.push($(this).val()); | |
}); | |
$.alerts._hide(); | |
if( callback ) callback( values ); | |
}); | |
$("#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; | |
} | |
// Make draggable | |
if( $.alerts.draggable ) { | |
try { | |
$("#popup_container").draggable({ handle: $("#popup_title") }); | |
$("#popup_title").css({ cursor: 'move' }); | |
} catch(e) { /* requires jQuery UI draggables */ } | |
} | |
}, | |
_hide: function() { | |
$("#popup_container").remove(); | |
$.alerts._overlay('hide'); | |
$.alerts._maintainPosition(false); | |
}, | |
_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: '0px', | |
left: '0px', | |
width: '100%', | |
height: $(document).height(), | |
background: $.alerts.overlayColor, | |
opacity: $.alerts.overlayOpacity | |
}); | |
break; | |
case 'hide': | |
$("#popup_overlay").remove(); | |
break; | |
} | |
}, | |
_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() ); | |
}, | |
_maintainPosition: function(status) { | |
if( $.alerts.repositionOnResize ) { | |
switch(status) { | |
case true: | |
$(window).bind('resize', $.alerts._reposition); | |
break; | |
case false: | |
$(window).unbind('resize', $.alerts._reposition); | |
break; | |
} | |
} | |
} | |
} | |
// Shortuct functions | |
jAlert = function(message, title, callback) { | |
$.alerts.alert(message, title, callback); | |
} | |
jConfirm = function(message, title, callback) { | |
$.alerts.confirm(message, title, callback); | |
}; | |
jPrompt = function(message, value, title, callback) { | |
$.alerts.prompt(message, value, title, callback); | |
}; | |
jPromptMulti = function(message, value, title, callback) { | |
$.alerts.promptMulti(message, value, title, callback); | |
}; | |
})(jQuery); |