Odtnhj

I'm building a web control panel. The short explanation of how it works: An application is installed onto the server which then delivers all app content to the frontend.

Each application uses Smarty for layout but should also be able to define styles and scripts for dynamic content (start content is loaded in by php).

The backend in php simply provides an array of these apps with their name, author, version, html content, icons, css files and js files. This is all stored in js classes and the scripts are loaded at the end with jquery's getscript function.

The problem with these scripts is that it's kind of a mess to get them all working side by side.

Let's say I have a settings app with multiple tabs, the javascript could contain something like this for the tab switching:

var elems;
var divs;
function init() 
elems = document.getElementsByClassName("settings-item");
divs = document.getElementsByClassName("settings-item-content");
elems[0].classList.add("is-active");
divs[0].style.display = "block";

for(let i = 0; i < elems.length; i++) 
 elems[i].addEventListener("click", onItemClick);




function onItemClick(event) 
for(let i = 0; i < elems.length; i++) 
 elems[i].classList.remove("is-active");


event.target.classList.add("is-active");

let id = event.target.id + "-content";

for(let i = 0; i < divs.length; i++) 
 divs[i].style.display = "none";
 if(divs[i].id === id) 
 divs[i].style.display = "block";
 

To execute this when the app is loaded, the following is added at the beginning of the script:

var identity = "Settings-Settings.js";
Hook.bind(identity + "-create", init);

The -create hook then gets called when everything else has loaded so no errors occur.

When you logout and log back in, it will throw errors due to the variables already existing. I solved that by doing this:

Hook.bind(identity + "-destroy", destroy);
function destroy() 
 identity = null;
 delete identity;
 elems = null;
 delete elems;
 divs = null;
 delete divs;

The -destroy hook gets called when the apps are removed on logout.

Surprisingly, this all works fairly well. Unfortunately, theres still the issue of scripts from different classes overwriting each others variables. If I create another app with a similar structure:

var identity = "Customers-Customers.js";

Hook.bind(identity + "-create", init);
Hook.bind(identity + "-destroy", destroy);

var elems;
var divs;

function init() 
 elems = document.getElementsByClassName("customer-item");
 divs = document.getElementsByClassName("customer-item-content");
 elems[0].classList.add("is-active");
 divs[0].style.display = "block";

 for(let i = 0; i < elems.length; i++) 
 elems[i].addEventListener("click", onItemClick);
 



function destroy() 
 identity = null;
 delete identity;
 elems = null;
 delete elems;
 divs = null;
 delete divs;




function onItemClick(event) 
 for(let i = 0; i < elems.length; i++) 
 elems[i].classList.remove("is-active");
 alert(elems[i].id);
 

 event.target.classList.add("is-active");

 let id = event.target.id + "-content";

 for(let i = 0; i < divs.length; i++) 
 divs[i].style.display = "none";
 if(divs[i].id === id) 
 divs[i].style.display = "block";
 
 

Both scripts do load. BUT since they both have the same variables defined, none of them will work properly. When you look at the part that removes is-active for the customer tabs, it will loop over the items for the settings tabs instead.

I could just rename the variables but this would be a major inconvenience for the end user if they wish to install their own custom built apps. If they choose a variable name that's already in use, it will break all scripts that use it.

This is all fairly dodgy stuff, I'm wondering if theres a better way to do this so none of the scripts interfere with each other. This way the end user doesn't have to worry about the names of the variables and functions.

Any ideas?