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

Add share style link, copy button

Browse source 
This adds a copy to clipboard button and input with the style parameter
pre-populated after exporting a style to an anonymous gist. Also
includes the URL as an input next to the button.
This commit is contained in:
pjsier 2017-10-15 19:59:06 -05:00
parent 36def799c0
commit cda855f1b7
3 changed files with 30 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -44,6 +44,7 @@
"react-codemirror": "^0.3.0", "react-codemirror": "^0.3.0",
"react-collapse": "^4.0.3", "react-collapse": "^4.0.3",
"react-color": "^2.10.0", "react-color": "^2.10.0",
"react-copy-to-clipboard": "^5.0.1",
"react-dom": "^15.4.0", "react-dom": "^15.4.0",
"react-file-reader-input": "^1.1.0", "react-file-reader-input": "^1.1.0",
"react-height": "^3.0.0", "react-height": "^3.0.0",

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

@ -9,8 +9,10 @@ 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 TiClipboard from 'react-icons/lib/ti/clipboard'
import style from '../../libs/style.js' import style from '../../libs/style.js'
import GitHub from 'github-api' import GitHub from 'github-api'
import { CopyToClipboard } from 'react-copy-to-clipboard'
class Gist extends React.Component { class Gist extends React.Component {
@ -136,11 +138,21 @@ class Gist extends React.Component {
return <p>Saving...</p> return <p>Saving...</p>
} else if(gist) { } else if(gist) {
const user = gist.user || 'anonymous'; const user = gist.user || 'anonymous';
return <p> const rawGistLink = "https://gist.githubusercontent.com/" + user + "/" + gist.id + "/raw/" + gist.history[0].version + "/style.json"
Latest saved gist:{' '} const maputnikStyleLink = "https://maputnik.github.io/editor/?style=" + rawGistLink
{this.renderPreviewLink(this)} return <div className="maputnik-render-gist">
<a target="_blank" href={"https://gist.github.com/"+user+"/"+gist.id}>Source</a> <p>
</p> Latest saved gist:{' '}
{this.renderPreviewLink(this)}
<a target="_blank" href={"https://gist.github.com/" + user + "/" + gist.id}>Source</a>
</p>
<p>
<CopyToClipboard text={maputnikStyleLink}>
<span>Share this style: <Button><TiClipboard size={18} /></Button></span>
</CopyToClipboard>
<StringInput value={maputnikStyleLink} />
</p>
</div>
} }
} }

12
src/styles/_export.scss
View file

@ -3,3 +3,15 @@
display: inline-block; display: inline-block;
} }
} }
.maputnik-render-gist {
p {
margin: 10px 0;
}
input.maputnik-string {
margin-left: 5px;
width: 60%;
display: inline-block;
}
}