Set optional drawer menu for share ( see #1632)

 - Documented drawer menu plugin
 - Added a forceDrawer and a hide option
 - Improved share to manage forceDrawer option

docma-config.json

@@ -132,6 +132,7 @@
             "plugins": [
                 "web/client/plugins/index.jsdoc",
                 "web/client/plugins/BackgroundSwitcher.jsx",
+                "web/client/plugins/DrawerMenu.jsx",
                 "web/client/plugins/GoFull.jsx",
                 "web/client/plugins/Map.jsx",
                 "web/client/plugins/FullScreen.jsx",

web/client/components/share/ShareEmbed.jsx

@@ -15,10 +15,10 @@
 const React = require('react');
 const CopyToClipboard = require('react-copy-to-clipboard');
 const Message = require('../../components/I18N/Message');
-const {Glyphicon, Col, Grid, Row, Tooltip, Button} = require('react-bootstrap');
+const {Glyphicon, Col, Grid, Row, Tooltip, Button, Checkbox} = require('react-bootstrap');
 const OverlayTrigger = require('../misc/OverlayTrigger');
 
-
+const url = require('url');
 // css required
 require('./share.css');
 
@@ -27,11 +27,11 @@ const ShareEmbed = React.createClass({
         shareUrl: React.PropTypes.string
     },
     getInitialState() {
-        return {copied: false};
+        return {copied: false, forceDrawer: false};
     },
   render() {
 
-      const codeEmbedded = "<iframe style=\"border: none;\" height=\"400\" width=\"600\" src=\"" + this.props.shareUrl + "\"></iframe>";
+      const codeEmbedded = "<iframe style=\"border: none;\" height=\"400\" width=\"600\" src=\"" + this.generateUrl(this.props.shareUrl) + "\"></iframe>";
       const tooltip = (<Tooltip placement="bottom" className="in" id="tooltip-bottom" style={{zIndex: 2001}}>
                            {this.state.copied ? <Message msgId="share.msgCopiedUrl"/> : <Message msgId="share.msgToCopyUrl"/>}
                        </Tooltip>);
@@ -44,11 +44,16 @@ const ShareEmbed = React.createClass({
                       </OverlayTrigger>);
       return (
           <div className="input-link">
+
+
               <Grid className="embed-box" fluid={true}>
                   <Row key="title">
                         <h4>
                            <Message msgId="share.embeddedLinkTitle"/>
                         </h4>
+                        <Checkbox checked={this.state.forceDrawer} onChange={() => this.setState({forceDrawer: !this.state.forceDrawer})}>
+                            <Message msgId="share.forceDrawer"/>
+                         </Checkbox>
                     </Row>
                     <Row key="data" className="row-button">
                         <Col key="textarea" xs={10} sm={10} md={10}><textarea name="description" rows="6" value={codeEmbedded} enabled="false" readOnly /></Col>
@@ -59,6 +64,14 @@ const ShareEmbed = React.createClass({
                 </Grid>
           </div>
       );
+  },
+  generateUrl() {
+      const parsed = url.parse(this.props.shareUrl, true);
+      if (this.state.forceDrawer) {
+          parsed.query.forceDrawer = true;
+      }
+      return url.format(parsed);
+
   }
 });
 

web/client/localConfig.json

@@ -209,7 +209,12 @@
                 "cfg": {
                     "tools": ["locate"]
                 }
-            }, "DrawerMenu", {
+            }, {
+              "name": "DrawerMenu",
+              "cfg": {
+                "hideButton": true
+              }
+              }, {
                 "name": "Identify",
                 "cfg": {
                     "style": {

web/client/plugins/DrawerMenu.jsx

@@ -20,7 +20,8 @@ const {Button, Glyphicon, Panel} = require('react-bootstrap');
 const Section = require('./drawer/Section');
 
 const {partialRight} = require('lodash');
-
+const url = require('url');
+const query = url.parse(window.location.href, true).query;
 const Menu = connect((state) => ({
     show: state.controls.drawer && state.controls.drawer.enabled,
     activeKey: state.controls.drawer && state.controls.drawer.menu || "1",
@@ -33,10 +34,28 @@ const Menu = connect((state) => ({
 
 require('./drawer/drawer.css');
 
+/**
+ * DrawerMenu plugin. Shows a left menu with some pluins rendered inside it (typically the TOC).
+ * @prop {string} cfg.glyph glyph icon to use for the button
+ * @prop {boolean} cfg.hideButton. If true, the button to show the drawer menu will be hidden.
+ * You can force to display it again adding forceDrawer=true in the query string. This is useful in embedded mode.
+ * @prop {object} cfg.menuButtonStyle Css inline style for the button. Display property will be overridden by the hideButton/forceDrawer options.
+ * @prop {string} cfg.buttonClassName class for the toggle button
+ * @prop {object} cfg.menuOptions options for the drawer menu. They can be `docked`, `width.
+ * @memberof plugins
+ * @class
+ * @example
+ * {
+ *   "name": "DrawerMenu",
+ *   "cfg": {
+ *   "hideButton": true
+ * }
+ */
 const DrawerMenu = React.createClass({
     propTypes: {
         items: React.PropTypes.array,
         active: React.PropTypes.string,
+        hideButton: React.PropTypes.bool,
         toggleMenu: React.PropTypes.func,
         id: React.PropTypes.string,
         glyph: React.PropTypes.string,
@@ -88,7 +107,12 @@ const DrawerMenu = React.createClass({
     render() {
         return (
             <div id={this.props.id}>
-                <Button id="drawer-menu-button" style={this.props.menuButtonStyle} bsStyle={this.props.buttonStyle} key="menu-button" className={this.props.buttonClassName} onClick={this.props.toggleMenu} disabled={this.props.disabled}><Glyphicon glyph={this.props.glyph}/></Button>
+                <Button id="drawer-menu-button" style={
+                        {
+                            ...this.props.menuButtonStyle,
+                            display: this.props.hideButton && !(query && query.forceDrawer) ? "none" : this.props.menuButtonStyle && this.props.menuButtonStyle.display
+                        }
+                    } bsStyle={this.props.buttonStyle} key="menu-button" className={this.props.buttonClassName} onClick={this.props.toggleMenu} disabled={this.props.disabled}><Glyphicon glyph={this.props.glyph}/></Button>
                 <Menu single={this.props.singleSection} {...this.props.menuOptions} title={<Message msgId="menu" />} alignment="left">
                     {this.renderItems()}
                 </Menu>

web/client/translations/data.de-DE

@@ -522,6 +522,7 @@
             "socialIntro": "In deinem bevorzugten sozialen Netzwerk",
             "directLinkTitle": "Über einen direkten Link",
             "embeddedLinkTitle": "Über einen eingebetteten Code",
+            "forceDrawer": "Inhaltsverzeichnis anzeigen",
             "apiLinkTitle": "API verwenden",
             "social": "Social",
             "direct": "Link",

web/client/translations/data.en-US

@@ -522,6 +522,7 @@
             "socialIntro": "In your favourite social network",
             "directLinkTitle": "Via a direct link",
             "embeddedLinkTitle": "Via the embedded code",
+            "forceDrawer": "Show TOC",
             "apiLinkTitle": "Using APIs",
             "social": "Social",
             "direct": "Link",

web/client/translations/data.fr-FR

@@ -524,6 +524,7 @@
             "socialIntro": "via votre réseau social favori",
             "directLinkTitle": "Via un lien direct",
             "embeddedLinkTitle": "Via le code intégré",
+            "forceDrawer": "Afficher la table des matières",
             "apiLinkTitle": "Via le APIs",
             "social": "Social",
             "direct": "Link",

web/client/translations/data.it-IT

@@ -525,6 +525,7 @@
             "direct": "Link",
             "code": "Embed",
             "embeddedLinkTitle": "Con il codice embedded",
+            "forceDrawer": "Mostra l'indice dei livelli",
             "apiLinkTitle": "Usando le API",
             "QRCodeLinkTitle": "Usando il QR Code",
             "msgCopiedUrl":"Copiato",