Add localizations, minor style changes

src/components/navigation/www/navigation.jsx

@@ -9,7 +9,6 @@ var sessionActions = require('../../../redux/session.js');
 
 var Api = require('../../../mixins/api.jsx');
 var Avatar = require('../../avatar/avatar.jsx');
-var Button = require('../../forms/button.jsx');
 var Dropdown = require('../../dropdown/dropdown.jsx');
 var Input = require('../../forms/input.jsx');
 var log = require('../../../lib/log.js');

src/l10n.json

@@ -20,6 +20,7 @@
     "general.jobs": "Jobs",
     "general.joinScratch": "Join Scratch",
     "general.legal": "Legal",
+    "general.loadMore": "Load More",
     "general.learnMore": "Learn More",
     "general.messages": "Messages",
     "general.myClass": "My Class",
@@ -28,6 +29,7 @@
     "general.offlineEditor": "Offline Editor",
     "general.press": "Press",
     "general.privacyPolicy": "Privacy Policy",
+    "general.projects": "Projects",
     "general.profile": "Profile",
     "general.scratchConference": "Scratch Conference",
     "general.scratchday": "Scratch Day",
@@ -37,6 +39,7 @@
     "general.search": "Search",
     "general.signIn": "Sign in",
     "general.statistics": "Statistics",
+    "general.studios": "Studios",
     "general.support": "Support",
     "general.tipsWindow": "Tips Window",
     "general.tipsAnimateYourNameTitle": "Animate Your Name",
@@ -51,6 +54,13 @@
     "general.whatsHappening": "What's Happening?",
     "general.wiki": "Scratch Wiki",
 
+    "general.all": "All",
+    "general.animations": "Animations",
+    "general.art": "Art",
+    "general.games": "Games",
+    "general.music": "Music",
+    "general.stories": "Stories",
+
     "footer.discuss": "Discussion Forums",
     "footer.help": "Help Page",
     "footer.scratchFamily": "Scratch Family",

src/views/explore/explore.jsx

@@ -24,14 +24,14 @@ var Explore = injectIntl(React.createClass({
         var typeOptions = ['projects','studios'];
 
         var pathname = window.location.pathname.toLowerCase();
-        if (pathname.substring(pathname.length-1,pathname.length) == '/') {
-            pathname = pathname.substring(0,pathname.length-1);
+        if (pathname[pathname.length - 1] === '/') {
+            pathname = pathname.substring(0, pathname.length - 1);
         }
         var slash = pathname.lastIndexOf('/');
-        var currentCategory = pathname.substring(slash+1,pathname.length);
+        var currentCategory = pathname.substring(slash + 1,pathname.length);
         var typeStart = pathname.indexOf('explore/');
-        var type = pathname.substring(typeStart+8,slash);
-        if (categoryOptions.indexOf(currentCategory) == -1 || typeOptions.indexOf(type) == -1) {
+        var type = pathname.substring(typeStart + 8,slash);
+        if (categoryOptions.indexOf(currentCategory) === -1 || typeOptions.indexOf(type) === -1) {
             window.location = window.location.origin + '/explore/projects/all/';
         }
 
@@ -58,8 +58,10 @@ var Explore = injectIntl(React.createClass({
             qText = '&q=' + this.props.category;
         }
         this.api({
-            uri: '/search/' + this.props.itemType
-                + '?limit=' + this.props.loadNumber + '&offset=' + this.state.offset + qText
+            uri: '/search/' + this.props.itemType +
+                 '?limit=' + this.props.loadNumber +
+                 '&offset=' + this.state.offset +
+                 qText
         }, function (err, body) {
             if (!err) {
                 var loadedSoFar = this.state.loaded;
@@ -73,46 +75,38 @@ var Explore = injectIntl(React.createClass({
     changeItemType: function () {
         var newType;
         for (var t in this.props.acceptableTypes) {
-            if (this.props.itemType != t) {
+            if (this.props.itemType !== t) {
                 newType = t;
                 break;
             }
         }
-        window.location = window.location.origin + '/explore/'+newType+'/'+this.props.tab;
+        window.location = window.location.origin + '/explore/' + newType + '/' + this.props.tab;
     },
     getBubble: function (type) {
-        var allBubble = <a href={'/explore/'+this.props.itemType+'/'+type+'/'}>
+        var allBubble = <a href={'/explore/' + this.props.itemType + '/' + type + '/'}>
                         <li>
-                            <FormattedMessage
-                                id={'explore.' + type}
-                                defaultMessage={type.charAt(0).toUpperCase() + type.slice(1)} />
+                            <FormattedMessage id={'general.' + type} />
                         </li>
                     </a>;
-        if (this.props.category==type) {
-            allBubble = <a href={'/explore/'+this.props.itemType+'/' + type + '/'}>
+        if (this.props.category === type) {
+            allBubble = <a href={'/explore/' + this.props.itemType+'/' + type + '/'}>
                         <li className='active'>
-                            <FormattedMessage
-                                id={'explore.' + type}
-                                defaultMessage={type.charAt(0).toUpperCase() + type.slice(1)} />
+                            <FormattedMessage id={'general.' + type} />
                         </li>
                     </a>;
         }
         return allBubble;
     },
     getTab: function (type) {
-        var allTab = <a href={'/explore/'+type+'/'+this.props.category+'/'}>
+        var allTab = <a href={'/explore/' + type + '/' + this.props.category + '/'}>
                         <li>
-                            <FormattedMessage
-                                id={'explore.' + type}
-                                defaultMessage={type.charAt(0).toUpperCase() + type.slice(1)} />
+                            <FormattedMessage id={'general.' + type} />
                         </li>
                     </a>;
-        if (this.props.itemType==type) {
-            allTab = <a href={'/explore/'+type+'/' + this.props.category + '/'}>
+        if (this.props.itemType === type) {
+            allTab = <a href={'/explore/' + type +' /' + this.props.category + '/'}>
                         <li className='active'>
-                            <FormattedMessage
-                                id={'explore.' + type}
-                                defaultMessage={type.charAt(0).toUpperCase() + type.slice(1)} />
+                            <FormattedMessage id={'general.' + type} />
                         </li>
                     </a>;
         }
@@ -136,14 +130,15 @@ var Explore = injectIntl(React.createClass({
                             {this.getTab('studios')}
                         </Tabs>
                         <div id='projectBox' key='projectBox'>
-                            <Grid items={this.state.loaded} itemType={this.props.itemType}
-                                showLoves={true} showFavorites={true} showViews={true} />
+                            <Grid items={this.state.loaded}
+                                  itemType={this.props.itemType}
+                                  showLoves={true}
+                                  showFavorites={true}
+                                  showViews={true} />
                             <SubNavigation className='load'>
                                 <button onClick={this.getExploreMore}>
                                     <li>
-                                        <FormattedMessage
-                                            id='load'
-                                            defaultMessage={'Load More'} />
+                                        <FormattedMessage id='general.loadMore' />
                                     </li>
                                 </button>
                             </SubNavigation>

src/views/search/search.jsx

@@ -21,19 +21,22 @@ var Search = injectIntl(React.createClass({
     ],
     getDefaultProps: function () {
         var query = window.location.search;
-        var pathname = window.location.pathname;
+        var pathname = window.location.pathname.toLowerCase();
+        if (pathname[pathname.length - 1] === '/') {
+            pathname = pathname.substring(0, pathname.length - 1);
+        }
         var start = pathname.lastIndexOf('/');
-        var type = pathname.substring(start+1,pathname.length);
+        var type = pathname.substring(start + 1, pathname.length);
         var q = query.lastIndexOf('q=');
-        var term;
-        if (q != -1) {
-            term = query.substring(q+2,query.length).toLowerCase();
+        var term = '';
+        if (q !== -1) {
+            term = query.substring(q + 2, query.length).toLowerCase();
         }
         while (term.indexOf('/') > -1) {
-            term = term.substring(0,term.indexOf('/'));
+            term = term.substring(0, term.indexOf('/'));
         }
         while (term.indexOf('&') > -1) {
-            term = term.substring(0,term.indexOf('&'));
+            term = term.substring(0, term.indexOf('&'));
         }
         term = term.split('+').join(' ');
 
@@ -44,7 +47,6 @@ var Search = injectIntl(React.createClass({
         };
     },
     getInitialState: function () {
-
         return {
             loaded: [],
             offset: 0
@@ -55,14 +57,17 @@ var Search = injectIntl(React.createClass({
     },
     getSearchMore: function () {
         var termText = '';
-        if (this.props.searchTerm != '') {
+        if (this.props.searchTerm !== '') {
             termText = '&q=' + this.props.searchTerm;
         }
         this.api({
-            uri: '/search/'+this.props.tab+'?limit=' + this.props.loadNumber + '&offset=' + this.state.offset + termText
+            uri: '/search/' + this.props.tab +
+                 '?limit=' + this.props.loadNumber +
+                 '&offset=' + this.state.offset +
+                 termText
         }, function (err, body) {
             var loadedSoFar = this.state.loaded;
-            Array.prototype.push.apply(loadedSoFar,body);
+            Array.prototype.push.apply(loadedSoFar, body);
             this.setState({loaded: loadedSoFar});
             var currentOffset = this.state.offset + this.props.loadNumber;
             this.setState({offset: currentOffset});
@@ -70,19 +75,15 @@ var Search = injectIntl(React.createClass({
     },
     getTab: function (type) {
         var term = this.props.searchTerm.split(' ').join('+');
-        var allTab = <a href={'/search/'+type+'?q='+term+'/'}>
+        var allTab = <a href={'/search/' + type + '?q=' + term + '/'}>
                         <li>
-                            <FormattedMessage
-                                id={'explore.'+type}
-                                defaultMessage={type.charAt(0).toUpperCase()+type.slice(1)} />
+                            <FormattedMessage id={'general.' + type} />
                         </li>
                     </a>;
         if (this.props.tab == type) {
-            allTab = <a href={'/search/'+type+'?q='+term+'/'}>
+            allTab = <a href={'/search/' + type + '?q=' + term + '/'}>
                         <li className='active'>
-                            <FormattedMessage
-                                id={'explore.'+type}
-                                defaultMessage={type.charAt(0).toUpperCase()+type.slice(1)} />
+                            <FormattedMessage id={'general.' + type} />
                         </li>
                     </a>;
         }
@@ -92,23 +93,23 @@ var Search = injectIntl(React.createClass({
         return (
             <div>
                 <div className='outer'>
-                    <Box title={'Search Results:'} subtitle={this.props.searchTerm}
-                        moreProps={{
-                            className: 'subnavigation'
-                        }}>
+                    <Box title={'Search Results:'}
+                         subtitle={this.props.searchTerm}
+                         moreProps={{className: 'subnavigation'}}>
                         <Tabs>
                             {this.getTab('projects')}
                             {this.getTab('studios')}
                         </Tabs>
                         <div id='projectBox' key='projectBox'>
-                            <Grid items={this.state.loaded} itemType={this.props.tab}
-                                showLoves={true} showFavorites={true} showViews={true} />
+                            <Grid items={this.state.loaded}
+                                  itemType={this.props.tab}
+                                  showLoves={true}
+                                  showFavorites={true}
+                                  showViews={true} />
                             <SubNavigation className='load'>
                                 <button onClick={this.getSearchMore}>
                                     <li>
-                                        <FormattedMessage
-                                            id='load'
-                                            defaultMessage={'Load More'} />
+                                        <FormattedMessage id='general.loadMore' />
                                     </li>
                                 </button>
                             </SubNavigation>
@@ -116,7 +117,6 @@ var Search = injectIntl(React.createClass({
                     </Box>
                 </div>
             </div>
-
         );
     }
 }));