From 06e1be716eb6328c3c6a5671cf1d796a661d0dae Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 16 Oct 2017 09:34:05 +0100
Subject: [PATCH 01/10] Changed link from maputnik.com -> maputnik.github.io

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 27f86ac..10eb62f 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 A free and open visual editor for the [Mapbox GL styles](https://www.mapbox.com/mapbox-gl-style-spec/)
 targeted at developers and map designers.
 
-- :link: Design your maps online at **http://maputnik.com/editor/** (all in local storage)
+- :link: Design your maps online at **<https://maputnik.github.io/editor/>** (all in local storage)
 - :link: Use the [Maputnik CLI](https://github.com/maputnik/editor/wiki/Maputnik-CLI) for local style development
 
 Mapbox has built one of the best and most amazing OSS ecosystems. A key component to ensure its longevity and independance is an OSS map designer.

From 3f350c30da0791f542909f665f381e509e68c6c1 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 16 Oct 2017 15:01:35 +0100
Subject: [PATCH 02/10] Added rel="noopener noreferrer" to external links.

---
 src/components/Toolbar.jsx            | 3 ++-
 src/components/modals/ExportModal.jsx | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
index 9bf7ad6..81550b5 100644
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@@ -32,7 +32,8 @@ function ToolbarLink(props) {
   return <a
     className={classnames('maputnik-toolbar-link', props.className)}
     href={props.href}
-    target={"blank"}
+    rel="noopener noreferrer"
+    target={"_blank"}
   >
     {props.children}
   </a>
diff --git a/src/components/modals/ExportModal.jsx b/src/components/modals/ExportModal.jsx
index fd00a6f..d711d7e 100644
--- a/src/components/modals/ExportModal.jsx
+++ b/src/components/modals/ExportModal.jsx
@@ -126,7 +126,7 @@ class Gist extends React.Component {
     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 <span><a target="_blank" rel="noopener noreferrer" href={"https://bl.ocks.org/"+user+"/"+gist.id}>Preview</a>,{' '}</span>
     }
     return null;
   }
@@ -144,7 +144,7 @@ class Gist extends React.Component {
         <p>
           Latest saved gist:{' '}
           {this.renderPreviewLink(this)}
-          <a target="_blank" href={"https://gist.github.com/" + user + "/" + gist.id}>Source</a>
+          <a target="_blank" rel="noopener noreferrer" href={"https://gist.github.com/" + user + "/" + gist.id}>Source</a>
         </p>
         <p>
           <CopyToClipboard text={maputnikStyleLink}>
@@ -177,7 +177,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 your free access token</a>
+            <a target="_blank" rel="noopener noreferrer" href="https://openmaptiles.com/hosting/">Get your free access token</a>
           </div>
       : null}
       {this.renderLatestGist()}

From c38547d4e7e8aa03450d6bea86bd4ac3e75e9547 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 16 Oct 2017 15:18:29 +0100
Subject: [PATCH 03/10] Removed {} from props.

---
 src/components/Toolbar.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
index 81550b5..40235fc 100644
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@@ -33,7 +33,7 @@ function ToolbarLink(props) {
     className={classnames('maputnik-toolbar-link', props.className)}
     href={props.href}
     rel="noopener noreferrer"
-    target={"_blank"}
+    target="_blank"
   >
     {props.children}
   </a>

From d32b15d42539d9526813fea1a592e1138e3bbe9b Mon Sep 17 00:00:00 2001
From: pjsier <pjsier@gmail.com>
Date: Mon, 16 Oct 2017 14:10:47 -0500
Subject: [PATCH 04/10] Assigning default function type from spec

---
 src/components/fields/FunctionSpecField.jsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/components/fields/FunctionSpecField.jsx b/src/components/fields/FunctionSpecField.jsx
index 2b7383b..e1cc467 100644
--- a/src/components/fields/FunctionSpecField.jsx
+++ b/src/components/fields/FunctionSpecField.jsx
@@ -89,6 +89,16 @@ export default class FunctionSpecProperty  extends React.Component {
     this.props.onChange(this.props.fieldName, zoomFunc)
   }
 
+  getFieldFunctionType(fieldSpec) {
+    if (fieldSpec.function === "interpolated") {
+      return "exponential"
+    }
+    if (fieldSpec.type === "number") {
+      return "interval"
+    }
+    return "categorical"
+  }
+
   getDataFunctionTypes(functionType) {
     if (functionType === "interpolated") {
       return ["categorical", "interval", "exponential"]
@@ -131,6 +141,9 @@ export default class FunctionSpecProperty  extends React.Component {
   }
 
   renderDataProperty() {
+    if (typeof this.props.value.type === "undefined") {
+      this.props.value.type = this.getFieldFunctionType(this.props.fieldSpec)
+    }
     const dataFields = this.props.value.stops.map((stop, idx) => {
       const zoomLevel = stop[0].zoom
       const dataLevel = stop[0].value

From 06ea1d16970735d23fc04167ba5a486b04dd85f4 Mon Sep 17 00:00:00 2001
From: Gregory Wolanski <github.com@gregorywolanski.com>
Date: Thu, 19 Oct 2017 20:41:38 +0200
Subject: [PATCH 05/10] Display zoom level #87

---
 src/components/map/MapboxGlMap.jsx |  4 ++++
 src/libs/zoomcontrol.js            | 26 ++++++++++++++++++++++++++
 src/mapboxgl.css                   |  7 +++++++
 3 files changed, 37 insertions(+)
 create mode 100644 src/libs/zoomcontrol.js

diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx
index 11b5019..3c472f1 100644
--- a/src/components/map/MapboxGlMap.jsx
+++ b/src/components/map/MapboxGlMap.jsx
@@ -8,6 +8,7 @@ import style from '../../libs/style.js'
 import tokens from '../../config/tokens.json'
 import colors from 'mapbox-gl-inspect/lib/colors'
 import Color from 'color'
+import ZoomControl from '../../libs/zoomcontrol'
 import { colorHighlightedLayer } from '../../libs/highlight'
 import 'mapbox-gl/dist/mapbox-gl.css'
 import '../../mapboxgl.css'
@@ -109,6 +110,9 @@ export default class MapboxGlMap extends React.Component {
       hash: true,
     })
 
+    const zoom = new ZoomControl;
+    map.addControl(zoom, 'top-right');
+
     const nav = new MapboxGl.NavigationControl();
     map.addControl(nav, 'top-right');
 
diff --git a/src/libs/zoomcontrol.js b/src/libs/zoomcontrol.js
new file mode 100644
index 0000000..2f7900d
--- /dev/null
+++ b/src/libs/zoomcontrol.js
@@ -0,0 +1,26 @@
+export default class ZoomControl {
+  onAdd(map) {
+    this._map = map;
+    this._container = document.createElement('div');
+    this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group mapboxgl-ctrl-zoom';
+    
+    this.addEventListeners();
+    
+    return this._container;
+  }
+  
+  updateZoomLevel() {
+    this._container.innerHTML = `Zoom level: ${this._map.getZoom().toFixed(2)}`;
+  }
+  
+  addEventListeners (){
+    this._map.on('render', this.updateZoomLevel.bind(this) );
+    this._map.on('zoomIn', this.updateZoomLevel.bind(this) );
+    this._map.on('zoomOut', this.updateZoomLevel.bind(this) );
+  }
+
+  onRemove() {
+    this._container.parentNode.removeChild(this._container);
+    this._map = undefined;
+  }
+}
diff --git a/src/mapboxgl.css b/src/mapboxgl.css
index 5038759..afe45f1 100644
--- a/src/mapboxgl.css
+++ b/src/mapboxgl.css
@@ -25,6 +25,13 @@
   color: white;
 }
 
+.mapboxgl-ctrl-zoom {
+  color: rgb(138, 138, 138);
+  font-weight: bold;
+  padding: 4px 8px;
+  user-select: none;
+}
+
 .mapboxgl-ctrl-group {
   background: rgb(28, 31, 36);
 }

From 1119ff06c9a4c091b7339c2635f17c562cd6719f Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Wed, 1 Nov 2017 16:51:26 +0000
Subject: [PATCH 06/10] Added more badges.

---
 README.md | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 10eb62f..ea44fc8 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,16 @@
-# Maputnik [![Build Status](https://travis-ci.org/maputnik/editor.svg?branch=master)](https://travis-ci.org/maputnik/editor) [![Windows Build Status](https://ci.appveyor.com/api/projects/status/anelbgv6jdb3qnh9/branch/master?svg=true)](https://ci.appveyor.com/project/lukasmartinelli/editor) [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://tldrlegal.com/license/mit-license)
+# Maputnik
+
+[![Build Status](https://travis-ci.org/maputnik/editor.svg?branch=master)][travis]
+[![Windows Build Status](https://ci.appveyor.com/api/projects/status/anelbgv6jdb3qnh9/branch/master?svg=true)][appveyor]
+[![Dependency Status](https://david-dm.org/maputnik/editor.svg)][dm-prod]
+[![Dev Dependency Status](https://david-dm.org/maputnik/editor/dev-status.svg)][dm-dev]
+[![License](https://img.shields.io/badge/license-MIT-blue.svg)][license]
+
+[travis]:      https://travis-ci.org/maputnik/editor
+[appveyor]:    https://ci.appveyor.com/project/lukasmartinelli/editor
+[dm-prod]:     https://david-dm.org/maputnik/editor
+[dm-dev]:      https://david-dm.org/maputnik/editor#info=devDependencies
+[license]:     https://tldrlegal.com/license/mit-license
 
 <img width="200" align="right" alt="Maputnik" src="src/img/maputnik.png" />
 

From da0b4d79119202799ba066d59f51f27978ab74ce Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Fri, 3 Nov 2017 11:04:15 +0000
Subject: [PATCH 07/10] Disable webpack-dev-server polling by default.

---
 config/webpack.config.js | 9 ++++++++-
 package.json             | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/config/webpack.config.js b/config/webpack.config.js
index a50402a..1fc02d5 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -41,7 +41,14 @@ module.exports = {
     // serve index.html in place of 404 responses to allow HTML5 history
     historyApiFallback: true,
     port: PORT,
-    host: HOST
+    host: HOST,
+    watchOptions: {
+      // Disabled polling by default as it causes lots of CPU usage and hence drains laptop batteries. To enable polling add WEBPACK_DEV_SERVER_POLLING to your environment
+      // See <https://webpack.js.org/configuration/watch/#watchoptions-poll> for details
+      poll: (!!process.env.WEBPACK_DEV_SERVER_POLLING ? true : false),
+      watch: false,
+      ignored: /node_modules/
+    }
   },
   plugins: [
     new webpack.NoErrorsPlugin(),
diff --git a/package.json b/package.json
index 260623b..5b1beb4 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "build": "webpack --config config/webpack.production.config.js --progress --profile --colors",
     "test": "wdio config/wdio.conf.js",
     "test-watch": "wdio config/wdio.conf.js --watch",
-    "start": "webpack-dev-server --progress --profile --colors --watch-poll --config config/webpack.config.js",
+    "start": "webpack-dev-server --progress --profile --colors --config config/webpack.config.js",
     "lint": "eslint --ext js --ext jsx {src,test}",
     "lint-styles": "stylelint 'src/styles/*.scss'"
   },

From ea5568717110c31f34eb0fea38a2ab701a813cfa Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Fri, 3 Nov 2017 11:12:23 +0000
Subject: [PATCH 08/10] Added note to the docs regarding
 `WEBPACK_DEV_SERVER_POLLING`

---
 README.md | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 27f86ac..8c5edbb 100644
--- a/README.md
+++ b/README.md
@@ -37,7 +37,12 @@ npm install
 npm start
 ```
 
-Build a production package for distribution.
+The build process will watch for changes to the filesystem, rebuild and autoreload the editor. However note this from the webpack-dev-server docs
+
+> webpack uses the file system to get notified of file changes. In some cases this does not work. For example, when using Network File System (NFS). Vagrant also has a lot of problems with this. 
+Snippet from <https://webpack.js.org/configuration/dev-server/#devserver-watchoptions->
+
+To enable polling add `export WEBPACK_DEV_SERVER_POLLING=1` to your enviroment.
 
 ```
 npm run build

From 89f6343abd50f645b2b7093a8f230c2112824faf Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Sat, 4 Nov 2017 14:24:36 +0000
Subject: [PATCH 09/10] Removed ignoring node_modules in webpack watch

---
 config/webpack.config.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/config/webpack.config.js b/config/webpack.config.js
index 1fc02d5..a0f80f8 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -46,8 +46,7 @@ module.exports = {
       // Disabled polling by default as it causes lots of CPU usage and hence drains laptop batteries. To enable polling add WEBPACK_DEV_SERVER_POLLING to your environment
       // See <https://webpack.js.org/configuration/watch/#watchoptions-poll> for details
       poll: (!!process.env.WEBPACK_DEV_SERVER_POLLING ? true : false),
-      watch: false,
-      ignored: /node_modules/
+      watch: false
     }
   },
   plugins: [

From ae370f04c1f1182bc382dbd3031691a64605a269 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 6 Nov 2017 10:23:13 +0000
Subject: [PATCH 10/10] Added css overflow scroll to toolbar actions.

---
 src/components/Toolbar.jsx | 72 ++++++++++++++++++++------------------
 src/styles/_scrollbar.scss | 23 ++++++------
 src/styles/_toolbar.scss   | 14 ++++++++
 3 files changed, 65 insertions(+), 44 deletions(-)

diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
index 9bf7ad6..7d954e8 100644
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@@ -106,40 +106,44 @@ export default class Toolbar extends React.Component {
           isOpen={this.state.isOpen.sources}
           onOpenToggle={this.toggleModal.bind(this, 'sources')}
       />
-      <ToolbarLink
-        href={"https://github.com/maputnik/editor"}
-        className="maputnik-toolbar-logo"
-      >
-        <img src={logoImage} alt="Maputnik" />
-        <h1>Maputnik</h1>
-      </ToolbarLink>
-      <ToolbarAction onClick={this.toggleModal.bind(this, 'open')}>
-        <OpenIcon />
-        <IconText>Open</IconText>
-      </ToolbarAction>
-      <ToolbarAction onClick={this.toggleModal.bind(this, 'export')}>
-        <MdFileDownload />
-        <IconText>Export</IconText>
-      </ToolbarAction>
-      <ToolbarAction onClick={this.toggleModal.bind(this, 'sources')}>
-        <SourcesIcon />
-        <IconText>Sources</IconText>
-      </ToolbarAction>
-      <ToolbarAction onClick={this.toggleModal.bind(this, 'settings')}>
-        <SettingsIcon />
-        <IconText>Style Settings</IconText>
-      </ToolbarAction>
-      <ToolbarAction onClick={this.props.onInspectModeToggle}>
-        <InspectionIcon />
-        <IconText>
-          { this.props.inspectModeEnabled && <span>Map Mode</span> }
-          { !this.props.inspectModeEnabled && <span>Inspect Mode</span> }
-        </IconText>
-      </ToolbarAction>
-      <ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
-        <HelpIcon />
-        <IconText>Help</IconText>
-      </ToolbarLink>
+      <div className="maputnik-toolbar__inner">
+        <ToolbarLink
+          href={"https://github.com/maputnik/editor"}
+          className="maputnik-toolbar-logo"
+        >
+          <img src={logoImage} alt="Maputnik" />
+          <h1>Maputnik</h1>
+        </ToolbarLink>
+        <div className="maputnik-toolbar__actions">
+          <ToolbarAction onClick={this.toggleModal.bind(this, 'open')}>
+            <OpenIcon />
+            <IconText>Open</IconText>
+          </ToolbarAction>
+          <ToolbarAction onClick={this.toggleModal.bind(this, 'export')}>
+            <MdFileDownload />
+            <IconText>Export</IconText>
+          </ToolbarAction>
+          <ToolbarAction onClick={this.toggleModal.bind(this, 'sources')}>
+            <SourcesIcon />
+            <IconText>Sources</IconText>
+          </ToolbarAction>
+          <ToolbarAction onClick={this.toggleModal.bind(this, 'settings')}>
+            <SettingsIcon />
+            <IconText>Style Settings</IconText>
+          </ToolbarAction>
+          <ToolbarAction onClick={this.props.onInspectModeToggle}>
+            <InspectionIcon />
+            <IconText>
+              { this.props.inspectModeEnabled && <span>Map Mode</span> }
+              { !this.props.inspectModeEnabled && <span>Inspect Mode</span> }
+            </IconText>
+          </ToolbarAction>
+          <ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
+            <HelpIcon />
+            <IconText>Help</IconText>
+          </ToolbarLink>
+        </div>
+      </div>
     </div>
   }
 }
diff --git a/src/styles/_scrollbar.scss b/src/styles/_scrollbar.scss
index c305879..8b2156d 100644
--- a/src/styles/_scrollbar.scss
+++ b/src/styles/_scrollbar.scss
@@ -1,12 +1,15 @@
-::-webkit-scrollbar {
-  background-color: #26282e;
-  width: 5px;
-}
+// HACK: ::webkit-scrollbar selector covers to much of the UI. Bigger changes to come so for now just use :not() to ignore the toolbar
+div:not(.maputnik-toolbar__actions) {
+  &::-webkit-scrollbar {
+    background-color: #26282e;
+    width: 5px;
+  }
 
-::-webkit-scrollbar-thumb {
-  border-radius: 6px;
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  background-color: #666;
-  padding-left: 2px;
-  padding-right: 2px;
+  &::-webkit-scrollbar-thumb {
+    border-radius: 6px;
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    background-color: #666;
+    padding-left: 2px;
+    padding-right: 2px;
+  }
 }
diff --git a/src/styles/_toolbar.scss b/src/styles/_toolbar.scss
index 77dbea8..3e4ed2c 100644
--- a/src/styles/_toolbar.scss
+++ b/src/styles/_toolbar.scss
@@ -54,3 +54,17 @@
   display: inline;
   margin-left: $margin-1;
 }
+
+.maputnik-toolbar-logo {
+  flex: 0 0 140px;
+}
+
+.maputnik-toolbar__inner {
+  display: flex;
+}
+
+.maputnik-toolbar__actions {
+  white-space: nowrap;
+  flex: 1;
+  overflow-y: auto;
+}