Differentiate between Back/Forward buttons for different animations

[jpmorris]

A similar question has been asked before, but there doesn't seem to be any resolution.

https://github.com/browserstate/history.js/issues/70

I've been racking my brain on this one and I don't see how to do this. I want to be able to find out if the user clicked the back or the forward button to trigger different animations. Judging how the github file browser does basically this, it seems like it should be possible somehow (not sure with history.js).

The previous question mentioned making a breadcrumb array, comparing pages, etc. I don't see how to get any of these to work. A breadcrumb array seems the most promising, but as far as I can tell, there isn't a single property of History that differentiates between back and forward (though I can differentiate between these and a change of state created by history.js funcitons). But to use a breadcrumb (hash, url), comparing of urls directly, doesn't there need to be SOMETHING which can indicate that the back button was pressed? The History object includes savedStates and storedStates but these are object arrays which just grow forever. I can never see any circumstance in which they are spliced into a smaller array (say by clicking on a new link). This seems to render the funcitons History.getCurrentIndex() pointless, as the current index will always be the most recent index added to the state array.

I was hoping that when I selected a back button jump of 3 history states that something would change in the History object (the length of the array, an index somewhere, something), but this doesn't seem to be the case. Or am I mistaken? Is there any way to get this behavior? I could just compare hashes or url, but with a sufficiently large state array with lots of forwards/backwards/new clicks and with no way to associate the browsers back button with a change in the state array.

Thanks!

[Zasurus]

I have read Benjamin's response to a similar question before saying basically that he has tried to work out what button is pressed but it is impossible at this time. :( Let's hope that maybe HTML 6 has this ability! :)

[jpmorris]

Are you sure about this? Benjamin said in the previous question (the link above #70) that this would be possible with breadcrumbs or another solution. I"m just not sure how you would implement this.

Moreover if it's impossible with history.js then it must be possible somehow since github does exactly this. Any idea how this is done in any way?

https://github.com/blog/760-the-tree-slider

[Zasurus]

Maybe it was an old post then and things have changed. I have been looking for it again but can't work out where I sore it. :) If someone else is doing it then clearly it's possible.

[dananichev]

I think, you can do it using breadcrumbs. Maybe something about number of items in breadcrumbs or just storing current/previous item. I mean breadcrumbs that you can see at your example page https://github.com/apenwarr/bup

For example, here https://github.com/apenwarr/bup/tree/master/Documentation breadcrumbs is "bup / Documentation /"

I mean, something like that:

if (currentNumberOfItems < prevNumberOfItems) {
    // history.back();
} else {
   // history.next();
}

(it's just an example)

[netwire88]

What about this? https://github.com/browserstate/history.js/issues/47