Multi-Language UI with Code Examples

Source

In this post, I will attempt to divulge what I know about coding for Multi-Language UIs. I don't profess to be an expert, there are other methods and this will likely have cavets I haven't even thought of. I came across this method some time ago and wanted to incorporate it in a system of my own, but RL is so demanding that one cannot really dedicate a life to coding without money to pay bills, so my coding stopped. I hope the reader finds it educational.

I am going to assume I was a dev coding this system up for LeoThreads, as a RL example is always easiest to digest. The first thing that I will need to do is to create a new user field on the blockchain for all users called preferred_language, which will be a default of EN (English), and set up an interface in Settings where the user can set it to their own language. These Country Codes are a great source to create the drop down menu and field logic from.

Though doing the UITK (User Interface Tool Kit) work could be done on a server, I like to offload any computation that isn't validation work, so I will assume to do the UI setup on the client.

The only preprocessor task that should be accomplished is to add the UITK.js file for the appropriate preffered_language by adding the script tag with the appropriate country code in the source as such:

src="./EN/UITK.js" // EN would be a preprocessed string insert

If Leothreads loads the User data postprocessor, the script tag will need to be created and inserted into the document with the required src before the UITK.run() script executes.

As you can see, you will need a 2 character folder and identically named file for each language you wish to develop for.

The general object format I would use for UITK.js is:

var UITK_DATA = {
     Home : "Home",
     LeoFinance : "leofinance.io/build/_assets/brand-F4YW3B2B",
}

Whereas Home is the second part (label) of the Element ID and "Home" is the text to be used for this language. LeoFinance label was added for reference only, in this case, to show that urls are also replacable in the DATA object, where images are used as UI objects. The system also includes the ability to replace href links, if the case ever arises.

But let's not get too far ahead of ourselves... How do we change the UI? Well each UI Element needs a unique tag. To make sure we only grab UI Elements when we query, there needs to be a prefix:

span id="UITKtext_" //for text
img id="UITKsrc_" // for src based urls
a id="UITKhref_" // for href based urls

This way, when we query, we can grab all document elements whose id matches "UITK". The other thing our ID needs is a unique Label that is NOT REPEATED in the UITK_DATA object:

span id="UITKtext_Home"
img id="UITKsrc_LeoFinance" // for src based urls
a id="UITKhref_LeoFinance" // for href based urls

Now comes the fun part:

var UITK = function(){
     var groups = ["UITKtext", "UITKsrc", "UITKhref"];
     var group = "";
     var lists = {
          UITKtext : [],
          UITKsrc : [],
          UITKhref : []
     }
     function check(label){
          if(UITK_DATA[label] === undefined){return "";}
          return UITK_DATA[label];
     }
     function CreateLists(){
          lists.UITKtext = [get the elements where ids contain 'UITKtext'];
          lists.UITKsrc = [get the elements where ids contain 'UITKsrc'];
          lists.UITKhref = [get the elements where ids contain 'UITKhref'];
     }
     function LoadUI(group){
          foreach(element in lists[group]){
               var label = element.id.split('_')[1];
               var string = check(label);
               if(string == ""){continue;}
               if(group == groups[0]){element.innerText = string;}
               if(group == groups[1]){element.src = string;}
               if(group == groups[2]){element.href = string;}
          }
     }
     function run(){
          CreateLists();
          if(lists[groups[0]] != 0){LoadUI(groups[0]);}
          if(lists[groups[1]] != 0){LoadUI(groups[1]);}
          if(lists[groups[2]] != 0){LoadUI(groups[2]);}
     }
     var obj = {};
     obj.run = run;
     return obj;
}
UITK = UITK();
UITK.run();

Wrote this all up in about an hour or two, so I'm guessing errors exist and I did not write out the element grabber, as so many methods exist. The hardest part is maintaining the data files. I suggest English as a full set, a blank (Home : "") for any unknown label for any other language, and, a workorder to add, modify or remove a label from all language UITK.js files.

This concludes my Post into how to dev a Multi-Language UI setup. I hope you find this useful, or at least, gets gears whirling in your dev brain. Thanks for making it this far.

I would appreciate one of those mythical 100% upvotes, a repost to ensure the right people see this, and heck, maybe even a follow, for shits and giggles. Chow!