Added default support for HTML5's custom data attributes (data-localize).

Closes #14

Author: coderifous

README.markdown

@@ -14,11 +14,11 @@
 
 It's the file located at `build/jquery.localize.js`
 
-## Step 1. Use the "rel" attribute on tags whose content you want to be translated
+## Step 1. Mark up tags whose content you want to be translated
 
 Somewhere in your html:
 
-    <h1 rel="localize[greeting]"> Hello! </h1>
+    <h1 data-localize="greeting"> Hello! </h1>
 
 ## Step 2. Provide a JSON language file that has translations:
 
@@ -31,10 +31,10 @@ example-fr.json:
 ## Step 3. Use the localize plugin.
 
     // In a browser where the language is set to French
-    $("[rel*=localize]").localize("example")
+    $("[data-localize]").localize("example")
 
     // You can also override the language detection, and pass in a language code
-    $("[rel*=localize]").localize("example", { language: "fr" })
+    $("[data-localize]").localize("example", { language: "fr" })
 
 # Gory Details
 
@@ -44,7 +44,7 @@ The first argument of the localize method is the name of the language pack.  You
 
 Here's an example of loading several language packs:
 
-    $("[rel*=localize]")
+    $("[data-localize]")
       .localize("header")
       .localize("sidebar")
       .localize("footer")
@@ -72,30 +72,30 @@ You can tell the localize plugin to always skip certain languages using the skip
 
     # using a string will skip ONLY if the language code matches exactly
     # this would prevent loading only if the language was "en-US"
-    $("[rel*=localize]").localize("example", { skipLanguage: "en-US" })
+    $("[data-localize]").localize("example", { skipLanguage: "en-US" })
 
     # using a regex will skip if the regex matches
     # this would prevent loading of any english language translations
-    $("[rel*=localize]").localize("example", { skipLanguage: /^en/ })
+    $("[data-localize]").localize("example", { skipLanguage: /^en/ })
 
     # using an array of strings will skip if any of the strings matches exactly
-    $("[rel*=localize]").localize("example", { skipLanguage: ["en", "en-US"] })
+    $("[data-localize]").localize("example", { skipLanguage: ["en", "en-US"] })
 
 ## Applying the language file
 
-If you rely on the default callback and follow the "rel" attribute conventions then the changes will be applied for you.
+If you rely on the default callback and use the "data-localize" attribute then the changes will be applied for you.
 
 ## Examples:
 
 **HTML:**
 
-    <p rel="localize[title]">Tracker Pro XT Deluxe</p>
-    <p rel="localize[search.placeholder]">Search...</p>
-    <p rel="localize[search.button]">Go!</p>
-    <p rel="localize[footer.disclaimer]">Use at your own risk.</p>
-    <p rel="localize[menu.dashboard]">Dashboard</p>
-    <p rel="localize[menu.list]">Bug List</p>
-    <p rel="localize[menu.logout]">Logout</p>
+    <p data-localize="title">Tracker Pro XT Deluxe</p>
+    <p data-localize="search.placeholder">Search...</p>
+    <p data-localize="search.button">Go!</p>
+    <p data-localize="footer.disclaimer">Use at your own risk.</p>
+    <p data-localize="menu.dashboard">Dashboard</p>
+    <p data-localize="menu.list">Bug List</p>
+    <p data-localize="menu.logout">Logout</p>
 
 **application-es.json (fake spanish)**
 
@@ -117,13 +117,13 @@ If you rely on the default callback and follow the "rel" attribute conventions t
 
 **Localize it!**
 
-    $("[rel*=localize]").localize("application", { language: "es" })
+    $("[data-localize]").localize("application", { language: "es" })
 
 ## Callbacks
 
 You can provide a callback if you want to augment or replace the default callback provided by the plugin.  Your callback should take at least 1 argument: the language data (contents of your json file).  It can optionally accept a second argument, which is a reference to the default callback function.  This is handy if you still want the default behavior, but also need to do something else with the language data.
 
-    $("[rel*=localize]").localize("application", {
+    $("[data-localize]").localize("application", {
       language: "es",
       callback: function(data, defaultCallback){
         data.title = data.title + currentBugName();

build/jquery.localize.js

@@ -63,7 +63,8 @@ $.localize = (pkg, options = {}) ->
     $.localize.data[pkg] = data
     wrappedSet.each ->
       elem = $(this)
-      key = elem.attr("rel").match(/localize\[(.*?)\]/)[1]
+      key = elem.data("localize")
+      key ||= elem.attr("rel").match(/localize\[(.*?)\]/)[1]
       value = valueForKey(key, data)
       if elem.is('input')
         if elem.is("[placeholder]")

src/jquery.localize.coffee

@@ -12,12 +12,12 @@
 
   <body>
     <h1>Test localization...</h1>
-    <p rel="localize[test.nested]">puts 2 + 2</p>
-    <p rel="localize[basic]">It failed :(</p>
+    <p data-localize="test.nested">puts 2 + 2</p>
+    <p data-localize="basic">It failed :(</p>
     <script type="text/javascript" charset="utf-8">
       $(function(){
         var opts = { language: "ja", pathPrefix: "/test/lang", skipLanguage: "en-US" };
-        $("[rel*=localize]").localize("test", opts)
+        $("[data-localize]").localize("test", opts)
       })
     </script>
   </body>

test/examples/absolute_prefix_path.html

@@ -12,22 +12,22 @@
 
   <body>
     <h1>Test localization...</h1>
-    <p rel="localize[test.nested]">puts 2 + 2</p>
-    <input rel="localize[test.input]" type="text" value="fail" />
+    <p data-localize="test.nested">puts 2 + 2</p>
+    <input data-localize="test.input" type="text" value="fail" />
     <select>
-      <optgroup rel="localize[test.optgroup]" label="Fail">
-        <option rel="localize[test.option]" value="1">Fail</option>
+      <optgroup data-localize="test.optgroup" label="Fail">
+        <option data-localize="test.option" value="1">Fail</option>
       </optgroup>
     </select>
     <p>
-      <img src="ruby_square.gif" alt="a square ruby" rel="localize[test.ruby_image]"/>
+      <img src="ruby_square.gif" alt="a square ruby" data-localize="test.ruby_image"/>
       Ruby image should be round.
     </p>
-    <p rel="localize[basic]">It failed :(</p>
+    <p data-localize="basic">It failed :(</p>
     <script type="text/javascript" charset="utf-8">
       $(function(){
         var opts = { language: "ja", pathPrefix: "../lang", skipLanguage: "en-US" };
-        $("[rel*=localize]").localize("test", opts)
+        $("[data-localize]").localize("test", opts)
       })
     </script>
   </body>

test/examples/basic_usage.html

@@ -12,17 +12,18 @@
 
   <body>
     <h1>Test localization...</h1>
-    <p rel="localize[test.nested]">puts 2 + 2</p>
-    <p rel="localize[basic]">It failed :(</p>
+    <p data-localize="test.nested">puts 2 + 2</p>
+    <p data-localize="basic">It failed :(</p>
+    <p data-localize="message">Optional callback never happened.</p>
     <script type="text/javascript" charset="utf-8">
       $(function(){
         var opts = { language: "ja", pathPrefix: "../lang", skipLanguage: "en-US" };
         opts.callback = function(data, defaultCallback) {
           data.message = "Optional call back works."
-          $("[rel*=basic]").css({color: "#FF8833"})
+          $("[data-localize]").css({color: "#FF8833"})
           defaultCallback(data);
         }
-        $("[rel*=localize]").localize("test", opts)
+        $("[data-localize]").localize("test", opts)
       })
     </script>
   </body>

test/examples/custom_callback_usage.html

@@ -12,11 +12,11 @@
 
   <body>
     <h1>Test localization...</h1>
-    <p rel="localize[message]">It failed :(</p>
+    <p data-localize="message">It failed :(</p>
     <script type="text/javascript" charset="utf-8">
       $(function(){
         var opts = { language: "ja-XX", pathPrefix: "../lang", skipLanguage: "en-US" };
-        $("[rel*=localize]").localize("test", opts)
+        $("[data-localize]").localize("test", opts)
       })
     </script>
   </body>

test/examples/language_and_country.html

@@ -12,21 +12,21 @@
 
   <body>
     <h1>Test localization...</h1>
-    <p rel="localize[en_message]">Should not load en lang file.</p>
-    <p rel="localize[en_us_message]">Should not load en-US lang file.</p>
+    <p data-localize="en_message">Should not load en lang file.</p>
+    <p data-localize="en_us_message">Should not load en-US lang file.</p>
     <script type="text/javascript" charset="utf-8">
       $(function(){
         var opts = { language: "en", pathPrefix: "lang", skipLanguage: "en" };
-        $("[rel*=localize]").localize("test", opts)
+        $("[data-localize]").localize("test", opts)
 
         var opts = { language: "en-US", pathPrefix: "lang", skipLanguage: /^en/ };
-        $("[rel*=localize]").localize("test", opts)
+        $("[data-localize]").localize("test", opts)
 
         var opts = { language: "en", pathPrefix: "lang", skipLanguage: ["en", "en-US"] };
-        $("[rel*=localize]").localize("test", opts)
+        $("[data-localize]").localize("test", opts)
 
         var opts = { language: "en-US", pathPrefix: "lang", skipLanguage: ["en", "en-US"] };
-        $("[rel*=localize]").localize("test", opts)
+        $("[data-localize]").localize("test", opts)
       })
     </script>
   </body>

test/examples/skip_language.html

@@ -1,52 +1,64 @@
-localizableTag = (tag, localizeKey, attributes) ->
+localizableTagWithRel = (tag, localizeKey, attributes) ->
   t = $("<#{tag}>").attr("rel", "localize[#{localizeKey}]")
+  applyTagAttributes(t, attributes)
+
+localizableTagWithDataLocalize = (tag, localizeKey, attributes) ->
+  t = $("<#{tag}>").attr("data-localize", localizeKey)
+  applyTagAttributes(t, attributes)
+
+applyTagAttributes = (tag, attributes) ->
   if attributes.text?
-    t.text(attributes.text)
+    tag.text(attributes.text)
     delete attributes.text
   if attributes.val?
-    t.val(attributes.val)
+    tag.val(attributes.val)
     delete attributes.val
-  t.attr(k,v) for k, v of attributes
-  t
+  tag.attr(k,v) for k, v of attributes
+  tag
 
 module "Basic Usage"
 
 setup ->
   @testOpts = language: "ja", pathPrefix: "lang"
 
 test "basic tag text substitution", ->
-  t = localizableTag("p", "basic", text: "basic fail")
+  t = localizableTagWithRel("p", "basic", text: "basic fail")
+  t.localize("test", @testOpts)
+  equals t.text(), "basic success"
+
+test "basic tag text substitution using data-localize instead of rel", ->
+  t = localizableTagWithDataLocalize("p", "basic", text: "basic fail")
   t.localize("test", @testOpts)
   equals t.text(), "basic success"
 
 test "basic tag text substitution with nested key", ->
-  t = localizableTag("p", "test.nested", text: "nested fail")
+  t = localizableTagWithRel("p", "test.nested", text: "nested fail")
   t.localize("test", @testOpts)
   equals t.text(), "nested success"
 
 test "input tag value substitution", ->
-  t = localizableTag("input", "test.input", val: "input fail")
+  t = localizableTagWithRel("input", "test.input", val: "input fail")
   t.localize("test", @testOpts)
   equals t.val(), "input success"
 
 test "input tag placeholder substitution", ->
-  t = localizableTag("input", "test.input", placeholder: "placeholder fail")
+  t = localizableTagWithRel("input", "test.input", placeholder: "placeholder fail")
   t.localize("test", @testOpts)
   equals t.attr("placeholder"), "input success"
 
 test "image tag src and alt substitution", ->
-  t = localizableTag("img", "test.ruby_image", src: "ruby_square.gif", alt: "a square ruby")
+  t = localizableTagWithRel("img", "test.ruby_image", src: "ruby_square.gif", alt: "a square ruby")
   t.localize("test", @testOpts)
   equals t.attr("src"), "ruby_round.gif"
   equals t.attr("alt"), "a round ruby"
 
 test "chained call", ->
-  t = localizableTag("p", "basic", text: "basic fail")
+  t = localizableTagWithRel("p", "basic", text: "basic fail")
   t.localize("test", @testOpts).localize("test", @testOpts)
   equals t.text(), "basic success"
 
 test "alternative file extension", ->
-  t = localizableTag("p", "basic", text: "basic fail")
+  t = localizableTagWithRel("p", "basic", text: "basic fail")
   t.localize("test", $.extend({ fileExtension: "foo" }, @testOpts))
   equals t.text(), "basic success foo"
 
@@ -73,7 +85,7 @@ module "Options"
 
 test "pathPrefix loads lang files from custom path", ->
   opts =  language: "fo", pathPrefix: "/test/lang/custom"
-  t = localizableTag("p", "path_prefix", text: "pathPrefix fail")
+  t = localizableTagWithRel("p", "path_prefix", text: "pathPrefix fail")
   t.localize("test", opts)
   equals t.text(), "pathPrefix success"
 
@@ -82,37 +94,37 @@ test "custom callback is fired", ->
   opts.callback = (data, defaultCallback) ->
     data.custom_callback = "custom callback success"
     defaultCallback(data)
-  t = localizableTag("p", "custom_callback", text: "custom callback fail")
+  t = localizableTagWithRel("p", "custom_callback", text: "custom callback fail")
   t.localize("test", opts)
   equals t.text(), "custom callback success"
 
 test "language with country code", ->
   opts = language: "ja-XX", pathPrefix: "lang"
-  t = localizableTag("p", "message", text: "country code fail")
+  t = localizableTagWithRel("p", "message", text: "country code fail")
   t.localize("test", opts)
   equals t.text(), "country code success"
 
 module "Language optimization"
 
 test "skipping language using string match", ->
   opts = language: "en", pathPrefix: "lang", skipLanguage: "en"
-  t = localizableTag("p", "en_message", text: "en not loaded")
+  t = localizableTagWithRel("p", "en_message", text: "en not loaded")
   t.localize("test", opts)
   equals t.text(), "en not loaded"
 
 test "skipping language using regex match", ->
   opts = language: "en-US", pathPrefix: "lang", skipLanguage: /^en/
-  t = localizableTag("p", "en_us_message", text: "en-US not loaded")
+  t = localizableTagWithRel("p", "en_us_message", text: "en-US not loaded")
   t.localize("test", opts)
   equals t.text(), "en-US not loaded"
 
 test "skipping language using array match", ->
   opts = language: "en", pathPrefix: "lang", skipLanguage: ["en", "en-US"]
-  t = localizableTag("p", "en_message", text: "en not loaded")
+  t = localizableTagWithRel("p", "en_message", text: "en not loaded")
   t.localize("test", opts)
   equals t.text(), "en not loaded"
 
   opts = language: "en-US", pathPrefix: "lang", skipLanguage: ["en", "en-US"]
-  t = localizableTag("p", "en_us_message", text: "en-US not loaded")
+  t = localizableTagWithRel("p", "en_us_message", text: "en-US not loaded")
   t.localize("test", opts)
   equals t.text(), "en-US not loaded"