mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-02-17 00:21:20 -05:00
Error Handling - when a component isn't declared, don't show it.
This commit is contained in:
morant
parent
2593d7aaf5
commit
6aa93b1711
3 changed files with 214 additions and 163 deletions
|
|
@ -48,7 +48,7 @@ var TipsSlider = React.createClass({
|
|||
src={item.thumbnailUrl} />)
|
||||
}
|
||||
stages.push(
|
||||
<div className="testing">
|
||||
<div className="testing" key={"stage_" + i}>
|
||||
<h3>{this.props.items[i].title}</h3>
|
||||
{thumbnails}
|
||||
</div>)
|
||||
|
|
|
|||
|
|
@ -49,12 +49,17 @@ var Microworld = React.createClass({
|
|||
}.bind(this));
|
||||
},
|
||||
renderVideos: function () {
|
||||
var videos = this.state.microworlds_data.videos
|
||||
if (!videos || videos.length <= 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="videos-section section">
|
||||
<h1>Get Inspired...</h1>
|
||||
<div className="videos-container">
|
||||
<div className="videos">
|
||||
{this.state.microworlds_data.videos.map(this.renderVideo)}
|
||||
{videos.map(this.renderVideo)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -79,22 +84,26 @@ var Microworld = React.createClass({
|
|||
isOpen={this.state.videoOpen[key]}
|
||||
onRequestClose={this.closeVideo.bind(this, key)}
|
||||
style={{content:frameProps}}>
|
||||
<iframe src={video.link} width="560" height="315" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
||||
<iframe src={video.link} width="560" height="315" frameBorder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
||||
</Modal>
|
||||
|
||||
</div>
|
||||
)
|
||||
},
|
||||
renderEditorWindow: function() {
|
||||
var project_id = this.state.microworlds_data.microworld_project_id;
|
||||
var projectId = this.state.microworlds_data.microworld_project_id;
|
||||
|
||||
if (!projectId) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div className="editor section">
|
||||
<h1>Start Creating!</h1>
|
||||
<a href={"//scratch.mit.edu/projects/"+ project_id +"/#editor"}>
|
||||
<a href={"//scratch.mit.edu/projects/"+ projectId +"/#editor"}>
|
||||
<img src="/images/scratch-og.png" style={{width:"6%", position: "absolute", left: "75%"}}></img>
|
||||
</a>
|
||||
<iframe src={"//scratch.mit.edu/projects/embed-editor/" + project_id + "/?isMicroworld=true"}
|
||||
frameborder="0"> </iframe>
|
||||
<iframe src={"//scratch.mit.edu/projects/embed-editor/" + projectId + "/?isMicroworld=true"}
|
||||
frameBorder="0"> </iframe>
|
||||
{this.renderTips()}
|
||||
|
||||
</div>
|
||||
|
|
@ -102,6 +111,9 @@ var Microworld = React.createClass({
|
|||
},
|
||||
renderTips: function() {
|
||||
var tips = this.state.microworlds_data.tips;
|
||||
if (!tips || tips.length <= 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="box tipsslider">
|
||||
|
|
@ -115,36 +127,65 @@ var Microworld = React.createClass({
|
|||
)
|
||||
},
|
||||
renderStarterProject: function() {
|
||||
var starterProjects = this.state.microworlds_data.starter_projects;
|
||||
if (!starterProjects || starterProjects.length <= 0){
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="project-ideas">
|
||||
<h1>Check out ideas for more projects</h1>
|
||||
<Box
|
||||
title="More Starter Projects"
|
||||
key="design_studio">
|
||||
<Carousel items={this.state.microworlds_data.community_projects.scratch_starter_projects} />
|
||||
<Carousel items={starterProjects} />
|
||||
</Box>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
renderProjectIdeasBox: function() {
|
||||
var rows = [
|
||||
<Box
|
||||
title="Featured Community Projects"
|
||||
key="community_featured_projects">
|
||||
<Carousel items={this.state.microworlds_data.community_projects.community_featured_projects} />
|
||||
</Box>,
|
||||
<Box
|
||||
title="All Community Projects"
|
||||
key="community_all_projects">
|
||||
<Carousel items={this.state.microworlds_data.community_projects.community_newest_projects} />
|
||||
</Box>,
|
||||
];
|
||||
var communityProjects = this.state.microworlds_data.community_projects;
|
||||
if (!communityProjects || communityProjects.size <= 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
var featured = communityProjects.featured_projects;
|
||||
var all = communityProjects.newest_projects;
|
||||
|
||||
var rows = []
|
||||
if (featured && featured.length > 0){
|
||||
rows.push(
|
||||
<Box
|
||||
title="Featured Community Projects"
|
||||
key="community_featured_projects">
|
||||
<Carousel items={featured} />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
if (all && all.length > 0) {
|
||||
rows.push(
|
||||
<Box
|
||||
title="All Community Projects"
|
||||
key="community_all_projects">
|
||||
<Carousel items={all} />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
if (rows.length <= 0) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div className="project-ideas">
|
||||
<h1>Get inspiration from other projects</h1>
|
||||
{rows}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
renderForum: function() {
|
||||
if (!this.state.microworlds_data.show_forum) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="forum">
|
||||
<h1>Chat with others!</h1>
|
||||
|
|
@ -153,44 +194,49 @@ var Microworld = React.createClass({
|
|||
)
|
||||
},
|
||||
renderDesignStudio: function() {
|
||||
var designChallenge = this.state.microworlds_data.design_challenge;
|
||||
if (!designChallenge) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="side-by-side section">
|
||||
<h1>Join our Design Challenge!</h1>
|
||||
<div className="design-studio">
|
||||
<iframe src="https://scratch.mit.edu/projects/89144801/#fullscreen" frameborder="0"> </iframe>
|
||||
<iframe src={"https://scratch.mit.edu/projects/" + designChallenge.project_id + "/#fullscreen"} frameBorder="0"> </iframe>
|
||||
</div>
|
||||
<div className="design-studio-projects">
|
||||
<Box
|
||||
title="Examples"
|
||||
key="scratch_desgin_studio"
|
||||
moreTitle="Visit the studio"
|
||||
moreHref={'/studios/' + '1728540' + '/'}>
|
||||
<Carousel settings={{slidesToShow:2,slidesToScroll:2}} items={this.state.microworlds_data.community_projects.scratch_design_studio1} />
|
||||
<Carousel settings={{slidesToShow:2,slidesToScroll:2}} items={this.state.microworlds_data.community_projects.scratch_design_studio2} />
|
||||
</Box>
|
||||
</div>
|
||||
<Box title="Examples"
|
||||
key="scratch_desgin_studio"
|
||||
moreTitle="Visit the studio"
|
||||
moreHref={'/studios/' + designChallenge.studio_id + '/'}>
|
||||
<Carousel settings={{slidesToShow:2,slidesToScroll:2}} items={this.state.microworlds_data.design_challenge.studio1} />
|
||||
<Carousel settings={{slidesToShow:2,slidesToScroll:2}} items={this.state.microworlds_data.design_challenge.studio2} />
|
||||
</Box>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
render: function () {
|
||||
var classes = classNames(
|
||||
'top-banner'
|
||||
);
|
||||
|
||||
var microworldData = this.state.microworlds_data;
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="top-banner section">
|
||||
<h1>{this.state.microworlds_data.title}</h1>
|
||||
<p>{this.state.microworlds_data.description.join(" ")}</p>
|
||||
<h1>{microworldData.title}</h1>
|
||||
<p>{microworldData.description.join(" ")}</p>
|
||||
</div>
|
||||
|
||||
{this.renderVideos()}
|
||||
|
||||
<div className="content">
|
||||
{this.renderEditorWindow()}
|
||||
<h1>Check out ideas for more projects</h1>
|
||||
{this.renderStarterProject()}
|
||||
{this.renderDesignStudio()}
|
||||
<h1>Get inspiration from other projects</h1>
|
||||
{this.renderProjectIdeasBox()}
|
||||
{this.renderForum()}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -140,127 +140,127 @@
|
|||
]
|
||||
}
|
||||
],
|
||||
"community_projects": {
|
||||
"scratch_starter_projects": [
|
||||
{
|
||||
"title": "Architecture Stamps Starter Project",
|
||||
"type": "project",
|
||||
"remixers_count": 168,
|
||||
"love_count": 3062,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/2445/6318.png",
|
||||
"creator": "CSFirst",
|
||||
"id": 24456318
|
||||
},
|
||||
{
|
||||
"title": "Digital Art Starter Project",
|
||||
"type": "project",
|
||||
"remixers_count": 168,
|
||||
"love_count": 3062,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/2513/9098.png",
|
||||
"creator": "CSFirst",
|
||||
"id": 25139098
|
||||
},
|
||||
{
|
||||
"title": "Graffiti Starter Project",
|
||||
"type": "project",
|
||||
"remixers_count": 168,
|
||||
"love_count": 3062,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/2546/8311.png",
|
||||
"creator": "CSFirst",
|
||||
"id": 25468311
|
||||
},
|
||||
{
|
||||
"title": "Paint with Tera Starter ",
|
||||
"type": "project",
|
||||
"remixers_count": 168,
|
||||
"love_count": 3062,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/2743/2322.png",
|
||||
"creator": "CSFirst",
|
||||
"id": 27432322
|
||||
},
|
||||
{
|
||||
"title": "Interactive Art Starter Project",
|
||||
"type": "project",
|
||||
"remixers_count": 168,
|
||||
"love_count": 3062,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/2501/4570.png",
|
||||
"creator": "CSFirst",
|
||||
"id": 25014570
|
||||
},
|
||||
{
|
||||
"title": "Interactive Art Starter Project - Kuniyoshi Start",
|
||||
"type": "project",
|
||||
"remixers_count": 168,
|
||||
"love_count": 3062,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/2482/0113.png",
|
||||
"creator": "CSFirst",
|
||||
"id": 24820113
|
||||
},
|
||||
{
|
||||
"title": "Interactive Art Starter Project - American Gothic",
|
||||
"type": "project",
|
||||
"remixers_count": 168,
|
||||
"love_count": 3062,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/2445/4633.png",
|
||||
"creator": "CSFirst",
|
||||
"id": 24454633
|
||||
},
|
||||
{
|
||||
"title": "Interactive Art Starter Project - The Scream",
|
||||
"type": "project",
|
||||
"remixers_count": 168,
|
||||
"love_count": 3062,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/2481/8944.png",
|
||||
"creator": "CSFirst",
|
||||
"id": 24818944
|
||||
},
|
||||
{
|
||||
"title": "Animation Starter Project - Penguin",
|
||||
"type": "project",
|
||||
"remixers_count": 168,
|
||||
"love_count": 3062,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/2395/6722.png",
|
||||
"creator": "CSFirst",
|
||||
"id": 23956722
|
||||
},
|
||||
{
|
||||
"title": "Animation Starter Project - Gobo",
|
||||
"type": "project",
|
||||
"remixers_count": 168,
|
||||
"love_count": 3062,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/2395/7767.png",
|
||||
"creator": "CSFirst",
|
||||
"id": 23957767
|
||||
},
|
||||
{
|
||||
"title": "Animation Starter Project - Ghost",
|
||||
"type": "project",
|
||||
"remixers_count": 168,
|
||||
"love_count": 3062,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/2395/7153.png",
|
||||
"creator": "CSFirst",
|
||||
"id": 23957153
|
||||
},
|
||||
{
|
||||
"title": "Animation Starter Project - Crab",
|
||||
"type": "project",
|
||||
"remixers_count": 168,
|
||||
"love_count": 3062,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/2395/6837.png",
|
||||
"creator": "CSFirst",
|
||||
"id": 23956837
|
||||
},
|
||||
{
|
||||
"title": "Intro to Art Starter Project",
|
||||
"type": "project",
|
||||
"remixers_count": 168,
|
||||
"love_count": 3062,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/2420/9090.png",
|
||||
"creator": "CSFirst",
|
||||
"id": 24209090
|
||||
}
|
||||
],
|
||||
"community_featured_projects": [
|
||||
"starter_projects" : [
|
||||
{
|
||||
"title": "Architecture Stamps Starter Project",
|
||||
"type": "project",
|
||||
"remixers_count": 168,
|
||||
"love_count": 3062,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/2445/6318.png",
|
||||
"creator": "CSFirst",
|
||||
"id": 24456318
|
||||
},
|
||||
{
|
||||
"title": "Digital Art Starter Project",
|
||||
"type": "project",
|
||||
"remixers_count": 168,
|
||||
"love_count": 3062,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/2513/9098.png",
|
||||
"creator": "CSFirst",
|
||||
"id": 25139098
|
||||
},
|
||||
{
|
||||
"title": "Graffiti Starter Project",
|
||||
"type": "project",
|
||||
"remixers_count": 168,
|
||||
"love_count": 3062,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/2546/8311.png",
|
||||
"creator": "CSFirst",
|
||||
"id": 25468311
|
||||
},
|
||||
{
|
||||
"title": "Paint with Tera Starter ",
|
||||
"type": "project",
|
||||
"remixers_count": 168,
|
||||
"love_count": 3062,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/2743/2322.png",
|
||||
"creator": "CSFirst",
|
||||
"id": 27432322
|
||||
},
|
||||
{
|
||||
"title": "Interactive Art Starter Project",
|
||||
"type": "project",
|
||||
"remixers_count": 168,
|
||||
"love_count": 3062,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/2501/4570.png",
|
||||
"creator": "CSFirst",
|
||||
"id": 25014570
|
||||
},
|
||||
{
|
||||
"title": "Interactive Art Starter Project - Kuniyoshi Start",
|
||||
"type": "project",
|
||||
"remixers_count": 168,
|
||||
"love_count": 3062,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/2482/0113.png",
|
||||
"creator": "CSFirst",
|
||||
"id": 24820113
|
||||
},
|
||||
{
|
||||
"title": "Interactive Art Starter Project - American Gothic",
|
||||
"type": "project",
|
||||
"remixers_count": 168,
|
||||
"love_count": 3062,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/2445/4633.png",
|
||||
"creator": "CSFirst",
|
||||
"id": 24454633
|
||||
},
|
||||
{
|
||||
"title": "Interactive Art Starter Project - The Scream",
|
||||
"type": "project",
|
||||
"remixers_count": 168,
|
||||
"love_count": 3062,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/2481/8944.png",
|
||||
"creator": "CSFirst",
|
||||
"id": 24818944
|
||||
},
|
||||
{
|
||||
"title": "Animation Starter Project - Penguin",
|
||||
"type": "project",
|
||||
"remixers_count": 168,
|
||||
"love_count": 3062,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/2395/6722.png",
|
||||
"creator": "CSFirst",
|
||||
"id": 23956722
|
||||
},
|
||||
{
|
||||
"title": "Animation Starter Project - Gobo",
|
||||
"type": "project",
|
||||
"remixers_count": 168,
|
||||
"love_count": 3062,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/2395/7767.png",
|
||||
"creator": "CSFirst",
|
||||
"id": 23957767
|
||||
},
|
||||
{
|
||||
"title": "Animation Starter Project - Ghost",
|
||||
"type": "project",
|
||||
"remixers_count": 168,
|
||||
"love_count": 3062,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/2395/7153.png",
|
||||
"creator": "CSFirst",
|
||||
"id": 23957153
|
||||
},
|
||||
{
|
||||
"title": "Animation Starter Project - Crab",
|
||||
"type": "project",
|
||||
"remixers_count": 168,
|
||||
"love_count": 3062,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/2395/6837.png",
|
||||
"creator": "CSFirst",
|
||||
"id": 23956837
|
||||
},
|
||||
{
|
||||
"title": "Intro to Art Starter Project",
|
||||
"type": "project",
|
||||
"remixers_count": 168,
|
||||
"love_count": 3062,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/2420/9090.png",
|
||||
"creator": "CSFirst",
|
||||
"id": 24209090
|
||||
}
|
||||
],
|
||||
"community_projects" : {
|
||||
"featured_projects": [
|
||||
{
|
||||
"title": "Change color effect by-function",
|
||||
"type": "project",
|
||||
|
|
@ -477,8 +477,8 @@
|
|||
"creator": "Paddle2See",
|
||||
"id": 728858
|
||||
}
|
||||
],
|
||||
"community_newest_projects": [
|
||||
],
|
||||
"newest_projects": [
|
||||
{
|
||||
"title": "Pixel Art - Emerald ore",
|
||||
"type": "project",
|
||||
|
|
@ -749,8 +749,12 @@
|
|||
"creator": "-PixelArt-",
|
||||
"id": 72944390
|
||||
}
|
||||
],
|
||||
"scratch_design_studio1": [
|
||||
]
|
||||
},
|
||||
"design_challenge" : {
|
||||
"project_id" : "89144801",
|
||||
"studio_id" : "1728540",
|
||||
"studio1": [
|
||||
{
|
||||
"gallery_id": 1728540,
|
||||
"creator": "mathjp",
|
||||
|
|
@ -818,8 +822,8 @@
|
|||
"creator": "Eddie101101",
|
||||
"id": 10451607
|
||||
}
|
||||
],
|
||||
"scratch_design_studio2": [
|
||||
],
|
||||
"studio2": [
|
||||
{
|
||||
"title": "Garden Secret",
|
||||
"type": "project",
|
||||
|
|
@ -839,5 +843,6 @@
|
|||
"id": 26580310
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"show_forum" : true
|
||||
}
|
||||
Loading…
Reference in a new issue