[ticket/12034] AJAXify notifications popup.

PHPBB3-12034

phpBB/includes/functions.php

@@ -5099,7 +5099,7 @@ function page_header($page_title = '', $display_online_list = true, $item_id = 0
 	}
 
 	$hidden_fields_for_jumpbox = phpbb_build_hidden_fields_for_query_params($request, array('f'));
-
+	$notification_mark_hash = generate_link_hash('mark_all_notifications_read');
 
 	// The following assigns all _common_ variables that may be used at any point in a template.
 	$template->assign_vars(array(
@@ -5119,6 +5119,7 @@ function page_header($page_title = '', $display_online_list = true, $item_id = 0
 		'UNREAD_NOTIFICATIONS_COUNT'	=> ($notifications !== false) ? $notifications['unread_count'] : '',
 		'NOTIFICATIONS_COUNT'			=> ($notifications !== false) ? $notifications['unread_count'] : '',
 		'U_VIEW_ALL_NOTIFICATIONS'		=> append_sid("{$phpbb_root_path}ucp.$phpEx", 'i=ucp_notifications'),
+		'U_MARK_ALL_NOTIFICATIONS'		=> append_sid("{$phpbb_root_path}ucp.$phpEx", 'i=ucp_notifications&mode=notification_list&mark=all&token=' . $notification_mark_hash),
 		'U_NOTIFICATION_SETTINGS'		=> append_sid("{$phpbb_root_path}ucp.$phpEx", 'i=ucp_notifications&mode=notification_options'),
 		'S_NOTIFICATIONS_DISPLAY'		=> $config['load_notifications'],
 

phpBB/includes/ucp/ucp_notifications.php

@@ -98,7 +98,19 @@ class ucp_notifications
 						$phpbb_notifications->mark_notifications_read(false, false, $user->data['user_id'], $form_time);
 
 						meta_refresh(3, $this->u_action);
-						$message = $user->lang['NOTIFICATIONS_MARK_ALL_READ_SUCCESS'] . '<br /><br />' . sprintf($user->lang['RETURN_UCP'], '<a href="' . $this->u_action . '">', '</a>');
+						$message = $user->lang['NOTIFICATIONS_MARK_ALL_READ_SUCCESS'];
+						
+						if ($request->is_ajax())
+						{
+							$json_response = new \phpbb\json_response();
+							$json_response->send(array(
+								'MESSAGE_TITLE'	=> $user->lang['INFORMATION'],
+								'MESSAGE_TEXT'	=> $message,
+								'success'		=> true,
+							));
+						}
+						$message .= '<br /><br />' . $user->lang('RETURN_UCP', '<a href="' . $this->u_action . '">', '</a>');
+
 						trigger_error($message);
 					}
 					else

phpBB/index.php

@@ -27,24 +27,44 @@ $user->setup('viewforum');
 // Mark notifications read
 if (($mark_notification = $request->variable('mark_notification', 0)))
 {
-	$phpbb_notifications = $phpbb_container->get('notification_manager');
+	if ($user->data['user_id'] == ANONYMOUS)
-
-	$notification = $phpbb_notifications->load_notifications(array(
-		'notification_id'	=> $mark_notification
-	));
-
-	if (isset($notification['notifications'][$mark_notification]))
 	{
-		$notification = $notification['notifications'][$mark_notification];
+		if ($request->is_ajax())
-
-		$notification->mark_read();
-
-		if (($redirect = $request->variable('redirect', '')))
 		{
-			redirect(append_sid($phpbb_root_path . $redirect));
+			trigger_error('LOGIN_REQUIRED');
 		}
+		login_box('', $user->lang['LOGIN_REQUIRED']);
+	}
 
-		redirect($notification->get_url());
+	if (check_link_hash($request->variable('hash', ''), 'mark_notification_read'))
+	{
+		$phpbb_notifications = $phpbb_container->get('notification_manager');
+
+		$notification = $phpbb_notifications->load_notifications(array(
+			'notification_id'	=> $mark_notification
+		));
+
+		if (isset($notification['notifications'][$mark_notification]))
+		{
+			$notification = $notification['notifications'][$mark_notification];
+
+			$notification->mark_read();
+
+			if ($request->is_ajax())
+			{
+				$json_response = new \phpbb\json_response();
+				$json_response->send(array(
+					'success'	=> true,
+				));
+			}
+
+			if (($redirect = $request->variable('redirect', '')))
+			{
+				redirect(append_sid($phpbb_root_path . $redirect));
+			}
+
+			redirect($notification->get_url());
+		}
 	}
 }
 

phpBB/language/en/common.php

@@ -371,6 +371,7 @@ $lang = array_merge($lang, array(
 	'LOGIN_VIEWFORUM'					=> 'The board requires you to be registered and logged in to view this forum.',
 	'LOGIN_EXPLAIN_EDIT'				=> 'In order to edit posts in this forum you have to be registered and logged in.',
 	'LOGIN_EXPLAIN_VIEWONLINE'			=> 'In order to view the online list you have to be registered and logged in.',
+	'LOGIN_REQUIRED'					=> 'You need to login to perform this action.',
 	'LOGOUT'							=> 'Logout',
 	'LOGOUT_USER'						=> 'Logout [ %s ]',
 	'LOG_ME_IN'							=> 'Remember me',
@@ -378,6 +379,7 @@ $lang = array_merge($lang, array(
 	'MAIN'					=> 'Main',
 	'MARK'					=> 'Mark',
 	'MARK_ALL'				=> 'Mark all',
+	'MARK_ALL_READ'			=> 'Mark all read',
 	'MARK_FORUMS_READ'		=> 'Mark forums read',
 	'MARK_READ'				=> 'Mark read',
 	'MARK_SUBFORUMS_READ'	=> 'Mark subforums read',

phpBB/phpbb/notification/type/base.php

@@ -282,15 +282,17 @@ abstract class base implements \phpbb\notification\type\type_interface
 	*/
 	public function prepare_for_display()
 	{
+		$mark_hash = generate_link_hash('mark_notification_read');
+
 		if ($this->get_url())
 		{
-			$u_mark_read = append_sid($this->phpbb_root_path . 'index.' . $this->php_ext, 'mark_notification=' . $this->notification_id);
+			$u_mark_read = append_sid($this->phpbb_root_path . 'index.' . $this->php_ext, 'mark_notification=' . $this->notification_id . '&hash=' . $mark_hash);
 		}
 		else
 		{
 			$redirect = (($this->user->page['page_dir']) ? $this->user->page['page_dir'] . '/' : '') . $this->user->page['page_name'] . (($this->user->page['query_string']) ? '?' . $this->user->page['query_string'] : '');
 
-			$u_mark_read = append_sid($this->phpbb_root_path . 'index.' . $this->php_ext, 'mark_notification=' . $this->notification_id . '&redirect=' . urlencode($redirect));
+			$u_mark_read = append_sid($this->phpbb_root_path . 'index.' . $this->php_ext, 'mark_notification=' . $this->notification_id . '&hash=' . $mark_hash . '&redirect=' . urlencode($redirect));
 		}
 
 		return array(

phpBB/styles/prosilver/template/ajax.js

@@ -106,6 +106,50 @@ phpbb.addAjaxCallback('mark_topics_read', function(res, update_topic_links) {
 	phpbb.closeDarkenWrapper(3000);
 });
 
+// This callback will mark all notifications read
+phpbb.addAjaxCallback('notification.mark_all_read', function(res) {
+	if (typeof res.success !== 'undefined') {
+		var unreadRows = $('#notification_list li.bg2');
+
+		// Remove the unread status.
+		unreadRows.removeClass('bg2');
+		unreadRows.find('a.mark_read').remove();
+
+		// Update the notification link to the real URL.
+		unreadRows.each(function() {
+			var link = $(this).find('a');
+			link.attr('href', link.attr('data-real-url'));
+		});
+		// Set the unread count to 0.
+		$('#notification_list_button strong').html(0);
+		// Remove the Mark all read link
+		$('#mark_all_notifications').remove();
+
+		phpbb.closeDarkenWrapper(3000);
+	}
+});
+
+// This callback will mark a notification read
+phpbb.addAjaxCallback('notification.mark_read', function(res) {
+	if (typeof res.success !== 'undefined') {
+		var el = $(this),
+			unreadCountEl = $('#notification_list_button strong'),
+			unreadCount = Number(unreadCountEl.html()),
+			link = el.siblings('a');
+
+		// Remove the unread status.
+		el.parent('li.bg2').removeClass('bg2');
+		el.remove();
+		link.attr('href', link.attr('data-real-url'));
+		// Update the unread count
+		unreadCountEl.html(--unreadCount);
+		// Remove the Mark all read link if there are no unread notifications.
+		if (!unreadCount) {
+			$('#mark_all_notifications').remove();
+		}
+	}
+});
+
 // This callback finds the post from the delete link, and removes it.
 phpbb.addAjaxCallback('post_delete', function() {
 	var el = $(this),

phpBB/styles/prosilver/template/overall_header.html

@@ -107,7 +107,12 @@
 						<div class="dropdown-contents">
 							<div class="header">
 								{L_NOTIFICATIONS}
-								<span class="header_settings"><a href="{U_NOTIFICATION_SETTINGS}">{L_SETTINGS}</a></span>
+								<span class="header_settings">
+									<a href="{U_NOTIFICATION_SETTINGS}">{L_SETTINGS}</a>
+									<!-- IF NOTIFICATIONS_COUNT -->
+										<span id="mark_all_notifications"> &bull; <a href="{U_MARK_ALL_NOTIFICATIONS}" data-ajax="notification.mark_all_read">{L_MARK_ALL_READ}</a></span>
+									<!-- ENDIF -->
+								</span>
 							</div>
 
 							<ul>
@@ -118,17 +123,18 @@
 								<!-- ENDIF -->
 								<!-- BEGIN notifications -->
 									<li class="<!-- IF notifications.UNREAD --> bg2<!-- ENDIF -->">
-										<!-- IF notifications.URL --><a href="<!-- IF notifications.UNREAD -->{notifications.U_MARK_READ}<!-- ELSE -->{notifications.URL}<!-- ENDIF -->"><!-- ENDIF -->
+										<!-- IF notifications.URL -->
+											<a href="<!-- IF notifications.UNREAD -->{notifications.U_MARK_READ}" data-real-url="{notifications.URL}<!-- ELSE -->{notifications.URL}<!-- ENDIF -->">
+										<!-- ENDIF -->
 											<!-- IF notifications.AVATAR -->{notifications.AVATAR}<!-- ELSE --><img src="{T_THEME_PATH}/images/no_avatar.gif" alt="" /><!-- ENDIF -->
 											<div class="notification_text">
 												<p>{notifications.FORMATTED_TITLE}</p>
 												<p>&raquo; {notifications.TIME}</p>
-
-												<!-- IF not notifications.URL and notifications.U_MARK_READ -->
-													<p><a href="{notifications.U_MARK_READ}">{L_MARK_READ}</a></p>
-												<!-- ENDIF -->
 											</div>
 										<!-- IF notifications.URL --></a><!-- ENDIF -->
+										<!-- IF notifications.UNREAD -->
+											<a href="{notifications.U_MARK_READ}" class="mark_read icon-mark" data-ajax="notification.mark_read" title="{L_MARK_READ}"></a>
+										<!-- ENDIF -->
 									</li>
 					   			<!-- END notifications -->
 							</ul>

phpBB/styles/prosilver/theme/colours.css

@@ -258,6 +258,11 @@ a:active	{ color: #368AD2; }
 	color: #C8E6FF;
 }
 
+/* Notification mark read link */
+#notification_list a.mark_read {
+	background-color: #FFFFFF;
+}
+
 /* Links for forum/topic lists */
 a.forumtitle {
 	color: #105289;
@@ -716,6 +721,7 @@ a.sendemail {
 .icon-notification				{ background-image: url("./images/icon_notification.gif"); }
 .icon-pm						{ background-image: url("./images/icon_pm.gif"); }
 .icon-download					{ background-image: url("./images/icon_download.gif"); }
+.icon-mark						{ background-image: url("./images/icon_mark.gif"); }
 
 /* Profile & navigation icons */
 .email-icon, .email-icon a		{ background-image: url("./images/icon_contact_email.gif"); }

phpBB/styles/prosilver/theme/common.css

@@ -1015,6 +1015,7 @@ form > p.post-notice strong {
 	list-style-type: none;
 	font-size: 0.95em;
 	clear: both;
+	position: relative;
 }
 
 #notification_list ul li:before, #notification_list ul li:after {

phpBB/styles/prosilver/theme/links.css

@@ -49,6 +49,29 @@ ul.linklist li.small-icon > a, ul.linklist li.breadcrumbs span:first-child > a {
 	padding-left: 17px;
 }
 
+/* Notification mark read link */
+#notification_list a.mark_read {
+	background-position: center center;
+	background-repeat: no-repeat;
+	border-radius: 3px 0 0 3px;
+	display: none;
+	margin-top: -20px;
+	position: absolute;
+	z-index: 2;
+	right: 0;
+	top: 50%;
+	width: 30px;
+	height: 40px;
+}
+
+#notification_list li:hover a.mark_read {
+	display: block;
+}
+
+#notification_list a.mark_read:hover {
+	width: 40px;
+}
+
 /* Links for forum/topic lists */
 a.forumtitle {
 	font-family: "Trebuchet MS", Helvetica, Arial, Sans-serif;