Add the language dropdown, it almost works

server/proxies.json

@@ -6,7 +6,9 @@
             "/accounts/",
             "/csrf_token/",
             "/get_image/",
-            "/session/"
+            "/i18n/",
+            "/session/",
+            "/site-api/"
         ]
     }
 ]

src/components/footer/footer.jsx

@@ -1,9 +1,43 @@
 var React = require('react');
 
+var log = require('../../log.js');
+
+var Api = require('../../mixins/api.jsx');
+var CookieMixinFactory = require('../../mixins/cookieMixinFactory.jsx');
+var LanguageChooser = require('../languagechooser/languagechooser.jsx');
+
 require('./footer.scss');
 
 var Footer = React.createClass({
     type: 'Footer',
+    mixins: [
+        Api,
+        // Provides useScratchlanguage
+        CookieMixinFactory('scratchlanguage', '/site-api/i18n/set-preferred-language/')
+    ],
+    getInitialState: function () {
+        return {
+            language: 'en'
+        };
+    },
+    componentDidMount: function () {
+        this.updateLanguage();
+    },
+    updateLanguage: function () {
+        this.useScratchlanguage(function (err, language) {
+            if (err) return log.error(err);
+            this.setState({language: language});
+        }.bind(this));
+    },
+    handleSetLanguage: function (e) {
+        if (e) e.preventDefault();
+        this.api({
+            host: '',
+            uri: '/i18n/setlang/'
+        }, function (err, body) {
+            if (body) this.updateLanguage();
+        }.bind(this));
+    },
     render: function () {
         return (
             <div className="inner">
@@ -52,6 +86,8 @@ var Footer = React.createClass({
                     </dl>
                 </div>
 
+                <LanguageChooser onSetLanguage={this.handleSetLanguage} choice={this.state.language} />
+
                 <div className="copyright">
                     <p>Scratch is a project of the Lifelong Kindergarten Group at the MIT Media Lab</p>
                 </div>

src/components/footer/footer.scss

@@ -5,6 +5,7 @@
     background-color: $ui-gray;
     padding: 10px 0;
     color: $type-gray;
+    font-size: .85rem;
 
     .lists {
         display: flex;
@@ -18,7 +19,6 @@
             width: 130pt;
             vertical-align: top;
             text-align: left;
-            font-size: .85rem;
         }
 
         dt {
@@ -42,4 +42,8 @@
             font-size: .7rem;
         }
     }
+
+    .language-chooser {
+        text-align: center;
+    }
 }

src/components/forms/select.jsx

@@ -0,0 +1,24 @@
+var React = require('react');
+var classNames = require('classnames');
+
+require('./select.scss');
+
+var Select = React.createClass({
+    type: 'Select',
+    propTypes: {
+        
+    },
+    render: function () {
+        var classes = classNames(
+            'select',
+            this.props.className
+        );
+        return (
+            <select {... this.props} className={classes}>
+                {this.props.children}
+            </select>
+        );
+    }
+});
+
+module.exports = Select;

src/components/forms/select.scss

@@ -0,0 +1,9 @@
+@import "../../colors";
+
+.select {
+    background-color: $ui-white;
+    width: 220px;
+    height: 28px;
+    line-height: 28px;
+    font-size: 1em;
+}

src/components/languagechooser/languagechooser.jsx

@@ -0,0 +1,44 @@
+var classNames = require('classnames');
+
+var React = require('react');
+
+var Select = require('../forms/select.jsx');
+
+require('./languagechooser.scss');
+
+var LanguageChooser = React.createClass({
+    type: 'LanguageChooser',
+    propTypes: {
+        choice: React.PropTypes.string,
+        languages: React.PropTypes.object
+    },
+    getDefaultProps: function () {
+        return {
+            choice: 'en',
+            languages: require('./languages.json')
+        };
+    },
+    render: function () {
+        var classes = classNames(
+            'language-chooser',
+            this.props.className
+        );
+        return (
+            <form
+                    ref="languageForm"
+                    method="post"
+                    action="/i18n/setlang/"
+                    {... this.props}
+                    className={classes}
+                    onSubmit={this.props.onSetLanguage}>
+                <Select name="language" value={this.props.choice} onChange={this.props.onSetLanguage}>
+                    {Object.keys(this.props.languages).map(function (value) {
+                        return <option value={value} key={value}>{this.props.languages[value]}</option>;
+                    }.bind(this))}
+                </Select>
+            </form>
+        );
+    }
+});
+
+module.exports = LanguageChooser;

src/components/languagechooser/languagechooser.scss

@@ -0,0 +1,3 @@
+.language-chooser {
+
+}

src/components/languagechooser/languages.json

@@ -0,0 +1,72 @@
+{
+    "en": "English",
+    "an": "Aragonés",
+    "ast": "Asturianu",
+    "id": "Bahasa Indonesia",
+    "ms": "Bahasa Melayu",
+    "ca": "Català",
+    "cs": "Česky",
+    "cy": "Cymraeg",
+    "da": "Dansk",
+    "fa-af": "Dari",
+    "de": "Deutsch",
+    "yum": "Edible Scratch",
+    "et": "Eesti",
+    "eo": "Esperanto",
+    "es": "Español",
+    "eu": "Euskara",
+    "fr": "Français",
+    "fr-ca": "Français (Canada)",
+    "ga": "Gaeilge",
+    "gd": "Gàidhlig",
+    "gl": "Galego",
+    "hr": "Hrvatski",
+    "is": "Íslenska",
+    "it": "Italiano",
+    "rw": "Kinyarwanda",
+    "ku": "Kurdî",
+    "la": "Latina",
+    "lv": "Latviešu",
+    "lt": "Lietuvių",
+    "hu": "Magyar",
+    "mt": "Malti",
+    "cat": "Meow",
+    "nl": "Nederlands",
+    "nb": "Norsk Bokmål",
+    "pl": "Polski",
+    "pt": "Português",
+    "pt-br": "Português Brasileiro",
+    "ro": "Română",
+    "sc": "Sardu",
+    "sk": "Slovenčina",
+    "sl": "Slovenščina",
+    "fi": "suomi",
+    "sv": "Svenska",
+    "nai": "Tepehuan",
+    "vi": "Tiếng Việt",
+    "tr": "Türkçe",
+    "ab": "Аҧсшәа",
+    "ar": "العربية",
+    "bg": "Български",
+    "el": "Ελληνικά",
+    "fa": "فارسی",
+    "he": "עִבְרִית",
+    "hi": "हिन्दी",
+    "hy": "Հայերեն",
+    "ja": "日本語",
+    "ja-hr": "にほんご",
+    "km": "សំលៀកបំពាក",
+    "kn": "ಭಾಷೆ-ಹೆಸರು",
+    "ko": "한국어",
+    "mk": "Македонски",
+    "ml": "മലയാളം",
+    "mn": "Монгол хэл",
+    "mr": "मराठी",
+    "my": "မြန်မာဘာသာ",
+    "ru": "Русский",
+    "sr": "Српски",
+    "th": "ไทย",
+    "uk": "Українська",
+    "zh-cn": "简体中文",
+    "zh-tw": "正體中文"
+}