[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
This commit is contained in:
Varun Agrawal 2014-04-10 23:43:37 +05:30
parent 377fb770fb
commit 285b7a1f4c
2 changed files with 41 additions and 21 deletions

View file

@ -549,13 +549,23 @@ phpbb.addAjaxCallback = function(id, callback) {
* current text so that the process can be repeated. * current text so that the process can be repeated.
*/ */
phpbb.addAjaxCallback('alt_text', function() { phpbb.addAjaxCallback('alt_text', function() {
var el = $(this), var el,
updateAll = $(this).data('update-all'),
altText; altText;
if (updateAll !== undefined && updateAll.length) {
el = $(updateAll);
} else {
el = $(this);
}
el.each(function() {
var el = $(this);
altText = el.attr('data-alt-text'); altText = el.attr('data-alt-text');
el.attr('data-alt-text', el.text()); el.attr('data-alt-text', el.text());
el.attr('title', altText); el.attr('title', $.trim(altText));
el.text(altText); el.text(altText);
});
}); });
/** /**
@ -568,16 +578,25 @@ phpbb.addAjaxCallback('alt_text', function() {
* and changes the link itself. * and changes the link itself.
*/ */
phpbb.addAjaxCallback('toggle_link', function() { phpbb.addAjaxCallback('toggle_link', function() {
var el = $(this), var el,
updateAll = $(this).data('update-all') ,
toggleText, toggleText,
toggleUrl, toggleUrl,
toggleClass; toggleClass;
// Toggle link text if (updateAll !== undefined && updateAll.length) {
el = $(updateAll);
} else {
el = $(this);
}
el.each(function() {
var el = $(this);
// Toggle link text
toggleText = el.attr('data-toggle-text'); toggleText = el.attr('data-toggle-text');
el.attr('data-toggle-text', el.text()); el.attr('data-toggle-text', el.text());
el.attr('title', toggleText); el.attr('title', $.trim(toggleText));
el.text(toggleText); el.text(toggleText);
// Toggle link url // Toggle link url
@ -589,6 +608,7 @@ phpbb.addAjaxCallback('toggle_link', function() {
toggleClass = el.attr('data-toggle-class'); toggleClass = el.attr('data-toggle-class');
el.attr('data-toggle-class', el.parent().attr('class')); el.attr('data-toggle-class', el.parent().attr('class'));
el.parent().attr('class', toggleClass); el.parent().attr('class', toggleClass);
});
}); });
/** /**

View file

@ -7,14 +7,14 @@
<!-- EVENT viewtopic_topic_tools_before --> <!-- EVENT viewtopic_topic_tools_before -->
<!-- IF U_WATCH_TOPIC --> <!-- IF U_WATCH_TOPIC -->
<li class="small-icon icon-<!-- IF S_WATCHING_TOPIC -->unsubscribe<!-- ELSE -->subscribe<!-- ENDIF -->"> <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} {S_WATCH_TOPIC_TITLE}
</a> </a>
</li> </li>
<!-- ENDIF --> <!-- ENDIF -->
<!-- IF U_BOOKMARK_TOPIC --> <!-- IF U_BOOKMARK_TOPIC -->
<li class="small-icon icon-bookmark"> <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} {S_BOOKMARK_TOPIC}
</a> </a>
</li> </li>