barba

barba copied to clipboard

I'm trying to create a site with interactive 'subpages' that slide out over an existing page (with content loaded into them via AJAX), and have this hook into the Barba History so that:

1. When a user clicks a subpage link, the current document location (url) is changed to reflect this URL (eg. '.../project-page/sub-page'), but the history is not stored in Barba's history (ie so that if the user presses back, it returns to the page before '.../project-page/', ignoring the subpage)
2. When the user closes the subpage, the current document location (url) is reverted back to the top-level page (eg. '.../project-page/') and the barba/window history is unaffected.

I've been trying to make heads or tails of the Barba.history documentation to no success. Trying to achieve the above using barba.history.add() / barba.history.remove() has led to some very strange popstate events after doing so. Any help would be much appreciated!

Hello @MichaelPrecel,

Sorry for the laaaaaaate reply :smile: Looks like I miss your issue.

Anyway, about what you are trying to achieve, why not using sub pages as final URLs? I mean, if you have project-page/sub-page, you probably want your user to find this URL in the SEO right? For me, you should have two pages, and finally two URLs at the end, so no need to manage this in the Barba history.

1. If your user are going to URL project-page/sub-page, you can't use history at all to navigate to project-page, so your user should be able to find a link to move backward.
2. If your user are going to URL project-page and want to go to the sub-page, you just need to bring them a link to go forward.

In this case, you will be able to use custom transitions when navigating to your sub pages. Hope this help :wink:

I am closing the issue, feel free to leave a comment if needed.

I think it's not really a matter of final URLs. Even if we would have final URLs the problem would be the same.

@MichaelPrecel correct me if I'm wrong, but you is at stake is to have:

1. User navigate to the original page (mywebsite.com/project-page) 2.User click on a sub-page (children of project-page), here instead of having barba doing the transition to (mywebsite.com/project-page/sub-page), ajax kick's in and open maybe a modal with the sub-page content inside.
2. The URL is updated to mywebsite.com/project-page/sub-page
3. If user closes the modal or press back button, the modal closes and URL revert back to mywebsite.com/project-page
4. If user press forward button modal opens back and URL is again website.com/project-page/sub-page

Basically, the idea is to bypass barba transition and use Ajax while no breaking the history of barba.

Hi @psntr,

Well, depends on what @MichaelPrecel is meaning of course :smiley:

As of today, you can't change URL without affecting history, as Barba uses pushState API internally... but you can tell Barba that you want a new entry in the history in order to manage "sub pages" in your application, like this:

barba.history.add('http://dev.local/projects/sub-page', 'barba');

Please @MichaelPrecel, feel free to add your comments below :wink:

Note that I am conscious that documentation about Barba history is missing on the docs website, I am adding a task to add a dedicated section in the strategies section and write it as soon as I can.

Hi @xavierfoucrier,

Thanks for your further clarifying @psntr — that is exactly right: "Basically, the idea is to bypass barba transition and use Ajax while no breaking the history of barba" using ajax loading of sub-page content in modals.

Good to know @xavierfoucrier re barba.history.add. If I can recall, while trying this I found it was interfering with the regular back/forward buttons. I ended up finding a sort-of solution by replacing the current history state with the new subpage URL and then managing first land at that address with PHP & Javascript. A bit fiddly and regular back button function was the sacrificial lamb.

Cheers,

I just added a short dedicated section about history management.

Currently there is no way to programmatically "replace" a window history entry and keep navigation consistent, it's only possible to "add" with barba.history.add.

Thank you Xavier, here is the link in case people wonder where the section is: https://barba.js.org/docs/advanced/strategies/#History

Hi everyone 👋

Just dive into it last week, you can build case defined by @psntr using:

• a data-barba-history="replace" attribute, see https://barba.js.org/docs/advanced/strategies/#data-barba-history
• a self transition, see https://barba.js.org/docs/advanced/transitions/#Self

In that case, the attribute tells Barba to replace/update current state in the history stack. Then the self transition will run in order to animate the modal/popup opening.

I am only seeing one problem here: the use of data-barba-history attribute, where in some cases, people will prefer the use of a programmatic way of replacing history state: for that I will adapt the current utility class 😉.