Tweak: Translating special HTML attributes such as placeholder, value and title #6
Description
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;
};