From d3b8c2085e7e718d2e10c5e24ee9243b7abb0a51 Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Thu, 15 Oct 2015 09:38:45 -0600 Subject: [PATCH] Add the language dropdown, it almost works --- server/proxies.json | 4 +- src/components/footer/footer.jsx | 36 ++++++++++ src/components/footer/footer.scss | 6 +- src/components/forms/select.jsx | 24 +++++++ src/components/forms/select.scss | 9 +++ .../languagechooser/languagechooser.jsx | 44 ++++++++++++ .../languagechooser/languagechooser.scss | 3 + src/components/languagechooser/languages.json | 72 +++++++++++++++++++ 8 files changed, 196 insertions(+), 2 deletions(-) create mode 100644 src/components/forms/select.jsx create mode 100644 src/components/forms/select.scss create mode 100644 src/components/languagechooser/languagechooser.jsx create mode 100644 src/components/languagechooser/languagechooser.scss create mode 100644 src/components/languagechooser/languages.json diff --git a/server/proxies.json b/server/proxies.json index 15605d4ec..a19cf94a1 100644 --- a/server/proxies.json +++ b/server/proxies.json @@ -6,7 +6,9 @@ "/accounts/", "/csrf_token/", "/get_image/", - "/session/" + "/i18n/", + "/session/", + "/site-api/" ] } ] diff --git a/src/components/footer/footer.jsx b/src/components/footer/footer.jsx index 7e2594627..751938496 100644 --- a/src/components/footer/footer.jsx +++ b/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 (
@@ -52,6 +86,8 @@ var Footer = React.createClass({
+ +

Scratch is a project of the Lifelong Kindergarten Group at the MIT Media Lab

diff --git a/src/components/footer/footer.scss b/src/components/footer/footer.scss index 15151d51c..b428a7fbf 100644 --- a/src/components/footer/footer.scss +++ b/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; + } } diff --git a/src/components/forms/select.jsx b/src/components/forms/select.jsx new file mode 100644 index 000000000..62b6d9aa8 --- /dev/null +++ b/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 ( + + ); + } +}); + +module.exports = Select; diff --git a/src/components/forms/select.scss b/src/components/forms/select.scss new file mode 100644 index 000000000..34e1dd16c --- /dev/null +++ b/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; +} diff --git a/src/components/languagechooser/languagechooser.jsx b/src/components/languagechooser/languagechooser.jsx new file mode 100644 index 000000000..6648b7385 --- /dev/null +++ b/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 ( +
+ +
+ ); + } +}); + +module.exports = LanguageChooser; diff --git a/src/components/languagechooser/languagechooser.scss b/src/components/languagechooser/languagechooser.scss new file mode 100644 index 000000000..abe1a6d34 --- /dev/null +++ b/src/components/languagechooser/languagechooser.scss @@ -0,0 +1,3 @@ +.language-chooser { + +} diff --git a/src/components/languagechooser/languages.json b/src/components/languagechooser/languages.json new file mode 100644 index 000000000..deaaa035b --- /dev/null +++ b/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": "正體中文" +} \ No newline at end of file