schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-29 08:50:27 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Proview & Access Token logic when saving to Gist

Browse source
This commit is contained in:
jirik 2017-01-16 15:07:41 +01:00
parent e3b7e002b4
commit 7e3aa09d3e
4 changed files with 95 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/Toolbar.jsx
View file

@ -91,6 +91,7 @@ export default class Toolbar extends React.Component {
/> />
<ExportModal <ExportModal
mapStyle={this.props.mapStyle} mapStyle={this.props.mapStyle}
onStyleChanged={this.props.onStyleChanged}
isOpen={this.state.isOpen.export} isOpen={this.state.isOpen.export}
onOpenToggle={this.toggleModal.bind(this, 'export')} onOpenToggle={this.toggleModal.bind(this, 'export')}
/> />

106
src/components/modals/ExportModal.jsx
View file

@ -5,9 +5,11 @@ import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
import InputBlock from '../inputs/InputBlock' import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput' import StringInput from '../inputs/StringInput'
import SelectInput from '../inputs/SelectInput' import SelectInput from '../inputs/SelectInput'
import CheckboxInput from '../inputs/CheckboxInput'
import Button from '../Button' import Button from '../Button'
import Modal from './Modal' import Modal from './Modal'
import MdFileDownload from 'react-icons/lib/md/file-download' import MdFileDownload from 'react-icons/lib/md/file-download'
import style from '../../libs/style.js'
import formatStyle from 'mapbox-gl-style-spec/lib/format' import formatStyle from 'mapbox-gl-style-spec/lib/format'
import GitHub from 'github-api' import GitHub from 'github-api'
@ -15,18 +17,35 @@ import GitHub from 'github-api'
class Gist extends React.Component { class Gist extends React.Component {
static propTypes = { static propTypes = {
mapStyle: React.PropTypes.object.isRequired, mapStyle: React.PropTypes.object.isRequired,
onStyleChanged: React.PropTypes.func.isRequired,
} }
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {} this.state = {
preview: false,
saving: false,
latestGist: null,
}
}
componentWillReceiveProps(nextProps) {
this.setState({
...this.state,
preview: !!nextProps.mapStyle.metadata['maputnik:openmaptiles_access_token']
})
} }
onSave() { onSave() {
this.setState({ this.setState({
...this.state,
saving: true saving: true
}); });
const mapStyleStr = formatStyle(this.props.mapStyle); const preview = this.state.preview && this.props.mapStyle.metadata['maputnik:openmaptiles_access_token'];
const mapStyleStr = preview ?
formatStyle(stripAccessTokens(style.replaceAccessToken(this.props.mapStyle))) :
formatStyle(stripAccessTokens(this.props.mapStyle));
const styleTitle = this.props.mapStyle.name || 'Style'; const styleTitle = this.props.mapStyle.name || 'Style';
const htmlStr = ` const htmlStr = `
<!DOCTYPE html> <!DOCTYPE html>
@ -56,49 +75,99 @@ class Gist extends React.Component {
</body> </body>
</html> </html>
` `
const files = {
"style.json": {
content: mapStyleStr
}
}
if(preview) {
files["index.html"] = {
content: htmlStr
}
}
const gh = new GitHub(); const gh = new GitHub();
let gist = gh.getGist(); // not a gist yet let gist = gh.getGist(); // not a gist yet
gist.create({ gist.create({
public: true, public: true,
description: styleTitle + 'Preview', description: styleTitle,
files: { files: files
"style.json": {
content: mapStyleStr
},
"index.html": {
content: htmlStr
}
}
}).then(function({data}) { }).then(function({data}) {
return gist.read(); return gist.read();
}).then(function({data}) { }).then(function({data}) {
this.setState({ this.setState({
latestGist: data ...this.state,
latestGist: data,
saving: false,
}); });
}.bind(this)); }.bind(this));
} }
onPreviewChange(value) {
this.setState({
...this.state,
preview: value
})
}
changeMetadataProperty(property, value) {
const changedStyle = {
...this.props.mapStyle,
metadata: {
...this.props.mapStyle.metadata,
[property]: value
}
}
this.props.onStyleChanged(changedStyle)
}
renderPreviewLink() {
const gist = this.state.latestGist;
const user = gist.user || 'anonymous';
const preview = !!gist.files['index.html'];
if(preview) {
return <span><a target="_blank" href={"https://bl.ocks.org/"+user+"/"+gist.id}>Preview</a>,{' '}</span>
}
return null;
}
renderLatestGist() { renderLatestGist() {
const gist = this.state.latestGist; const gist = this.state.latestGist;
const saving = this.state.saving; const saving = this.state.saving;
if(gist) { if(saving) {
return <p>Saving...</p>
} else if(gist) {
const user = gist.user || 'anonymous'; const user = gist.user || 'anonymous';
return <p> return <p>
Latest saved gist:{' '} Latest saved gist:{' '}
<a target="_blank" href={"https://bl.ocks.org/"+user+"/"+gist.id}>Preview</a>,{' '} {this.renderPreviewLink(this)}
<a target="_blank" href={"https://gist.github.com/"+user+"/"+gist.id}>Source</a> <a target="_blank" href={"https://gist.github.com/"+user+"/"+gist.id}>Source</a>
</p> </p>
} else if(saving) {
return <p>Saving...</p>
} }
} }
render() { render() {
return <div> return <div className="maputnik-export-gist">
<Button onClick={this.onSave.bind(this)}> <Button onClick={this.onSave.bind(this)}>
<MdFileDownload /> <MdFileDownload />
Save to Gist (anonymous) Save to Gist (anonymous)
</Button> </Button>
{' '}
<CheckboxInput
value={this.state.preview}
name='gist-style-preview'
onChange={this.onPreviewChange.bind(this)}
/> including preview
{this.state.preview ?
<div>
<InputBlock
label={"OpenMapTiles Access Token: "}>
<StringInput
value={this.props.mapStyle.metadata['maputnik:openmaptiles_access_token']}
onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}/>
</InputBlock>
<a target="_blank" href="https://openmaptiles.com/hosting/">Get access token for free</a>
</div>
: null}
{this.renderLatestGist()} {this.renderLatestGist()}
</div> </div>
} }
@ -117,6 +186,7 @@ function stripAccessTokens(mapStyle) {
class ExportModal extends React.Component { class ExportModal extends React.Component {
static propTypes = { static propTypes = {
mapStyle: React.PropTypes.object.isRequired, mapStyle: React.PropTypes.object.isRequired,
onStyleChanged: React.PropTypes.func.isRequired,
isOpen: React.PropTypes.bool.isRequired, isOpen: React.PropTypes.bool.isRequired,
onOpenToggle: React.PropTypes.func.isRequired, onOpenToggle: React.PropTypes.func.isRequired,
} }
@ -150,7 +220,7 @@ class ExportModal extends React.Component {
<div className="maputnik-modal-section"> <div className="maputnik-modal-section">
<h4>Save style</h4> <h4>Save style</h4>
<Gist mapStyle={this.props.mapStyle} /> <Gist mapStyle={this.props.mapStyle} onStyleChanged={this.props.onStyleChanged}/>
</div> </div>
</Modal> </Modal>
} }

5
src/styles/_export.scss Normal file
View file

@ -0,0 +1,5 @@
.maputnik-export-gist {
label.maputnik-checkbox-wrapper {
display: inline-block;
}
}

1
src/styles/index.scss
View file

@ -27,6 +27,7 @@ $toolbar-height: 40px;
@import 'picker'; @import 'picker';
@import 'toolbar'; @import 'toolbar';
@import 'modal'; @import 'modal';
@import 'export';
@import 'layout'; @import 'layout';
@import 'layer'; @import 'layer';
@import 'input'; @import 'input';