Fix #1853 Improve tutorial to switch steps on change maptype

web/client/actions/__tests__/tutorial-test.js

@@ -34,13 +34,15 @@ describe('Test the tutorial actions', () => {
     });
 
     it('setupTutorial', () => {
+        const id = 'id';
         const steps = 'steps';
         const style = 'style';
         const checkbox = 'checkbox';
         const defaultStep = 'defaultStep';
-        const retval = setupTutorial(steps, style, checkbox, defaultStep);
+        const retval = setupTutorial(id, steps, style, checkbox, defaultStep);
         expect(retval).toExist();
         expect(retval.type).toBe(SETUP_TUTORIAL);
+        expect(retval.id).toBe(id);
         expect(retval.steps).toBe(steps);
         expect(retval.style).toBe(style);
         expect(retval.checkbox).toBe(checkbox);

web/client/actions/tutorial.js

@@ -20,9 +20,10 @@ function startTutorial() {
     };
 }
 
-function setupTutorial(steps, style, checkbox, defaultStep) {
+function setupTutorial(id, steps, style, checkbox, defaultStep) {
     return {
         type: SETUP_TUTORIAL,
+        id,
         steps,
         style,
         checkbox,

web/client/components/tutorial/Tutorial.jsx

@@ -77,7 +77,7 @@ const Tutorial = React.createClass({
         return {
             toggle: false,
             status: 'run',
-            preset: 'map',
+            preset: 'default_tutorial',
             presetList: {},
             introPosition: (window.innerHeight - 348) / 2,
             rawSteps: [],
@@ -121,7 +121,7 @@ const Tutorial = React.createClass({
     componentWillMount() {
         let rawSteps = this.props.rawSteps.length > 0 ? this.props.rawSteps : this.props.presetList[this.props.preset] || [];
         let checkbox = this.props.showCheckbox ? <div id="tutorial-intro-checkbox-container"><input type="checkbox" id="tutorial-intro-checkbox" className="tutorial-tooltip-intro-checkbox" onChange={this.props.actions.onDisable}/><span><I18N.Message msgId={"tutorial.checkbox"}/></span></div> : <div id="tutorial-intro-checkbox-container"/>;
-        this.props.actions.onSetup(rawSteps, this.props.introStyle, checkbox, this.props.defaultStep);
+        this.props.actions.onSetup('default', rawSteps, this.props.introStyle, checkbox, this.props.defaultStep);
     },
     componentWillUpdate(newProps) {
         if (this.props.steps.length > 0) {

web/client/components/tutorial/__tests__/Tutorial-test.jsx

@@ -87,7 +87,7 @@ describe("Test the Tutorial component", () => {
         expect(cmp).toExist();
 
         expect(spySetup).toHaveBeenCalled();
-        expect(spySetup).toHaveBeenCalledWith([], {}, <div id="tutorial-intro-checkbox-container"/>, {});
+        expect(spySetup).toHaveBeenCalledWith('default', [], {}, <div id="tutorial-intro-checkbox-container"/>, {});
 
         const domNode = ReactDOM.findDOMNode(cmp);
         expect(domNode).toExist();
@@ -120,7 +120,7 @@ describe("Test the Tutorial component", () => {
         expect(cmp).toExist();
 
         expect(spySetup).toHaveBeenCalled();
-        expect(spySetup).toHaveBeenCalledWith(presetList.test, {}, <div id="tutorial-intro-checkbox-container"><input type="checkbox" id="tutorial-intro-checkbox" className="tutorial-tooltip-intro-checkbox" onChange={cmp.props.actions.onDisable}/><span><I18N.Message msgId={"tutorial.checkbox"}/></span></div>, {});
+        expect(spySetup).toHaveBeenCalledWith('default', presetList.test, {}, <div id="tutorial-intro-checkbox-container"><input type="checkbox" id="tutorial-intro-checkbox" className="tutorial-tooltip-intro-checkbox" onChange={cmp.props.actions.onDisable}/><span><I18N.Message msgId={"tutorial.checkbox"}/></span></div>, {});
 
         const domNode = ReactDOM.findDOMNode(cmp);
         expect(domNode).toExist();
@@ -164,7 +164,7 @@ describe("Test the Tutorial component", () => {
         expect(cmp).toExist();
 
         expect(spySetup).toHaveBeenCalled();
-        expect(spySetup).toHaveBeenCalledWith(rawSteps, {}, <div id="tutorial-intro-checkbox-container"/>, {});
+        expect(spySetup).toHaveBeenCalledWith('default', rawSteps, {}, <div id="tutorial-intro-checkbox-container"/>, {});
 
         const domNode = ReactDOM.findDOMNode(cmp);
         expect(domNode).toExist();

web/client/epics/tutorial.js

@@ -7,8 +7,13 @@
  */
 
 const Rx = require('rxjs');
-const {START_TUTORIAL, closeTutorial} = require('../actions/tutorial');
+const {START_TUTORIAL, closeTutorial, setupTutorial} = require('../actions/tutorial');
+const {CHANGE_MAP_VIEW} = require('../actions/map');
 const {TOGGLE_3D} = require('../actions/globeswitcher');
+const preset = require('../plugins/tutorial/preset');
+const defaultRegex = /\/(viewer)\/(\w+)\/(\d+)/;
+const findMapType = path => path.match(defaultRegex) && path.replace(defaultRegex, "$2");
+import { UPDATE_LOCATION } from 'react-router-redux';
 
 /**
  * Closes the tutorial if 3D button has been toggled
@@ -22,12 +27,37 @@ const closeTutorialEpic = (action$) =>
         .audit(() => action$.ofType(TOGGLE_3D))
         .switchMap( () => Rx.Observable.of(closeTutorial()));
 
+/**
+ * Setup new steps based on the current maptype
+ * @memberof epics.tutorial
+ * @param {external:Observable} action$ manages `UPDATE_LOCATION`
+ * @return {external:Observable}
+ */
+
+const switchTutorialEpic = (action$, store) =>
+    action$.ofType(UPDATE_LOCATION)
+        .audit(() => action$.ofType(CHANGE_MAP_VIEW))
+        .filter(action =>
+            action.payload
+            && action.payload.pathname
+            && action.payload.pathname.match(defaultRegex))
+        .switchMap( (action) => {
+            const path = findMapType(action.payload.pathname);
+            const browser = store.getState().browser;
+            const mobile = browser && browser.mobile ? '_mobile' : '';
+            return Rx.Observable.of(preset[path + mobile + '_tutorial'] ?
+                setupTutorial(path + mobile, preset[path + mobile + '_tutorial']) :
+                setupTutorial('default' + mobile, preset['default' + mobile + '_tutorial'])
+            );
+        });
+
 /**
  * Epics for Tutorial
  * @name epics.tutorial
  * @type {Object}
  */
 
 module.exports = {
-    closeTutorialEpic
+    closeTutorialEpic,
+    switchTutorialEpic
 };

web/client/localConfig.json

@@ -78,7 +78,7 @@
             }, "Home", "TOC", {
                 "name": "Tutorial",
                 "cfg": {
-                    "preset": "mapMobile"
+                    "preset": "default_mobile_tutorial"
                 }
             }, {
                 "name": "Settings",

web/client/plugins/Tutorial.jsx

@@ -16,7 +16,7 @@ const I18N = require('../components/I18N/I18N');
 const {Glyphicon} = require('react-bootstrap');
 const {createSelector} = require('reselect');
 const {tutorialSelector} = require('../selectors/tutorial');
-const {closeTutorialEpic} = require('../epics/tutorial');
+const {closeTutorialEpic, switchTutorialEpic} = require('../epics/tutorial');
 
 /*
     //////////////////////////
@@ -217,6 +217,7 @@ module.exports = {
         tutorial: require('../reducers/tutorial')
     },
     epics: {
-        closeTutorialEpic
+        closeTutorialEpic,
+        switchTutorialEpic
     }
 };

web/client/plugins/tutorial/preset.js

@@ -7,7 +7,9 @@
  */
 
 module.exports = {
-    map: require('./preset/map'),
-    home: require('./preset/home'),
-    mapMobile: require('./preset/mapMobile')
+    default_tutorial: require('./preset/default_tutorial'),
+    default_mobile_tutorial: require('./preset/default_mobile_tutorial'),
+    home_tutorial: require('./preset/home_tutorial'),
+    cesium_tutorial: require('./preset/cesium_tutorial'),
+    cesium_mobile_tutorial: require('./preset/cesium_mobile_tutorial')
 };

web/client/plugins/tutorial/preset/mapMobile.js → web/client/plugins/tutorial/preset/cesium_mobile_tutorial.js

@@ -11,31 +11,29 @@ const I18N = require('../../../components/I18N/I18N');
 const CesiumTooltip = require('../../../components/tutorial/steps/CesiumTooltip');
 
 module.exports = [
-    // remove comment to enable intro/autostart
-    /*{
-        translation: 'intro',
+    {
+        translation: 'introCesium',
         selector: '#intro-tutorial'
-    },*/
+    },
+    {
+        title: <I18N.Message msgId="tutorial.cesium.title"/>,
+        text: <CesiumTooltip touch={true}/>,
+        selector: '#map .cesium-viewer'
+    },
     {
         translation: 'drawerMenu',
         selector: '#drawer-menu-button'
     },
+    {
+        translation: 'home',
+        selector: '#home-button'
+    },
     {
         translation: 'searchButton',
         selector: '#search-help'
     },
     {
         translation: 'burgerMenu',
         selector: '#mapstore-burger-menu'
-    },
-    {
-        title: <I18N.Message msgId="tutorial.cesium.title"/>,
-        text: <CesiumTooltip touch={true}/>,
-        selector: '#map .cesium-viewer',
-        position: 'bottom'
-    },
-    {
-        translation: 'home',
-        selector: '#home-button'
     }
 ];

web/client/plugins/tutorial/preset/map.js → web/client/plugins/tutorial/preset/cesium_tutorial.js

@@ -11,22 +11,15 @@ const I18N = require('../../../components/I18N/I18N');
 const CesiumTooltip = require('../../../components/tutorial/steps/CesiumTooltip');
 
 module.exports = [
-    // remove comment to enable intro/autostart
-    /*{
-        translation: 'intro',
-        selector: '#intro-tutorial'
-    },*/
-    {
-        translationHTML: 'drawerMenu',
-        selector: '#drawer-menu-button'
-    },
     {
-        translation: 'searchBar',
-        selector: '#map-search-bar'
+        translation: 'introCesium',
+        selector: '#intro-tutorial'
     },
     {
-        translation: 'burgerMenu',
-        selector: '#mapstore-burger-menu'
+        title: <I18N.Message msgId="tutorial.cesium.title"/>,
+        text: <CesiumTooltip/>,
+        selector: '#map .cesium-viewer',
+        position: 'bottom'
     },
     {
         translation: 'cesiumCompass',
@@ -37,14 +30,20 @@ module.exports = [
         selector: '#distanceLegendDiv .navigation-controls'
     },
     {
-        translation: 'zoomInButton',
-        selector: '#zoomin-btn',
-        position: 'top'
+        translationHTML: 'drawerMenu',
+        selector: '#drawer-menu-button'
     },
     {
-        translation: 'zoomOutButton',
-        selector: '#zoomout-btn',
-        position: 'top'
+        translation: 'searchBar',
+        selector: '#map-search-bar'
+    },
+    {
+        translation: 'home',
+        selector: '#home-button'
+    },
+    {
+        translation: 'burgerMenu',
+        selector: '#mapstore-burger-menu'
     },
     {
         translation: 'fullscreen',
@@ -55,15 +54,5 @@ module.exports = [
         translation: 'identifyButton',
         selector: '#identifyBar-container',
         position: 'top'
-    },
-    {
-        title: <I18N.Message msgId="tutorial.cesium.title"/>,
-        text: <CesiumTooltip/>,
-        selector: '#map .cesium-viewer',
-        position: 'bottom'
-    },
-    {
-        translation: 'home',
-        selector: '#home-button'
     }
 ];

web/client/plugins/tutorial/preset/default_mobile_tutorial.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright 2017, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+module.exports = [
+    {
+        translation: 'drawerMenu',
+        selector: '#drawer-menu-button'
+    },
+    {
+        translation: 'home',
+        selector: '#home-button'
+    },
+    {
+        translation: 'searchButton',
+        selector: '#search-help'
+    },
+    {
+        translation: 'burgerMenu',
+        selector: '#mapstore-burger-menu'
+    }
+];

web/client/plugins/tutorial/preset/default_tutorial.js

@@ -0,0 +1,46 @@
+/**
+ * Copyright 2017, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+module.exports = [
+    {
+        translationHTML: 'drawerMenu',
+        selector: '#drawer-menu-button'
+    },
+    {
+        translation: 'searchBar',
+        selector: '#map-search-bar'
+    },
+    {
+        translation: 'home',
+        selector: '#home-button'
+    },
+    {
+        translation: 'burgerMenu',
+        selector: '#mapstore-burger-menu'
+    },
+    {
+        translation: 'zoomInButton',
+        selector: '#zoomin-btn',
+        position: 'top'
+    },
+    {
+        translation: 'zoomOutButton',
+        selector: '#zoomout-btn',
+        position: 'top'
+    },
+    {
+        translation: 'fullscreen',
+        selector: '#fullscreen-btn',
+        position: 'top'
+    },
+    {
+        translation: 'identifyButton',
+        selector: '#identifyBar-container',
+        position: 'top'
+    }
+];

web/client/plugins/tutorial/preset/home.js → web/client/plugins/tutorial/preset/home_tutorial.js

@@ -7,12 +7,6 @@
  */
 
 module.exports = [
-    // add Tutorial plugin to homepage, "maps" in localConfig with cfg: {preset: "home"}
-    // remove comment to enable intro/autostart
-    /*{
-        translation: 'intro',
-        selector: '#intro-tutorial'
-    },*/
     {
         translation: 'mapType',
         selector: '#mapstore-maptype',