How to use localize.js translation cross js files. e.g SweetAlert2.js

Question

I want to use the jquery.localize.js (i18n json files) in another js file. Lets say sweetalerts2.

The localize provides translations in json files, according to the language you choose(EN,FR,GR).(https://github.com/coderifous/jquery-localize)

The Sweet Alert2 are sexy pop up alerts that, cannot been blocked from browser,like common alerts, and gives you a full set of choices in order to make them look user friendly.(https://limonte.github.io/sweetalert2/)

But the problem is how to make Sweet Alert popups to be translated according to the language a user has chose.

Answer 1

Localize gives us the Callbacks, but you also have to find the language user has choose in order to use the json file of the language you have to use. In order to do that go to the jquery.localize.js file and make global a variable at the top of of the file

var globallanguage;

After that go around 185 line where the below code exists and enter at "globallanguage" the input of "lang" variable.

lang = normaliseLang(options.language ? options.language : $.defaultLanguage);
globallanguage=lang;

Now you have the user's choice saved in "globallanguage". Than you may go to any file you want and use the below code to retrieve the translation.

var message;
var messagetitle;
$("[data-localize]").localize("i18n/site", 
      { language: globallanguage, //taking from localize.jquery
        callback: function(data, defaultCallback) 
        {message = data.alert.incidentalert.LEAVE;
        defaultCallback(data);
      }});

$("[data-localize]").localize("i18n/site", 
      { language: globallanguage, //taking from localize.jquery
        callback: function(data, defaultCallback) 
        {messagetitle = data.alert.incidentalert.LEAVEHEADER;
        defaultCallback(data);
      }});

And now you retrieved the message you want from the JSON file user has choose.
After that you may simple call the SweetAlert2 SWAL and display the message.

swal({
          title : messagetitle,
          text : message,
          type : "warning",
          showCancelButton : true,
          confirmButtonColor : "#e54747",
          confirmButtonText : button,
          closeOnConfirm : false
        }).then(function () { //function when Leave is pressed

It is not something super exciting, but it is very helpful to know that you can use SweetAlerts or any other JS librady, at any language you want...