Commit 4914ba6d authored by Matthew Taylor's avatar Matthew Taylor

Use `formatNumber` to localize project count

`toLocaleString()` is not supported in Safari, but react-intl has a polyfill, and so it is. This also localized the intro description string, which wasn't previously. This also fixes #366 by doing as @rschamp suggested and checking if the count is the default count before setting the value.
parent 3c307e17
...@@ -25,9 +25,11 @@ var Intro = React.createClass({ ...@@ -25,9 +25,11 @@ var Intro = React.createClass({
'intro.joinScratch': 'JOIN SCRATCH', 'intro.joinScratch': 'JOIN SCRATCH',
'intro.seeExamples': 'SEE EXAMPLES', 'intro.seeExamples': 'SEE EXAMPLES',
'intro.tagLine': 'Create stories, games, and animations<br /> Share with others around the world', 'intro.tagLine': 'Create stories, games, and animations<br /> Share with others around the world',
'intro.tryItOut': 'TRY IT OUT' 'intro.tryItOut': 'TRY IT OUT',
'intro.description': 'A creative learning community with <span class="project-count"> ' +
'over 13 million </span>projects shared'
}, },
projectCount: 10569070, projectCount: 13000000,
session: {} session: {}
}; };
}, },
...@@ -113,11 +115,8 @@ var Intro = React.createClass({ ...@@ -113,11 +115,8 @@ var Intro = React.createClass({
onRequestClose={this.closeRegistration} onRequestClose={this.closeRegistration}
onRegistrationDone={this.completeRegistration} /> onRegistrationDone={this.completeRegistration} />
</div> </div>
<div className="description"> <div className="description"
A creative learning community with dangerouslySetInnerHTML={{__html: this.props.messages['intro.description']}}></div>
<span className="project-count"> {this.props.projectCount.toLocaleString()} </span>
projects shared
</div>
<div className="links"> <div className="links">
<a href="/about/"> <a href="/about/">
{this.props.messages['intro.aboutScratch']} {this.props.messages['intro.aboutScratch']}
......
...@@ -18,6 +18,8 @@ ...@@ -18,6 +18,8 @@
"intro.seeExamples": "SEE EXAMPLES", "intro.seeExamples": "SEE EXAMPLES",
"intro.tagLine": "Create stories, games, and animations<br /> Share with others around the world", "intro.tagLine": "Create stories, games, and animations<br /> Share with others around the world",
"intro.tryItOut": "TRY IT OUT", "intro.tryItOut": "TRY IT OUT",
"intro.description": "A creative learning community with <span class=\"project-count\"> {value} </span>projects shared",
"intro.defaultDescription": "A creative learning community with <span class=\"project-count\"> over 13 million </span>projects shared",
"news.scratchNews": "Scratch News", "news.scratchNews": "Scratch News",
......
...@@ -29,7 +29,7 @@ var Splash = injectIntl(React.createClass({ ...@@ -29,7 +29,7 @@ var Splash = injectIntl(React.createClass({
], ],
getInitialState: function () { getInitialState: function () {
return { return {
projectCount: 'over 13 million', // gets the shared project count projectCount: 13000000, // gets the shared project count
activity: [], // recent social actions taken by users someone is following activity: [], // recent social actions taken by users someone is following
news: [], // gets news posts from the scratch Tumblr news: [], // gets news posts from the scratch Tumblr
featuredCustom: {}, // custom homepage rows, such as "Projects by Scratchers I'm Following" featuredCustom: {}, // custom homepage rows, such as "Projects by Scratchers I'm Following"
...@@ -326,8 +326,9 @@ var Splash = injectIntl(React.createClass({ ...@@ -326,8 +326,9 @@ var Splash = injectIntl(React.createClass({
var emailConfirmationStyle = {width: 500, height: 330, padding: 1}; var emailConfirmationStyle = {width: 500, height: 330, padding: 1};
var homepageCacheState = this.getHomepageRefreshStatus(); var homepageCacheState = this.getHomepageRefreshStatus();
var formatMessage = this.props.intl.formatMessage;
var formatHTMLMessage = this.props.intl.formatHTMLMessage; var formatHTMLMessage = this.props.intl.formatHTMLMessage;
var formatNumber = this.props.intl.formatNumber;
var formatMessage = this.props.intl.formatMessage;
var messages = { var messages = {
'general.viewAll': formatMessage({id: 'general.viewAll'}), 'general.viewAll': formatMessage({id: 'general.viewAll'}),
'news.scratchNews': formatMessage({id: 'news.scratchNews'}), 'news.scratchNews': formatMessage({id: 'news.scratchNews'}),
...@@ -343,6 +344,12 @@ var Splash = injectIntl(React.createClass({ ...@@ -343,6 +344,12 @@ var Splash = injectIntl(React.createClass({
'intro.tagLine': formatHTMLMessage({id: 'intro.tagLine'}), 'intro.tagLine': formatHTMLMessage({id: 'intro.tagLine'}),
'intro.tryItOut': formatMessage({id: 'intro.tryItOut'}) 'intro.tryItOut': formatMessage({id: 'intro.tryItOut'})
}; };
if (this.state.projectCount === this.getInitialState().projectCount) {
messages['intro.description'] = formatHTMLMessage({id: 'intro.defaultDescription'});
} else {
var count = formatNumber(this.state.projectCount);
messages['intro.description'] = formatHTMLMessage({id: 'intro.description'}, {value: count});
}
return ( return (
<div className="splash"> <div className="splash">
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment