scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 07:38:07 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge pull request #147 from mewtaylor/issue/130-studio-arrow-fix

Browse source 
Handle arrow display dynamically in carousel component
This commit is contained in:
Matthew Taylor 2015-10-23 13:28:41 -04:00
commit 1a156cc2a4
2 changed files with 24 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/components/carousel/carousel.jsx
View file

@ -1,5 +1,7 @@
var defaults = require('lodash.defaults');
var React = require('react'); var React = require('react');
var Slider = require('react-slick'); var Slider = require('react-slick');
var Thumbnail = require('../thumbnail/thumbnail.jsx'); var Thumbnail = require('../thumbnail/thumbnail.jsx');
require('slick-carousel/slick/slick.scss'); require('slick-carousel/slick/slick.scss');
@ -15,21 +17,23 @@ var Carousel = React.createClass({
return { return {
items: require('./carousel.json'), items: require('./carousel.json'),
showRemixes: false, showRemixes: false,
showLoves: false, showLoves: false
settings: {
arrows: true,
dots: false,
infinite: false,
lazyLoad: true,
slidesToShow: 5,
slidesToScroll: 5,
variableWidth: true
}
}; };
}, },
render: function () { render: function () {
var settings = this.props.settings || {};
defaults(settings, {
arrows: this.props.items.length > settings.slidesToShow,
dots: false,
infinite: false,
lazyLoad: true,
slidesToShow: 5,
slidesToScroll: 5,
variableWidth: true
});
return ( return (
<Slider className={'carousel ' + this.props.className} {... this.props.settings}> <Slider className={'carousel ' + this.props.className} {... settings}>
{this.props.items.map(function (item) { {this.props.items.map(function (item) {
var href = ''; var href = '';
switch (item.type) { switch (item.type) {

35
src/views/splash/splash.jsx
View file

@ -22,11 +22,6 @@ var Splash = injectIntl(React.createClass({
Api, Api,
Session Session
], ],
getDefaultProps: function () {
return {
slidesToShow: 5
};
},
getInitialState: function () { getInitialState: function () {
return { return {
projectCount: 10569070, projectCount: 10569070,
@ -106,7 +101,7 @@ var Splash = injectIntl(React.createClass({
}, },
renderHomepageRows: function () { renderHomepageRows: function () {
var formatMessage = this.props.intl.formatMessage; var formatMessage = this.props.intl.formatMessage;
var showArrows = true;
var rows = [ var rows = [
<Box <Box
title={formatMessage({ title={formatMessage({
@ -120,14 +115,14 @@ var Splash = injectIntl(React.createClass({
id: 'splash.featuredStudios', id: 'splash.featuredStudios',
defaultMessage: 'Featured Studios'})} defaultMessage: 'Featured Studios'})}
key="community_featured_studios"> key="community_featured_studios">
<Carousel items={this.state.featuredGlobal.community_featured_studios} /> <Carousel items={this.state.featuredGlobal.community_featured_studios}
settings={{slidesToShow: 4, slidesToScroll: 4, lazyLoad: false}} />
</Box> </Box>
]; ];
if (this.state.featuredGlobal.curator_top_projects && if (this.state.featuredGlobal.curator_top_projects &&
this.state.featuredGlobal.curator_top_projects.length > 4) { this.state.featuredGlobal.curator_top_projects.length > 4) {
showArrows = this.state.featuredGlobal.curator_top_projects.length > this.props.slidesToShow;
rows.push( rows.push(
<Box <Box
key="curator_top_projects" key="curator_top_projects"
@ -137,8 +132,7 @@ var Splash = injectIntl(React.createClass({
moreTitle={formatMessage({id: 'general.learnMore', defaultMessage: 'Learn More'})} moreTitle={formatMessage({id: 'general.learnMore', defaultMessage: 'Learn More'})}
moreHref="/studios/386359/"> moreHref="/studios/386359/">
<Carousel <Carousel
items={this.state.featuredGlobal.curator_top_projects} items={this.state.featuredGlobal.curator_top_projects} />
arrows={showArrows} />
</Box> </Box>
); );
} }
@ -146,7 +140,6 @@ var Splash = injectIntl(React.createClass({
if (this.state.featuredGlobal.scratch_design_studio && if (this.state.featuredGlobal.scratch_design_studio &&
this.state.featuredGlobal.scratch_design_studio.length > 4) { this.state.featuredGlobal.scratch_design_studio.length > 4) {
showArrows = this.state.featuredGlobal.scratch_design_studio.length > this.props.slidesToShow;
rows.push( rows.push(
<Box <Box
key="scratch_design_studio" key="scratch_design_studio"
@ -158,8 +151,7 @@ var Splash = injectIntl(React.createClass({
moreTitle={formatMessage({id: 'splash.visitTheStudio', defaultMessage: 'Visit the studio'})} moreTitle={formatMessage({id: 'splash.visitTheStudio', defaultMessage: 'Visit the studio'})}
moreHref={'/studios/' + this.state.featuredGlobal.scratch_design_studio[0].gallery_id + '/'}> moreHref={'/studios/' + this.state.featuredGlobal.scratch_design_studio[0].gallery_id + '/'}>
<Carousel <Carousel
items={this.state.featuredGlobal.scratch_design_studio} items={this.state.featuredGlobal.scratch_design_studio} />
arrows={showArrows} />
</Box> </Box>
); );
} }
@ -168,7 +160,6 @@ var Splash = injectIntl(React.createClass({
this.state.featuredGlobal.community_newest_projects && this.state.featuredGlobal.community_newest_projects &&
this.state.featuredGlobal.community_newest_projects.length > 0) { this.state.featuredGlobal.community_newest_projects.length > 0) {
showArrows = this.state.featuredGlobal.community_newest_projects.length > this.props.slidesToShow;
rows.push( rows.push(
<Box <Box
title={ title={
@ -177,8 +168,7 @@ var Splash = injectIntl(React.createClass({
defaultMessage: 'Recently Shared Projects' })} defaultMessage: 'Recently Shared Projects' })}
key="community_newest_projects"> key="community_newest_projects">
<Carousel <Carousel
items={this.state.featuredGlobal.community_newest_projects} items={this.state.featuredGlobal.community_newest_projects} />
arrows={showArrows} />
</Box> </Box>
); );
} }
@ -186,7 +176,6 @@ var Splash = injectIntl(React.createClass({
if (this.state.featuredCustom.custom_projects_by_following && if (this.state.featuredCustom.custom_projects_by_following &&
this.state.featuredCustom.custom_projects_by_following.length > 0) { this.state.featuredCustom.custom_projects_by_following.length > 0) {
showArrows = this.state.featuredCustom.custom_projects_by_following.length > this.props.slidesToShow;
rows.push( rows.push(
<Box title={ <Box title={
formatMessage({ formatMessage({
@ -194,15 +183,13 @@ var Splash = injectIntl(React.createClass({
defaultMessage: 'Projects by Scratchers I\'m Following'})} defaultMessage: 'Projects by Scratchers I\'m Following'})}
key="custom_projects_by_following"> key="custom_projects_by_following">
<Carousel items={this.state.featuredCustom.custom_projects_by_following} <Carousel items={this.state.featuredCustom.custom_projects_by_following} />
arrows={showArrows} />
</Box> </Box>
); );
} }
if (this.state.featuredCustom.custom_projects_loved_by_following && if (this.state.featuredCustom.custom_projects_loved_by_following &&
this.state.featuredCustom.custom_projects_loved_by_following.length > 0) { this.state.featuredCustom.custom_projects_loved_by_following.length > 0) {
showArrows = this.state.featuredCustom.custom_projects_loved_by_following.length > this.props.slidesToShow;
rows.push( rows.push(
<Box title={ <Box title={
formatMessage({ formatMessage({
@ -210,8 +197,7 @@ var Splash = injectIntl(React.createClass({
defaultMessage: 'Projects Loved by Scratchers I\'m Following'})} defaultMessage: 'Projects Loved by Scratchers I\'m Following'})}
key="custom_projects_loved_by_following"> key="custom_projects_loved_by_following">
<Carousel items={this.state.featuredCustom.custom_projects_loved_by_following} <Carousel items={this.state.featuredCustom.custom_projects_loved_by_following} />
arrows={showArrows} />
</Box> </Box>
); );
} }
@ -219,8 +205,6 @@ var Splash = injectIntl(React.createClass({
if (this.state.featuredCustom.custom_projects_in_studios_following && if (this.state.featuredCustom.custom_projects_in_studios_following &&
this.state.featuredCustom.custom_projects_in_studios_following.length > 0) { this.state.featuredCustom.custom_projects_in_studios_following.length > 0) {
showArrows =
this.state.featuredCustom.custom_projects_in_studios_following.length > this.props.slidesToShow;
rows.push( rows.push(
<Box title={ <Box title={
formatMessage({ formatMessage({
@ -228,8 +212,7 @@ var Splash = injectIntl(React.createClass({
defaultMessage: 'Projects in Studios I\'m Following'})} defaultMessage: 'Projects in Studios I\'m Following'})}
key="custom_projects_in_studios_following"> key="custom_projects_in_studios_following">
<Carousel items={this.state.featuredCustom.custom_projects_in_studios_following} <Carousel items={this.state.featuredCustom.custom_projects_in_studios_following} />
arrows={showArrows} />
</Box> </Box>
); );
} }