Comments (10)
Be good if there was a data-barba-script
attribute you could attach to inline <script>
tags. So Barba know there's a script that needs execution. You could make it execute on newPageReady
by default.
<script data-barba-script>...</script>
from barba.
Hi @ZachSaucier, on purpose I don't want the javascript being evaluated when loading a new container.
The idea behind Barba.js and PJAX navigation is that you evaluate your js/css just on the first page where the user lands.
You have Events and Views made specifically to run code when a new container is loaded.
Anyway, if you want to can easily implement this behavior with something like this:
Barba.Dispatcher.on('newPageReady', function(currentStatus, oldStatus, container) {
eval(container.querySelector("script").innerHTML);
});
from barba.
To prevent warning for non existing script elements — (Cannot read property 'innerHTML' of null(…))
However: eval is evil 😉
Barba.Dispatcher.on('newPageReady', function(currentStatus, oldStatus, container) {
var js = container.querySelector("script");
if(js != null){
eval(js.innerHTML);
}
});
from barba.
do you have an example of this for 2.x
from barba.
barba.hooks.after((data) => {
let js = document.querySelectorAll('#main script');
if(js != null){
js.forEach((item) => {
eval(item.innerHTML);
});
}
});
from barba.
This worked for me in v2
barba.hooks.after((data) => {
let js = data.next.container.querySelectorAll('main script');
if(js != null){
js.forEach((item) => {
console.log(js)
eval(item.innerHTML);
});
}
});
from barba.
Where should I attach this code ? I have main.js script where I have imported some other scripts including barba transition.
But it doesnt help, my main.js script is not reinitialized
from barba.
Ok, in my case I did it like this, and it solved my roadblock
barba.hooks.after(() => {
const bottomDOM = document.getElementsByTagName("body")[0]
const newScript = document.createElement("script")
const oldScript = document.querySelector(".main-script")
newScript.src = "js/main-dist.js"
newScript.className = "main-script"
oldScript.remove()
bottomDOM.appendChild(newScript)
})
```
from barba.
Using afterLeave hook worked for me.
barba.hooks.afterLeave((data) => {
const js = data.next.container.querySelectorAll("script.reload-on-ajax");
console.log(js);
[].forEach.call(js, function (script) {
console.log(script);
window.eval(script.innerHTML);
});
});
from barba.
Hi.
here is my Barba code:
barba.init({
sync: true,
transitions: [
{
async leave(data) {
const done = this.async();
pageTransition();
await delay(1100);
done();
},
},
],
});
Can you please tell, what code and where should I insert it, so other scripts won't break.
Thanks in advance!
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.