Wie lokalisiere.js Übersetzung verwenden Cross-JS-Dateien. ZB SweetAlert2.js

Question

Ich möchte die jqeury.localize.js (i18n JSON-Dateien) in einer anderen JS-Datei verwenden. Sagen wir mal sweetalerts2.

Die localize bietet Übersetzungen in json Dateien nach der Sprache, die Sie wählen (EN, FR, GR). (https://github.com/coderifous/jquery-localize)

The Sweet alert 2 sind sexy Pop-up-Benachrichtigung, dass nicht von Browser blockiert, wie gemeinsame Warnungen und gibt Ihnen eine ganze Reihe von Möglichkeiten, um sie freundlich aussehen Benutzer zu machen. (https://limonte.github.io/sweetalert2/)

Aber das Problem ist wie süß Alarm Pop-ups machen ein Benutzer übersetzt werden entsprechend der Sprache hat gewählt.

Answer 1

Localize gibt uns die Callbacks, aber Sie müssen auch finden die Sprache Benutzer hat wählen, um die JSON-Datei der Sprache zu verwenden, die Sie verwenden müssen. Um die jqeury.localize.js Datei, die gehen zu tun und global eine Variable an der Spitze der Datei

var globallanguage; 

Danach gehen rund 185 Linie, wo der Code unten ist noch vorhanden auf „globallanguage machen und geben Sie "Die Eingabe von" lang "Variable.

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

Jetzt haben Sie die Wahl des Benutzers in "globallanguage" gespeichert. Dann können Sie zu jeder beliebigen Datei gehen und den folgenden Code verwenden, um die Übersetzung abzurufen.

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); 
     }}); 

Und jetzt haben Sie die gewünschte Nachricht aus der JSON-Datei abgerufen, die der Benutzer gewählt hat.
Danach können Sie einfach die SweetAlert2 SWAL aufrufen und die Nachricht anzeigen.

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

Es ist nicht etwas, super spannend, aber es ist sehr hilfreich zu wissen, dass Sie SweetAlerts oder anderen JS librady, zu jeder gewünschten Sprache ...

Answer 2

Lokalisierung des SweetAlert2 modal können mit jquery-localize ist so einfach wie:

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

"fr" mit der Sprache Benutzer ersetzen und das sollte es sein.

Answer 3

Um weiter zu erweitern, was Limon Monte gesagt hat, ist dies die vollständige Implementierung.

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) 

Da ist in meinem swal-fr.json

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