Comments (15)
Hi there!
Thanks for using Barba and I'm really glad you like it!
Yes, It's the intended behaviour.
To be honest I hesitated if implementing it or not, but after thinking,
I'd like more to refresh the page instead of doing "nothing", which, can be frustrating for some users.
But I'm totally open to change the default behaviour if you have some good points.
A solution without replacing Barba.js code could be:
var links = document.querySelectorAll('a[href]');
var cbk = function(e) {
if(e.currentTarget.href === window.location.href) {
e.preventDefault();
e.stopPropagation();
}
};
for(var i = 0; i < links.length; i++) {
links[i].addEventListener('click', cbk);
}
It basically register an handler that runs before the one of Barba.js, it checks if the href is the same of the current url, and if yes it prevent the default behaviour and stop the propagation.
from barba.
Thanks @luruke and @ZachSaucier !
Your proposal works perfectly.
However, I think it might be interesting to choose the behavior via a static value.
Possible behaviors:
- full page reload
- nothing
onLeave
->onEnter
(to replay transition)
from barba.
Is there meanwhile a setting to disable the reload behavior , please ?
from barba.
Thank's for the amazing work @luruke
I attach, for those who might need, my simplified jquery version
(to prevent the reload of the current page)
`$(document).ready(function() {
$(document).on('click','a[href]', function(e){
if(e.currentTarget.href === window.location.href)
{
e.preventDefault();
e.stopPropagation();
}
});
});`
from barba.
@quentinhocde , I see your point.
I'm going to think how and if implement this in the next version 👍
Thank you so much for your feedback!
Do not hesitate to open a new issue if you have some other improvements
from barba.
I agree with @jdacosta, for a personal example, I have a fullscreen menu and it's possible to click on the current link, and in this case I want to replay the transition.
So, in my opinion, it will be a choice with a parameter.
from barba.
I know this is an old old "issue", and it is default behaviour ...
However, currently I am building a site with a built in audio player outside of the barba container to ensure continuous playing while the user can browse the site.
But any link referencing the same page does a reload and thus stops the player which is kinda annoying for such a use case.
I am using barbajs version 2.0 and it would really be nice to have a switch to turn this behaviour on or off!
It also took me some time to figure out that this behaviour was default (google brought me here). Is it mentioned in the docs anywhere, I have not stumbled upon it?
from barba.
Hi there. First of all sorry for posting in an old and closed issue, but I think in this case it's better than opening a new one.
On the issue, I'd argue that the proper and expected default behavior should be to actually "navigate" to the same page, thus doing the exact same things as with any other page. This is what all web browsers do.
Another reason for this is that, as demonstrated, preventing links to the current url hard-reloading is trivial, but I've been trying to (re)navigate to the current page using barba.go(e.currentTarget.href)
and it doesn't seem to work, it does nothing. If I instead do barba.go(e.currentTarget.href + '/test')
, it works, so there seems to be some check in the go()
function to do nothing when it's the current url. In other words, no easy way to implement what in my opinion should be the default behavior.
I think the current behavior is the worse that could have been chosen (between hard reload, navigating to same page or doing nothing), because BarbaJS's main purpose is precisely to avoid hard reloads.
I hope you can give a go at rethinking this design decision, as you can see from other comments in this and other issues, it maybe wasn't the best one. Or maybe at least add a strategy to choose between the three behaviors, maintaining the current default.
from barba.
+1 !
from barba.
The preventCheck
function inside of Pjax.js should be doing this already... I'll test
Update: Can produce. The function is indeed returning false as it should be... weird
from barba.
Ah, I understand. It doesn't fire the barba link action but also doesn't prevent the native link from firing.
I recommend moving that check inside of the onLinkClick
function:
onLinkClick: function(evt) {
var el = evt.target;
//Go up in the nodelist until we
//find something with .href
while (el && !el.href) {
el = el.parentNode;
}
if (this.preventCheck(evt, el)) {
evt.stopPropagation();
evt.preventDefault();
//In case you're trying to load the same page
if (Utils.cleanLink(el.href) == Utils.cleanLink(location.href)) {
Dispatcher.trigger('linkClicked', el);
this.goTo(el.href);
}
}
},
And removing it from preventCheck
of course
from barba.
@jdacosta
Have you been able to solve this?
How did you solve at the end?
from barba.
I wonder if there's a way to disable to same links hard reload without changing the barba.js code ? It would be really useful because of the upgrades. I don't want to disable the same page links, but that the page could repeat the transitions.
from barba.
I am having the same issue but can not seem to get @luruke solution to work? Not sure where I should be placing that code snippet?
My code below:
import Barba from 'barba.js';
document.addEventListener("DOMContentLoaded", function() {
Barba.Pjax.init();
Barba.Prefetch.init();
var links = document.querySelectorAll('a[href]');
var cbk = function(e) {
if(e.currentTarget.href === window.location.href) {
e.preventDefault();
e.stopPropagation();
}
};
for(var i = 0; i < links.length; i++) {
links[i].addEventListener('click', cbk);
}
var FadeTransition = Barba.BaseTransition.extend({
start: function() {
Promise
.all([this.newContainerLoading, this.fadeOut()])
.then(this.fadeIn.bind(this));
},
fadeOut: function() {
this.oldContainer.classList.toggle('fade-out');
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve();
}, 500);
});
},
fadeIn: function() {
this.newContainer.classList.toggle('fade-in');
this.done();
}
});
Barba.Pjax.getTransition = function() {
return FadeTransition;
};
Barba.Pjax.start();
});
Many thanks in advance!
from barba.
Hi there.
Got the same issue. I was able to fix it with this link from Barba's FAQs.
https://barba.js.org/docs/advanced/strategies/#prevent
All you need is to add this function "data-barba-prevent" or "data-barba-prevent="self"" next to your link and it wont reload on the same page again.
E.g:
<a href="/index.html" data-barba-prevent>Home</a>
Good Luck,
from barba.
Related Issues (20)
- POST Form transition HOT 1
- Source map failed to load HOT 3
- Compiling error HOT 1
- Disable `prefetch` on specific links HOT 1
- Maintain element on transition HOT 1
- Typescript issue with documentation example HOT 1
- Page content is duplicated when opened HOT 1
- CSP violation from parseFromString HOT 1
- Back button not working as intended after clicking anywhere on the page HOT 7
- Improve Google Analytics guide in the documentation
- Change the wrapper/container on the fly? HOT 3
- Typescript can't find declaration folder because the name is wrong HOT 5
- Remove polyfill.io from documentation HOT 1
- When linking to pages with hashes, hash does not appear in final URL HOT 2
- OWL Carousel doesn't work HOT 1
- Improve documentation on options to barba.init HOT 4
- External links, checkboxes and radio buttons are not working anymore HOT 12
- Checkboxes not working, and external links are not redirected HOT 3
- Form submissions broken since 2.10.2 HOT 3
- Help! All of my a href https link won't open HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from barba.