2015-10-25 11:31:09 -04:00
|
|
|
var classNames = require('classnames');
|
2015-10-23 10:07:50 -04:00
|
|
|
var defaults = require('lodash.defaults');
|
2015-09-08 14:56:28 -04:00
|
|
|
var React = require('react');
|
|
|
|
var Slider = require('react-slick');
|
2015-10-23 10:07:50 -04:00
|
|
|
|
2015-09-08 14:56:28 -04:00
|
|
|
var Thumbnail = require('../thumbnail/thumbnail.jsx');
|
|
|
|
|
|
|
|
require('slick-carousel/slick/slick.scss');
|
|
|
|
require('slick-carousel/slick/slick-theme.scss');
|
|
|
|
require('./carousel.scss');
|
|
|
|
|
2016-01-14 10:25:03 -05:00
|
|
|
/**
|
|
|
|
* Displays content in horizontal scrolling box. Example usage: splash page rows.
|
|
|
|
*/
|
2015-10-08 16:18:12 -04:00
|
|
|
var Carousel = React.createClass({
|
2015-10-09 16:16:37 -04:00
|
|
|
type: 'Carousel',
|
2015-09-08 14:56:28 -04:00
|
|
|
propTypes: {
|
|
|
|
items: React.PropTypes.array
|
|
|
|
},
|
|
|
|
getDefaultProps: function () {
|
|
|
|
return {
|
|
|
|
items: require('./carousel.json'),
|
2015-10-20 13:18:57 -04:00
|
|
|
showRemixes: false,
|
2015-10-23 10:07:50 -04:00
|
|
|
showLoves: false
|
2015-09-08 14:56:28 -04:00
|
|
|
};
|
|
|
|
},
|
|
|
|
render: function () {
|
2015-10-23 10:07:50 -04:00
|
|
|
var settings = this.props.settings || {};
|
|
|
|
defaults(settings, {
|
2016-07-21 10:12:16 -04:00
|
|
|
centerMode: false,
|
2015-10-23 10:07:50 -04:00
|
|
|
dots: false,
|
|
|
|
infinite: false,
|
|
|
|
lazyLoad: true,
|
|
|
|
slidesToShow: 5,
|
|
|
|
slidesToScroll: 5,
|
2016-07-21 10:12:16 -04:00
|
|
|
variableWidth: true,
|
|
|
|
responsive: [
|
|
|
|
{breakpoint: 480, settings: {
|
|
|
|
arrows: true,
|
|
|
|
slidesToScroll: 1,
|
|
|
|
slidesToShow: 1,
|
|
|
|
centerMode: true
|
|
|
|
}},
|
|
|
|
{breakpoint: 640, settings: {
|
|
|
|
slidesToScroll: 2,
|
|
|
|
slidesToShow: 2
|
|
|
|
}},
|
|
|
|
{breakpoint: 942, settings: {
|
|
|
|
slidesToScroll: 4,
|
|
|
|
slidesToShow: 4
|
|
|
|
}}
|
|
|
|
]
|
2015-10-23 10:07:50 -04:00
|
|
|
});
|
2015-10-23 14:47:49 -04:00
|
|
|
var arrows = this.props.items.length > settings.slidesToShow;
|
2015-10-25 11:31:09 -04:00
|
|
|
var classes = classNames(
|
|
|
|
'carousel',
|
|
|
|
this.props.className
|
|
|
|
);
|
2015-09-08 14:56:28 -04:00
|
|
|
return (
|
2015-10-25 11:31:09 -04:00
|
|
|
<Slider className={classes} arrows={arrows} {... settings}>
|
2015-09-10 15:00:07 -04:00
|
|
|
{this.props.items.map(function (item) {
|
2015-10-02 13:08:57 -04:00
|
|
|
var href = '';
|
|
|
|
switch (item.type) {
|
|
|
|
case 'gallery':
|
2015-10-24 12:20:19 -04:00
|
|
|
href = '/studios/' + item.id + '/';
|
2015-10-02 13:08:57 -04:00
|
|
|
break;
|
2015-10-08 15:55:31 -04:00
|
|
|
case 'project':
|
|
|
|
href = '/projects/' + item.id + '/';
|
|
|
|
break;
|
2015-10-02 13:08:57 -04:00
|
|
|
default:
|
|
|
|
href = '/' + item.type + '/' + item.id + '/';
|
|
|
|
}
|
|
|
|
|
2015-09-08 14:56:28 -04:00
|
|
|
return (
|
2016-07-03 14:49:01 -04:00
|
|
|
<Thumbnail key={[this.key, item.id].join('.')}
|
2015-10-20 13:18:57 -04:00
|
|
|
showLoves={this.props.showLoves}
|
|
|
|
showRemixes={this.props.showRemixes}
|
2015-10-02 13:08:57 -04:00
|
|
|
type={item.type}
|
|
|
|
href={href}
|
2015-09-08 14:56:28 -04:00
|
|
|
title={item.title}
|
2015-10-20 13:18:57 -04:00
|
|
|
src={item.thumbnail_url}
|
2015-10-02 13:08:57 -04:00
|
|
|
creator={item.creator}
|
2015-10-20 13:18:57 -04:00
|
|
|
remixes={item.remixers_count}
|
|
|
|
loves={item.love_count} />
|
2015-09-08 14:56:28 -04:00
|
|
|
);
|
2015-10-20 13:18:57 -04:00
|
|
|
}.bind(this))}
|
2015-09-08 14:56:28 -04:00
|
|
|
</Slider>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
2015-10-08 16:18:12 -04:00
|
|
|
|
|
|
|
module.exports = Carousel;
|