0

I'm using Infinite Scroll on my site. I have a comments feed on each post that uses infinite feed. When someone clicks on one of the comments, the comment's replies should load. When someone clicks on one of the comment's replies, then that reply will show. By default, replies to comments don't have replies. Every view, will have the post shown along with the parent comment. So I'll have 3 views:

Fist view
    Post
    |
    Comments

Second View
    Post
    |
    Comment
    |
    Replies

Third View

    Post
    |
    comment
    |
    reply

This is very simple to create normally, however, I'd like to create all this using the History API. So for example, if the user lands on the first view, then they click on a comment the second view should be loaded in using PushState and the new replies feed should be loaded in using Ajax. Here's where I'm getting confused. How can the feed retain its place if the user clicks the back button. So for example, if they're on replies and they hit back then they'll be shown the same place they were in the comments feed. Is there a simpler way of doing this.

P.S this is very similar to Twitter's comment system.

user2896120
  • 3,180
  • 4
  • 40
  • 100

1 Answers1

1

https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method

state object — The state object is a JavaScript object which is associated with the new history entry created by pushState(). Whenever the user navigates to the new state, a popstate event is fired, and the state property of the event contains a copy of the history entry's state object.

You could include in your state a scroll position on the page, or a unique identifier of the comment that was clicked on. Then use, scrollIntoView for the element when you pop the state.

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

EDIT:

To include the current position in the current state before opening the comment, use replaceState to add the current position to the state before pushing the new state. https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_replaceState()_method

chris.va.rao
  • 373
  • 1
  • 10
  • Yeah, but the state object is for the comment i'm stepping into. If I go back, then the state object would be technically unknown. So if I go back, I'd still lose my position in the feed. – user2896120 Mar 24 '19 at 01:10
  • Ah true. In that case, you could use `replaceState` right before pushing the new state. https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_replaceState()_method I've edited my answer. – chris.va.rao Mar 24 '19 at 01:12
  • That's a good idea. Do you think instead of doing that just duplicating the comments container, emptying it, and then hiding the original comments container is better? So the new one will hold the replies for the comment that was clicked, and the old container will still hold all the comments but will be hidden. And then when the user clicks back, where the user was will be in the state object? – user2896120 Mar 24 '19 at 01:18
  • I think duplicating the comments container may be overkill. I think creating a duplicate of the particular parent comment, using the same rendering code that you use to render the comments in the other view, would suffice. – chris.va.rao Mar 24 '19 at 01:30