I understand you wish to make modifications, and I have a lot of respect for those who take the time with this, as I have been in this situation myself with other websites as well as X3.
svenflock wrote:The project is only for the index page. All other pages uses only gallery and folders view as designed by X3 :-). That is why I am looking for something similar which exists in Wordpress, i.e. IS_HOME() or IS_PAGE() to only trigger the JS where required. I like performance and usually, I isolate code only to regions where it should be exposed to. Does X3 has a built in function to identify the name of the current page to be loaded?
Wordpress is actually a CMS where you build the website (via PHP), and this is different in your case since we are using Javascript. However, it's not too complicated since X3 adds unique body classes that represent the specific page. For example, the home page contains unique class
page-index, and this can easily be checked in the page load script:
function x3_load_page(){
if(document.body.classList.contains('page-index')) {
// home page stuff here
}
}
svenflock wrote:I understand the risk and I have removed the ki-call to be compatible with future releases.
You could use them, but then you might need to re-identify their minified name after updates. The other option, is to trigger functions via the external plugin, but then you/we would need to write additional code for each plugin.
I guess in the future, there is no reason I couldn't make many functions public, so for example they could be accessed X3.cslider(), or even X3.update_page() to update all on page. A challenge here is that these functions are not meant to run multiple times on the same page, so that would require adapting all functions. Something to think about.
svenflock wrote:I like clean code to develop, be able to easily diff between different versions. Further, some blocks contain a lot of HTML which took the parser some time to render in the backend.
I like your idea to "compile" everything for production back into the JSON. Can you recommend a tool for that, e.g. npm or Grunt?
Understood. I don't have any suggestions on how to auto-compile your templates into the page.json file. My idea was, considering the challenges with lazy-loading html fragments, it might be worth manually adding your templates into the page from the panel, once you feel the page is complete. You also need to consider the fact that all your load() functions cause many additional load requests for the visitor when they arrive on the page. Probably harmless, but it's not optimal.
svenflock wrote:After moving our the comparison slider from the external HTML files back to the main JSON, the slider worked (after adding the "content" class to the moved DIV container). Funny thing is that the "toggle content" works again. Thanks for the tip!!
I can't explain this without studying the process in detail, but likely it's related to timing. If some element is moved before the X3 page functions trigger (which might be 1ms), those elements could be excluded (depending on context). If you for example added setTimeout() to the move function, the comparison slider would likely trigger correctly, and when it's moved, it's already working. The reason you have to add the "content" class is probably because the comparison slider runs inside the element with "content", while your slider was already moved outside.
svenflock wrote:Do you think it is possible for future versions to allow external editing of the JSONs (both pages and custom fields)? So the user provide HTML, CSS and JS files like in the custom folder but it is automatically merged by the backend back to the JSON?
Although there are JSON editors which allow intuitive editing of JSON fields (for example X3 page.json files), I don't see any logical way to be able to merge lots of data into a page.json. We could perhaps use some <!-- include filename.html --> which is rendered in PHP, but I don't see how this would apply for CSS or JS.
