Add l10n.js, a localization library w/ restartless l10n support

.gitmodules

@@ -13,3 +13,6 @@
 [submodule "assets/canvas-to-blob"]
 	path = assets/canvas-to-blob
 	url = git://github.com/blueimp/JavaScript-Canvas-to-Blob.git
+[submodule "assets/web-l10n"]
+	path = assets/web-l10n
+	url = git://github.com/timdream/webL10n.git

assets/start.js

@@ -7,6 +7,8 @@
   if (!app.isSupported)
     return;
 
+  var langSwitcherView = new LanguageSwitcherView();
+
   var sourceDialogView = new SourceDialogView();
   sourceDialogView.addPanel(new ExamplePanelView());
   sourceDialogView.addPanel(new CPPanelView());

assets/wordcloud-app.js

@@ -359,6 +359,42 @@ View.prototype.hide = function v_hide(currentState, nextState) {
   return true;
 };
 
+var LanguageSwitcherView = function LanguageSwitcher(opts) {
+  this.load(opts, {
+    element: 'wc-language'
+  });
+
+  // Collect the information about available languages from HTML.
+  var langs = this.langs = [];
+  Array.prototype.forEach.call(this.element.children, function lang(el) {
+    langs.push(el.value);
+    if (el.value === navigator.language)
+      el.selected = true;
+  });
+
+  if (langs.indexOf(navigator.language) === -1) {
+    // Default to the first one.
+    this.element.selectedIndex = 0;
+    document.webL10n.setLanguage(langs[0]);
+  }
+
+  // 'localized' is a CustomEvent dispatched by l10n.js
+  document.addEventListener('localized', this);
+  this.element.addEventListener('change', this);
+};
+LanguageSwitcherView.prototype = new View();
+LanguageSwitcherView.prototype.handleEvent = function lsv_handleEvent(evt) {
+  switch (evt.type) {
+    case 'change':
+      document.webL10n.setLanguage(this.element.value);
+      break;
+
+    case 'localized':
+      document.documentElement.lang = evt.language;
+      break;
+  }
+};
+
 var CanvasView = function CanvasView(opts) {
   this.load(opts, {
     name: 'canvas',

assets/wordcloud.css

@@ -43,6 +43,9 @@ body {
 @media (max-width: 767px) {
   #wc-source-menu {
     float: none; } }
+.modal-footer .input-prepend {
+  margin: 0; }
+
 .modal {
   position: absolute; }
 

assets/wordcloud.scss

@@ -71,6 +71,10 @@ $transition-time: 0.5s;
   }
 }
 
+.modal-footer .input-prepend {
+  margin: 0;
+}
+
 .modal {
   position: absolute;
 }

index.html

@@ -9,8 +9,12 @@
   <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet">
   <link rel="stylesheet" type="text/css" href="./assets/wordcloud.css">
 
+  <link rel="prefetch" type="application/l10n" href="./locales/locales.ini" />
+
   <script defer type="text/javascript"
     src="./assets/vars.js"></script>
+  <script defer type="text/javascript"
+    src="./assets/web-l10n/l10n.js"></script>
   <script defer type="text/javascript"
     src="./assets/wordfreq/src/wordfreq.js"></script>
   <script defer type="text/javascript"
@@ -34,7 +38,7 @@
 
   <div id="wc-source-dialog" class="modal" hidden>
     <div class="modal-header">
-      <h3>HTML5 Word Cloud</h3>
+      <h3 data-l10n-id="source-dialog-title"></h3>
     </div>
     <div class="modal-body">
       <div class="row-fluid">
@@ -189,7 +193,17 @@ <h3>HTML5 Word Cloud</h3>
       </div>
     </div>
     <div class="modal-footer">
+
+      <div class="input-prepend pull-left" title="Language">
+        <span class="add-on"><i class="icon-globe"></i></span>
+        <select id="wc-language" class="input-small">
+          <option value="en-US" selected>English</option>
+          <option value="zh-TW">正體中文</option>
+        </select>
+      </div>
+
       <button id="wc-source-start-btn" class="btn btn-primary">Start</button>
+
     </div>
   </div>
 

locales/locales.ini

@@ -0,0 +1,5 @@
+[en-US]
+@import url(wordcloud.en-US.properties)
+
+[zh-TW]
+@import url(wordcloud.zh-TW.properties)

locales/wordcloud.en-US.properties

@@ -0,0 +1 @@
+source-dialog-title=HTML5 Word Cloud

locales/wordcloud.zh-TW.properties

@@ -0,0 +1 @@
+source-dialog-title=HTML5 文字雲