barbajs / barba Goto Github PK

Hello,
I was not able to find how to change .barba-container and .barba-wrapper container classes into something custom.

Create more demos using Barba.js.

Could be handy to move call to getTransition right after the new url has been added to the history, so we can use currentStatus method in our own method getTransition.

Line 238 of Pjax.js

this.History.add(newUrl);

var transition = Object.create(this.getTransition());

instead of

var transition = Object.create(this.getTransition());

this.History.add(newUrl);

How i can to make two containers:

<div id="barba-wrapper">
  <div class="barba-container">
    content
  </div>
 <div>
   ....some content
 </div>
 <div class="barba-container">
    content
  </div>
</div>

Hi there,
I was running a little test but something seems off. You can see it here:
https://plnkr.co/edit/5GbDn8Rque7hZ2gNEPrY?p=preview

Seems to be putting the content in the wrong place. Am I missing something?

Common usecase: a site that has a layout and inner contents. Inner contents should be updated with a transition, layout elements (nav menu, header, footer) — instantly (you click in a link an menu state changes, or event whole layout changes).
So is there a way to update several containers independently and with different transitions?
And also, to change page meta (e.g. title)?

I'm trying to implement a simple fade-out-fade-in transition using only CSS. The result is that the new container is faded in, but old one does not get faded out first, it just disappears and jumps to the fade-in. Any tips on how to achieve this with CSS?

Right:

Wrong (my code):

My transition:

document.addEventListener("DOMContentLoaded", function() {
    var FadeTransition = Barba.BaseTransition.extend({
      start: function() {
        Promise
          .all([this.newContainerLoading, this.fadeOut()])
          .then(this.fadeIn.bind(this));
      },

      fadeOut: function() {
        $(this.oldContainer).toggleClass('fade-out');
      },
      fadeIn: function() {
        $(this.newContainer).toggleClass('fade-in');
        this.done();
      }
    });

    Barba.Pjax.getTransition = function() {
      return FadeTransition;
    };
});

My CSS animations:

.fade-out { animation: .7s fade-out ease forwards; }
.fade-in { animation: .7s fade-in ease forwards; }

@keyframes fade-out {
    from { opacity: 1; },
    to { opacity: 0; }
}

@keyframes fade-in {
    from { opacity: 0; },
    to { opacity: 1; }
}

Hi there !

I'm currently using Barba.js to build my new website (possibly a future exemple to showcase I hope :) ) but I'm struggling using it.
I only tried to play with Transitions using the fade in/out exemple from the documentation, but there is an issue I can't solve : the fadeOut animation displays correctly (my containers slowly fades in 750ms), but the new container is displayed instantly (opacity set to "1") despite the use of .animate().
Here is the fadeIn function I use:

var AwesomeTransition = Barba.BaseTransition.extend({
        start: function () {
            Promise
                .all([
                    this.newContainerLoading,
                    this.fadeOut()
                ])
                .then(this.fadeIn.bind(this));
        },
        fadeIn: function () {
            var _this = this;

            $(this.oldContainer).hide();

            $(this.newContainer).css({
                opacity: 0
            });
            //The following animation triggers instantly
            $(this.newContainer).animate({opacity: 1}, 750, function () {
                _this.done();
            });
        },
        fadeOut: function () {
            return $(this.oldContainer).animate({opacity: 0}, 750).promise();
        }
    });

Hope you guys can provide some help with this :/

Cheers !

Go through the JSDoc annotation and improve them.

Create a dedicated website for barba.js.
Ideally the website will contain info and instructions about:

• How it works
• Install instructions
• Transitions
• Cache
• Prefetch
• Events
• API
• Other (naming, contributions, author, licence)

Hi,

Link with inline SVG doesn't work; the page is always fully reloaded.

Example:

<a href="http://example.com">
  <svg class="logo" ... >
     <rect ...>
  <svg>
</a>

Not related to #58.

I found an article about this:
https://css-tricks.com/links-inline-svg-staying-target-events/

Thanks

What I want to do is have two transitions on my website. One is a slide to the left to indicate that it is the next page and one is a slide to the right indicating a previous page.

Now, my thought was to have the two transitions and then in the getTransition method check which of the two to return. However, I could not find how to detect which of the two is going on. Any ideas?

Able to reload the navigation menu <ul class="main-navigation-menu"> to load the updated and highlighted navigation menu.

     <ul class="main-navigation-menu">
        <li class="current"><a href="index.php">Home</a></li>
        <li><a href="index.php">Home</a></li>
     </ul>

Test/add/verify some cases when the server is down or the page takes time to load.

Hi,

I'm doing my first project using Barba.js and I love it so far.

I was wondering if there is a way to abort a transition during one of the enter/leave phases ?
For instance :

onLeave: function( ) {
      if( somethingIsWrong ){
           Barba.stop( ); // something like that !
     }
} 

Many thanks

First off you've made an amazing library! it's been awesome to work with, and I just launched a project that takes great advantage of it! - http://thekitchennation.com/
Removing the page refresh is a biggie for me.

One small issue is that when I run the production build with my webpack setup i always get this error from the uglify plugin:

WARNING in ./public/js/app.js from UglifyJs
Non-strict equality against boolean: != false [./~/barba.js/dist/barba.js:535,0]
Non-strict equality against boolean: != false [./~/barba.js/dist/barba.js:549,0]

if I go into your build and change (for example - on line 535)

if(e in this.events === false)

to:

if(e in this.events == false)

no issues - but then I'm going to assume that may cause issues down the road.

note that there are no problems in dev mode (no minification).

any thoughts would be appreciated, and more than anything I wanted to bring this to your attention.

many thanks for you work!

Currently, if no styles are changed, after the transition completes oldContainer has display: none (it should) but newContainer has visibility: hidden. Shouldn't it be visible after this.done() is called?

Also, changing visibility is good for switching between but using display is better for replacing content. I think it'd be handy to use a flag to determine which property to be using so it doesn't have to be done manually each time of setup.

Dear @luruke!

What about making this project available via Bower?

Is it possible to update the body class between transitions?

Need to add another check for the port window.location.port.
https://github.com/luruke/barba.js/blob/master/src/Pjax/Pjax.js#L195

Hi All!
I am really happy to see more and more people using Barba.js.
It's really nice to be able to give something back to the open source community.

I am also proud that in ~20 issues opened from users, there is not a single bug that has been encountered.

The library has been initially used just from myself, but now we should look ahead and see how the library could be improved in a eventually major release.

I think the design and the concept behind the library seems working very well, it's flexible and it's easily adaptable to the user's need.

What I think could really be improved are how the API methods are exposed, and the naming in general.

Can you help me?

I would like to have an open discussion and see what are your ideas about it:

• What will you improve/change?
• Have you encountered some library limits?
• Do you find the website / documentation easily understandable?
• Do you will like to have a new major version that will potentially break the compatibility with older code?
• Do you use Barba.js in a ES6 project?

Thank you! 🎉

Hi there!

Great library. I am currently using it in production and love the simplicity in comparison to a SPA framework.

However there is one thing I can't get Barba.js to work with:
I have some links inside inline SVG containers. On these links the browser default behaviour applies and Barba.js doesn't seem to run.
If I take these links out of the SVG container (for testing purposes only), everything works just fine. But unfortunately I need them inside the SVG.

Example markup:

<svg version="1.1" class="scene" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 758 648" >
    <a xlink:href="example.html" class="scene__link">
        <polygon class="scene__area" points="... "/>
        <path class="scene__shape" d="..."/>
    </a>
</svg>

Any help would be greatly appreciated.

Would be nice if:

bower install --save barda.js

Barba.BaseTransition.start() is missing from the API. It should at least say that it needs to be implemented and when it is called.

P.S. Is the API or the splash page open source so we can help make contributions?

Test/Implement barba.js with partial backend output.
The idea is to send a specific BARBA useragent during the XMLHttpRequest.

In this way the backend will just output the container.

First off love this project. So thank you!

What do you think about having preventCheck return false if trying to browse to file types we can reasonably expect will break the application - for example PDFs or .doc/x files? I know it is fairly trivial to overwrite the preventCheck function (and have done so so far) however it strikes me as a scenario that would break most implementations of Barba and so perhaps it could be handled within the framework?

The .no-barba is the most obvious solution to this - however a lot of links to files are input via richtext and many CMS' don't have the liberty of easily adding/removing classes to those links.

Happy to submit a PR for this if it's a good idea - otherwise overwriting works for my immediate needs.

I've tried out all the demos in Safari 9.1.1 but none of the animations seem to work. What browsers are supported with this?

Would this work between pages on different domains?

The use case I'm thinking of would be transitioning between three subdomains.

Hello
I am a beginner in HTML and CSS, but I do not understand Javascript, but I want to learn it.
I would like to use Barba.js, but I do not know what I have to do.
Can someone please tell what I have to add in my page to have a transition as on

http://magacom.fr/
http://www.poigneedemainvirile.com/
http://www.adrenalinmedia.com.au/
https://www.stanleystella.com/
http://www.budidiokojinedostaje.hr/

Thanks in advance.

Best regards
Isabell

I want to take custom style in the header and also change the body class ..... and other things

When a new container is loaded, any <script> tags within the container are not evaluated by default. This is because the browser doesn't know to look for JavaScript within the added HTML.

This is not necessarily a bad thing, given it could lead to duplicated code running such as event listeners, but I thought it would be useful to report and discuss.

If you want to run any code within the <script> tags, evaluate them by using something like eval(this.newContainer.querySelector("script").innerHTML); just before you run this.done() on the transition

While using Barba I mentioned that my browser loads a new page when a link contains a hash (e.g. another-page.html#section1).

Scenario:
I'm on page A.html. This page contains a link to B.html#anchor. If I click the link, the browser will load the page and not Barba.
On page A.html is a second link A.html#somewhere. Clicking on this link should not trigger Barba but the browser to jump to #somewhere.

After investigating the source code I found out, that Barba doesn't handle clicks on links with a hash but letting the browser performing the event.
See https://github.com/luruke/barba.js/blob/188de0364c1cc3e046fb389fdd36cb53303800bf/src/Pjax/Pjax.js#L190 which will check if Barba manages to get the new page or ignore the click.
And here https://github.com/luruke/barba.js/blob/188de0364c1cc3e046fb389fdd36cb53303800bf/src/Pjax/Pjax.js#L232 it decides to ignore the request.

The comment on line 231 suggests that links with a hash shouldn't be handled by Barba because the browser should jump to the anchor.
However there should be a check, that the target link equals the current link (without a hash). If it does not it's obviously another page.

But when changing this behavior how will be the anchor "jump" be handled? Maybe by adding the hash via window.location = "#hash" after the new page was loaded? This could be realized with Promises?

How about translating this awesome library to ES6? If you like to, I could help you out with it :)

Thanks for great project, I have a question it's how to ignore click link in somewhere?
I see source core barda.js listen every click in a tag.

Hey there!

Love the library, but I seem to keep running into an issue where the Barba.HistoryManager.currentStatus() object is always returned undefined. Whereas prevStatus() seems to work perfectly.

I'm following one of your demo's code in order to use a variety of transitions.

Barba.Pjax.getTransition = function() {
    var transitionObj = FadeTransition;

    if (Barba.HistoryManager.currentStatus().namespace === "homepage") {
      transitionObj = HomeTransition;
    }

    return transitionObj;
 };

Is there a preferred way for determining what transition to use when you want separate pages to use unique animations?

Is there any chance we could add a demo with namespaces/views? I'm finding them difficult to use correctly given most pages will have two on a page initially.

Thanks!

Sometimes i get this error : barba.js:1245 Uncaught TypeError: Cannot read property 'href' of null
at line 1245 of barba.js

It's triggered every time i click on the screen, not on a link.

Hi @luruke,

thanks for barba.js, it is really impressive!
i'm moving on with my project using barba, now it's time to add some cool transition between pages.

i've tried to set some new transition, but they're too faster. Animation isn't smooth or wont showup.
How to work with transition and views, and why views parameter seems to be ignored?

There's a more complete guide i should follow?
Could you give me some advice?
thanks in advance,

na

Is it possible to use this with single page js applications?

Hi
How can I remove a "barba pjax listener" from a link ?
for example in Wordpress i would like to remove the listener from the wp admin bar links, i can not set the barba ignore class to those links so i think the best option is to remove the click listener on those anchors.

IE9 doesn't supports push state, but would be cool to still use the views and keep the code as it is.

(Try to) Write BDD tests.

Wondering what is possible to do in order to make the library more accessibile.
Maybe using ARIA Live Regions or apply some WCAG guideline?

Open question :)

last ticket for today :)

I need to have access to the whole html document loaded by ajax, not only the content, is it possible ?

Hello !

First of all, thank you for your work. Barba is a very good library ;)

However, the page is fully reloaded when you click on a link with the same url as the current page, and I do not know if this is the intended behavior.

Is there any event I could retrieve to prevent reloading ?

Thanks

Hi guys,
thanks for the amazing work done here.
I'm encountering some issue with barba.js and wordpress
i'm buliding a simple and lightweight website with a custom theme (starting form scratch).

i've tried to follow your instructions but the console is returning me the following
`

Uncaught (in promise) Error: Barba.js: no container found(…) - barba.js?ver=4.5.2:1447

Where can i find a more complete guide?
Thanks a lot for your beautiful work

Nan
`

I have a site setup that divides each section of the site in a subdomain.
Everything for that works like a charm but when trying to use Barba to ajax load subdomain pages I run into "Access-Control-Allow-Headers" issues. I managed to get rid of those problems except,
pushState: "SecurityError: DOM Exception 18: The operation is insecure." won't allow it.
Is there a way to solve this?

Example:
User is on 'journal.site.com' and clicks the menu item that goes to 'about.site.com'

Hello @luruke , I have requirement to create wizard kind of structure in widget which has nested steps, so after 1st step is validated (form filled and call for 2nd screen content) and content available for 2nd step , I would be transitioning to second step and so on..

Tech stack :
I am using Backbonejs for that component with handlebar for templating.

Can I create that widget using barbajs, difference may be I would be generating content based on ajax call(json) for templating . Hope you are with me till now.

Hello again,

In the documentation, you wrote that it was possible to customize the getTransition() method to change the transition used by Barba.

/**
 * Here you can use your own logic!
 * For example you can use different Transition based on the current page or link...
 */

My question is, how can you retrieve the current page URL, as well as the target link clicked by the user within this method ?

Here is my getTransition() method :

Barba.Pjax.getTransition = function () {
        /**
         * @todo: Select transition depending on current page and clicked link
         */

        var currentUrl = window.location.href,
            targetUrl = Barba.Utils.getCurrentUrl();

        console.log(currentUrl, targetUrl);

        return XporgTransition;
    }

It seems that on this example window.location.href is already setted to the next page URL and getCurrentUrl() returns the same value.

Am I handling this badly ? Do you have another method to achieve this ?

Cheers !

Implement a more persisent cache system with localstorange and with expiration timeout.