How to use crossize js files for localize.js. e.g. SweetAlert2.js

Question

I want to use jqeury.localize.js (i18n json files) in another js file. Let's say slate 2.

Localization provides translations in json files according to your chosen language (EN, FR, GR). ( https://github.com/coderifous/jquery-localize )

Sweet Alert2 are sexual pop-up alerts that cannot be blocked from the browser, such as general alerts, and give you a full range of options to make them look friendly. ( https://limonte.imtqy.com/sweetalert2/ )

But the problem is that make Sweet Alert pop-ups translated according to the language that the user has selected.

Answer 1

Localization gives us callbacks, but you must also find the language that the user has chosen to use the json file of the language you are using. To do this, go to jqeury.localize.js file and make a global variable at the top of the file

var globallanguage;

After that, go to line 185, where the code below exists, and enter the "langball" input variable "globallanguage".

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

Now you have the user selection saved in "globallanguage". Then you can go to any file you want and use the code below to get 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);
      }});

, JSON, .
SwalAlert2 SWAL .

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

- , , SweetAlerts JS-librady , ...

Answer 2

SweetAlert2 jquery-localize :

swal({
  ...
  onOpen: function(modal) {
    $(modal).find("[data-localize]").localize("modal", {language: "fr"})
  }
});

"fr" , .

Answer 3

To further expand what Lemon Monte said, this is a complete implementation.

 swal({
  onBeforeOpen: (modal) => {
    $(modal).find("[data-localize]").localize("swal", {skipLanguage: /^en/, pathPrefix: "assets/js/i18n"})
  },
  title: '<span data-localize="dropshift.title">Drop Shift</span>',
  html: '<span data-localize="dropshift.text">Are you sure you want to drop this shift?</span>',
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: '<span data-localize="dropshift.confirm">Yes, drop it!</span>',
  cancelButtonText: '<span data-localize="dropshift.cancel">Cancel</span>'
}).then((result) => {
  if (result.value) {
    $.ajax({
        url: 'path/to/file/',
        type: 'POST',
        dataType: 'json',
        data: {method: 'setDropShift',shiftid: shiftId},
    })
    .done(function() {
        console.log("success")
    })
    .fail(function(e) {
        console.log("error")
    })
    .always(function() {
        console.log("complete")
    })
  }
}).catch(swal.noop)

Then in my swal-fr.json

{
  "dropshift": {
  "title": "Abandonner Poste",
  "text": "Êtes-vous sûr de vouloir abandonner ce poste?",
  "confirm": "Oui, Abandonner!",
  "cancel": "Annuler"
  }
}