autoscroll to target post/comment when in single-thread mode; don't interfere with other modes; replaces using a named anchor with a url fragment to reach a particular place in the conversation when content is loaded with ajax.

This commit is contained in:
redmatrix 2016-09-25 23:09:08 -07:00
parent bba7fe24e9
commit 7e59c70a9f
3 changed files with 10 additions and 5 deletions

View File

@ -403,6 +403,7 @@ class ThreadItem {
'comment' => $this->get_comment_box($indent),
'previewing' => ($conv->is_preview() ? ' preview ' : ''),
'wait' => t('Please wait'),
'submid' => substr($item['mid'],0,32),
'thread_level' => $thread_level
);

View File

@ -249,7 +249,7 @@ var divmore_height = 400;
var last_filestorage_id = null;
var mediaPlaying = false;
var contentHeightDiff = 0;
var gotoAnchor = ((document.location.hash.includes('item_')) ? document.location.hash : '');
$(function() {
$.ajaxSetup({cache: false});
@ -651,9 +651,13 @@ function updateConvItems(mode,data) {
collapseHeight();
}
if(gotoAnchor != '') {
document.location.hash = gotoAnchor;
gotoAnchor = '';
// auto-scroll to a particular comment in a thread (designated by mid) when in single-thread mode
if(bParam_mid && mode == 'replace') {
$('html, body').animate({ scrollTop: $('.item_' + bParam_mid.substring(0,32)).offset().top }, 'slow');
var scrolltoid = $('.collapsed-comments').attr('id').substring(19);
$('#collapsed-comments-' + scrolltoid).slideDown();
$('#hide-comments-' + scrolltoid).html(aStr.showfewer);
$('#hide-comments-total-' + scrolltoid).hide();
}
}

View File

@ -4,7 +4,7 @@
</div>
<div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;">
{{/if}}
<div id="thread-wrapper-{{$item.id}}" class="thread-wrapper{{if $item.toplevel}} {{$item.toplevel}} generic-content-wrapper h-entry {{else}} u-comment h-cite {{/if}}">
<div id="thread-wrapper-{{$item.id}}" class="thread-wrapper{{if $item.toplevel}} {{$item.toplevel}} generic-content-wrapper h-entry {{else}} u-comment h-cite {{/if}} item_{{$item.submid}}">
<a name="item_{{$item.id}}" ></a>
<div class="wall-item-outside-wrapper {{$item.indent}}{{$item.previewing}}" id="wall-item-outside-wrapper-{{$item.id}}" >
<div class="wall-item-content-wrapper {{$item.indent}}" id="wall-item-content-wrapper-{{$item.id}}" style="clear:both;">