From cb4ca51061f8b3b75c76d545bd5159ec71e799d0 Mon Sep 17 00:00:00 2001 From: Matthew Taylor Date: Thu, 20 Jul 2017 13:47:14 -0400 Subject: [PATCH 1/2] Add new carousel component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. Moves carousel to `LegacyCarousel` since it currently is designed to handle JSON from proxy endpoints 2. Add separate `Carousel` endpoint to handle data from project models in scratch’s new api, the standard moving forward. --- src/components/carousel/carousel.jsx | 15 ++-- src/components/carousel/legacy-carousel.jsx | 97 +++++++++++++++++++++ src/components/microworld/microworld.jsx | 14 +-- src/views/splash/presentation.jsx | 15 ++-- 4 files changed, 120 insertions(+), 21 deletions(-) create mode 100644 src/components/carousel/legacy-carousel.jsx diff --git a/src/components/carousel/carousel.jsx b/src/components/carousel/carousel.jsx index 50df3a61b..46e01fa1a 100644 --- a/src/components/carousel/carousel.jsx +++ b/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({ {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({ + src={item.image} + creator={item.author.username} + remixes={item.stats.remixes} + loves={item.stats.loves} /> ); }.bind(this))} diff --git a/src/components/carousel/legacy-carousel.jsx b/src/components/carousel/legacy-carousel.jsx new file mode 100644 index 000000000..e6d0168da --- /dev/null +++ b/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 Carousel = React.createClass({ + type: 'Carousel', + 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 ( + + {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 ( + + ); + }.bind(this))} + + ); + } +}); + +module.exports = Carousel; diff --git a/src/components/microworld/microworld.jsx b/src/components/microworld/microworld.jsx index 87d626e5e..ec21d5a87 100644 --- a/src/components/microworld/microworld.jsx +++ b/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({ - + ); @@ -129,7 +129,7 @@ var Microworld = React.createClass({ - + ); } @@ -138,7 +138,7 @@ var Microworld = React.createClass({ - + ); } @@ -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. */} - - @@ -204,7 +204,7 @@ var Microworld = React.createClass({ key="scratch_design_studio" moreTitle={studioHref ? 'Visit the studio' : null} moreHref={studioHref ? studioHref : null}> - diff --git a/src/views/splash/presentation.jsx b/src/views/splash/presentation.jsx index 8cb5e7ada..9db4df7e1 100644 --- a/src/views/splash/presentation.jsx +++ b/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" > - + , - @@ -99,7 +100,7 @@ var SplashPresentation = injectIntl(React.createClass({ moreTitle={formatMessage({id: 'general.learnMore'})} moreHref="/studios/386359/" > - + ); } @@ -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 + '/'} > - + ); } @@ -130,7 +131,7 @@ var SplashPresentation = injectIntl(React.createClass({ title={formatMessage({id: 'splash.recentlySharedProjects'})} key="community_newest_projects" > - + ); } @@ -173,7 +174,7 @@ var SplashPresentation = injectIntl(React.createClass({ title={formatMessage({id: 'splash.communityRemixing'})} key="community_most_remixed_projects" > - @@ -182,7 +183,7 @@ var SplashPresentation = injectIntl(React.createClass({ title={formatMessage({id: 'splash.communityLoving'})} key="community_most_loved_projects" > - From 85613853246d68641ab21a43006759c3a643d2fa Mon Sep 17 00:00:00 2001 From: Matthew Taylor Date: Thu, 20 Jul 2017 13:56:11 -0400 Subject: [PATCH 2/2] Update name for legacy carousel --- src/components/carousel/legacy-carousel.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/carousel/legacy-carousel.jsx b/src/components/carousel/legacy-carousel.jsx index e6d0168da..36efb5cbf 100644 --- a/src/components/carousel/legacy-carousel.jsx +++ b/src/components/carousel/legacy-carousel.jsx @@ -17,8 +17,8 @@ require('./carousel.scss'); /** * Displays content in horizontal scrolling box. Example usage: splash page rows. */ -var Carousel = React.createClass({ - type: 'Carousel', +var LegacyCarousel = React.createClass({ + type: 'LegacyCarousel', propTypes: { items: React.PropTypes.array }, @@ -94,4 +94,4 @@ var Carousel = React.createClass({ } }); -module.exports = Carousel; +module.exports = LegacyCarousel;