From fab004cdfe4de1446074fd60e50b1d775a8d26d7 Mon Sep 17 00:00:00 2001
From: jirik <jiri.kozel.cz@gmail.com>
Date: Mon, 16 Jan 2017 13:31:02 +0100
Subject: [PATCH 1/5] StringInput fires change if state and props values do not
 match

Now it is also possible to call onChange listener if new value is empty string
---
 src/components/inputs/StringInput.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/inputs/StringInput.jsx b/src/components/inputs/StringInput.jsx
index f9fb56e4..34a550a3 100644
--- a/src/components/inputs/StringInput.jsx
+++ b/src/components/inputs/StringInput.jsx
@@ -27,7 +27,7 @@ class StringInput extends React.Component {
       placeholder={this.props.default}
       onChange={e => this.setState({ value: e.target.value })}
       onBlur={() => {
-        if(this.state.value) this.props.onChange(this.state.value)
+        if(this.state.value!==this.props.value) this.props.onChange(this.state.value)
       }}
     />
   }

From 3b7fb7ae75c88f22bd0489a00d6fd5261618ebee Mon Sep 17 00:00:00 2001
From: jirik <jiri.kozel.cz@gmail.com>
Date: Mon, 16 Jan 2017 14:58:53 +0100
Subject: [PATCH 2/5] Fix checkbox not showing status

---
 src/components/inputs/CheckboxInput.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/inputs/CheckboxInput.jsx b/src/components/inputs/CheckboxInput.jsx
index e5d661a5..cfe5b3d1 100644
--- a/src/components/inputs/CheckboxInput.jsx
+++ b/src/components/inputs/CheckboxInput.jsx
@@ -17,7 +17,9 @@ class CheckboxInput extends React.Component {
         checked={this.props.value}
       />
       <div className="maputnik-checkbox-box">
-        <svg className="maputnik-checkbox-icon" viewBox='0 0 32 32'>
+        <svg style={{
+            display: this.props.value ? 'inline' : 'none'
+          }} className="maputnik-checkbox-icon" viewBox='0 0 32 32'>
           <path d='M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z' />
         </svg>
       </div>

From e3b7e002b4cd77387042342b9a29e3294c51f9da Mon Sep 17 00:00:00 2001
From: jirik <jiri.kozel.cz@gmail.com>
Date: Mon, 16 Jan 2017 15:01:21 +0100
Subject: [PATCH 3/5] Hypertext links are white instead of blue

---
 src/styles/_base.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/styles/_base.scss b/src/styles/_base.scss
index 0261d8e3..b3273d4e 100644
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -72,3 +72,7 @@ label:hover {
     clear: both;
   }
 }
+
+a {
+  color: white;
+}

From 7e3aa09d3edf4bd9c894b4f56ce353838496bcfc Mon Sep 17 00:00:00 2001
From: jirik <jiri.kozel.cz@gmail.com>
Date: Mon, 16 Jan 2017 15:07:41 +0100
Subject: [PATCH 4/5] Proview & Access Token logic when saving to Gist

---
 src/components/Toolbar.jsx            |   1 +
 src/components/modals/ExportModal.jsx | 106 +++++++++++++++++++++-----
 src/styles/_export.scss               |   5 ++
 src/styles/index.scss                 |   1 +
 4 files changed, 95 insertions(+), 18 deletions(-)
 create mode 100644 src/styles/_export.scss

diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
index 46ae0679..bcb60f8d 100644
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@@ -91,6 +91,7 @@ export default class Toolbar extends React.Component {
       />
       <ExportModal
         mapStyle={this.props.mapStyle}
+        onStyleChanged={this.props.onStyleChanged}
         isOpen={this.state.isOpen.export}
         onOpenToggle={this.toggleModal.bind(this, 'export')}
       />
diff --git a/src/components/modals/ExportModal.jsx b/src/components/modals/ExportModal.jsx
index 17dec43f..f342506f 100644
--- a/src/components/modals/ExportModal.jsx
+++ b/src/components/modals/ExportModal.jsx
@@ -5,9 +5,11 @@ import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
+import CheckboxInput from '../inputs/CheckboxInput'
 import Button from '../Button'
 import Modal from './Modal'
 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 GitHub from 'github-api'
 
@@ -15,18 +17,35 @@ import GitHub from 'github-api'
 class Gist extends React.Component {
   static propTypes = {
     mapStyle: React.PropTypes.object.isRequired,
+    onStyleChanged: React.PropTypes.func.isRequired,
   }
 
   constructor(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() {
     this.setState({
+      ...this.state,
       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 htmlStr = `
   <!DOCTYPE html>
@@ -56,49 +75,99 @@ class Gist extends React.Component {
   </body>
   </html>
 `
+    const files = {
+      "style.json": {
+        content: mapStyleStr
+      }
+    }
+    if(preview) {
+      files["index.html"] = {
+        content: htmlStr
+      }
+    }
     const gh = new GitHub();
     let gist = gh.getGist(); // not a gist yet
     gist.create({
       public: true,
-      description: styleTitle + 'Preview',
-      files: {
-        "style.json": {
-          content: mapStyleStr
-        },
-        "index.html": {
-          content: htmlStr
-        }
-      }
+      description: styleTitle,
+      files: files
     }).then(function({data}) {
       return gist.read();
     }).then(function({data}) {
       this.setState({
-        latestGist: data
+        ...this.state,
+        latestGist: data,
+        saving: false,
       });
     }.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() {
     const gist = this.state.latestGist;
     const saving = this.state.saving;
-    if(gist) {
+    if(saving) {
+      return <p>Saving...</p>
+    } else if(gist) {
       const user = gist.user || 'anonymous';
       return <p>
         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>
       </p>
-    } else if(saving) {
-      return <p>Saving...</p>
     }
   }
 
   render() {
-    return <div>
+    return <div className="maputnik-export-gist">
       <Button onClick={this.onSave.bind(this)}>
         <MdFileDownload />
         Save to Gist (anonymous)
       </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()}
     </div>
   }
@@ -117,6 +186,7 @@ function stripAccessTokens(mapStyle) {
 class ExportModal extends React.Component {
   static propTypes = {
     mapStyle: React.PropTypes.object.isRequired,
+    onStyleChanged: React.PropTypes.func.isRequired,
     isOpen: React.PropTypes.bool.isRequired,
     onOpenToggle: React.PropTypes.func.isRequired,
   }
@@ -150,7 +220,7 @@ class ExportModal extends React.Component {
 
       <div className="maputnik-modal-section">
         <h4>Save style</h4>
-        <Gist mapStyle={this.props.mapStyle} />
+        <Gist mapStyle={this.props.mapStyle} onStyleChanged={this.props.onStyleChanged}/>
       </div>
     </Modal>
   }
diff --git a/src/styles/_export.scss b/src/styles/_export.scss
new file mode 100644
index 00000000..8cace42a
--- /dev/null
+++ b/src/styles/_export.scss
@@ -0,0 +1,5 @@
+.maputnik-export-gist {
+  label.maputnik-checkbox-wrapper {
+    display: inline-block;
+  }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 8b7e47ae..5bcb541c 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -27,6 +27,7 @@ $toolbar-height: 40px;
 @import 'picker';
 @import 'toolbar';
 @import 'modal';
+@import 'export';
 @import 'layout';
 @import 'layer';
 @import 'input';

From 11e9cef8349e88dbaa7851d034750a8e653ec3be Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Mon, 16 Jan 2017 15:43:52 +0100
Subject: [PATCH 5/5] Improve styles and text

---
 src/components/modals/ExportModal.jsx |  5 +++--
 src/styles/_modal.scss                | 16 ++++++++++++++++
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/modals/ExportModal.jsx b/src/components/modals/ExportModal.jsx
index f342506f..86b75d85 100644
--- a/src/components/modals/ExportModal.jsx
+++ b/src/components/modals/ExportModal.jsx
@@ -156,7 +156,8 @@ class Gist extends React.Component {
         value={this.state.preview}
         name='gist-style-preview'
         onChange={this.onPreviewChange.bind(this)}
-      /> including preview
+      />
+      <span> Include preview</span>
       {this.state.preview ?
           <div>
             <InputBlock
@@ -165,7 +166,7 @@ class Gist extends React.Component {
                   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>
+            <a target="_blank" href="https://openmaptiles.com/hosting/">Get your free access token</a>
           </div>
       : null}
       {this.renderLatestGist()}
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 58e54bbb..ccbb214c 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -181,3 +181,19 @@
   margin-right: $margin-3;
   float: right;
 }
+
+//EXPORT MODAL
+.maputnik-export-gist {
+  .maputnik-input-block {
+    margin-left: 0;
+    margin-right: 0;
+
+    label {
+      vertical-align: middle;
+    }
+  }
+  font-size: $font-size-6;
+  span {
+    color: $color-lowgray;
+  }
+}