From dd566ec76c0e182f6367dcc157b1cb4eeb30ff29 Mon Sep 17 00:00:00 2001 From: Rouslan Placella Date: Tue, 23 Aug 2011 19:53:57 +0100 Subject: [PATCH 1/5] Make ajax notifications dismissable --- js/functions.js | 67 +++++++++++++++++++++---- js/messages.php | 1 + themes/original/css/theme_right.css.php | 1 + themes/pmahomme/css/theme_right.css.php | 1 + 4 files changed, 60 insertions(+), 10 deletions(-) diff --git a/js/functions.js b/js/functions.js index 022cb808c1..077456efc2 100644 --- a/js/functions.js +++ b/js/functions.js @@ -1307,48 +1307,70 @@ $(document).ready(function(){ */ function PMA_ajaxShowMessage(message, timeout) { - - //Handle the case when a empty data.message is passed. We don't want the empty message + // Handle the case when a empty data.message is passed. + // We don't want the empty message if (message == '') { return true; } else if (! message) { // If the message is undefined, show the default message = PMA_messages['strLoading']; } - /** * @var timeout Number of milliseconds for which the message will be visible - * @default 5000 ms + * @default 10000 ms */ if (! timeout) { - timeout = 5000; + timeout = 10000; } - // Create a parent element for the AJAX messages, if necessary if ($('#loading_parent').length == 0) { $('
') .insertBefore("#serverinfo"); } - // Update message count to create distinct message elements every time ajax_message_count++; - // Remove all old messages, if any $(".ajax_notification[id^=ajax_message_num]").remove(); - /** * @var $retval a jQuery object containing the reference * to the created AJAX message */ - var $retval = $('') + var $retval = $( + '' + ) .hide() .appendTo("#loading_parent") .html(message) .fadeIn('medium') .delay(timeout) .fadeOut('medium', function() { + // Here we should destroy the qtip instance, but + // due to a bug in qtip's implementation we can + // only hide it without throwing JS errors. + $(this).qtip('hide'); + // Remove the notification $(this).remove(); }); + /** + * @var qOpts Options for "Dismiss notification" tooltip + */ + var qOpts = { + show: { + effect: { length: 0 }, + delay: 0 + }, + hide: { + effect: { length: 0 }, + delay: 0 + } + }; + /** + * Add a tooltip to the notification to let the user know that (s)he + * can dismiss the ajax notification by clicking on it. + */ + PMA_createqTip($retval, PMA_messages['strDismiss'], qOpts); return $retval; } @@ -1362,9 +1384,34 @@ function PMA_ajaxRemoveMessage($this_msgbox) $this_msgbox .stop(true, true) .fadeOut('medium'); + // Here we should destroy the qtip instance, but + // due to a bug in qtip's implementation we can + // only hide it without throwing JS errors. + $this_msgbox.qtip('hide'); } } +/** + * Allows the user to dismiss a notification + * created with PMA_ajaxShowMessage() + */ +$('.ajax_notification').live('click', function () { + PMA_ajaxRemoveMessage($(this)); +}); + +/** + * The below two functions hide the "Dismiss notification" tooltip when a user + * is hovering a link or button that is inside an ajax message + */ +$('.ajax_notification a, .ajax_notification button, .ajax_notification input') +.live('mouseover', function () { + $(this).parents('.ajax_notification').qtip('hide'); +}); +$('.ajax_notification a, .ajax_notification button, .ajax_notification input') +.live('mouseout', function () { + $(this).parents('.ajax_notification').qtip('show'); +}); + /** * Hides/shows the "Open in ENUM/SET editor" message, depending on the data type of the column currently selected */ diff --git a/js/messages.php b/js/messages.php index 5106283b7c..4e350e26fe 100644 --- a/js/messages.php +++ b/js/messages.php @@ -214,6 +214,7 @@ $js_messages['strErrorProcessingRequest'] = __('Error in Processing Request'); $js_messages['strDroppingColumn'] = __('Dropping Column'); $js_messages['strAddingPrimaryKey'] = __('Adding Primary Key'); $js_messages['strOK'] = __('OK'); +$js_messages['strDismiss'] = __('Click to dismiss this notification'); /* For db_operations.js */ $js_messages['strRenamingDatabases'] = __('Renaming Databases'); diff --git a/themes/original/css/theme_right.css.php b/themes/original/css/theme_right.css.php index badeb92a61..c9384156b4 100644 --- a/themes/original/css/theme_right.css.php +++ b/themes/original/css/theme_right.css.php @@ -1623,6 +1623,7 @@ table#serverconnection_trg_local { background-image: url(getImgPath(); ?>ajax_clock_small.gif); background-repeat: no-repeat; background-position: 2%; + cursor: pointer; } #loading_parent { diff --git a/themes/pmahomme/css/theme_right.css.php b/themes/pmahomme/css/theme_right.css.php index c52a973a07..dd94e9c810 100644 --- a/themes/pmahomme/css/theme_right.css.php +++ b/themes/pmahomme/css/theme_right.css.php @@ -1948,6 +1948,7 @@ input[type=text].invalid_value, background-repeat: no-repeat; background-position: 2%; border:1px solid #e2b709; + cursor: pointer; } /* additional styles */ From d39db8e3b604743489582c20f39456a83c3bb387 Mon Sep 17 00:00:00 2001 From: Rouslan Placella Date: Wed, 14 Sep 2011 15:27:11 +0100 Subject: [PATCH 2/5] Improved dismissable Ajax notifications, so that error messages don't disappear --- js/functions.js | 167 +++++++++++++++--------- themes/original/css/theme_right.css.php | 1 - themes/pmahomme/css/theme_right.css.php | 1 - 3 files changed, 107 insertions(+), 62 deletions(-) diff --git a/js/functions.js b/js/functions.js index 93be9a06dc..831a89e13e 100644 --- a/js/functions.js +++ b/js/functions.js @@ -1291,14 +1291,42 @@ $(document).ready(function(){ /** * Show a message on the top of the page for an Ajax request * - * @param var message string containing the message to be shown. + * Sample usage: + * + * 1) var $msg = PMA_ajaxShowMessage(); + * This will show a message that reads "Loading...". Such a message will not + * disappear automatically and cannot be dismissed by the user. To remove this + * message either the PMA_ajaxRemoveMessage($msg) function must be called or + * another message must be show with PMA_ajaxShowMessage() function. + * + * 2) var $msg = PMA_ajaxShowMessage('The operation was successful'); + * This will show a message that will disappear automatically and it can also + * be dismissed by the user. + * + * 3) var $msg = PMA_ajaxShowMessage('Some error', 0); + * This will show a message that will not disappear automatically, but it + * can be dismissed by the user after he has finished reading it. + * + * @param string message string containing the message to be shown. * optional, defaults to 'Loading...' - * @param var timeout number of milliseconds for the message to be visible - * optional, defaults to 5000 + * @param mixed timeout number of milliseconds for the message to be visible + * optional, defaults to 5000. If set to 'false', the + * notification will never disappear * @return jQuery object jQuery Element that holds the message div + * this object can be passed to PMA_ajaxRemoveMessage() + * to remove the notification */ function PMA_ajaxShowMessage(message, timeout) { + /** + * @var self_closing Whether the notification will automatically disappear + */ + var self_closing = true; + /** + * @var dismissable Whether the user will be able to remove + * the notification by clicking on it + */ + var dismissable = true; // Handle the case when a empty data.message is passed. // We don't want the empty message if (message == '') { @@ -1306,13 +1334,14 @@ function PMA_ajaxShowMessage(message, timeout) } else if (! message) { // If the message is undefined, show the default message = PMA_messages['strLoading']; + dismissable = false; + self_closing = false; } - /** - * @var timeout Number of milliseconds for which the message will be visible - * @default 10000 ms - */ - if (! timeout) { - timeout = 10000; + // Figure out whether (or after how long) to remove the notification + if (timeout == undefined) { + timeout = 5000; + } else if (timeout === false) { + self_closing = false; } // Create a parent element for the AJAX messages, if necessary if ($('#loading_parent').length == 0) { @@ -1331,44 +1360,59 @@ function PMA_ajaxShowMessage(message, timeout) '' - ) - .hide() - .appendTo("#loading_parent") - .html(message) - .fadeIn('medium') + ) + .hide() + .appendTo("#loading_parent") + .html(message) + .fadeIn('medium'); + // If the notification is self-closing we should create a callback to remove it + if (self_closing) { + $retval .delay(timeout) .fadeOut('medium', function() { - // Here we should destroy the qtip instance, but - // due to a bug in qtip's implementation we can - // only hide it without throwing JS errors. - $(this).qtip('hide'); + if ($(this).is('.dismissable')) { + // Here we should destroy the qtip instance, but + // due to a bug in qtip's implementation we can + // only hide it without throwing JS errors. + $(this).qtip('hide'); + } // Remove the notification $(this).remove(); }); - /** - * @var qOpts Options for "Dismiss notification" tooltip - */ - var qOpts = { - show: { - effect: { length: 0 }, - delay: 0 - }, - hide: { - effect: { length: 0 }, - delay: 0 - } - }; - /** - * Add a tooltip to the notification to let the user know that (s)he - * can dismiss the ajax notification by clicking on it. - */ - PMA_createqTip($retval, PMA_messages['strDismiss'], qOpts); + } + // If the notification is dismissable we need to add the relevant class to it + // and add a tooltip so that the users know that it can be removed + if (dismissable) { + $retval.addClass('dismissable').css('cursor', 'pointer'); + /** + * @var qOpts Options for "Dismiss notification" tooltip + */ + var qOpts = { + show: { + effect: { length: 0 }, + delay: 0 + }, + hide: { + effect: { length: 0 }, + delay: 0 + } + }; + /** + * Add a tooltip to the notification to let the user know that (s)he + * can dismiss the ajax notification by clicking on it. + */ + PMA_createqTip($retval, PMA_messages['strDismiss'], qOpts); + } return $retval; } /** * Removes the message shown for an Ajax operation when it's completed + * + * @param jQuery object jQuery Element that holds the notification + * + * @return nothing */ function PMA_ajaxRemoveMessage($this_msgbox) { @@ -1376,32 +1420,35 @@ function PMA_ajaxRemoveMessage($this_msgbox) $this_msgbox .stop(true, true) .fadeOut('medium'); - // Here we should destroy the qtip instance, but - // due to a bug in qtip's implementation we can - // only hide it without throwing JS errors. - $this_msgbox.qtip('hide'); + if ($this_msgbox.is('.dismissable')) { + // Here we should destroy the qtip instance, but + // due to a bug in qtip's implementation we can + // only hide it without throwing JS errors. + $this_msgbox.qtip('hide'); + } } } -/** - * Allows the user to dismiss a notification - * created with PMA_ajaxShowMessage() - */ -$('.ajax_notification').live('click', function () { - PMA_ajaxRemoveMessage($(this)); -}); - -/** - * The below two functions hide the "Dismiss notification" tooltip when a user - * is hovering a link or button that is inside an ajax message - */ -$('.ajax_notification a, .ajax_notification button, .ajax_notification input') -.live('mouseover', function () { - $(this).parents('.ajax_notification').qtip('hide'); -}); -$('.ajax_notification a, .ajax_notification button, .ajax_notification input') -.live('mouseout', function () { - $(this).parents('.ajax_notification').qtip('show'); +$(document).ready(function() { + /** + * Allows the user to dismiss a notification + * created with PMA_ajaxShowMessage() + */ + $('.ajax_notification.dismissable').live('click', function () { + PMA_ajaxRemoveMessage($(this)); + }); + /** + * The below two functions hide the "Dismiss notification" tooltip when a user + * is hovering a link or button that is inside an ajax message + */ + $('.ajax_notification a, .ajax_notification button, .ajax_notification input') + .live('mouseover', function () { + $(this).parents('.ajax_notification').qtip('hide'); + }); + $('.ajax_notification a, .ajax_notification button, .ajax_notification input') + .live('mouseout', function () { + $(this).parents('.ajax_notification').qtip('show'); + }); }); /** @@ -2942,7 +2989,7 @@ var toggleButton = function ($obj) { } else { $(this).addClass('isActive'); } - var $msg = PMA_ajaxShowMessage(PMA_messages['strLoading']); + var $msg = PMA_ajaxShowMessage(); var $container = $(this); var callback = $('.callback', this).text(); // Perform the actual toggle diff --git a/themes/original/css/theme_right.css.php b/themes/original/css/theme_right.css.php index a7b698d7fe..987b5593f0 100644 --- a/themes/original/css/theme_right.css.php +++ b/themes/original/css/theme_right.css.php @@ -1621,7 +1621,6 @@ table#serverconnection_trg_local { background-image: url(getImgPath(); ?>ajax_clock_small.gif); background-repeat: no-repeat; background-position: 2%; - cursor: pointer; } #loading_parent { diff --git a/themes/pmahomme/css/theme_right.css.php b/themes/pmahomme/css/theme_right.css.php index e94311db14..5278085f28 100644 --- a/themes/pmahomme/css/theme_right.css.php +++ b/themes/pmahomme/css/theme_right.css.php @@ -1971,7 +1971,6 @@ input[type=text].invalid_value, background-repeat: no-repeat; background-position: 2%; border:1px solid #e2b709; - cursor: pointer; } /* additional styles */ From 6dbab1fb38a97d3c6c88c382a9318e80fa2c5c2e Mon Sep 17 00:00:00 2001 From: Rouslan Placella Date: Wed, 14 Sep 2011 15:28:30 +0100 Subject: [PATCH 3/5] Prevent error notifications from disappearing in Routines, Triggers and Events implemetatations --- js/rte/common.js | 8 ++++---- js/rte/routines.js | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/js/rte/common.js b/js/rte/common.js index 85234590d7..842f3250ed 100644 --- a/js/rte/common.js +++ b/js/rte/common.js @@ -198,7 +198,7 @@ $(document).ready(function () { }); } } else { - PMA_ajaxShowMessage(data.error); + PMA_ajaxShowMessage(data.error, false); } }); // end $.post() } // end "if (RTE.validate())" @@ -245,7 +245,7 @@ $(document).ready(function () { // Execute item-specific code RTE.postDialogShow(data); } else { - PMA_ajaxShowMessage(data.error); + PMA_ajaxShowMessage(data.error, false); } }); // end $.get() }); // end $.live() @@ -301,7 +301,7 @@ $(document).ready(function () { var opts = {lineNumbers: true, matchBrackets: true, indentUnit: 4, mode: "text/x-mysql"}; CodeMirror.fromTextArea($elm[0], opts); } else { - PMA_ajaxShowMessage(data.error); + PMA_ajaxShowMessage(data.error, false); } }); // end $.get() }); // end $.live() @@ -370,7 +370,7 @@ $(document).ready(function () { // Show the query that we just executed PMA_slidingMessage(data.sql_query); } else { - PMA_ajaxShowMessage(PMA_messages['strErrorProcessingRequest'] + " : " + data.error); + PMA_ajaxShowMessage(PMA_messages['strErrorProcessingRequest'] + " : " + data.error, false); } }); // end $.get() }); // end $.PMA_confirm() diff --git a/js/rte/routines.js b/js/rte/routines.js index 50c4f00051..504df64475 100644 --- a/js/rte/routines.js +++ b/js/rte/routines.js @@ -357,7 +357,7 @@ $(document).ready(function () { PMA_slidingMessage(data.message); $ajaxDialog.dialog('close'); } else { - PMA_ajaxShowMessage(data.error); + PMA_ajaxShowMessage(data.error, false); } }); }; @@ -388,7 +388,7 @@ $(document).ready(function () { PMA_slidingMessage(data.message); } } else { - PMA_ajaxShowMessage(data.error); + PMA_ajaxShowMessage(data.error, false); } }); // end $.get() }); // end $.live() From ad4fa3547b78cfe9e968c251d06a83b8fa1a9219 Mon Sep 17 00:00:00 2001 From: Rouslan Placella Date: Wed, 14 Sep 2011 16:09:15 +0100 Subject: [PATCH 4/5] Fixed comment --- js/functions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/functions.js b/js/functions.js index 831a89e13e..48ed38c284 100644 --- a/js/functions.js +++ b/js/functions.js @@ -1303,7 +1303,7 @@ $(document).ready(function(){ * This will show a message that will disappear automatically and it can also * be dismissed by the user. * - * 3) var $msg = PMA_ajaxShowMessage('Some error', 0); + * 3) var $msg = PMA_ajaxShowMessage('Some error', false); * This will show a message that will not disappear automatically, but it * can be dismissed by the user after he has finished reading it. * From 82be0e66334190bfc0422270fe5bb422ac7aae65 Mon Sep 17 00:00:00 2001 From: Rouslan Placella Date: Sat, 17 Sep 2011 15:18:55 +0100 Subject: [PATCH 5/5] Ajax message "Processing request" also should not disappear and should not be dismissable --- js/functions.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/js/functions.js b/js/functions.js index 48ed38c284..f67b6a9c97 100644 --- a/js/functions.js +++ b/js/functions.js @@ -1299,11 +1299,15 @@ $(document).ready(function(){ * message either the PMA_ajaxRemoveMessage($msg) function must be called or * another message must be show with PMA_ajaxShowMessage() function. * - * 2) var $msg = PMA_ajaxShowMessage('The operation was successful'); + * 2) var $msg = PMA_ajaxShowMessage(PMA_messages['strProcessingRequest']); + * This is a special case. The behaviour is same as above, + * just with a different message + * + * 3) var $msg = PMA_ajaxShowMessage('The operation was successful'); * This will show a message that will disappear automatically and it can also * be dismissed by the user. * - * 3) var $msg = PMA_ajaxShowMessage('Some error', false); + * 4) var $msg = PMA_ajaxShowMessage('Some error', false); * This will show a message that will not disappear automatically, but it * can be dismissed by the user after he has finished reading it. * @@ -1336,6 +1340,10 @@ function PMA_ajaxShowMessage(message, timeout) message = PMA_messages['strLoading']; dismissable = false; self_closing = false; + } else if (message == PMA_messages['strProcessingRequest']) { + // This is another case where the message should not disappear + dismissable = false; + self_closing = false; } // Figure out whether (or after how long) to remove the notification if (timeout == undefined) {