Implement popup boxes to change titles
This commit is contained in:
Eike Foken
333
assets/js/jquery.alerts.js
Normal file
333
assets/js/jquery.alerts.js
Normal file
@@ -0,0 +1,333 @@
|
||||
/*
|
||||
* 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);
|
||||
@@ -9,19 +9,6 @@ function getNotifications() {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Asks the user if he is sure to delete an item.
|
||||
*
|
||||
* @param url
|
||||
*/
|
||||
function deleteConfirm(url) {
|
||||
var answer = confirm('Are you sure?');
|
||||
|
||||
if (answer) {
|
||||
window.location = url;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets a cookie.
|
||||
*
|
||||
|
||||
Reference in New Issue
Block a user