scratch-www/src/views/download/download.jsx
Matthew Taylor 6e3c255fa7 Make version dependent on xml call
Fixes #1351 by including a call to `version.xml` to get the most up-to-date offline build version, defaulting to the current version, `456.0.3`. This also fixes #1352 by switching the route to `/download`, with a redirect from `/scratch2download/`
2017-06-16 10:11:58 -04:00

214 lines
12 KiB
JavaScript

var React = require('react');
var render = require('../../lib/render.jsx');
var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
var FormattedMessage = require('react-intl').FormattedMessage;
var api = require('../../lib/api');
var Page = require('../../components/page/www/page.jsx');
var TitleBanner = require('../../components/title-banner/title-banner.jsx');
var FlexRow = require('../../components/flex-row/flex-row.jsx');
var SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
require('./download.scss');
require('../../components/forms/button.scss');
var Download = React.createClass({
type: 'Download',
getInitialState: function () {
return {
swfVersion: '456.0.3'
};
},
componentDidMount: function () {
api({
host: '',
uri: '/scratchr2/static/sa/version.xml',
responseType: 'string'
}, function (err, body) {
if (err) return;
var doc = new DOMParser().parseFromString(body, 'text/xml');
return this.setState({
swfVersion: doc.getElementsByTagName('versionNumber')[0].childNodes[0].nodeValue
});
}.bind(this));
},
render: function () {
var downloadUrls = {
mac: '/scratchr2/static/sa/Scratch-'+ this.state.swfVersion + '.dmg',
mac105: '/scratchr2/static/sa/Scratch-'+ this.state.swfVersion + '.air',
windows: '/scratchr2/static/sa/Scratch-'+ this.state.swfVersion + '.exe',
linux: '/scratchr2/static/sa/Scratch-'+ this.state.swfVersion + '.air'
};
return (
<div className="download">
<TitleBanner className="masthead">
<div className="inner">
<h1 className="title-banner-h1">
<FormattedMessage id='download.title' />
</h1>
<p className="title-banner-p intro">
<FormattedMessage id='download.intro' />
</p>
<p className="title-banner-p intro">
<FormattedHTMLMessage id='download.introMac' />
</p>
</div>
<div className="band">
<SubNavigation className="inner">
<a href="#installation">
<li>
<FormattedMessage id='download.installation' />
</li>
</a>
<a href="#updates">
<li>
<FormattedMessage id='download.updatesTitle' />
</li>
</a>
<a href="#other">
<li>
<FormattedMessage id='download.otherVersionsTitle' />
</li>
</a>
<a href="#issues">
<li>
<FormattedMessage id='download.knownIssuesTitle' />
</li>
</a>
</SubNavigation>
</div>
</TitleBanner>
<div className="download-content">
<div className="inner">
<section id="installation">
<span className="nav-spacer"></span>
<FlexRow className="three-col-row">
<div className="installation-column">
<h3><FormattedMessage id='download.airTitle' /></h3>
<p><FormattedHTMLMessage id='download.airBody' /></p>
<ul className="installation-downloads">
<li className="installation-downloads-item">
<FormattedMessage id='download.macOSX' /> -
{' '}<a href="http://get.adobe.com/air/">
<FormattedMessage id='download.download' />
</a>
</li>
<li className="installation-downloads-item">
<FormattedMessage id='download.macOlder' /> -
{' '}<a href="http://airdownload.adobe.com/air/mac/download/2.6/AdobeAIR.zip">
<FormattedMessage id='download.download' />
</a>
</li>
<li className="installation-downloads-item">
<FormattedMessage id='download.windows' /> -
{' '}<a href="http://get.adobe.com/air/">
<FormattedMessage id='download.download' />
</a>
</li>
<li className="installation-downloads-item">
<FormattedMessage id='download.linux' /> -
{' '}<a href="http://airdownload.adobe.com/air/lin/download/2.6/AdobeAIRInstaller.bin">
<FormattedMessage id='download.download' />
</a>
</li>
</ul>
</div>
<div className="installation-column">
<h3><FormattedMessage id='download.offlineEditorTitle' /></h3>
<p><FormattedMessage id='download.offlineEditorBody' /></p>
<ul className="installation-downloads">
<li className="installation-downloads-item">
<FormattedMessage id='download.macOSX' /> -
{' '}<a href={downloadUrls.mac}>
<FormattedMessage id='download.download' />
</a>
</li>
<li className="installation-downloads-item">
<FormattedMessage id='download.macOlder' /> -
{' '}<a href={downloadUrls.mac105}>
<FormattedMessage id='download.download' />
</a>
</li>
<li className="installation-downloads-item">
<FormattedMessage id='download.windows' /> -
{' '}<a href={downloadUrls.windows}>
<FormattedMessage id='download.download' />
</a>
</li>
<li className="installation-downloads-item">
<FormattedMessage id='download.linux' /> -
{' '}<a href={downloadUrls.linux}>
<FormattedMessage id='download.download' />
</a>
</li>
</ul>
</div>
<div className="installation-column">
<h3><FormattedMessage id='download.supportMaterialsTitle' /></h3>
<p><FormattedMessage id='download.supportMaterialsBody' /></p>
<ul className="installation-downloads">
<li className="installation-downloads-item">
<FormattedMessage id='download.starterProjects' /> -
{' '}<a href="https://scratch.mit.edu/scratchr2/static/sa/Scratch2StarterProjects.zip">
<FormattedMessage id='download.download' />
</a>
</li>
<li className="installation-downloads-item">
<FormattedMessage id='download.gettingStarted' /> -
{' '}<a href="https://cdn.scratch.mit.edu/scratchr2/static/__709da8e5f3d72129538a4ccdbcbf5f2a__/pdfs/help/Getting-Started-Guide-Scratch2.pdf">
<FormattedMessage id='download.download' />
</a>
</li>
<li className="installation-downloads-item">
<FormattedMessage id='download.scratchCards' /> -
{' '}<a href="https://cdn.scratch.mit.edu/scratchr2/static/__709da8e5f3d72129538a4ccdbcbf5f2a__/pdfs/help/Scratch2Cards.pdf">
<FormattedMessage id='download.download' />
</a>
</li>
</ul>
</div>
</FlexRow>
</section>
<section id="updates">
<span className="nav-spacer"></span>
<h2><FormattedMessage id='download.updatesTitle' /></h2>
<p><FormattedMessage id='download.updatesBody' /></p>
<p>
<FormattedMessage
id='download.currentVersion'
values={{
version: this.state.swfVersion
}}
/>
</p>
</section>
<section id="other">
<span className="nav-spacer"></span>
<h2><FormattedMessage id='download.otherVersionsTitle' /></h2>
<p><FormattedHTMLMessage id='download.otherVersionsOlder' /></p>
<p><FormattedHTMLMessage id='download.otherVersionsAdmin' /></p>
</section>
<section id="issues">
<span className="nav-spacer"></span>
<h2><FormattedMessage id='download.knownIssuesTitle' /></h2>
<p><FormattedMessage id='download.knownIssuesOne' /></p>
<p><FormattedMessage id='download.knownIssuesTwo' /></p>
<p><FormattedHTMLMessage id='download.knownIssuesThree' /></p>
<a href="https://scratch.mit.edu/discuss/3/" className='button mod-link'>
<FormattedMessage id='download.reportBugs' />
</a>
</section>
</div>
</div>
</div>
);
}
});
render(<Page><Download /></Page>, document.getElementById('app'));