Merge pull request #1422 from mewtaylor/issue/custom-homepage-thumbnails

Add new carousel component

src/components/carousel/carousel.jsx

@@ -23,7 +23,8 @@ var Carousel = React.createClass({
         return {
             items: require('./carousel.json'),
             showRemixes: false,
-            showLoves: false
+            showLoves: false,
+            type: 'project'
         };
     },
     render: function () {
@@ -62,7 +63,7 @@ var Carousel = React.createClass({
             <Slider className={classes} arrows={arrows} {... settings}>
                 {this.props.items.map(function (item) {
                     var href = '';
-                    switch (item.type) {
+                    switch (this.props.type) {
                     case 'gallery':
                         href = '/studios/' + item.id + '/';
                         break;
@@ -77,13 +78,13 @@ var Carousel = React.createClass({
                         <Thumbnail key={[this.key, item.id].join('.')}
                                    showLoves={this.props.showLoves}
                                    showRemixes={this.props.showRemixes}
-                                   type={item.type}
+                                   type={this.props.type}
                                    href={href}
                                    title={item.title}
-                                   src={item.thumbnail_url}
-                                   creator={item.creator}
-                                   remixes={item.remixers_count}
-                                   loves={item.love_count} />
+                                   src={item.image}
+                                   creator={item.author.username}
+                                   remixes={item.stats.remixes}
+                                   loves={item.stats.loves} />
                     );
                 }.bind(this))}
             </Slider>

src/components/carousel/legacy-carousel.jsx

@@ -0,0 +1,97 @@
+// This component handles json returned via proxy from a django server,
+// or directly from a django server, and the model structure that system
+// has.
+var classNames = require('classnames');
+var defaults = require('lodash.defaults');
+var React = require('react');
+var Slider = require('react-slick');
+
+var Thumbnail = require('../thumbnail/thumbnail.jsx');
+
+var frameless = require('../../lib/frameless.js');
+
+require('slick-carousel/slick/slick.scss');
+require('slick-carousel/slick/slick-theme.scss');
+require('./carousel.scss');
+
+/**
+ * Displays content in horizontal scrolling box. Example usage: splash page rows.
+ */
+var LegacyCarousel = React.createClass({
+    type: 'LegacyCarousel',
+    propTypes: {
+        items: React.PropTypes.array
+    },
+    getDefaultProps: function () {
+        return {
+            items: require('./carousel.json'),
+            showRemixes: false,
+            showLoves: false
+        };
+    },
+    render: function () {
+        var settings = this.props.settings || {};
+        defaults(settings, {
+            centerMode: false,
+            dots: false,
+            infinite: false,
+            lazyLoad: true,
+            slidesToShow: 5,
+            slidesToScroll: 5,
+            variableWidth: true,
+            responsive: [
+                {breakpoint: frameless.mobile, settings: {
+                    arrows: true,
+                    slidesToScroll: 1,
+                    slidesToShow: 1,
+                    centerMode: true
+                }},
+                {breakpoint: frameless.tablet, settings: {
+                    slidesToScroll: 2,
+                    slidesToShow: 2
+                }},
+                {breakpoint: frameless.desktop, settings: {
+                    slidesToScroll: 4,
+                    slidesToShow: 4
+                }}
+            ]
+        });
+        var arrows = this.props.items.length > settings.slidesToShow;
+        var classes = classNames(
+            'carousel',
+            this.props.className
+        );
+        return (
+            <Slider className={classes} arrows={arrows} {... settings}>
+                {this.props.items.map(function (item) {
+                    var href = '';
+                    switch (item.type) {
+                    case 'gallery':
+                        href = '/studios/' + item.id + '/';
+                        break;
+                    case 'project':
+                        href = '/projects/' + item.id + '/';
+                        break;
+                    default:
+                        href = '/' + item.type + '/' + item.id + '/';
+                    }
+
+                    return (
+                        <Thumbnail key={[this.key, item.id].join('.')}
+                                   showLoves={this.props.showLoves}
+                                   showRemixes={this.props.showRemixes}
+                                   type={item.type}
+                                   href={href}
+                                   title={item.title}
+                                   src={item.thumbnail_url}
+                                   creator={item.creator}
+                                   remixes={item.remixers_count}
+                                   loves={item.love_count} />
+                    );
+                }.bind(this))}
+            </Slider>
+        );
+    }
+});
+
+module.exports = LegacyCarousel;

src/components/microworld/microworld.jsx

@@ -3,7 +3,7 @@ var React = require('react');
 require('./microworld.scss');
 
 var Box = require('../box/box.jsx');
-var Carousel = require('../carousel/carousel.jsx');
+var LegacyCarousel = require('../carousel/legacy-carousel.jsx');
 var IframeModal = require('../modal/iframe/modal.jsx');
 var NestedCarousel = require('../nestedcarousel/nestedcarousel.jsx');
 
@@ -109,7 +109,7 @@ var Microworld = React.createClass({
                 <Box
                     title="More Starter Projects"
                     key="starter_projects">
-                    <Carousel items={starterProjects} />
+                    <LegacyCarousel items={starterProjects} />
                 </Box>
             </div>
         );
@@ -129,7 +129,7 @@ var Microworld = React.createClass({
                 <Box
                     title="Featured Community Projects"
                     key="community_featured_projects">
-                    <Carousel items={featured} />
+                    <LegacyCarousel items={featured} />
                </Box>
             );
         }
@@ -138,7 +138,7 @@ var Microworld = React.createClass({
                 <Box
                      title="All Community Projects"
                      key="community_all_projects">
-                     <Carousel items={all} />
+                     <LegacyCarousel items={all} />
                </Box>
             );
         }
@@ -187,9 +187,9 @@ var Microworld = React.createClass({
                              moreHref={studioHref ? studioHref : null}>
                             {/* The two carousels are used to show two rows of projects, one above the
                                 other. This should be probably be changed, to allow better scrolling. */}
-                            <Carousel settings={{slidesToShow:2,slidesToScroll:2}}
+                            <LegacyCarousel settings={{slidesToShow:2,slidesToScroll:2}}
                                       items={this.props.microworldData.design_challenge.studio1} />
-                            <Carousel settings={{slidesToShow:2,slidesToScroll:2}}
+                            <LegacyCarousel settings={{slidesToShow:2,slidesToScroll:2}}
                                       items={this.props.microworldData.design_challenge.studio2} />
                         </Box>
                     </div>
@@ -204,7 +204,7 @@ var Microworld = React.createClass({
                         key="scratch_design_studio"
                         moreTitle={studioHref ? 'Visit the studio' : null}
                         moreHref={studioHref ? studioHref : null}>
-                        <Carousel items={this.props.microworldData.design_challenge.studio1.concat(
+                        <LegacyCarousel items={this.props.microworldData.design_challenge.studio1.concat(
                             this.props.microworldData.design_challenge.studio2)} />
                    </Box>
                 </div>

src/views/splash/presentation.jsx

@@ -10,6 +10,7 @@ var DropdownBanner = require('../../components/dropdown-banner/banner.jsx');
 var Box = require('../../components/box/box.jsx');
 var Button = require('../../components/forms/button.jsx');
 var Carousel = require('../../components/carousel/carousel.jsx');
+var LegacyCarousel = require('../../components/carousel/legacy-carousel.jsx');
 var Intro = require('../../components/intro/intro.jsx');
 var IframeModal = require('../../components/modal/iframe/modal.jsx');
 var News = require('../../components/news/news.jsx');
@@ -74,13 +75,13 @@ var SplashPresentation = injectIntl(React.createClass({
                 title={formatMessage({id: 'splash.featuredProjects'})}
                 key="community_featured_projects"
             >
-                <Carousel items={this.props.featuredGlobal.community_featured_projects} />
+                <LegacyCarousel items={this.props.featuredGlobal.community_featured_projects} />
             </Box>,
             <Box
                 title={formatMessage({id: 'splash.featuredStudios'})}
                 key="community_featured_studios"
             >
-                <Carousel
+                <LegacyCarousel
                     items={this.props.featuredGlobal.community_featured_studios}
                     settings={{slidesToShow: 4, slidesToScroll: 4, lazyLoad: false}}
                 />
@@ -99,7 +100,7 @@ var SplashPresentation = injectIntl(React.createClass({
                     moreTitle={formatMessage({id: 'general.learnMore'})}
                     moreHref="/studios/386359/"
                 >
-                    <Carousel items={this.props.featuredGlobal.curator_top_projects} />
+                    <LegacyCarousel items={this.props.featuredGlobal.curator_top_projects} />
                 </Box>
             );
         }
@@ -116,7 +117,7 @@ var SplashPresentation = injectIntl(React.createClass({
                     moreTitle={formatMessage({id: 'splash.visitTheStudio'})}
                     moreHref={'/studios/' + this.props.featuredGlobal.scratch_design_studio[0].gallery_id + '/'}
                 >
-                    <Carousel items={this.props.featuredGlobal.scratch_design_studio} />
+                    <LegacyCarousel items={this.props.featuredGlobal.scratch_design_studio} />
                 </Box>
             );
         }
@@ -130,7 +131,7 @@ var SplashPresentation = injectIntl(React.createClass({
                     title={formatMessage({id: 'splash.recentlySharedProjects'})}
                     key="community_newest_projects"
                 >
-                    <Carousel items={this.props.featuredGlobal.community_newest_projects} />
+                    <LegacyCarousel items={this.props.featuredGlobal.community_newest_projects} />
                 </Box>
             );
         }
@@ -173,7 +174,7 @@ var SplashPresentation = injectIntl(React.createClass({
                 title={formatMessage({id: 'splash.communityRemixing'})}
                 key="community_most_remixed_projects"
             >
-                <Carousel
+                <LegacyCarousel
                     items={shuffle(this.props.featuredGlobal.community_most_remixed_projects)}
                     showRemixes={true}
                 />
@@ -182,7 +183,7 @@ var SplashPresentation = injectIntl(React.createClass({
                 title={formatMessage({id: 'splash.communityLoving'})}
                 key="community_most_loved_projects"
             >
-                <Carousel
+                <LegacyCarousel
                     items={shuffle(this.props.featuredGlobal.community_most_loved_projects)}
                     showLoves={true}
                 />