From e308cd9585b838d55ce2e34f187ab664b727ed13 Mon Sep 17 00:00:00 2001
From: Emilien Richard <erichard@proginov.com>
Date: Wed, 27 Jun 2018 11:29:50 +0200
Subject: [PATCH] Added attribute translation and trn tag translation and
 debugging output

---
 README.md           |  6 +++++-
 jquery.translate.js | 47 ++++++++++++++++++++++++++++++++++++---------
 2 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 2d9eab5..9e5cdd1 100644
--- a/README.md
+++ b/README.md
@@ -12,9 +12,13 @@ Step 1: include JQuery and translate.js in your page
     <script src="jquery.js"/>
     <script src="jquery.translate.js"/>
 
-Step 2: every text you want translated include the trn class
+Step 2: there are multiple ways to translate your text, you can add the trn class, use the trn tag or translate attribute content with trn-attr class and a data-trn-attr attribute containing a space separated list of attributes that must be translated
 
     <span class="trn">text to translate</span>
+    <span><trn>text to translate</trn></span>
+    <a href="/test" title="title to translate" class="trn-attr" data-trn-attr="title">Go!</a>
+
+Instead using your text as key you can use the data-trn-key attribute to specify the key or the data-trn-key-attribute-name attribute to specify the key to use for attribute-name translation.
 
 Step 3: create your dictionary
 
diff --git a/jquery.translate.js b/jquery.translate.js
index 980c8fa..191e368 100644
--- a/jquery.translate.js
+++ b/jquery.translate.js
@@ -17,18 +17,17 @@
 	
     var settings = {
       css: "trn",
-      lang: "en"/*,
-      t: {
-        "translate": {
-          pt: "tradução",
-          br: "tradução"
-        }
-      }*/
+      tag: "trn",
+      css_attr: "trn-attr",
+      lang: "en",
+      debug: false,
     };
     settings = $.extend(settings, options || {});
     if (settings.css.lastIndexOf(".", 0) !== 0)   //doesn't start with '.'
       settings.css = "." + settings.css;
-       
+    if (settings.css_attr.lastIndexOf(".", 0) !== 0)   //doesn't start with '.'
+      settings.css_attr = "." + settings.css_attr;
+
     var t = settings.t;
  
     //public methods
@@ -50,6 +49,9 @@
       }
       catch (err) {
         //not found, return index
+        if (settings.debug) {
+          console.log("No '" + settings.lang + "' translation for '" + index + "'");
+        }
         return index;
       }
       
@@ -64,6 +66,17 @@
 
     
     //main
+    this.find(settings.tag).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
+      }
+
+      $this.html(that.get(trn_key));
+    });
     this.find(settings.css).each(function(i) {
       var $this = $(this);
 
@@ -75,7 +88,23 @@
 
       $this.html(that.get(trn_key));
     });
-    
+    this.find(settings.css_attr).each(function(i) {
+      var $this = $(this);
+
+      var trn_attr_names = $this.attr("data-trn-attr");
+      trn_attr_names = trn_attr_names.split(" ");
+      // for each attribute
+      for (i = 0; i < trn_attr_names.length; i++) {
+        trn_attr_name = trn_attr_names[i];
+        var trn_key = $this.attr("data-trn-key-" + trn_attr_name);
+        if (!trn_key) {
+          trn_key = $this.attr(trn_attr_name);
+          $this.attr("data-trn-key-" + trn_attr_name, trn_key);   //store key for next time
+        }
+        $this.attr(trn_attr_name, that.get(trn_key));
+      }
+    });
+
     
 		return this;