Show help text window on mouseover

This ensures that the window with the helptexts appears on the
first mouseover-event on a 'HelpBadge' (not on help modus activation).
To hide the helptext window the help modus has to be disabled.

web/client/actions/help.js

@@ -8,6 +8,7 @@
 
 const CHANGE_HELP_STATE = 'CHANGE_HELP_STATE';
 const CHANGE_HELP_TEXT = 'CHANGE_HELP_TEXT';
+const CHANGE_HELPWIN_VIZ = 'CHANGE_HELPWIN_VIZ';
 
 function changeHelpState(enabled) {
     return {
@@ -23,9 +24,18 @@ function changeHelpText(helpText) {
     };
 }
 
+function changeHelpwinVisibility(helpwinViz) {
+    return {
+        type: CHANGE_HELPWIN_VIZ,
+        helpwinViz: helpwinViz
+    };
+}
+
 module.exports = {
     CHANGE_HELP_STATE,
     CHANGE_HELP_TEXT,
+    CHANGE_HELPWIN_VIZ,
     changeHelpState,
-    changeHelpText
+    changeHelpText,
+    changeHelpwinVisibility
 };

web/client/components/Help/HelpBadge.jsx

@@ -23,22 +23,24 @@ var HelpBadge = React.createClass({
         id: React.PropTypes.string,
         helpText: React.PropTypes.string,
         isVisible: React.PropTypes.bool,
-        changeHelpText: React.PropTypes.func
+        changeHelpText: React.PropTypes.func,
+        changeHelpwinVisibility: React.PropTypes.func
     },
     getDefaultProps() {
         return {
             helpText: '',
             isVisible: false
         };
     },
-    onClick() {
+    onMouseOver() {
         this.props.changeHelpText({helpText: this.props.helpText});
+        this.props.changeHelpwinVisibility({helpwinViz: true});
     },
     render() {
         return (
             <Badge
                 id={this.props.id}
-                onClick={this.onClick}
+                onMouseOver={this.onMouseOver}
                 className={this.props.isVisible ? '' : 'hidden'}
             >?</Badge>
         );

web/client/components/Help/HelpToggleBtn.jsx

@@ -0,0 +1,49 @@
+/**
+ * Copyright 2015, 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.
+ */
+
+
+var React = require('react');
+var ToggleButton = require('../buttons/ToggleButton');
+require("./help.css");
+
+/**
+ * A toggle button class for enabling / disabling help modus
+ */
+let HelpToggleBtn = React.createClass({
+    propTypes: {
+        key: React.PropTypes.string,
+        isButton: React.PropTypes.bool,
+        glyphicon: React.PropTypes.string,
+        pressed: React.PropTypes.bool,
+        changeHelpState: React.PropTypes.func,
+        changeHelpwinVisibility: React.PropTypes.func
+    },
+    getDefaultProps() {
+        return {
+            key: 'helpButton',
+            isButton: true,
+            glyphicon: 'question-sign'
+        };
+    },
+    onClick: function() {
+        this.props.changeHelpState(!this.props.pressed);
+        this.props.changeHelpwinVisibility(false);
+    },
+    render: function() {
+        return (
+            <ToggleButton
+                key={this.props.key}
+                isButton={this.props.isButton}
+                glyphicon={this.props.glyphicon}
+                pressed={this.props.pressed}
+                onClick={this.onClick}/>
+        );
+    }
+});
+
+module.exports = HelpToggleBtn;

web/client/components/Help/HelpWrapper.jsx

@@ -23,7 +23,8 @@ let HelpWrapper = React.createClass({
     propTypes: {
         helpText: React.PropTypes.string,
         helpEnabled: React.PropTypes.bool,
-        changeHelpText: React.PropTypes.func
+        changeHelpText: React.PropTypes.func,
+        changeHelpwinVisibility: React.PropTypes.func
     },
 
     render: function() {
@@ -34,6 +35,7 @@ let HelpWrapper = React.createClass({
                     isVisible = {this.props.helpEnabled}
                     helpText = {this.props.helpText}
                     changeHelpText = {this.props.changeHelpText}
+                    changeHelpwinVisibility = {this.props.changeHelpwinVisibility}
                 />
                 {this.props.children}
             </div>);

web/client/examples/viewer/plugins/index.jsx

@@ -37,9 +37,10 @@ var {textSearch, resultsPurge} = require("../../../actions/search");
 
 var {changeMeasurementState} = require('../../../actions/measurement');
 
-var {changeHelpState, changeHelpText} = require('../../../actions/help');
+var {changeHelpState, changeHelpText, changeHelpwinVisibility} = require('../../../actions/help');
 var HelpWrapper = require('../../../components/Help/HelpWrapper');
 var HelpTextPanel = require('../../../components/Help/HelpTextPanel');
+var HelpToggleBtn = require('../../../components/Help/HelpToggleBtn');
 
 var React = require('react');
 
@@ -81,6 +82,7 @@ module.exports = {
                 helpText={<Message msgId="helptexts.searchBar"/>}
                 helpEnabled={props.help.enabled}
                 changeHelpText={props.changeHelpText}
+                changeHelpwinVisibility={props.changeHelpwinVisibility}
                 >
                 <SearchBar key="seachBar" onSearch={props.textSearch} onSearchReset={props.resultsPurge}/>
             </HelpWrapper>,
@@ -172,12 +174,10 @@ module.exports = {
                             disabled: (props.mapHistory.future.length > 0) ? false : true
                     }}/>
                 </Settings>
-                <ToggleButton
-                    key="helpButton"
-                    isButton={true}
-                    glyphicon="question-sign"
+                <HelpToggleBtn
                     pressed={props.help.enabled}
-                    onClick={props.changeHelpState}/>
+                    changeHelpState={props.changeHelpState}
+                    changeHelpwinVisibility={props.changeHelpwinVisibility}/>
             </MapToolBar>,
             <GetFeatureInfo
                 key="getFeatureInfo"
@@ -202,6 +202,7 @@ module.exports = {
                 helpText={<Message msgId="helptexts.scaleBox"/>}
                 helpEnabled={props.help.enabled}
                 changeHelpText={props.changeHelpText}
+                changeHelpwinVisibility={props.changeHelpwinVisibility}
                 >
                 <ScaleBox
                     key="scaleBox"
@@ -212,6 +213,7 @@ module.exports = {
                 helpText={<Message msgId="helptexts.zoomToMaxExtentButton"/>}
                 helpEnabled={props.help.enabled}
                 changeHelpText={props.changeHelpText}
+                changeHelpwinVisibility={props.changeHelpwinVisibility}
                 >
                 <ZoomToMaxExtentButton
                     key="zoomToMaxExtent"
@@ -224,7 +226,7 @@ module.exports = {
             <GlobalSpinner key="globalSpinner"/>,
             <HelpTextPanel
                 key="helpTextPanel"
-                isVisible={props.help.enabled}
+                isVisible={props.help.helpwinViz}
                 helpText={props.help.helpText}/>
         ];
     },
@@ -251,6 +253,7 @@ module.exports = {
         changeMapInfoFormat,
         changeMeasurementState,
         changeHelpState,
-        changeHelpText
+        changeHelpText,
+        changeHelpwinVisibility
     }
 };

web/client/reducers/help.js

@@ -8,7 +8,8 @@
 
 var {
     CHANGE_HELP_STATE,
-    CHANGE_HELP_TEXT
+    CHANGE_HELP_TEXT,
+    CHANGE_HELPWIN_VIZ
 } = require('../actions/help');
 
 const assign = require('object-assign');
@@ -24,6 +25,11 @@ function help(state = null, action) {
                 helpText: action.helpText
             });
         }
+        case CHANGE_HELPWIN_VIZ: {
+            return assign({}, state, {
+                helpwinViz: action.helpwinViz
+            });
+        }
         default:
             return state;
     }