2018-01-30 11:53:12 -05:00
|
|
|
const FormattedMessage = require('react-intl').FormattedMessage;
|
|
|
|
const injectIntl = require('react-intl').injectIntl;
|
|
|
|
const intlShape = require('react-intl').intlShape;
|
|
|
|
const React = require('react');
|
2017-03-31 19:35:33 -04:00
|
|
|
|
2018-01-30 11:53:12 -05:00
|
|
|
const FlexRow = require('../../components/flex-row/flex-row.jsx');
|
2018-12-10 17:33:22 -05:00
|
|
|
const bindAll = require('lodash.bindall');
|
|
|
|
const Steps = require('../../components/steps/steps.jsx');
|
|
|
|
const Step = require('../../components/steps/step.jsx');
|
2017-03-31 19:35:33 -04:00
|
|
|
|
2018-01-30 11:53:12 -05:00
|
|
|
const Page = require('../../components/page/www/page.jsx');
|
|
|
|
const render = require('../../lib/render.jsx');
|
2018-12-10 17:33:22 -05:00
|
|
|
const OS_ENUM = require('../../components/extension-landing/os-enum.js');
|
|
|
|
const OSChooser = require('../../components/os-chooser/os-chooser.jsx');
|
2017-04-06 10:40:46 -04:00
|
|
|
|
|
|
|
require('./download.scss');
|
2017-05-03 16:19:56 -04:00
|
|
|
require('../../components/forms/button.scss');
|
2017-04-01 10:55:47 -04:00
|
|
|
|
2018-01-30 11:53:12 -05:00
|
|
|
class Download extends React.Component {
|
|
|
|
constructor (props) {
|
|
|
|
super(props);
|
2018-12-10 17:33:22 -05:00
|
|
|
bindAll(this, [
|
2018-12-10 18:09:36 -05:00
|
|
|
'onSetOS'
|
|
|
|
]);
|
2018-12-10 17:33:22 -05:00
|
|
|
let detectedOS = OS_ENUM.WINDOWS;
|
|
|
|
if (window.navigator && window.navigator.platform) {
|
|
|
|
if (window.navigator.platform === 'MacIntel') {
|
|
|
|
detectedOS = OS_ENUM.MACOS;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-01-30 11:53:12 -05:00
|
|
|
this.state = {
|
2018-12-10 17:33:22 -05:00
|
|
|
OS: detectedOS
|
2017-06-16 10:11:58 -04:00
|
|
|
};
|
2018-01-30 11:53:12 -05:00
|
|
|
}
|
2017-06-16 10:11:58 -04:00
|
|
|
|
2018-12-10 17:33:22 -05:00
|
|
|
onSetOS (os) {
|
|
|
|
this.setState({
|
|
|
|
OS: os
|
2018-01-30 11:53:12 -05:00
|
|
|
});
|
|
|
|
}
|
2017-06-16 10:11:58 -04:00
|
|
|
|
2018-12-10 17:33:22 -05:00
|
|
|
render () {
|
2017-04-01 10:55:47 -04:00
|
|
|
return (
|
|
|
|
<div className="download">
|
2018-12-10 17:33:22 -05:00
|
|
|
<div className="download-header">
|
|
|
|
<FlexRow className="inner">
|
|
|
|
<FlexRow className="column download-info">
|
|
|
|
<FlexRow className="column download-copy">
|
2018-12-11 10:11:06 -05:00
|
|
|
<h1 className="download-title">
|
|
|
|
<img
|
|
|
|
alt=""
|
|
|
|
className="self-center"
|
|
|
|
height="40"
|
|
|
|
src="/images/download/placeholder.png"
|
|
|
|
width="40"
|
|
|
|
/>
|
|
|
|
<FormattedMessage id="download.title" />
|
2018-12-10 17:33:22 -05:00
|
|
|
</h1>
|
2018-12-10 19:34:23 -05:00
|
|
|
<span className="download-description">
|
|
|
|
<FormattedMessage id="download.intro" />
|
|
|
|
</span>
|
2018-12-10 17:33:22 -05:00
|
|
|
</FlexRow>
|
|
|
|
<FlexRow className="column download-requirements-container">
|
|
|
|
<span className="requirements-header">
|
|
|
|
<FormattedMessage id="download.requirements" />
|
|
|
|
</span>
|
|
|
|
<FlexRow className="download-requirements">
|
|
|
|
<span>
|
|
|
|
<img
|
|
|
|
alt=""
|
|
|
|
src="/svgs/extensions/windows.svg"
|
|
|
|
/>
|
|
|
|
Windows 10+
|
|
|
|
</span>
|
|
|
|
<span>
|
|
|
|
<img
|
|
|
|
alt=""
|
|
|
|
src="svgs/extensions/mac.svg"
|
|
|
|
/>
|
|
|
|
macOS 10.13+
|
|
|
|
</span>
|
|
|
|
</FlexRow>
|
2017-06-23 09:23:24 -04:00
|
|
|
</FlexRow>
|
2018-12-10 17:33:22 -05:00
|
|
|
</FlexRow>
|
|
|
|
<div className="download-image">
|
|
|
|
<img
|
|
|
|
alt={this.props.intl.formatMessage({id: 'download.imgAltDownloadIllustration'})}
|
|
|
|
src="/images/download/download.png"
|
|
|
|
/>
|
2017-06-23 09:23:24 -04:00
|
|
|
</div>
|
2018-12-10 17:33:22 -05:00
|
|
|
</FlexRow>
|
|
|
|
</div>
|
|
|
|
<OSChooser
|
|
|
|
currentOS={this.state.OS}
|
|
|
|
handleSetOS={this.onSetOS}
|
|
|
|
/>
|
|
|
|
<div className="blue install-scratch">
|
|
|
|
<FlexRow className="inner column">
|
2018-12-10 19:34:23 -05:00
|
|
|
<h2 className="title">
|
2018-12-10 18:49:03 -05:00
|
|
|
<FormattedMessage id="download.installHeaderTitle" />
|
|
|
|
</h2>
|
2018-12-10 17:33:22 -05:00
|
|
|
<Steps>
|
|
|
|
<div className="step">
|
|
|
|
<Step
|
|
|
|
compact
|
|
|
|
number={1}
|
|
|
|
>
|
|
|
|
<span className="step-description">
|
|
|
|
<FormattedMessage id="download.downloadAndInstall" />
|
|
|
|
</span>
|
|
|
|
<div className="downloads-container">
|
|
|
|
<a
|
|
|
|
href={
|
|
|
|
this.state.OS === OS_ENUM.WINDOWS ?
|
|
|
|
'FILL ME IN' :
|
|
|
|
''
|
|
|
|
}
|
|
|
|
target="_blank"
|
|
|
|
>
|
|
|
|
<img
|
|
|
|
alt=""
|
|
|
|
className="store-badge"
|
|
|
|
src={`/images/scratchlink/${
|
|
|
|
this.state.OS === OS_ENUM.WINDOWS ? 'windows' : 'mac'
|
|
|
|
}-store-badge.svg`}
|
|
|
|
/>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</Step>
|
2017-05-20 00:24:18 -04:00
|
|
|
|
2018-12-10 17:33:22 -05:00
|
|
|
</div>
|
|
|
|
<Step
|
|
|
|
compact
|
|
|
|
number={2}
|
2018-01-30 11:53:12 -05:00
|
|
|
>
|
2018-12-10 17:33:22 -05:00
|
|
|
<span className="step-description">
|
2018-12-10 18:09:36 -05:00
|
|
|
<FormattedMessage id="download.startScratchDesktop" />
|
2018-12-10 17:33:22 -05:00
|
|
|
</span>
|
|
|
|
<div className="step-image">
|
|
|
|
<img
|
|
|
|
alt=""
|
|
|
|
className="screenshot"
|
|
|
|
src={`/images/scratchlink/${
|
|
|
|
this.state.OS === OS_ENUM.WINDOWS ? 'windows' : 'mac'
|
|
|
|
}-toolbar.png`}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</Step>
|
|
|
|
</Steps>
|
|
|
|
</FlexRow>
|
|
|
|
</div>
|
|
|
|
<div className="download-section faq">
|
|
|
|
<FlexRow className="inner column">
|
2018-12-11 10:11:06 -05:00
|
|
|
<h2 className="title">
|
2018-12-10 19:34:23 -05:00
|
|
|
<FormattedMessage id="download.troubleshootingTitle" />
|
|
|
|
</h2>
|
2018-12-10 18:09:36 -05:00
|
|
|
|
2018-12-10 19:34:23 -05:00
|
|
|
<h3 className="faq-question">
|
2018-12-10 18:09:36 -05:00
|
|
|
<FormattedMessage id="download.howDoIInstall" />
|
|
|
|
</h3>
|
|
|
|
<p>
|
|
|
|
You will need to install lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
|
|
</p>
|
|
|
|
|
2018-12-10 19:34:23 -05:00
|
|
|
<h3 className="faq-question">
|
2018-12-10 18:09:36 -05:00
|
|
|
<FormattedMessage id="download.whenSupportLinux" />
|
|
|
|
</h3>
|
|
|
|
<p>
|
|
|
|
<FormattedMessage id="download.supportLinuxAnswer" />
|
|
|
|
</p>
|
|
|
|
|
2018-12-10 19:34:23 -05:00
|
|
|
<h3 className="faq-question">
|
2018-12-10 18:09:36 -05:00
|
|
|
<FormattedMessage id="download.supportChromeOS" />
|
|
|
|
</h3>
|
2018-12-10 17:33:22 -05:00
|
|
|
<p>
|
2018-12-10 18:09:36 -05:00
|
|
|
<FormattedMessage id="download.supportChromeOSAnswer" />
|
2018-12-10 17:33:22 -05:00
|
|
|
</p>
|
2018-12-10 18:09:36 -05:00
|
|
|
|
2018-12-10 19:34:23 -05:00
|
|
|
<h3 className="faq-question">
|
2018-12-10 18:35:17 -05:00
|
|
|
{ this.state.OS === OS_ENUM.WINDOWS ?
|
|
|
|
<FormattedMessage id="download.cannotAccessWindowsStore" /> :
|
|
|
|
<FormattedMessage id="download.cannotAccessMacStore" />
|
|
|
|
}
|
2018-12-10 18:09:36 -05:00
|
|
|
</h3>
|
2018-12-10 17:33:22 -05:00
|
|
|
<p>
|
2018-12-10 18:35:17 -05:00
|
|
|
<FormattedMessage
|
|
|
|
id="download.appstoreAccessAnswer"
|
|
|
|
values={{
|
|
|
|
directDownloadLink: (
|
|
|
|
<a href="">
|
|
|
|
<FormattedMessage id="download.directDownloadText" />
|
|
|
|
</a>
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
/>
|
2018-12-10 17:33:22 -05:00
|
|
|
</p>
|
|
|
|
</FlexRow>
|
|
|
|
</div>
|
|
|
|
<div className="download-section blue">
|
|
|
|
<FlexRow className="inner column">
|
2018-12-11 10:11:06 -05:00
|
|
|
<h2 className="title">
|
2018-12-10 18:09:36 -05:00
|
|
|
<FormattedMessage id="download.olderVersionsTitle" />
|
|
|
|
</h2>
|
2018-12-10 19:34:23 -05:00
|
|
|
<h3 className="faq-question">
|
2018-12-10 18:09:36 -05:00
|
|
|
<FormattedMessage id="download.olderVersions" />
|
|
|
|
</h3>
|
2018-12-10 17:33:22 -05:00
|
|
|
<FlexRow>
|
|
|
|
<div className="older-version">
|
|
|
|
<img
|
|
|
|
alt=""
|
|
|
|
className="screenshot"
|
|
|
|
height="106"
|
|
|
|
src="/images/download/scratch1-4.png"
|
|
|
|
width="150"
|
|
|
|
/>
|
|
|
|
<p>
|
2018-12-11 11:26:53 -05:00
|
|
|
<a
|
|
|
|
className="centered"
|
|
|
|
href="/scratch_1.4"
|
|
|
|
>
|
2018-12-10 18:09:36 -05:00
|
|
|
<FormattedMessage id="download.scratch1-4Desktop" />
|
2018-12-10 17:33:22 -05:00
|
|
|
<img src="images/download/r-arrow.svg" />
|
|
|
|
</a>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div className="older-version">
|
|
|
|
<img
|
|
|
|
alt=""
|
|
|
|
className="screenshot"
|
|
|
|
height="106"
|
|
|
|
src="/images/download/scratch2.png"
|
|
|
|
width="150"
|
|
|
|
/>
|
|
|
|
<p>
|
2018-12-11 11:26:53 -05:00
|
|
|
<a
|
|
|
|
className="centered"
|
|
|
|
href="/download/scratch2"
|
|
|
|
>
|
2018-12-10 17:33:22 -05:00
|
|
|
<FormattedMessage id="download.scratch2Desktop" />
|
|
|
|
<img src="images/download/r-arrow.svg" />
|
|
|
|
</a>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</FlexRow>
|
|
|
|
</FlexRow>
|
2017-04-01 10:55:47 -04:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
2018-12-10 17:33:22 -05:00
|
|
|
|
2017-04-01 10:55:47 -04:00
|
|
|
}
|
2018-01-30 11:53:12 -05:00
|
|
|
}
|
|
|
|
Download.propTypes = {
|
|
|
|
intl: intlShape
|
2018-12-10 17:33:22 -05:00
|
|
|
|
2018-01-30 11:53:12 -05:00
|
|
|
};
|
|
|
|
|
|
|
|
const WrappedDownload = injectIntl(Download);
|
2017-04-01 10:55:47 -04:00
|
|
|
|
2018-01-30 11:53:12 -05:00
|
|
|
render(<Page><WrappedDownload /></Page>, document.getElementById('app'));
|