Permalink
Browse files

Added default support for HTML5's custom data attributes (data-locali…

…ze).

Closes #14
  • Loading branch information...
1 parent ddc81b9 commit ea351b1a2505de6a620293c51616a0e2554667d7 @coderifous committed Jun 13, 2012
View
@@ -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();
View
Oops, something went wrong.
@@ -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]")
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
View
@@ -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"

0 comments on commit ea351b1

Please sign in to comment.