Tweak: Translating special HTML attributes such as placeholder, value and title

[monecchi]

Disclaimer: Posted this to enable translations for html additional attributes such as placeholder, value and title - However I've found a very solid commit coded by @jorgejeferson which also includes translation support even for images. Please check here

First thing first, this is an awesome plugin, so congrats to its developer! It has helped me a lot to get a project done, thanks :)

Although I'm not a developer, I ended up changing the plugin's main function in order to target some common HTML attributes. I know it's poorly implemented, it's more kind of a "tweak", perhaps someone smarter than me might enhance the code...

Specific instructions related to this "tweak"

It's mandatory to include the trn class in all cases as described by the plugin's instructions.

In order to translate placeholder, value, and title html attributes, you'll need to change the data- attribute for each element if you use this tweak. As for now this is how I've set it all up:

data-trn-value - for value="" data-trn-holder - for placeholder="" data-trn-title - for title=""

Getting the HTML ready

A real example translating the value="" text of a submit button:

<input type="submit" class="btn btn-green trn" data-trn-value="emailsubmit" value="Send">

For that we use data-trn-value="" and define a value for the attribute to be included in our translation dictionary function later, in this case the attribute value is emailsubmit.

Let's set up the html for the correct translation of a placeholder and a title text

<input type="text" class="signup-email-field trn" data-trn-holder="signupfield" placeholder="Your email">

<a title="About us" data-trn-title="titleabout" class="menu-link trn"></a>

The translation dictionary set up

After arranging your HTML code to accommodate the new data- attributes naming convention, simply include the attributes value in your dictionary as bellow:

e.g:

// Translation dictionary function
$(document).ready(function() {

var t = {   
emailsubmit: {  // translates the value="" text
  en: "Send",
  it: "Invia",
  pt: "Enviar"
},
emailfield: {  // translates the placeholder="" text
  en: "Your email",
  it: "Indirizzo email",
  pt: "Seu email"
},
titleabout: {  // translates the title="" text
  en: "About us",
  it: "Chi Siamo",
  pt: "Sobre"
},

};
var _t = $('body').translate({lang: "en", t: t});
var str = _t.g("translate");
console.log(str);

$(".language").click(function(ev) {
var lang = $(this).attr("data-value");
_t.lang(lang);
console.log(lang);
ev.preventDefault();
});

Here's the code, I hope it helps!

To be able to use the new mentioned functionality you should copy the code bellow and update/replace the code in the file jquery.translate.js, it starts around line 66, just compare both code blocks and you'll be able to get it done. Good luck!

 //main
 this.find(settings.css).each(function(i) {
 var $this = $(this);

 var trn_key = $this.attr("data-trn-key");
 if (!trn_key) {
    trn_key = $this.html();
 $this.attr("data-trn-key", trn_key);   //store key for next time
}

 var trn_value = $this.attr("data-trn-value"); // Translate attribute value="" (e.g = submit button)
 if (!trn_value) {
    trn_value = $this.val();
 $this.attr("data-trn-value", trn_value);   //store key for next time
}

 var trn_holder = $this.attr("data-trn-holder"); // Translate attribute placeholder="" (e.g = input text field)
 if (!trn_holder) {
    trn_holder = $(this).data("placeholder");
 $this.attr("data-trn-holder", trn_holder);   //store key for next time
}

 var trn_title = $this.attr("data-trn-title"); // Translate attribute title=""
 if (!trn_title) {
    trn_title = $(this).data("title");
 $this.attr("data-trn-title", trn_title);   //store key for next time

 $this.html(that.get(trn_key)); // plain text html
 $this.val(that.get(trn_value)); // attribute value
 $(this).attr("placeholder", that.get(trn_holder)); // attribute placeholder
 $(this).attr("title", that.get(trn_title)); // attribute title
});

    return this;

};

[voime]

How translate strings, what are added with script. Example to add Google InfoBox content.

var content = '<button class="button"><i class="fa fa-plus-circle"></i> <p class="trn" data-trn-key="Add to selected">Lisa valikusse</p></button>';

var infobox = new InfoBox({
      content: '<div id="infobox">' + content + '</div>',
.....

[jorgejeferson]

@voime I have not done the test yet, but have you ever thought about using trigger for translation called?

[ZERO20]

Disclaimer: Posted this to enable translations for html additional attributes such as placeholder, value and title - However I've found a very solid commit coded by @jorgejeferson which also includes translation support even for images. Please check here

First thing first, this is an awesome plugin, so congrats to its developer! It has helped me a lot to get a project done, thanks :)

Although I'm not a developer, I ended up changing the plugin's main function in order to target some common HTML attributes. I know it's poorly implemented, it's more kind of a "tweak", perhaps someone smarter than me might enhance the code...

Specific instructions related to this "tweak"

It's mandatory to include the trn class in all cases as described by the plugin's instructions.

In order to translate placeholder, value, and title html attributes, you'll need to change the data- attribute for each element if you use this tweak. As for now this is how I've set it all up:

data-trn-value - for value="" data-trn-holder - for placeholder="" data-trn-title - for title=""

Getting the HTML ready

A real example translating the value="" text of a submit button:

<input type="submit" class="btn btn-green trn" data-trn-value="emailsubmit" value="Send">

For that we use data-trn-value="" and define a value for the attribute to be included in our translation dictionary function later, in this case the attribute value is emailsubmit.

Let's set up the html for the correct translation of a placeholder and a title text

<input type="text" class="signup-email-field trn" data-trn-holder="signupfield" placeholder="Your email">

<a title="About us" data-trn-title="titleabout" class="menu-link trn"></a>

The translation dictionary set up

After arranging your HTML code to accommodate the new data- attributes naming convention, simply include the attributes value in your dictionary as bellow:

e.g:

// Translation dictionary function
$(document).ready(function() {

var t = {   
emailsubmit: {  // translates the value="" text
  en: "Send",
  it: "Invia",
  pt: "Enviar"
},
emailfield: {  // translates the placeholder="" text
  en: "Your email",
  it: "Indirizzo email",
  pt: "Seu email"
},
titleabout: {  // translates the title="" text
  en: "About us",
  it: "Chi Siamo",
  pt: "Sobre"
},

};
var _t = $('body').translate({lang: "en", t: t});
var str = _t.g("translate");
console.log(str);

$(".language").click(function(ev) {
var lang = $(this).attr("data-value");
_t.lang(lang);
console.log(lang);
ev.preventDefault();
});

Here's the code, I hope it helps!

To be able to use the new mentioned functionality you should copy the code bellow and update/replace the code in the file jquery.translate.js, it starts around line 66, just compare both code blocks and you'll be able to get it done. Good luck!

 //main
 this.find(settings.css).each(function(i) {
 var $this = $(this);

 var trn_key = $this.attr("data-trn-key");
 if (!trn_key) {
    trn_key = $this.html();
 $this.attr("data-trn-key", trn_key);   //store key for next time
}

 var trn_value = $this.attr("data-trn-value"); // Translate attribute value="" (e.g = submit button)
 if (!trn_value) {
    trn_value = $this.val();
 $this.attr("data-trn-value", trn_value);   //store key for next time
}

 var trn_holder = $this.attr("data-trn-holder"); // Translate attribute placeholder="" (e.g = input text field)
 if (!trn_holder) {
    trn_holder = $(this).data("placeholder");
 $this.attr("data-trn-holder", trn_holder);   //store key for next time
}

 var trn_title = $this.attr("data-trn-title"); // Translate attribute title=""
 if (!trn_title) {
    trn_title = $(this).data("title");
 $this.attr("data-trn-title", trn_title);   //store key for next time

 $this.html(that.get(trn_key)); // plain text html
 $this.val(that.get(trn_value)); // attribute value
 $(this).attr("placeholder", that.get(trn_holder)); // attribute placeholder
 $(this).attr("title", that.get(trn_title)); // attribute title
});

    return this;

};

Thank you! I added it to my js file, I only have a problem with the input texts and the value, if I add an initial value, then I change it and change the language, it resets the initial value, or if it has no initial value and I add value and I do some action and change the language leaves me the value that I placed initially not the one that I entered, could you help me? regards!

"Principal": {
    en_US: "Main"
},

var translator = $('body').translate({ lang: "es_MX", t: local });

function changeLang(langSelected){ translator.lang(langSelected); $.extend($.validator.messages, eval(langSelected)); validator.form(); ;}