From 285b7a1f4c8dc3685efb04818747465e91be22c9 Mon Sep 17 00:00:00 2001
From: Varun Agrawal <Varun@VarunAgw.com>
Date: Thu, 10 Apr 2014 23:43:37 +0530
Subject: [PATCH] [ticket/12355] Topic Tools not fully updated when
 subscribing/bookmarking

The Topic Tools menu appears at the top of a topic page and again at the
bottom of a topic page.
When you use the Topic Tools menu to Bookmark or Subscribe to a Topic, the
menu item you chose is updated to reflect that, by switching to say
Unsubscribe topic or Remove from Bookmarks.
However, this change is not mirrored in the other Topic Tools menu at the
other location on the page.
Both Topic Tools menus should be updated during the AJAX event, so that
they always show the same options to the user.
It is solved by creating a data-update-all attribute which contains all
the class/ID that will update when topic tool is clicked

PHPBB3-12355
---
 phpBB/assets/javascript/core.js               | 58 +++++++++++++------
 .../template/viewtopic_topic_tools.html       |  4 +-
 2 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/phpBB/assets/javascript/core.js b/phpBB/assets/javascript/core.js
index aa9dc9af82..ca62a5f649 100644
--- a/phpBB/assets/javascript/core.js
+++ b/phpBB/assets/javascript/core.js
@@ -549,13 +549,23 @@ phpbb.addAjaxCallback = function(id, callback) {
  * current text so that the process can be repeated.
  */
 phpbb.addAjaxCallback('alt_text', function() {
-	var el = $(this),
+	var el,
+		updateAll = $(this).data('update-all'),
 		altText;
 
-	altText = el.attr('data-alt-text');
-	el.attr('data-alt-text', el.text());
-	el.attr('title', altText);
-	el.text(altText);
+	if (updateAll !== undefined && updateAll.length) {
+		el = $(updateAll);
+	} else {
+		el = $(this);
+	}
+
+	el.each(function() {
+		var el = $(this);
+		altText = el.attr('data-alt-text');
+		el.attr('data-alt-text', el.text());
+		el.attr('title', $.trim(altText));
+		el.text(altText);
+	});
 });
 
 /**
@@ -568,27 +578,37 @@ phpbb.addAjaxCallback('alt_text', function() {
  * and changes the link itself.
  */
 phpbb.addAjaxCallback('toggle_link', function() {
-	var el = $(this),
+	var el,
+		updateAll = $(this).data('update-all') ,
 		toggleText,
 		toggleUrl,
 		toggleClass;
 
-	// Toggle link text
+	if (updateAll !== undefined && updateAll.length) {
+		el = $(updateAll);
+	} else {
+		el = $(this);
+	}
 
-	toggleText = el.attr('data-toggle-text');
-	el.attr('data-toggle-text', el.text());
-	el.attr('title', toggleText);
-	el.text(toggleText);
+	el.each(function() {
+		var el = $(this);
 
-	// Toggle link url
-	toggleUrl = el.attr('data-toggle-url');
-	el.attr('data-toggle-url', el.attr('href'));
-	el.attr('href', toggleUrl);
+		// Toggle link text
+		toggleText = el.attr('data-toggle-text');
+		el.attr('data-toggle-text', el.text());
+		el.attr('title', $.trim(toggleText));
+		el.text(toggleText);
 
-	// Toggle class of link parent
-	toggleClass = el.attr('data-toggle-class');
-	el.attr('data-toggle-class', el.parent().attr('class'));
-	el.parent().attr('class', toggleClass);
+		// Toggle link url
+		toggleUrl = el.attr('data-toggle-url');
+		el.attr('data-toggle-url', el.attr('href'));
+		el.attr('href', toggleUrl);
+
+		// Toggle class of link parent
+		toggleClass = el.attr('data-toggle-class');
+		el.attr('data-toggle-class', el.parent().attr('class'));
+		el.parent().attr('class', toggleClass);
+	});
 });
 
 /**
diff --git a/phpBB/styles/prosilver/template/viewtopic_topic_tools.html b/phpBB/styles/prosilver/template/viewtopic_topic_tools.html
index ec17185bae..fcce2267c4 100644
--- a/phpBB/styles/prosilver/template/viewtopic_topic_tools.html
+++ b/phpBB/styles/prosilver/template/viewtopic_topic_tools.html
@@ -7,14 +7,14 @@
 				<!-- EVENT viewtopic_topic_tools_before -->
 				<!-- IF U_WATCH_TOPIC -->
 					<li class="small-icon icon-<!-- IF S_WATCHING_TOPIC -->unsubscribe<!-- ELSE -->subscribe<!-- ENDIF -->">
-						<a href="{U_WATCH_TOPIC}" title="{S_WATCH_TOPIC_TITLE}" data-ajax="toggle_link" data-toggle-class="small-icon icon-<!-- IF not S_WATCHING_TOPIC -->unsubscribe<!-- ELSE -->subscribe<!-- ENDIF -->" data-toggle-text="{S_WATCH_TOPIC_TOGGLE}" data-toggle-url="{U_WATCH_TOPIC_TOGGLE}">
+						<a href="{U_WATCH_TOPIC}" class="watch-topic-link" title="{S_WATCH_TOPIC_TITLE}" data-ajax="toggle_link" data-toggle-class="small-icon icon-<!-- IF not S_WATCHING_TOPIC -->unsubscribe<!-- ELSE -->subscribe<!-- ENDIF -->" data-toggle-text="{S_WATCH_TOPIC_TOGGLE}" data-toggle-url="{U_WATCH_TOPIC_TOGGLE}" data-update-all=".watch-topic-link">
 							{S_WATCH_TOPIC_TITLE}
 						</a>
 					</li>
 				<!-- ENDIF -->
 				<!-- IF U_BOOKMARK_TOPIC -->
 					<li class="small-icon icon-bookmark">
-						<a href="{U_BOOKMARK_TOPIC}" title="{L_BOOKMARK_TOPIC}" data-ajax="alt_text" data-alt-text="{S_BOOKMARK_TOGGLE}">
+						<a href="{U_BOOKMARK_TOPIC}" class="bookmark-link" title="{L_BOOKMARK_TOPIC}" data-ajax="alt_text" data-alt-text="{S_BOOKMARK_TOGGLE}" data-update-all=".bookmark-link">
 							{S_BOOKMARK_TOPIC}
 						</a>
 					</li>