We Keep Coding

Scripts are not loading after the page transition in Barba.jS

So I have one index file that has few js files are included like Gsap & Barba JS. But I have one inner page that includes some extra js files such as locomotive.js & OWLcarousel.js and please note that these two Js files (locomotive.js & OWLcarousel.js) are not included on index page as they are not required. The issue is the inner page opens after completing the index page transition but without loading these two JS files (locomotive.js & OWLcarousel.js). As a result both locomotive scrolling & OWL carousel are not working. However, If I'll refresh the inner page once then these two Js files (locomotive.js & OWLcarousel.js) are loading and everything works fine. So how to load JS files in Barba.Js for inner pages?
Update:
I have created a minimal demo and you can see that inner page is not loading the JS and CSS of Locomotive and also OWL carousel if click on heading text on homepage and navigate to inner. But if refresh the page then both locomotive & owl carousel are working fine in inner page. How to fix this? I have added the suggested change to the JS file (https://bootstrap-awesome.com/barba-test1f/js/main-test.js) Demo Link: https://bootstrap-awesome.com/barba-test1f/index-test.html
So I tried to load the additional JS files in the same below format but nothing happens. Can anyone guide me with this please?
barba.init({
views: [{
namespace: 'home',
beforeEnter({ next }) {
// load your script
let script = document.createElement('script');
script.src = '<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll#3.5.4/dist/locomotive-scroll.min.js"></script>';
script.src = '<script src="js/owl/owl.carousel.js"></script>';
next.container.appendChild(script);
},
}],
UPDATE
#wouch
The below is what I have tried but still not working. Also, how to load Locomotive external CSS?
JS: bootstrap-awesome.com/barba-test1f/js/main-test.js
Demo : https://bootstrap-awesome.com/barba-test1f/index-test.html
views: [{
namespace: 'home',
beforeEnter({ next }) {
// Script URLs to load
let pageScriptSrcs = [
'https://cdn.jsdelivr.net/npm/locomotive-scroll#3.5.4/dist/locomotive-scroll.min.js',
'js/custom-scroll.js',
'js/owl/owl.carousel.js',
'js/owl/owl-custom.js'
]
pageScriptSrcs.forEach(scriptSrc => {
let script = '<script src="' + scriptSrc + '"><\/script>';
console.log(script);
next.container.appendChild(script);
})
}
},
{
namespace: 'projdetailpage',
beforeEnter({ next }) {
// Script URLs to load
let pageScriptSrcs = [
'https://cdn.jsdelivr.net/npm/locomotive-scroll#3.5.4/dist/locomotive-scroll.min.js',
'js/custom-scroll.js',
'js/owl/owl.carousel.js',
'js/owl/owl-custom.js'
]
pageScriptSrcs.forEach(scriptSrc => {
let script = '<script src="' + scriptSrc + '"><\/script>';
console.log(script);
next.container.appendChild(script);
})
}
}],

I would try something like this, where you add the scripts you want in an array, then loop through each one and build a <script src="..."></script> string and append to the next container.
barba.init({
views: [{
namespace: 'home',
beforeEnter({ next }) {
// Script URLs to load
let pageScriptSrcs = [
'https://cdn.jsdelivr.net/npm/locomotive-scroll#3.5.4/dist/locomotive-scroll.min.js',
'js/owl/owl.carousel.js'
]
pageScriptSrcs.forEach(scriptSrc => {
let script = '<script src="' + scriptSrc + '"><\/script>';
console.log(script);
next.container.appendChild(script);
})
},
}],
})

Uncaught TypeError: Cannot read property 'hasAttribute' of undefined

I am using a script from the W3C to create accessible tab panels. When I load the page with the script, I get the error Uncaught TypeError: Cannot read property 'hasAttribute' of undefined for a variable tablist which is defined as follows:
var tablist = document.querySelectorAll('[role="tablist]')[0];
var tabs, panels;
var delay = determineDelay();
The code that the error refers to:
// Determine delay
function determineDelay () {
var hasDelay = tablist.hasAttribute('data-delay');
var delay = 0;
if (hasDelay) {
var delayValue = tablist.getAttribute('data-delay');
if (delayValue) {
delay = delayValue
} else {
delay = 300;
}
}
return delay;
}
And the HTML tablist is supposed to grab is:
<div role="tablist" aria-label="Options">
<button role="tab" aria-selected="true" aria-controls="general-tab" id="general-btn">General</button>
<button role="tab" aria-selected="false" aria-controls="social-tab" id="social-btn" tabindex="-1">Social Networks</button>
</div>
This is being loaded via a WordPress plugin that is enqueued as:
wp_enqueue_script( 'enhap-admin-script', plugins_url( '../_js/enhap.js', __FILE__ ), array(), false, true );
I cannot see anything wrong with the script. I tried manually typing the var command in the console and got the same result.

If anyone has arrived here due to a js file called global-shortcut.js you may have ColorZilla installed on your chrome. Uninstalling this fixes the issue.
e.g.
global-shortcut.js: 10 Uncaught TypeError: Cannot read property 'hasAttribute' of null
Hope that helps

You're missing a trailing " in the selector string. Change to:
document.querySelectorAll('[role="tablist"]')[0];

Edge Animate: how to move javascript into html?

I need to create a self-contained html banner in Edge Animate. For this I have already encoded the images to base24. I just need to include the javascript into that html. When I publish my banner, Edge by default adds a 'edge_includes' folder which contains 'edge.6.0.0.min.js' and a javascript file in the same location as the html file which is called the same as the html file but with a '_edge.js' extention. Like for example 'text_edge.js'. Both .js files need to be moved to the published html file.
The 'edge.6.0.0.min.js' file I can move easily enough by moving it's script between the script tags of the html file which mentions that .js file.
The test_edge.js file however is more difficult. A typical published html file contains this amongst others:
<script> AdobeEdge.loadComposition('test', 'EDGE-102396420', {
scaleToFit: "none",
centerStage: "none",
minW: "0px",
maxW: "undefined",
width: "300px",
height: "250px" }, {"dom":{}}, {"dom":{}});
</script>
This is - I guess - where Edge loads that 'test_edge.js' file, through 'loadComposition'. But how can I copy the contents of that test_edge.js file into my html file then? I can't replace 'test' with the contents of 'test_edge.js' for example. Is there some other way to load that file's content into my html file? By coping it between script tags and making loadComposition load that scripted part instead of the external test_edge.js file for example?

It might be strange, but it should work if you just put the js inside the <script> tags. The header should look something like this:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Untitled</title>
<!--Adobe Edge Runtime-->
<style>
.edgeLoad-EDGEK-472634723 { visibility:hidden; }
</style>
<script>
//Here goes the whole content from the test_edge.js
//Just ctrl+C and ctrl+V everything from it
</script>
<script>
//Here goes the whole content from the edge.6.0.0.min.js
//Just ctrl+C and ctrl+V everything from it
</script>
<script>
//Here goes the AdobeEdge.loadComposition stuff...
</script>
</head>
And also don't forget to create the class itself inside the <body> part
<div class="EDGE-102396420"></div>

Had a similar issue wanted to integrating js into one html, but I couldn't get it to work wihtout some tweaking in the edge runtime itself, so unfortunately it'll ruin the cdn speed adobe gives you. But otherwise the approach is similar to the answer given by #Klajbar.
If you make a check inside the edge runtime to can ensure compatibility with other files the requires edge runtime
What I did was to add a variable in loadComposition and then encapsulate the call which has f.load(a + "_edge.js") in a if statement to make sure is runs without the variable if need be.
Excerpt from modified edge.runtime.js example
//added inline as last variable
loadComposition: function(a, b, c, g, m,inline) {
function n(a, g) {
W(function() {
var m =
d("." + b),
k = /px|^0$/,
n = c.scaleToFit,
e = c.centerStage,
h = c.minW,
f = c.maxW,
l = c.width,
s = c.height,
y = m[0] || document.getElementsByTagName("body")[0];
"absolute" != y.style.position && "relative" != y.style.position && (y.style.position = "relative");
s && (y.style.height = s);
l && (y.style.width = l);
/^height$|^width$|^both$/.test(n) && (h = k.test(h) ? parseInt(h, 10) : void 0, f = k.test(f) ? parseInt(f, 10) : void 0, v(d(y), n, h, f, !1, c.bScaleToParent));
/^vertical$|^horizontal$|^both$/.test(e) && t(y, e);
a && L(H[b], null, a.dom, a.style, m[0], g + b);
m.removeClass("edgeLoad-" +
b)
})
}
/** removed some code here just for legibility **/
//if statement to override loading js files
if(!inline){
ba ? (window.edge_authoring_mode ||
(g ? (f.definePreloader(g), e()) : f.load(a + "_edgePreload.js", e)), a && (c && c.bootstrapLoading ? ka.push(a) : window.edge_authoring_mode && c.sym ? f.load(a +
"_edge.js?symbol=" + c.sym) : f.load(a + "_edge.js"))) : window.edge_authoring_mode ||
(m ? (f.defineDownLevelStage(m), h()) : f.load(a + "_edgePreload.js", h))
f.load(a + "_edge.js");
}
Once that's done you can include the code into the same html, where runtime is loaded first, then loadComposition block, then the _edge.js code.
Example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Untitled</title>
<script>
//modified edge.runtime.js file
</script>
<style>
.edgeLoad-EDGE-24658395 { visibility:hidden; }
</style>
<script>
AdobeEdge.loadComposition('jem%26fix_afrens_930x180_uge14', 'EDGE-24658395', {
scaleToFit: "none",
centerStage: "none",
minW: "0px",
maxW: "undefined",
width: "930px",
height: "180px"
}, {"dom":{}}, {"style":{"${symbolSelector}":{"isStage":"true","rect":["undefined","undefined","960px","180px"]}},"dom":{}},true);
//notice appeded boolean value as the end to enable the override.
</script>
<!--Adobe Edge Runtime End-->
<script id="test">
// contents of _edge.js file
</script>
</head>
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-24658395">
</div>
</body>
</html>
I just used it for loading just one _edge.js and haven't tested if you choose including the preloading stuff.

Just put you *_edge.js after runtime js.
In runtime js search for timeout function = 10 sec.
Change this to 0 sec, and runtime will start your animate at once load.
But you still will have error load *_edge.js in console. It is not so important.

Put absolute path of the folder where the test_edge.js file is present.
For example
test_edge.js file is under a/b/c folder then
<script> AdobeEdge.loadComposition('/a/b/c/test', 'EDGE-102396420', {
scaleToFit: "none",
centerStage: "none",
minW: "0px",
maxW: "undefined",
width: "300px",
height: "250px" }, {"dom":{}}, {"dom":{}});
</script>

Adobe Edge Embed js in html file
When you see edge html files. There are two js and images.
Both js are externally called. One is library and second is function called js ex.(728x90_edge.js)
Now, when upload all files in DFP type custom, then you use macro for 728x90_edge.js and all images src in this js.
Then how to use macro for images. That is challenge.
So you will have to embed this js in html. then you will use macro for images.
Follow the steps.
1, download liabrary js
remove below line in liabrary(edge.6.0.0.min.js), search after beautify
"_edge.js?symbol=" +
4.+ "_edge.js"
save and embed in html (<script type="text/javascript" src="edge.6.0.0.min - Copy.js"></script>)
cut all code from 728x90_edge.js and embed in html, after end of loadComposition function closing </script>
Now 728x90_edge.js will be empty, it's only use for loading.
use full name of file in AdobeEdge.loadComposition('728x90', 'EDGE-11479078', {
Ex. AdobeEdge.loadComposition('728x90_edge.js', 'EDGE-11479078', {
Now upload all files html, images and two js files.
Now you can use macro for two js file and images.
It's working on Local and DFP.

How to use RPG.JS

I'm trying to work with this library (RPG.js) because it looks very powerfull, I looked at the official tutorial but i don't understand a lot of things, State 4 : "Initialize the canvas in your JS file :", whitch one ?
Is any one already used this library or know an other powerfull ?
Thanks for all.

Well, actually it was not so simple; I struggled I bit until I got a minimal functional game. What I did was not the "optimal" approach, but at least worked for me (I was using Mozilla Firefox in a Windows 7 OS). If someone knows how to improve what I did, I would be happy to know (since I'm a newbie in this library too), but since I was not able to find a good a simple starter tutorial in the net, I want to share what I did, in the hope I can help someone.
Before anything, create a HTML file, and call the libs inside the <head> tag:
<script src="canvasengine-X.Y.Z.all.min.js"></script>
<script src="rpgjs-X.Y.Z.min.js"></script>
And the canvas inside the <body> tag:
<canvas id="canvas_id" width="640" height="480"></canvas>
There's a 'sample' folder inside the github project (see https://github.com/RSamaium/RPG-JS), and inside this folder there is a functional game, and you can open it in the browser by the file quick.html. The idea is that if the sample game can work, then you can make your game work too, so I started trying to use the same graphics, data etc. of the sample.
First, you need to create in the root of your project the following folders and subfolders:
core
core\scene
Data
Data\Maps
Graphics
To have a minimal functional game, you need 1) a map to walk with your character, and 2) a character to control. So, you need to have graphics for some tiles to build your map and the walking model for your character. Create the subfolders below:
Graphics\Characters
Graphics\Tilesets
Graphics\Windowskins
And then copy the following files from the corresponding sample subfolder to these folders you created:
Graphics\Characters\event1.png
Graphics\Tilesets\tileset.png
Graphics\Windowskins\window.png #this file will be necessary for some of the js files below, even if not used; to remove this necessity, you'll need to edit these files - not what we want to do in the start.
In the 'core/scene' folder, you'll have some js files to load scenes (like the scene of your walking in the map, the gameover scene). I needed to copy all the js files inside the corresponding folder in the 'sample' project to the 'core/scene' folder of your game. This folder is not inside the 'sample' folder, but in the root of the github project. I only got my game working when I added all the 7 js files (without some work inside the codes you can remove the scenes you don't want, but since what we want is just to be able to run a simple game, let's copy them for now):
Scene_Gameover.js
Scene_Generated.js
Scene_Load.js
Scene_Map.js
Scene_Menu.js
Scene_Title.js
Scene_Window.js
Now, I added the following code inside a <script> tag on the html. This is more or less the same that was in the documentation. These codes will create an "actor" (a character), a "map", and the tiles you'll use in the map
For more details on maps or tiles, you should read the documentation (the same you linked in your question).
RPGJS.Materials = {
"characters": {
"1": "event1.png"
},
"tilesets": {
"1": "tileset.png"
}
};
RPGJS.Database = {
"actors": {
"1": {
"graphic": "1"
}
},
"tilesets": {
"1": {
"graphic": "1"
}
},
"map_infos": {
"1": {
"tileset_id": "1"
}
}
};
RPGJS.defines({
canvas: "canvas_id",
autoload: false
}).ready(function() {
RPGJS.Player.init({
actor: 1,
start: {x: 10, y: 10, id: 1} // Here, map id doesn't exist
});
RPGJS.Scene.map();
Lastly, create the json file setting every tile of your map. I just copied the MAP-1.json file from the 'sample' folder to inside the Data\Maps folder.
Then you'll be able to walk with your character in an empty map! Open the html file in your browser and try it!
Printscreen from the game running in a browser
Of course to have a real game you'll need to change a lot of this (as creating a database.json file and a materials.json file where you'll put most of the code you put in the <script> tag), but with the basics I hope you can work from that!

The tutorial is very clear
3. Add this code in your page :
<!DOCTYPE html>
<script src="canvasengine-X.Y.Z.all.min.js"></script>
<script src="rpgjs-X.Y.Z.min.js"></script>
<canvas id="canvas_id" width="640" height="480"></canvas>
That's "the canvas" ^

Brian Hellekin post a great tutorial. If you want see all the power of this library you must modify your html file in this way:
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="http://canvasengine.net/cdn/dev/canvasengine-latest.all.min.js"></script>
<script src="http://rpgjs.com/cdn/rpgjs-2.0.0.min.js"></script>
<script src="plugins/gamepad.js"></script>
<script src="plugins/virtualjoystick.js"></script>
<script src="plugins/soundmanager2-jsmin.js"></script>
<script>
var Data = null;
if (Data) {
Data.database._scenes = Data.menus;
Data.database.system = Data.settings;
}
RPGJS.defines({
canvas: "canvas",
plugins: ["/rpgjs/plugins/Hub", "/rpgjs/plugins/Arpg", "/rpgjs/plugins/MenuGenerated"],
scene_path: "/rpgjs/",
soundmanager: {
url: "/rpgjs/swf/",
},
autoload: Data == null,
ignoreLoadError: true
}).ready(function(rpg) {
var material_json = {};
var m, type;
if (Data) {
for (var i in Data.materials) {
m = Data.materials[i];
type = m['type'] + "s";
if (!material_json[type]) {
material_json[type] = {};
}
material_json[type][m['material_id']] = RPGJS_Canvas.Materials.getFilename(m['path'], true);
}
var m, e;
var map_info = Data.maps, info;
for (var id in Data.data_maps) {
m = Data.data_maps[id];
this.setMap(id, m.map.map);
info = map_info[id];
info.tileset_id = info.tileset;
info.autotiles_id = info.autotiles;
info.events = [];
info.dynamic_event = [];
for (var i=0 ; i < m.events.length ; i++) {
e = m.events[i];
if (e.data_event.type == "event" ) {
var format =
[
{
"id" : e.event_id,
"x" : e.position_x,
"y" : e.position_y,
"name" : 'EV-' + e.event_id
},
e.data_event.data.pages
];
this.setEvent(id, 'EV-' + e.event_id, format);
info.events.push('EV-' + e.event_id);
}
else {
var name, _id;
for(var key in e.data_event.data) {
_id = e.data_event.data[key];
name = key;
break;
}
info.dynamic_event.push({
"x" : e.position_x,
"y" : e.position_y,
"name" : name,
"id" : _id
});
}
}
}
Data.database.map_infos = map_info;
global.materials = material_json;
global.data = Data.database;
global.game_player.init();
}
var scene = this.scene.call("Scene_Title", {
overlay: true
});
scene.zIndex(0);
});
</script>
<style>
body {
padding: 0;
margin: 0;
overflow: hidden;
background: black;
}
canvas {
-webkit-user-select : none;
-moz-user-select : none;
overflow : hidden;
}
#font-face{
font-family : "RPG";
src : url("Graphics/Fonts/Philosopher-Regular.ttf");
}
#font-face{
font-family : "Megadeth";
src : url("Graphics/Fonts/Elementary_Gothic_Bookhand.ttf");
}
</style>
<div id="game">
<canvas id="canvas" width="640" height="480"></canvas>
</div>
Note:
/rpgjs/ is the folder where i put my project in my local server. For play the game i go to http://localhost/rpgjs/
For work you need to modify the JS file in /plugins/ directory.
/Hub/Sprite_Hub.js
use this path:
array.push(RPGJS.Path.getFile("pictures", "../Pictures/hub.png", "hub"));
array.push(RPGJS.Path.getFile("pictures", "../Pictures/hp_meter.png", "hp_meter"));
array.push(RPGJS.Path.getFile("pictures", "../Pictures/hp_number.png", "hp_number"));
array.push(RPGJS.Path.getFile("pictures", "../Pictures/Hero_Face.png", "hero_face"));
array.push(RPGJS.Path.getFile("pictures", "../Pictures/button_A.png", "button_a"));
array.push(RPGJS.Path.getFile("pictures", "../Pictures/button_B.png", "button_b"));
is very useful debug in the first time with developer tool of google chrome. When you see 404 error on a img resourse just go to your project and search the file name. Find what js script load it and fix path.
And not...the tutorial inside library project is not clear and isn't complete...they just want sell his rpgeditor and js library is put only for promotion purpose i think.
you can see here: http://rpgworld.altervista.org/rpgjs/ my final working project. Is just a try... but you can see the power of this library.
this demo load:
1- a welcome page with new and load came
2- a custom map with one event
3- a working event: a chest that if you open you will find 30 gold
4- a player manu: just click ESC button on keyboard
i don't know how use arpg plugin for a realtime combat event but i working on for understand of to use it.

Swiffy Not Pulling External Text

I thought I had solved an issue with my Swiffy file when I uploaded it to my server along with the file it dynamically pulls text from, but even on my server no text is pulled from the external file. It only sits there with everything blank.
And the only thing that shows up in the console is:
[trace] TypeError: Error #1009: Cannot access a property or method of a null object reference. runtime.js:187
Here's a link to the file generated by swiffy (only valid for 15 minutes I think):
Link 1
Here's a link to the runtime.js file: Link 2.
EDIT:
This is the line where the error is being given in runtime.js:
var rk=function(a,b)
{
a.__swiffy_baseclass=b[I];
Xa(a,q[vd](b[I]));
a[I].constructor=a;
if(b.__swiffy_if)
{
var c=new kh;
c.Be(b.__swiffy_if);
q[E](a,"__swiffy_if",{value:c})
}
},
sk=function(a)
{
q[E](a[I],"__swiffy_nvr",{value:l})
},
tk=function(a)
{
ba.console&&ba.console.log("[trace] "+a)
},
uk=function(){},
vk=function(a)
{
tk(a)
},
wk=function(a)
{
f(a)
};"__proto__"in q||q[E](mi[I],"__proto__",{get:function(){return q[hd](this)}});
var xk=function(a,b,c,d,e,g,k)
{
this.D=a;
this.variables=b;
this.url=c; fb(this,d||"_self"); La(this,e);
this.Xk=!!g;
this.Di=!!k;
this.Wh=m;
if(this.Xk||this.Di)
this.Wh=this.fo()
},
yk={0:h,1:"GET",2:"POST"};
M=xk[I];