mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-02-17 08:31:23 -05:00
Load button and tabs functioning
Users can now load more projects by clicking a button at the bottom of the page, and check out different genres of project using the tabs.
This commit is contained in:
Rachel Thornton
parent
bfd3fac6a0
commit
8e6921cd82
3 changed files with 122 additions and 59 deletions
|
|
@ -43,6 +43,16 @@ var Carousel = React.createClass({
|
|||
<Slider className={classes} arrows={arrows} {... settings}>
|
||||
{this.props.items.map(function (item) {
|
||||
var href = '';
|
||||
var thumbnail_url = item.thumbnail_url;
|
||||
if (item.thumbnail_url==undefined && item.thumbnail!=undefined) {
|
||||
var lastFour = (item.id%10000).toString();
|
||||
if (item.id%10000<1000) {
|
||||
while (lastFour.length<4) {
|
||||
lastFour = "0" + lastFour;
|
||||
}
|
||||
}
|
||||
thumbnail_url = "//cdn.scratch.mit.edu/static/site/projects/thumbnails/"+Math.floor(item.id/10000)+"/"+lastFour+".png";
|
||||
}
|
||||
switch (item.type) {
|
||||
case 'gallery':
|
||||
href = '/studios/' + item.id + '/';
|
||||
|
|
@ -61,7 +71,7 @@ var Carousel = React.createClass({
|
|||
type={item.type}
|
||||
href={href}
|
||||
title={item.title}
|
||||
src={item.thumbnail_url}
|
||||
src={thumbnail_url}
|
||||
creator={item.creator}
|
||||
remixes={item.remixers_count}
|
||||
loves={item.love_count} />
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
var injectIntl = require('react-intl').injectIntl;
|
||||
var classNames = require('classnames');
|
||||
var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
|
||||
var FormattedMessage = require('react-intl').FormattedMessage;
|
||||
|
|
@ -6,15 +7,20 @@ var render = require('../../lib/render.jsx');
|
|||
|
||||
var Api = require('../../mixins/api.jsx');
|
||||
|
||||
var Page = require('../../components/page/page.jsx');
|
||||
var Button = require('../../components/forms/button.jsx');
|
||||
var Box = require('../../components/box/box.jsx');
|
||||
var SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
|
||||
var Carousel = require('../../components/carousel/carousel.jsx');
|
||||
var Select = require('../../components/forms/select.jsx');
|
||||
var offset = 0;
|
||||
var more = [];
|
||||
var tab = "all";
|
||||
var acceptableTabs = ["all","animations","art","games","music","stories"];
|
||||
|
||||
require('./explore.scss');
|
||||
|
||||
var Explore = React.createClass({
|
||||
var Explore = injectIntl(React.createClass({
|
||||
type: 'Explore',
|
||||
mixins: [
|
||||
Api
|
||||
|
|
@ -23,29 +29,87 @@ var Explore = React.createClass({
|
|||
return {};
|
||||
},
|
||||
componentDidMount: function () {
|
||||
this.getExploreAll();
|
||||
window.map=this;
|
||||
var pathname = window.location.pathname
|
||||
if (pathname.substring(pathname.length-1,pathname.length)=="/") {
|
||||
pathname = pathname.substring(0,pathname.length-1);
|
||||
};
|
||||
var slash = pathname.lastIndexOf("/");
|
||||
tab = pathname.substring(slash+1,pathname.length).toLowerCase();
|
||||
if (acceptableTabs.indexOf(tab)==-1) {
|
||||
window.location=window.location.origin+"/explore/projects/all/";
|
||||
}
|
||||
this.getExploreAll(0);
|
||||
},
|
||||
getExploreAll: function () {
|
||||
var tabText = '';
|
||||
if (tab!="all") {
|
||||
tabText = "&q="+tab;
|
||||
};
|
||||
this.api({
|
||||
uri: '/search/projects'
|
||||
uri: '/search/projects?limit=16'+tabText
|
||||
}, function (err, body) {
|
||||
if (!err) this.setState({exploreAll: body});
|
||||
}.bind(this));
|
||||
},
|
||||
getExploreMore: function () {
|
||||
var tabText = '';
|
||||
if (tab!="all") {
|
||||
tabText = "&q="+tab;
|
||||
};
|
||||
offset+=16;
|
||||
this.api({
|
||||
uri: '/search/projects?offset='+offset+tabText
|
||||
}, function (err, body) {
|
||||
if (!err) this.setState({exploreMore: body});
|
||||
}.bind(this));
|
||||
},
|
||||
renderRows: function () {
|
||||
var row2 = this.state.exploreAll;
|
||||
var row3 = this.state.exploreAll;
|
||||
var row4 = this.state.exploreAll;
|
||||
if (row2!=undefined) {
|
||||
row2 = row2.slice(4,8);
|
||||
row3 = row3.slice(8,12);
|
||||
row4 = row4.slice(12,16);
|
||||
}
|
||||
var rows = [
|
||||
<Carousel items={this.state.exploreAll}
|
||||
settings={{slidesToShow: 4, slidesToScroll: 0}} />,
|
||||
<Carousel items={this.state.exploreAll}
|
||||
<Carousel items={row2}
|
||||
settings={{slidesToShow: 4, slidesToScroll: 0}} />,
|
||||
<Carousel items={this.state.exploreAll}
|
||||
<Carousel items={row3}
|
||||
settings={{slidesToShow: 4, slidesToScroll: 0}} />,
|
||||
<Carousel items={this.state.exploreAll}
|
||||
<Carousel items={row4}
|
||||
settings={{slidesToShow: 4, slidesToScroll: 0}} />,
|
||||
]
|
||||
if (this.state.exploreMore!=undefined && more.length<offset) more = more.concat(this.state.exploreMore);
|
||||
if (more.length>0) {
|
||||
for (var i = 0; i<more.length; i+=4) {
|
||||
var rowNext = more.slice(i,i+4);
|
||||
rows.push(<Carousel items={rowNext} settings={{slidesToShow: 4, slidesToScroll: 0}} />);
|
||||
}
|
||||
}
|
||||
return rows;
|
||||
},
|
||||
getTab: function(type) {
|
||||
var allTab = <a href={"/explore/projects/"+type+"/"}>
|
||||
<li>
|
||||
<FormattedMessage
|
||||
id={'explore.'+type}
|
||||
defaultMessage={type.charAt(0).toUpperCase()+type.slice(1)} />
|
||||
</li>
|
||||
</a>;
|
||||
if (tab==type) {
|
||||
allTab = <a href={"/explore/projects/"+type+"/"}>
|
||||
<li className="active">
|
||||
<FormattedMessage
|
||||
id={'explore.'+type}
|
||||
defaultMessage={type.charAt(0).toUpperCase()+type.slice(1)} />
|
||||
</li>
|
||||
</a>;
|
||||
}
|
||||
return allTab
|
||||
},
|
||||
render: function () {
|
||||
var projects = this.renderRows();
|
||||
var classes = classNames(
|
||||
|
|
@ -59,50 +123,14 @@ var Explore = React.createClass({
|
|||
moreProps={{
|
||||
className: 'subnavigation'
|
||||
}}>
|
||||
<SubNavigation>
|
||||
<a href="/explore/projects/all/">
|
||||
<li className="active">
|
||||
<FormattedMessage
|
||||
id='explore.all'
|
||||
defaultMessage={'All'} />
|
||||
</li>
|
||||
</a>
|
||||
<a href="/explore/projects/animations/">
|
||||
<li>
|
||||
<FormattedMessage
|
||||
id='explore.animations'
|
||||
defaultMessage={'Animations'} />
|
||||
</li>
|
||||
</a>
|
||||
<a href="/explore/projects/art/">
|
||||
<li>
|
||||
<FormattedMessage
|
||||
id='explore.art'
|
||||
defaultMessage={'Art'} />
|
||||
</li>
|
||||
</a>
|
||||
<a href="/explore/projects/games/">
|
||||
<li>
|
||||
<FormattedMessage
|
||||
id='explore.games'
|
||||
defaultMessage={'Games'} />
|
||||
</li>
|
||||
</a>
|
||||
<a href="/explore/projects/music/">
|
||||
<li>
|
||||
<FormattedMessage
|
||||
id='explore.music'
|
||||
defaultMessage={'Music'} />
|
||||
</li>
|
||||
</a>
|
||||
<a href="/explore/projects/stories/">
|
||||
<li>
|
||||
<FormattedMessage
|
||||
id='explore.stories'
|
||||
defaultMessage={'Stories'} />
|
||||
</li>
|
||||
</a>
|
||||
<div id="sorter">
|
||||
<SubNavigation className="tabs">
|
||||
{this.getTab("all")}
|
||||
{this.getTab("animations")}
|
||||
{this.getTab("art")}
|
||||
{this.getTab("games")}
|
||||
{this.getTab("music")}
|
||||
{this.getTab("stories")}
|
||||
{/*<div id="sorter">
|
||||
<div id="sortText">
|
||||
Sort by:
|
||||
</div>
|
||||
|
|
@ -117,10 +145,19 @@ var Explore = React.createClass({
|
|||
Top Viewed
|
||||
</option>
|
||||
</Select>
|
||||
</div>
|
||||
</div> \\can be reused in the future if different sorts are added*/}
|
||||
</SubNavigation>
|
||||
<div id="projectBox">
|
||||
<div id="projectBox" key="projectBox">
|
||||
{projects}
|
||||
<SubNavigation className="load">
|
||||
<button onClick={this.getExploreMore}>
|
||||
<li>
|
||||
<FormattedMessage
|
||||
id='load'
|
||||
defaultMessage={'Load More'} />
|
||||
</li>
|
||||
</button>
|
||||
</SubNavigation>
|
||||
</div>
|
||||
</Box>
|
||||
</div>
|
||||
|
|
@ -128,6 +165,6 @@ var Explore = React.createClass({
|
|||
|
||||
);
|
||||
}
|
||||
});
|
||||
}));
|
||||
|
||||
//render(<Explore />, document.getElementById('view'));
|
||||
render(<Page><Explore /></Page>, document.getElementById('app'));
|
||||
|
|
|
|||
|
|
@ -47,14 +47,14 @@ $base-bg: $ui-white;
|
|||
display:inline-block;
|
||||
}
|
||||
|
||||
.sub-nav {
|
||||
.tabs {
|
||||
justify-content: flex-start;
|
||||
padding: 0px 0px 0px 20px;
|
||||
width: calc(100% - 20px);
|
||||
background-color: $ui-gray;
|
||||
}
|
||||
|
||||
.sub-nav li {
|
||||
.tabs li {
|
||||
background-color: $ui-white;
|
||||
color: $header-gray;
|
||||
opacity: .75;
|
||||
|
|
@ -71,9 +71,15 @@ $base-bg: $ui-white;
|
|||
}
|
||||
}
|
||||
|
||||
.sub-nav li.active {
|
||||
.tabs li.active {
|
||||
opacity: 1;
|
||||
border-bottom: 4px solid $ui-white;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
color: $header-gray;
|
||||
border-bottom: 4px solid $ui-white;
|
||||
}
|
||||
}
|
||||
|
||||
#projectBox {
|
||||
|
|
@ -83,4 +89,14 @@ $base-bg: $ui-white;
|
|||
border-color: $active-gray;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.load button {
|
||||
border: None;
|
||||
padding: 0px;
|
||||
background-color: $ui-white;
|
||||
|
||||
li {
|
||||
color: $header-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue