Merge remote-tracking branch 'upstream/master' into fix/issue-110-update-mapbox-style-spec

src/components/modals/OpenModal.jsx

@@ -46,7 +46,20 @@ class OpenModal extends React.Component {
     onStyleOpen: React.PropTypes.func.isRequired,
   }
 
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  clearError() {
+    this.setState({
+      error: null
+    })
+  }
+
   onStyleSelect(styleUrl) {
+    this.clearError();
+
     request({
       url: styleUrl,
       withCredentials: false,
@@ -64,15 +77,32 @@ class OpenModal extends React.Component {
   onUpload(_, files) {
     const [e, file] = files[0];
     const reader = new FileReader();
+
+    this.clearError();
+
     reader.readAsText(file, "UTF-8");
     reader.onload = e => {
-      let mapStyle = JSON.parse(e.target.result)
+      let mapStyle;
+      try {
+        mapStyle = JSON.parse(e.target.result)
+      }
+      catch(err) {
+        this.setState({
+          error: err.toString()
+        });
+        return;
+      }
       mapStyle = style.ensureStyleValidity(mapStyle)
       this.props.onStyleOpen(mapStyle);
     }
     reader.onerror = e => console.log(e.target);
   }
 
+  onOpenToggle() {
+    this.clearError();
+    this.props.onOpenToggle();
+  }
+
   render() {
     const styleOptions = publicStyles.map(style => {
       return <PublicStyle
@@ -84,11 +114,22 @@ class OpenModal extends React.Component {
       />
     })
 
+    let errorElement;
+    if(this.state.error) {
+      errorElement = (
+        <div className="maputnik-modal-error">
+          {this.state.error}
+          <a href="#" onClick={() => this.clearError()} className="maputnik-modal-error-close">×</a>
+        </div>
+      );
+    }
+
     return <Modal
       isOpen={this.props.isOpen}
-      onOpenToggle={this.props.onOpenToggle}
+      onOpenToggle={() => this.onOpenToggle()}
       title={'Open Style'}
     >
+      {errorElement}
       <section className="maputnik-modal-section">
         <h2>Upload Style</h2>
         <p>Upload a JSON style from your computer.</p>
@@ -96,7 +137,7 @@ class OpenModal extends React.Component {
           <Button className="maputnik-upload-button"><FileUploadIcon /> Upload</Button>
         </FileReaderInput>
       </section>
-      <section className="maputnik-modal-section">
+      <section className="maputnik-modal-section maputnik-modal-section--shrink">
         <h2>Gallery Styles</h2>
         <p>
           Open one of the publicly available styles to start from.

src/libs/style.js

@@ -70,7 +70,7 @@ function replaceAccessToken(mapStyle) {
   }
   const changedStyle = {
     ...mapStyle,
-    glyphs: mapStyle.glyphs.replace('{key}', accessToken),
+    glyphs: mapStyle.glyphs ? mapStyle.glyphs.replace('{key}', accessToken) : mapStyle.glyphs,
     sources: changedSources
   }
 

src/styles/_components.scss

@@ -34,7 +34,7 @@
     top: 20px;
     left: 0;
     width: 120px;
-    z-index: 3;
+    z-index: 10;
   }
 }
 

src/styles/_layout.scss

@@ -22,7 +22,6 @@
     left: 0;
     z-index: 3;
     width: 200px;
-    overflow: hidden;
     background-color: $color-black;
   }
 

src/styles/_mixins.scss

@@ -12,3 +12,10 @@
 
   @include vendor-prefix(flex-direction, row);
 }
+
+@mixin flex-column {
+  display: flex;
+  display: -ms-flexbox;
+
+  @include vendor-prefix(flex-direction, column);
+}

src/styles/_modal.scss

@@ -10,6 +10,17 @@
 .maputnik-modal-section {
   padding-top: $margin-3;
   padding-bottom: $margin-3;
+
+  /* Bug fix: <http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox> */
+  min-height: 0;
+
+  @include flex-column;
+
+  flex-shrink: 0;
+}
+
+.maputnik-modal-section--shrink {
+  flex-shrink: 1;
 }
 
 .maputnik-modal-header {
@@ -30,6 +41,9 @@
 
 .maputnik-modal-content {
   padding: $margin-3;
+  max-height: 90vh;
+
+  @include flex-column;
 }
 
 .maputnik-modal-header-space {
@@ -66,8 +80,8 @@
 }
 
 .maputnik-style-gallery-container {
-  max-height: 400px;
   overflow-y: scroll;
+  flex-shrink: 1;
 }
 
 .maputnik-public-style {
@@ -199,3 +213,19 @@
     color: $color-lowgray;
   }
 }
+
+.maputnik-modal-error {
+  border: solid 2px #ef5350;
+  color: #ef5350;
+  padding: 8px;
+  padding-right: 32px;
+  position: relative;
+}
+
+.maputnik-modal-error-close {
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  text-decoration: none;
+  color: #ef5350;
+}