Merge pull request #443 from pathmapper/style-parameter

Warning when style parameter is used

src/components/App.jsx

@@ -23,7 +23,7 @@ import SurveyModal from './modals/SurveyModal'
 import { downloadGlyphsMetadata, downloadSpriteMetadata } from '../libs/metadata'
 import {latest, validate} from '@mapbox/mapbox-gl-style-spec'
 import style from '../libs/style'
-import { initialStyleUrl, loadStyleUrl } from '../libs/urlopen'
+import { initialStyleUrl, loadStyleUrl, removeStyleQuerystring } from '../libs/urlopen'
 import { undoMessages, redoMessages } from '../libs/diffmessage'
 import { StyleStore } from '../libs/stylestore'
 import { ApiStyleStore } from '../libs/apistore'
@@ -147,10 +147,14 @@ export default class App extends React.Component {
     })
 
     const styleUrl = initialStyleUrl()
-    if(styleUrl) {
+    if(styleUrl && window.confirm("Load style from URL: " + styleUrl + " and discard current changes?")) {
       this.styleStore = new StyleStore()
       loadStyleUrl(styleUrl, mapStyle => this.onStyleChanged(mapStyle))
+      removeStyleQuerystring()
     } else {
+      if(styleUrl) {
+        removeStyleQuerystring()
+      }
       this.styleStore.init(err => {
         if(err) {
           console.log('Falling back to local storage for storing styles')

src/libs/urlopen.js

@@ -1,4 +1,5 @@
 import url from 'url'
+import querystring from 'querystring'
 import style from './style.js'
 
 export function initialStyleUrl() {
@@ -24,6 +25,23 @@ export function loadStyleUrl(styleUrl, cb) {
   })
 }
 
+export function removeStyleQuerystring() {
+  const initialUrl = url.parse(window.location.href, true)
+  let qs = querystring.parse(window.location.search.slice(1))
+  delete qs["style"]
+  if(Object.getOwnPropertyNames(qs).length === 0) {
+    qs = ""
+  } else {
+    qs = "?" + querystring.stringify(qs)
+  }
+  let newUrlHash = initialUrl.hash
+  if(newUrlHash === null) {
+    newUrlHash = ""
+  } 
+  const newUrl = initialUrl.protocol + "//" + initialUrl.host + initialUrl.pathname + qs + newUrlHash
+  window.history.replaceState({}, document.title, newUrl)
+}
+
 export function loadJSON(url, defaultValue, cb) {
   fetch(url, {
     mode: 'cors',

test/functional/history/index.js

@@ -13,6 +13,7 @@ describe.skip("history", function() {
     browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
       "geojson:example"
     ]));
+    browser.alertAccept();
 
     helper.modal.addLayer.open();
 

test/functional/index.js

@@ -11,6 +11,7 @@ describe('maputnik', function() {
       "geojson:example",
       "raster:raster"
     ]));
+    browser.alertAccept();
     browser.execute(function() {
       localStorage.setItem("survey", true);
     });

test/functional/layers/index.js

@@ -11,6 +11,7 @@ describe("layers", function() {
       "geojson:example",
       "raster:raster"
     ]));
+    browser.alertAccept();
     browser.waitForExist(".maputnik-toolbar-link");
     browser.flushReactUpdates();
 
@@ -449,6 +450,7 @@ describe("layers", function() {
       browser.url(config.baseUrl+"?debug&style="+getStyleUrl([
         "geojson:example"
       ]));
+      browser.alertAccept();
 
       helper.modal.addLayer.open();
       var aId = helper.modal.addLayer.fill({

test/functional/map/index.js

@@ -9,6 +9,7 @@ describe("map", function() {
       browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
         "geojson:example"
       ])+"#"+zoomLevel+"/41.3805/2.1635");
+      browser.alertAccept();
 
       browser.waitUntil(function () {
         return (
@@ -22,6 +23,7 @@ describe("map", function() {
       browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
         "geojson:example"
       ])+"#"+zoomLevel+"/41.3805/2.1635");
+      browser.alertAccept();
 
       browser.click(".mapboxgl-ctrl-zoom-in")
       browser.waitUntil(function () {

test/functional/modals/index.js

@@ -99,6 +99,7 @@ describe("modals", function() {
       browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
         "geojson:example"
       ]));
+      browser.alertAccept();
 
       browser.selectByValue(wd.$("nav:inspect", "select"), "inspect");
     })

test/functional/screenshots/index.js

@@ -18,6 +18,7 @@ describe('screenshots', function() {
     browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
       "geojson:example"
     ]));
+    browser.alertAccept();
     browser.waitForExist(".maputnik-toolbar-link");
     browser.flushReactUpdates();
 
@@ -28,6 +29,7 @@ describe('screenshots', function() {
     browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
       "geojson:example"
     ]));
+    browser.alertAccept();
     browser.waitForExist(".maputnik-toolbar-link");
     browser.flushReactUpdates();
 
@@ -41,6 +43,7 @@ describe('screenshots', function() {
     browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
       "geojson:example"
     ]));
+    browser.alertAccept();
     browser.waitForExist(".maputnik-toolbar-link");
     browser.flushReactUpdates();
 
@@ -54,6 +57,7 @@ describe('screenshots', function() {
     browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
       "geojson:example"
     ]));
+    browser.alertAccept();
     browser.waitForExist(".maputnik-toolbar-link");
     browser.flushReactUpdates();
 
@@ -67,6 +71,7 @@ describe('screenshots', function() {
     browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
       "geojson:example"
     ]));
+    browser.alertAccept();
     browser.waitForExist(".maputnik-toolbar-link");
     browser.flushReactUpdates();
 
@@ -80,6 +85,7 @@ describe('screenshots', function() {
     browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
       "geojson:example"
     ]));
+    browser.alertAccept();
     browser.waitForExist(".maputnik-toolbar-link");
     browser.flushReactUpdates();