Tutorial or Documentation on the Files Functionality?

Questions
1

Hey there!

Is there a tutorial or documentation on the options for the Files section?

Here are some specific questions that I was hoping to get answered.

  • What’s the difference between onReady and onPageReady?
  • If the event is onClick how to I configure an element to trigger the code in that file when it is clicked?
  • Does the Type only serve to tell the Editor the expected syntax so it gets colorized properly or is there another purpose to it?

Thanks so much for the help!

2

Hi,

We will create a documentation for this events very soon. But for now I will explain you two mostly used, and these are onReady and onPageReady.

onReady is being triggered when user loads website, but it doesn’t mean whole page is loaded. So in this type of files you can write code that doesnt require full page to be loaded for something to work. One example for that can be click events, such as:

$(document).on('click','.trigger',function(){
 // some code goes here
});

So in example above, we are listening to document click, and if item with class ‘trigger’ is clicked, this code will run. So for this one you would use onReady, because this type of code doesn’t require full page to be loaded before the script.

And then there is onPageReady which is used most often, and this script runs when page is changed and it is fully loaded. It also runs on first full load of the website. Because this is a SPA, you can’t use JS code such as one below, so you need to use this event which we created for this purposes.

$(window).on("load", function() {
  // Things that need to happen after full load
});

So if you are playing with DOM, you would use onPageReady event, some simple example is:

$(".trigger").css("background", "red")

In this code above, we need element with class “trigger” to be accessible on screen in order to load this code correctly, otherwise it will not work.

Also one more tip, if you are working with onPageReady, and you want specific code to be loaded only on certain page, you can use this code below:

if ( data.page.Get('route') === '/about-us' ) {
  // some code for about us page
}

Of course, instead of writing ‘about-us’, you would write route of your desired page.

2 Likes
3

This gives me a ton of useful information!

Thank you very much!