bug918449 - implement UI dropdown change language

mozilla · Sep 19, 2013 · 2943968 · 2943968
1 parent adf4195
commit 2943968
Show file tree

Hide file tree

Showing 11 changed files with 259 additions and 20 deletions.
diff --git a/.gitignore b/.gitignore
@@ -19,3 +19,4 @@ npm-debug.log
 .DS_Store
 
 .env
+bower_components
diff --git a/app/http/public/css/account.less b/app/http/public/css/account.less
@@ -121,3 +121,138 @@ iframe {
   height: 300px;
 }
 
+
+li.lang-picker:first-child {
+  border-right: none;
+}
+
+.ui-append.ui-select {
+  background-color: white;
+}
+
+#lang-picker {
+  margin: -7px 15px 0 -18px;
+  border-color: transparent;
+  &:hover {
+    border-color: #CCC;
+  }
+  ul {
+    background: white;
+    display: inline-block;
+    li {
+      display: block;
+    }
+  }
+
+  .ui-select-menu {
+    width: auto;
+    border-color: #CCC;
+    ul {
+      width: auto;
+    }
+  }
+
+  .ui-selected::before {
+    margin-right: 5px;
+  }
+  .ui-smedium {
+    width: auto;
+  }
+  > .icon {
+    background: none;
+    color: #555;
+    padding: 0 10px 0 0;
+    &:hover {
+      background: none;
+      color: #555;
+    }
+  }
+}
+
+
+/*********************************************************
+* Filter
+*/
+
+.gallery-header {
+  .header {
+    float: left;
+    padding-bottom: 10px;
+    font-family: 'Open Sans Light', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    margin-right: @gutter * @unit;
+
+    h1, p {
+      display: inline;
+      margin-right: 10px;
+      font-weight: normal;
+      letter-spacing: -0.25px
+    }
+
+    h1 {
+      font-size: 2.4em;
+      line-height: 16px;
+      color: @green;
+    }
+
+    p {
+      font-size: 1.4em;
+      color: @grey;
+
+      a {
+        color: @blue;
+        text-decoration: none;
+        &:hover {
+          text-decoration: underline;
+          color: lighten(@blue, 10%);
+        }
+      }
+    }
+  }
+}
+
+#tools h1 {
+  line-height: 1.4em;
+}
+
+.filter {
+  position: relative;
+  background: @green;
+  float: right;
+  z-index: 3;
+  padding: 0.5em 1em 1em;
+  .border-box;
+
+  label {
+    color: #FFF;
+    line-height: 1.6;
+  }
+
+  #search-filter {
+    border-color: darken(@green, 5%);
+    &:hover {
+      border-color: darken(@green, 15%);
+    }
+    .icon {
+      background: darken(@green, 10%);
+    }
+    .ui-select-menu {
+      border-color: @green;
+    }
+  }
+
+  &:before { // Arrow
+    content: "";
+    display: block;
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-top: 10px solid @green;
+    margin-left: -10px;
+  }
+}
+
diff --git a/app/http/public/js/ext/jquery-1.9.1.min.js b/app/http/public/js/ext/jquery-1.9.1.min.js
diff --git a/app/http/public/js/html/ui-fragments.html b/app/http/public/js/html/ui-fragments.html
@@ -0,0 +1,11 @@
+<!-- FRAGMENTS -->
+<div class="ui-append ui-select">
+<i class="icon-globe"></i>
+  <span class="ui-selected ui-smedium"></span>
+  <a class="icon icon-caret-down"></a>
+  <div class="ui-select-menu">
+    <ul>
+      <li data-value=""></li>
+    </ul>
+  </div>
+</div>
diff --git a/app/http/routes.js b/app/http/routes.js
@@ -107,6 +107,7 @@ module.exports = function( http, userHandle ){
   http.get( "/js/sso-ux.js", routes.site.js( "sso-ux") );
   http.get("/js/console.js", routes.site.js( "console" ) );
   http.get( "/js/account.js", routes.site.js( "account" ) );
+  http.get( "/js/ui.js", routes.site.js( "ui" ) );
   http.get( "/ajax/forms/new_user.html", routes.user.userForm );
 
   // LoginAPI

diff --git a/app/http/server.js b/app/http/server.js
@@ -11,7 +11,7 @@ var application = require( "./controllers/application" ),
     env = require( "../../config/environment" );
     express     = require( "express" ),
     helmet      = require( "helmet" ),
-    i18n        = require( "i18n-abide" ),
+    i18n        = require( "webmaker-i18n" ),
     lessMiddleWare = require( "less-middleware" ),
     logger      = require( "../../lib/logger" ),
     nunjucks    = require( "nunjucks" ),
@@ -37,18 +37,22 @@ http.configure(function(){
   }
 
   http.use( express.static( path.join( __dirname, "public" ) ) );
+  http.use( "/bower", express.static( path.join(__dirname, "../../bower_components" )));
+
+  // List of supported languages - Please add them here in an alphabetical order
+  var supportedLanguages = [ "en-US" ];
 
   // Setup locales with i18n
-  http.use( i18n.abide({
-    supported_languages: [
-      "en-US"
-    ],
-    default_lang: "en_US",
-    translation_type: "key-value-json",
-    translation_directory: "locale",
-    locale_on_url: true
+  http.use( i18n.middleware({
+    supported_languages: supportedLanguages,
+    default_lang: "en-US",
+    translation_directory: path.resolve( __dirname, "../../locale" )
   }));
 
+  http.locals({
+    supportedLanguages: supportedLanguages
+  });
+
   http.use( express.cookieParser() );
   http.use( express.json() );
   http.use( express.urlencoded() );

diff --git a/app/http/views/js/account.js b/app/http/views/js/account.js
@@ -1,15 +1,16 @@
  requirejs.config({
     baseUrl: "/js",
     paths: {
-      "jquery": "ext/jquery-1.9.1.min",
-      "persona-sso": "{{ audience }}/sso/include"
+      "jquery": "../bower/jquery/jquery.min",
+      "persona-sso": "{{ audience }}/sso/include",
+      "text": "../bower/text/text"
     },
     shim: {
       "persona-sso": [],
       "sso-ux": [ "jquery", "persona-sso" ]
     }
   });
-  require([ "jquery", "persona-sso", "sso-ux" ], function ($) {
+  require([ "jquery", "ui", "persona-sso", "sso-ux" ], function ($, UI) {
     var personaEmail;
 
     // CRSF Protection
@@ -59,6 +60,13 @@
       }
     });
 
+    // URL redirector for language picker
+    UI.select('#lang-picker', function(val) {
+      var href = document.location.pathname,
+        url = href.substr(href.lastIndexOf('/') + 0);
+      window.location = "/"+val+url;
+    });
+
     $( "#sendEventCreationEmailsCheckbox" ).change(function(e) {
       var checked = $( this ).prop( "checked" ) ? 1 : 0;
 

diff --git a/app/http/views/js/ui.js b/app/http/views/js/ui.js
@@ -0,0 +1,65 @@
+define( ["jquery", "text!html/ui-fragments.html" ], function( $, _fragments ) {
+  "use strict";
+
+  var UI = {},
+      $fragments = $( document.createElement( "div" ) ).html( _fragments );
+
+  UI.select = function( select, fn ) {
+
+    $(".filter").removeClass("hide");
+
+    var $el = $( ".ui-select", $fragments ).clone( true ),
+        $toggleBtn = $el.find( ".icon" ),
+        $selectedEl = $el.find( ".ui-selected" ),
+        $menuContainer = $el.find( ".ui-select-menu" ),
+        $menu = $menuContainer.find( "ul" ),
+        $li = $menu.find( "li" );
+
+    var $select = $( select ),
+        $options = $( "option", select ),
+        id = $select.attr( "id" );
+
+    fn = fn || function() {};
+
+    $options.each( function( i, option ) {
+      var val = $( option ).val(),
+          html = $( option ).html(),
+          $newLi = $li.clone();
+      $newLi.attr( "data-value", val );
+      $newLi.html( html );
+      if ( $( option ).attr( "selected" ) ) {
+        $newLi.attr( "data-selected", true);
+        $selectedEl.html( html );
+      }
+      $newLi.click( function() {
+        var $this = $( this );
+
+        $menu.find( "[data-selected]" ).removeAttr( "data-selected" );
+        $( this ).attr( "data-selected", true );
+        $selectedEl.text( html );
+        $menuContainer.hide();
+        fn( val );
+        $select.val( val );
+
+      });
+      $menu.append( $newLi );
+    });
+
+    $selectedEl.click( function( e ) {
+      $menuContainer.toggle();
+    });
+    $toggleBtn.click( function( e ) {
+      $menuContainer.toggle();
+    });
+
+    $el.attr( "id", id );
+    $select.removeAttr( "id" );
+
+    $li.remove();
+    $el.insertAfter( $select );
+    $select.hide();
+  };
+
+  return UI;
+
+});
diff --git a/app/http/views/site/account.html b/app/http/views/site/account.html
@@ -5,6 +5,7 @@
   <meta name="X-CSRF-Token" content="{{ csrf }}">
   <meta name="persona-email" content="{{ email }}">
   <title>Webmaker</title>
+  <link rel="stylesheet" href="/bower/font-awesome/css/font-awesome.min.css">
   <link rel="stylesheet" href="/css/account.css">
   <link rel="stylesheet" href="/css/nav.css">
 </head>
@@ -45,6 +46,13 @@ <h1>{{ gettext('Hi') }} <span class="wm-username"></span>!</h1>
                     </li>
                   </ul>
               </li>
+              <li><span class="field-label">Language</span><span class="wm-lang"></span>
+                <select id="lang-picker">
+                {% for language in supportedLanguages %}
+                  <option {% if lang == language %} selected="selected" {% endif %} value="{{language}}">{{ languageNameFor(language) }}</option>
+                {% endfor %}
+                </select>
+              </li>
               <li>
                 <span class="field-label"></span>
                 <span class="email-prefs prefs-saved">{{ gettext("Your preferences have been saved") }}</span>

diff --git a/bower.json b/bower.json
@@ -0,0 +1,9 @@
+{
+  "name": "login.webmaker.org",
+  "dependencies": {
+    "font-awesome": "3.2.1",
+    "jquery": "2.0.3",
+    "text": "2.0.9",
+    "webmaker-i18n": "https://github.com/mozilla/node-webmaker-i18n/archive/v0.1.2.tar.gz"
+  }
+}
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "badword": "0.0.1",
+    "bower": "1.2.6",
     "express": "3.2.5",
     "habitat": "0.4.2",
     "helmet": "0.0.11",
@@ -20,9 +21,9 @@
     "node-statsd": "0.0.7",
     "sequelize": "1.6.0",
     "winston": "0.7.1",
+    "webmaker-i18n": "https://github.com/mozilla/node-webmaker-i18n/archive/v0.1.2.tar.gz",
     "webmaker-loginapi": "https://github.com/mozilla/node-webmaker-loginapi/tarball/v0.1.11",
-    "webmaker-postalservice": "https://github.com/mozilla/node-webmaker-postalservice/tarball/v0.2.4",
-    "i18n-abide": "0.0.10"
+    "webmaker-postalservice": "https://github.com/mozilla/node-webmaker-postalservice/tarball/v0.2.4"
   },
   "devDependencies": {
     "grunt": "0.4.1",
@@ -35,6 +36,7 @@
     "sqlite3": "2.1.7"
   },
   "scripts": {
-    "test": "grunt travis --verbose && mocha --timeout 60000 --reporter spec"
+    "test": "grunt travis --verbose && mocha --timeout 60000 --reporter spec",
+    "postinstall": "bower install"
   }
 }