Added tutorial epic

geosolutions-it · May 18, 2017 · 79f789c · 79f789c
1 parent 18905a4
commit 79f789c
Show file tree

Hide file tree

Showing 21 changed files with 136 additions and 49 deletions.
diff --git a/docma-config.json b/docma-config.json
@@ -123,6 +123,7 @@
             "web/client/selectors/index.jsdoc",
             "web/client/selectors/map.js",
             "web/client/selectors/maptype.js",
+            "web/client/selectors/tutorial.js",
 
             "web/client/reducers/index.jsdoc",
             "web/client/reducers/controls.js",
@@ -136,6 +137,7 @@
             "web/client/epics/globeswitcher.js",
             "web/client/epics/maptype.js",
             "web/client/epics/search.js",
+            "web/client/epics/tutorial.js",
             "web/client/epics/wfsquery.js",
 
             "web/client/utils/index.jsdoc",

diff --git a/web/client/components/tutorial/Tutorial.jsx b/web/client/components/tutorial/Tutorial.jsx
@@ -86,8 +86,7 @@ const Tutorial = React.createClass({
                 title: '',
                 text: '',
                 position: 'bottom',
-                type: 'click',
-                allowClicksThruHole: false
+                type: 'click'
             },
             introStyle: defaultIntroStyle,
             tourAction: 'next',
@@ -104,7 +103,7 @@ const Tutorial = React.createClass({
             scrollToFirstStep: true,
             showBackButton: true,
             showOverlay: true,
-            allowClicksThruHole: false,
+            allowClicksThruHole: true,
             showSkipButton: true,
             showStepsProgress: false,
             tooltipOffset: 10,

diff --git a/web/client/components/tutorial/__tests__/CesiumTooltip-test.jsx b/web/client/components/tutorial/__tests__/CesiumTooltip-test.jsx
@@ -0,0 +1,49 @@
+/*
+ * 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.
+ */
+
+const expect = require('expect');
+const React = require('react');
+const ReactDOM = require('react-dom');
+const CesiumTooltip = require('../steps/CesiumTooltip');
+
+describe("Test the Cesium tooltip component", () => {
+
+    beforeEach((done) => {
+        document.body.innerHTML = '<div id="container"></div>';
+        setTimeout(done);
+    });
+
+    afterEach((done) => {
+        ReactDOM.unmountComponentAtNode(document.getElementById("container"));
+        document.body.innerHTML = '';
+        expect.restoreSpies();
+        setTimeout(done);
+    });
+
+    it('test default component', () => {
+        const cmp = ReactDOM.render(<CesiumTooltip/>, document.getElementById("container"));
+        expect(cmp).toExist();
+        const domNode = ReactDOM.findDOMNode(cmp);
+        expect(domNode).toExist();
+        expect(domNode.children.length).toBe(1);
+        const tr = domNode.getElementsByTagName('TR');
+        expect(tr.length).toBe(5);
+
+    });
+
+    it('test default component with touch', () => {
+        const cmp = ReactDOM.render(<CesiumTooltip touch={true}/>, document.getElementById("container"));
+        expect(cmp).toExist();
+        const domNode = ReactDOM.findDOMNode(cmp);
+        expect(domNode).toExist();
+        expect(domNode.children.length).toBe(1);
+        const tr = domNode.getElementsByTagName('TR');
+        expect(tr.length).toBe(7);
+    });
+
+});
diff --git a/web/client/components/tutorial/__tests__/Tutorial-test.jsx b/web/client/components/tutorial/__tests__/Tutorial-test.jsx
@@ -1,4 +1,4 @@
-/**
+/*
  * Copyright 2017, GeoSolutions Sas.
  * All rights reserved.
  *

diff --git a/...client/plugins/tutorial/CesiumTooltip.jsx → ...mponents/tutorial/steps/CesiumTooltip.jsx b/...client/plugins/tutorial/CesiumTooltip.jsx → ...mponents/tutorial/steps/CesiumTooltip.jsx
@@ -6,7 +6,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 const React = require('react');
-const I18N = require('../../components/I18N/I18N');
+const I18N = require('../../I18N/I18N');
 
 const MouseLeft = require('./assets/img/MouseLeft.svg');
 const MouseRight = require('./assets/img/MouseRight.svg');

diff --git a/...plugins/tutorial/assets/img/MouseLeft.svg → ...s/tutorial/steps/assets/img/MouseLeft.svg b/...plugins/tutorial/assets/img/MouseLeft.svg → ...s/tutorial/steps/assets/img/MouseLeft.svg
diff --git a/...ugins/tutorial/assets/img/MouseMiddle.svg → ...tutorial/steps/assets/img/MouseMiddle.svg b/...ugins/tutorial/assets/img/MouseMiddle.svg → ...tutorial/steps/assets/img/MouseMiddle.svg
diff --git a/...lugins/tutorial/assets/img/MouseRight.svg → .../tutorial/steps/assets/img/MouseRight.svg b/...lugins/tutorial/assets/img/MouseRight.svg → .../tutorial/steps/assets/img/MouseRight.svg
diff --git a/...plugins/tutorial/assets/img/TouchDrag.svg → ...s/tutorial/steps/assets/img/TouchDrag.svg b/...plugins/tutorial/assets/img/TouchDrag.svg → ...s/tutorial/steps/assets/img/TouchDrag.svg
diff --git a/...ugins/tutorial/assets/img/TouchRotate.svg → ...tutorial/steps/assets/img/TouchRotate.svg b/...ugins/tutorial/assets/img/TouchRotate.svg → ...tutorial/steps/assets/img/TouchRotate.svg
diff --git a/...plugins/tutorial/assets/img/TouchTilt.svg → ...s/tutorial/steps/assets/img/TouchTilt.svg b/...plugins/tutorial/assets/img/TouchTilt.svg → ...s/tutorial/steps/assets/img/TouchTilt.svg
diff --git a/...plugins/tutorial/assets/img/TouchZoom.svg → ...s/tutorial/steps/assets/img/TouchZoom.svg b/...plugins/tutorial/assets/img/TouchZoom.svg → ...s/tutorial/steps/assets/img/TouchZoom.svg
diff --git a/web/client/epics/tutorial.js b/web/client/epics/tutorial.js
@@ -0,0 +1,33 @@
+/*
+ * 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.
+ */
+
+const Rx = require('rxjs');
+const {START_TUTORIAL, closeTutorial} = require('../actions/tutorial');
+const {TOGGLE_3D} = require('../actions/globeswitcher');
+
+/**
+ * Closes the tutorial if 3D button has been toggled
+ * @memberof epics.tutorial
+ * @param {external:Observable} action$ manages `START_TUTORIAL`
+ * @return {external:Observable}
+ */
+
+const closeTutorialEpic = (action$) =>
+    action$.ofType(START_TUTORIAL)
+        .audit(() => action$.ofType(TOGGLE_3D))
+        .switchMap( () => Rx.Observable.of(closeTutorial()));
+
+/**
+ * Epics for Tutorial
+ * @name epics.tutorial
+ * @type {Object}
+ */
+
+module.exports = {
+    closeTutorialEpic
+};
diff --git a/web/client/plugins/Tutorial.jsx b/web/client/plugins/Tutorial.jsx
@@ -16,6 +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');
 
 /*
     //////////////////////////
@@ -214,5 +215,8 @@ module.exports = {
     }),
     reducers: {
         tutorial: require('../reducers/tutorial')
+    },
+    epics: {
+        closeTutorialEpic
     }
 };
diff --git a/web/client/plugins/tutorial/preset/map.js b/web/client/plugins/tutorial/preset/map.js
@@ -8,7 +8,7 @@
 
 const React = require('react');
 const I18N = require('../../../components/I18N/I18N');
-const CesiumTooltip = require('../CesiumTooltip');
+const CesiumTooltip = require('../../../components/tutorial/steps/CesiumTooltip');
 
 module.exports = [
     // remove comment to enable intro/autostart
@@ -24,20 +24,10 @@ module.exports = [
         translation: 'searchBar',
         selector: '#map-search-bar'
     },
-    {
-        translation: 'home',
-        selector: '#home-button'
-    },
     {
         translation: 'burgerMenu',
         selector: '#mapstore-burger-menu'
     },
-    {
-        title: <I18N.Message msgId="tutorial.cesium.title"/>,
-        text: <CesiumTooltip/>,
-        selector: '#map .cesium-viewer',
-        position: 'bottom'
-    },
     {
         translation: 'cesiumCompass',
         selector: '#distanceLegendDiv .compass'
@@ -65,5 +55,15 @@ 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'
     }
 ];
diff --git a/web/client/plugins/tutorial/preset/mapMobile.js b/web/client/plugins/tutorial/preset/mapMobile.js
@@ -8,7 +8,7 @@
 
 const React = require('react');
 const I18N = require('../../../components/I18N/I18N');
-const CesiumTooltip = require('../CesiumTooltip');
+const CesiumTooltip = require('../../../components/tutorial/steps/CesiumTooltip');
 
 module.exports = [
     // remove comment to enable intro/autostart
@@ -20,6 +20,14 @@ module.exports = [
         translation: 'drawerMenu',
         selector: '#drawer-menu-button'
     },
+    {
+        translation: 'searchButton',
+        selector: '#search-help'
+    },
+    {
+        translation: 'burgerMenu',
+        selector: '#mapstore-burger-menu'
+    },
     {
         title: <I18N.Message msgId="tutorial.cesium.title"/>,
         text: <CesiumTooltip touch={true}/>,
@@ -29,13 +37,5 @@ module.exports = [
     {
         translation: 'home',
         selector: '#home-button'
-    },
-    {
-        translation: 'searchButton',
-        selector: '#search-help'
-    },
-    {
-        translation: 'burgerMenu',
-        selector: '#mapstore-burger-menu'
     }
 ];
diff --git a/web/client/selectors/tutorial.js b/web/client/selectors/tutorial.js
@@ -10,7 +10,7 @@
  * selects tutorial from state
  * @memberof selectors.tutorial
  * @param  {object} state the state
- * @return {string}       the tutorial in the state
+ * @return {object}       the tutorial in the state
  */
 const tutorialSelector = (state) => state && state.tutorial;
 

diff --git a/web/client/translations/data.de-DE b/web/client/translations/data.de-DE
@@ -833,7 +833,7 @@
             },
             "home": {
                 "title": "Home",
-                "text": "Go to homepage"
+                "text": "Click to go to homepage"
             },
             "searchButton": {
                 "title": "Search",
@@ -888,7 +888,7 @@
             },
             "cesiumCompass": {
                 "title": "Compass",
-                "text": "You can use the compass to orbit around the globe"
+                "text": "You can use the compass to orbit around the globe. Drag to rotate the map"
             },
             "cesiumNavigation": {
                 "title": "Navigation",

diff --git a/web/client/translations/data.en-US b/web/client/translations/data.en-US
@@ -833,7 +833,7 @@
             },
             "home": {
                 "title": "Home",
-                "text": "Go to homepage"
+                "text": "Click to go to homepage"
             },
             "searchButton": {
                 "title": "Search",
@@ -888,7 +888,7 @@
             },
             "cesiumCompass": {
                 "title": "Compass",
-                "text": "You can use the compass to orbit around the globe"
+                "text": "You can use the compass to orbit around the globe. Drag to rotate the map"
             },
             "cesiumNavigation": {
                 "title": "Navigation",

diff --git a/web/client/translations/data.fr-FR b/web/client/translations/data.fr-FR
@@ -835,7 +835,7 @@
             },
             "home": {
                 "title": "Home",
-                "text": "Go to homepage"
+                "text": "Click to go to homepage"
             },
             "searchButton": {
                 "title": "Search",
@@ -890,7 +890,7 @@
             },
             "cesiumCompass": {
                 "title": "Compass",
-                "text": "You can use the compass to orbit around the globe"
+                "text": "You can use the compass to orbit around the globe. Drag to rotate the map"
             },
             "cesiumNavigation": {
                 "title": "Navigation",

diff --git a/web/client/translations/data.it-IT b/web/client/translations/data.it-IT
@@ -833,7 +833,7 @@
                 },
                 "home": {
                     "title": "Home",
-                    "text": "Vai alla homepage"
+                    "text": "Clicca per raggiungere la homepage"
                 },
                 "searchButton": {
                     "title": "Ricerca",
@@ -872,27 +872,27 @@
                     "text": "Puoi utilizzare componenti e plugins di MapStore2 per costruire applicazioni personalizzate"
                 },
                 "cesium": {
-                    "title": "Interactions with the Map",
-                    "pan": "Pan view",
-                    "zoom": "Zoom view",
-                    "tilt": "Tilt view",
-                    "rotate": "Rotate view",
-                    "oneDrag": "One finger drag",
-                    "twoPinch": "Two finger pinch",
-                    "twoDragSame": "Two finger drag, same direction",
-                    "twoDragOpposite": "Two finger drag, opposite direction",
-                    "leftClick": "Left click + drag",
-                    "rightClick": "Right click + drag, or Mouse wheel scroll",
-                    "middleClick": "Middle click + drag, or CTRL + Left/Right click + drag"
+                    "title": "Interazioni con la mappa",
+                    "pan": "Vista Pan",
+                    "zoom": "Vista Zoom",
+                    "tilt": "Vista Tilt",
+                    "rotate": "Vista Rotazione",
+                    "oneDrag": "Trascina con un dito",
+                    "twoPinch": "Pinch con due dita",
+                    "twoDragSame": "Trascina con due dita nella stessa direzione",
+                    "twoDragOpposite": "Trascina con due dita in direzione opposta",
+                    "leftClick": "Click pulsante sinistro + trascina",
+                    "rightClick": "Click pulsante destro + trascina, o scroll con il pulsante centrale",
+                    "middleClick": "Click pulsante centrale + trascina, o CTRL + Click sinistro/destro + trascina"
 
                 },
                 "cesiumCompass": {
-                    "title": "Compass",
-                    "text": "You can use the compass to orbit around the globe"
+                    "title": "Bussola",
+                    "text": "Puoi usare la bussola per orbitare intorno al globo. Trascina per ruotare la mappa"
                 },
                 "cesiumNavigation": {
-                    "title": "Navigation",
-                    "text": "Here you can find the zoom in and zoom out buttons"
+                    "title": "Navigazione",
+                    "text": "Qui puoi trovare i pulsanti per lo zoom in e out"
                 }
             }
     }