allura-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From brond...@apache.org
Subject [18/47] allura git commit: [#7920] Format navbar to pass eslint inspection
Date Tue, 27 Oct 2015 21:36:44 GMT
[#7920] Format navbar to pass eslint inspection


Project: http://git-wip-us.apache.org/repos/asf/allura/repo
Commit: http://git-wip-us.apache.org/repos/asf/allura/commit/d2c26d53
Tree: http://git-wip-us.apache.org/repos/asf/allura/tree/d2c26d53
Diff: http://git-wip-us.apache.org/repos/asf/allura/diff/d2c26d53

Branch: refs/heads/db/7919
Commit: d2c26d53e2301f6833b461df8c370be32b35141f
Parents: 832cc30
Author: Heith Seewald <hseewald@hsmb.local>
Authored: Tue Oct 6 12:10:25 2015 -0400
Committer: Heith Seewald <hseewald@hsmb.local>
Committed: Fri Oct 23 13:10:02 2015 -0400

----------------------------------------------------------------------
 Allura/allura/public/nf/js/navbar.es6.js | 673 +++++++++++++-------------
 1 file changed, 340 insertions(+), 333 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/allura/blob/d2c26d53/Allura/allura/public/nf/js/navbar.es6.js
----------------------------------------------------------------------
diff --git a/Allura/allura/public/nf/js/navbar.es6.js b/Allura/allura/public/nf/js/navbar.es6.js
index eac0e91..9cdb907 100644
--- a/Allura/allura/public/nf/js/navbar.es6.js
+++ b/Allura/allura/public/nf/js/navbar.es6.js
@@ -8,9 +8,9 @@
  * @returns {string}
  */
 function _getProjectUrl(rest = true) {
-  var [nbhd, proj] = window.location.pathname.split('/').slice(1, 3);
-  var base = `${window.location.protocol}//${window.location.host}`;
-  return rest ? `${base}/rest/${nbhd}/${proj}` : `${base}/${nbhd}/${proj}`;
+    var [nbhd, proj] = window.location.pathname.split('/').slice(1, 3);
+    var base = `${window.location.protocol}//${window.location.host}`;
+    return rest ? `${base}/rest/${nbhd}/${proj}` : `${base}/${nbhd}/${proj}`;
 }
 
 /**
@@ -20,24 +20,24 @@ function _getProjectUrl(rest = true) {
  * @returns {string}
  */
 function getLabel(node) {
-  return node.props.children.props.children.props.name;
+    return node.props.children.props.children.props.name;
 }
 
 var ToolsPropType = {
-  name: React.PropTypes.string.isRequired,
-  url: React.PropTypes.string.isRequired,
-  isSubmenu: React.PropTypes.bool,
-  tools: React.PropTypes.arrayOf(
-    React.PropTypes.shape({
-      ordinal: React.PropTypes.number,
-      mount_point: React.PropTypes.string,
-      name: React.PropTypes.string,
-      url: React.PropTypes.string,
-      is_anchored: React.PropTypes.bool,
-      tool_name: React.PropTypes.string,
-      icon: React.PropTypes.string
-    })
-  ).isRequired
+    name: React.PropTypes.string.isRequired,
+    url: React.PropTypes.string.isRequired,
+    isSubmenu: React.PropTypes.bool,
+    tools: React.PropTypes.arrayOf(
+        React.PropTypes.shape({
+            ordinal: React.PropTypes.number,
+            mount_point: React.PropTypes.string,
+            name: React.PropTypes.string,
+            url: React.PropTypes.string,
+            is_anchored: React.PropTypes.bool,
+            tool_name: React.PropTypes.string,
+            icon: React.PropTypes.string
+        })
+    ).isRequired
 };
 
 /**
@@ -45,20 +45,20 @@ var ToolsPropType = {
  * @constructor
  */
 var NavLink = React.createClass({
-  propTypes: {
-    name: React.PropTypes.string.isRequired,
-    url: React.PropTypes.string.isRequired,
-    style: React.PropTypes.object
-  },
-  render: function() {
-    var classes = this.props.subMenu ? ' subMenu' : '';
-    classes += this.props.classes;
-    return (
-      <a href={ this.props.url } key={ `link-${_.uniqueId()}` } className={ classes }
style={ this.props.style }>
-        { this.props.name }
-      </a>
-      );
-  }
+    propTypes: {
+        name: React.PropTypes.string.isRequired,
+        url: React.PropTypes.string.isRequired,
+        style: React.PropTypes.object
+    },
+    render: function () {
+        var classes = this.props.subMenu ? ' subMenu' : '';
+        classes += this.props.classes;
+        return (
+            <a href={ this.props.url } key={ `link-${_.uniqueId()}` } className={ classes
} style={ this.props.style }>
+                { this.props.name }
+            </a> // jshint ignore:line
+        );
+    }
 });
 
 /**
@@ -67,33 +67,34 @@ var NavLink = React.createClass({
  * @constructor
  */
 var ToolSubMenu = React.createClass({
-  propTypes: {
-    isSubmenu: React.PropTypes.bool,
-    tools: ToolsPropType
-  },
-  handle: '.draggable-handle',
-  mode: 'list',
-  render: function() {
-    var _this = this;
-    var subMenuClass = this.props.isSubmenu ? ' submenu ' : '';
-    var tools = this.props.tools.map(function(item, i) {
-      return (
-        <div className={ 'draggable-element ' + subMenuClass } key={ 'draggable-' + _.uniqueId()
}>
-          <div className='draggable-handle' key={ 'handleId-' + _.uniqueId() }>
-            <NavBarItem {..._this.props} data={ item } name={ item.mount_point } url={
item.url } data-id={ i } />
-          </div>
-        </div>
+    propTypes: {
+        isSubmenu: React.PropTypes.bool,
+        tools: ToolsPropType
+    },
+    handle: '.draggable-handle',
+    mode: 'list',
+    render: function () {
+        var _this = this;
+        var subMenuClass = this.props.isSubmenu ? ' submenu ' : '';
+        var tools = this.props.tools.map(function (item, i) {
+            return (
+                <div className={ 'draggable-element ' + subMenuClass } key={ 'draggable-'
+ _.uniqueId() }>
+                    <div className='draggable-handle' key={ 'handleId-' + _.uniqueId()
}>
+                        <NavBarItem {..._this.props} data={ item } name={ item.mount_point
} url={ item.url } data-id={ i }/>
+                    </div>
+                </div>
+            );
+        });
+
+        return (
+            <div className='hidden' style={ {  display: 'none'} }>
+                <ReactReorderable handle='.draggable-handle' mode='grid' onDragStart={
this.onDragStart } onDrop={ this.props.onToolReorder }
+                                  onChange={ this.onChange }>
+                    { tools }
+                </ReactReorderable>
+            </div>
         );
-    });
-
-    return (
-      <div className='hidden' style={ {  display: 'none'} }>
-        <ReactReorderable handle='.draggable-handle' mode='grid' onDragStart={ this.onDragStart
} onDrop={ this.props.onToolReorder } onChange={ this.onChange }>
-          { tools }
-        </ReactReorderable>
-      </div>
-      );
-  }
+    }
 });
 
 /**
@@ -101,40 +102,40 @@ var ToolSubMenu = React.createClass({
  * @constructor
  */
 var NavBarItem = React.createClass({
-  propTypes: {
-    name: React.PropTypes.string.isRequired,
-    url: React.PropTypes.string.isRequired,
-    isSubmenu: React.PropTypes.bool,
-    tools: ToolsPropType
-  },
-  generateLink: function() {
-    return <NavLink url={ this.props.url } name={ this.props.name } key={ _.uniqueId()
} />;
-  },
-
-  generateSubmenu: function() {
-    return <ToolSubMenu {...this.props} tools={ this.props.data.children } key={ `submenu-${_.uniqueId()}`
} isSubmenu={ true } />;
-  },
-
-  generateContent: function() {
-    var content = [this.generateLink()];
-    if (this.props.data.children) {
-      content.push(this.generateSubmenu());
-    }
+    propTypes: {
+        name: React.PropTypes.string.isRequired,
+        url: React.PropTypes.string.isRequired,
+        isSubmenu: React.PropTypes.bool,
+        tools: ToolsPropType
+    },
+    generateLink: function () {
+        return <NavLink url={ this.props.url } name={ this.props.name } key={ _.uniqueId()
}/>;
+    },
+
+    generateSubmenu: function () {
+        return <ToolSubMenu {...this.props} tools={ this.props.data.children } key={ `submenu-${_.uniqueId()}`
} isSubmenu={ true }/>;
+    },
+
+    generateContent: function () {
+        var content = [this.generateLink()];
+        if (this.props.data.children) {
+            content.push(this.generateSubmenu());
+        }
+
+        return content;
+    },
+
+    render: function () {
+        var content = this.generateContent();
+        var classes = this.props.editMode ? 'tb-item tb-item-edit' : 'tb-item';
+        classes = this.props.is_anchored ? `${classes} anchored` : classes;
 
-    return content;
-  },
-
-  render: function() {
-    var content = this.generateContent();
-    var classes = this.props.editMode ? 'tb-item tb-item-edit' : 'tb-item';
-    classes = this.props.is_anchored ? `${classes} anchored` : classes;
-
-    return (
-      <div className={ classes }>
-        { content }
-      </div>
-      );
-  }
+        return (
+            <div className={ classes }>
+                { content }
+            </div>
+        );
+    }
 });
 
 /**
@@ -142,27 +143,27 @@ var NavBarItem = React.createClass({
  * @constructor
  */
 var GroupingThreshold = React.createClass({
-  propTypes: {
-    initialValue: React.PropTypes.number.isRequired
-  },
-  getInitialState: function() {
-    return {
-      value: this.props.initialValue
-    };
-  },
-
-  handleChange: function(event) {
-    this.setState({
-      value: event.target.value
-    });
-    this.props.onUpdateThreshold(event);
-  },
-
-  render: function() {
-    return (
-      <div>
-        { !!this.props.isHidden &&
-          <div id='threshold-config'>
+    propTypes: {
+        initialValue: React.PropTypes.number.isRequired
+    },
+    getInitialState: function () {
+        return {
+            value: this.props.initialValue
+        };
+    },
+
+    handleChange: function (event) {
+        this.setState({
+            value: event.target.value
+        });
+        this.props.onUpdateThreshold(event);
+    },
+
+    render: function () {
+        return (
+            <div>
+                { !!this.props.isHidden &&
+                <div id='threshold-config'>
             <span>
               <label htmlFor='threshold-input'>Grouping Threshold</label>
                 <input type='number' name='threshold-input' className='tooltip'
@@ -171,48 +172,49 @@ var GroupingThreshold = React.createClass({
                        onChange={ this.handleChange }
                        min='1' max='10'/>
               </span>
-          </div> }
-      </div>
-      );
-  }
+                </div> }
+            </div>
+        );
+    }
 });
 
+
 /**
  * The NavBar when in "Normal" mode.
  * @constructor
  */
 var NormalNavBar = React.createClass({
-  buildMenu: function(item) {
-    var classes = ` ui-icon-${item.icon}-32`;
-    classes = item.is_anchored ? `${classes} anchored` : classes;
+    buildMenu: function (item) {
+        var classes = ` ui-icon-${item.icon}-32`;
+        classes = item.is_anchored ? `${classes} anchored` : classes;
 
-    var subMenu;
-    if (item.children) {
-      subMenu = item.children.map(this.buildMenu);
-    }
+        var subMenu;
+        if (item.children) {
+            subMenu = item.children.map(this.buildMenu);
+        }
+
+        return (
+            <li>
+                <a href={ item.url } key={ 'link-' + _.uniqueId() } className={ classes
}>
+                    { item.name }
+                </a>
+                <ul className={ item.children ? 'submenu' : '' }>
+                    { subMenu }
+                </ul>
+            </li>
+        );
+    },
 
-    return (
-      <li>
-        <a href={ item.url } key={ 'link-' + _.uniqueId() } className={ classes }>
-          { item.name }
-        </a>
-        <ul className={ item.children ? 'submenu' : '' }>
-          { subMenu }
-        </ul>
-      </li>
-      );
-  },
-
-  render: function() {
-    var listItems = this.props.items.map(this.buildMenu);
-    var classes = 'dropdown';
-    classes = this.props.isSubmenu ? classes += ' submenu' : classes;
-    return (
-      <ul className={ classes } key={ `toolList-${_.uniqueId()}` }>
-        { listItems }
-      </ul>
-      );
-  }
+    render: function () {
+        var listItems = this.props.items.map(this.buildMenu);
+        var classes = 'dropdown';
+        classes = this.props.isSubmenu ? classes += ' submenu' : classes;
+        return (
+            <ul className={ classes } key={ `toolList-${_.uniqueId()}` }>
+                { listItems }
+            </ul>
+        );
+    }
 });
 
 /**
@@ -220,54 +222,56 @@ var NormalNavBar = React.createClass({
  * @constructor
  */
 var AdminNav = React.createClass({
-  propTypes: {
-    name: React.PropTypes.string.isRequired,
-    url: React.PropTypes.string.isRequired,
-    isSubmenu: React.PropTypes.bool,
-    tools: ToolsPropType
-  },
-  handle: '.draggable-handle',
-  mode: 'grid',
-  getInitialState: function() {
-    return {
-      hover: false
-    };
-  },
-
-  mouseOver: function() {
-    this.setState({
-      hover: true
-    });
-  },
-
-  mouseOut: function() {
-    this.setState({
-      hover: false
-    });
-  },
-
-  render: function() {
-    var _this = this;
-    var subMenuClass = this.props.isSubmenu ? ' submenu ' : '';
-    var tools = this.props.tools.map(function(item, i) {
-      return (
-        <div className={ 'draggable-element' + subMenuClass } key={ 'draggable-' + _.uniqueId()
}>
-          <div className='draggable-handle' key={ 'handleId-' + _.uniqueId() }>
-            <NavBarItem onMouseOver={ _this.mouseOver } onMouseOut={ _this.mouseOut }
{..._this.props} data={ item } name={ item.mount_point } url={ item.url }
-            key={ 'tb-item-' + _.uniqueId() } is_anchored={ item.is_anchored } data-id={
i } />
-          </div>
-        </div>
+    propTypes: {
+        name: React.PropTypes.string.isRequired,
+        url: React.PropTypes.string.isRequired,
+        isSubmenu: React.PropTypes.bool,
+        tools: ToolsPropType
+    },
+    handle: '.draggable-handle',
+    mode: 'grid',
+    getInitialState: function () {
+        return {
+            hover: false
+        };
+    },
+
+    mouseOver: function () {
+        this.setState({
+            hover: true
+        });
+    },
+
+    mouseOut: function () {
+        this.setState({
+            hover: false
+        });
+    },
+
+    render: function () {
+        var _this = this;
+        var subMenuClass = this.props.isSubmenu ? ' submenu ' : '';
+        var tools = this.props.tools.map(function (item, i) {
+            return (
+                <div className={ 'draggable-element' + subMenuClass } key={ 'draggable-'
+ _.uniqueId() }>
+                    <div className='draggable-handle' key={ 'handleId-' + _.uniqueId()
}>
+                        <NavBarItem onMouseOver={ _this.mouseOver } onMouseOut={ _this.mouseOut
} {..._this.props} data={ item }
+                                    name={ item.mount_point } url={ item.url }
+                                    key={ 'tb-item-' + _.uniqueId() } is_anchored={ item.is_anchored
} data-id={ i }/>
+                    </div>
+                </div>
+            );
+        });
+
+        return (
+            <div className='react-drag edit-mode'>
+                <ReactReorderable key={ 'reorder-' + _.uniqueId() } handle='.draggable-handle'
mode='grid' onDragStart={ this.onDragStart }
+                                  onDrop={ this.props.onToolReorder } onChange={ this.onChange
}>
+                    { tools }
+                </ReactReorderable>
+            </div>
         );
-    });
-
-    return (
-      <div className='react-drag edit-mode'>
-        <ReactReorderable key={ 'reorder-' + _.uniqueId() } handle='.draggable-handle'
mode='grid' onDragStart={ this.onDragStart } onDrop={ this.props.onToolReorder } onChange={
this.onChange }>
-          { tools }
-        </ReactReorderable>
-      </div>
-      );
-  }
+    }
 });
 
 /**
@@ -275,17 +279,17 @@ var AdminNav = React.createClass({
  * @constructor
  */
 var ToggleAdminButton = React.createClass({
-  propTypes: {
-    visible: React.PropTypes.bool
-  },
-  render: function() {
-    var classes = this.props.visible ? 'fa fa-unlock' : 'fa fa-lock';
-    return (
-      <button id='toggle-admin-btn' onClick={ this.props.handleButtonPush } className='admin-toolbar-right'>
-        <i className={ classes }></i>
-      </button>
-      );
-  }
+    propTypes: {
+        visible: React.PropTypes.bool
+    },
+    render: function () {
+        var classes = this.props.visible ? 'fa fa-unlock' : 'fa fa-lock';
+        return (
+            <button id='toggle-admin-btn' onClick={ this.props.handleButtonPush } className='admin-toolbar-right'>
+                <i className={ classes }></i>
+            </button>
+        );
+    }
 });
 
 /**
@@ -294,138 +298,141 @@ var ToggleAdminButton = React.createClass({
  * @param {object} initialData - Consumes the _nav.json endpoint.
  */
 var Main = React.createClass({
-  propTypes: {
-    initialData: ToolsPropType
-  },
-  getInitialState: function() {
-    return {
-      data: this.props.initialData,
-      visible: false,
-      _session_id: $.cookie('_session_id')
-    };
-  },
-
-  /**
-  * When invoked, this updates the state with the latest data from the server.
-  */
-  getNavJson: function() {
-    $.get(`${_getProjectUrl(false)}/_nav.json`, function(result) {
-      if (this.isMounted()) {
+    propTypes: {
+        initialData: ToolsPropType
+    },
+    getInitialState: function () {
+        return {
+            data: this.props.initialData,
+            visible: false,
+            _session_id: $.cookie('_session_id')
+        };
+    },
+
+    /**
+     * When invoked, this updates the state with the latest data from the server.
+     */
+    getNavJson: function () {
+        $.get(`${_getProjectUrl(false)}/_nav.json`, function (result) {
+            if (this.isMounted()) {
+                this.setState({
+                    data: result
+                });
+            }
+        }.bind(this));
+    },
+
+    /**
+     * Handles the locking and unlocking of the NavBar
+     */
+    handleToggleAdmin: function () {
+        this.setState({
+            visible: !this.state.visible
+        });
+    },
+
+    /**
+     * Handles the changing of the NavBars grouping threshold.
+     * @param {object} event
+     */
+    onUpdateThreshold: function (event) {
+        var _this = this;
+        var thres = event.target.value;
+        var url = `${_getProjectUrl()}/admin/configure_tool_grouping`;
+        var csrf = $.cookie('_session_id');
+        var data = {
+            _session_id: csrf,
+            grouping_threshold: thres
+        };
+        var _data = this.state.data;
+        _data.grouping_threshold = thres;
         this.setState({
-          data: result
+            data: _data
         });
-      }
-    }.bind(this));
-  },
-
-  /**
-  * Handles the locking and unlocking of the NavBar
-  */
-  handleToggleAdmin: function() {
-    this.setState({
-      visible: !this.state.visible
-    });
-  },
-
-  /**
-   * Handles the changing of the NavBars grouping threshold.
-   * @param {object} event
-   */
-  onUpdateThreshold: function(event) {
-    var _this = this;
-    var thres = event.target.value;
-    var url = `${_getProjectUrl()}/admin/configure_tool_grouping`;
-    var csrf = $.cookie('_session_id');
-    var data = {
-      _session_id: csrf,
-      grouping_threshold: thres
-    };
-    var _data = this.state.data;
-    _data.grouping_threshold = thres;
-    this.setState({
-      data: _data
-    });
-    this.setState({
-      in_progress: true
-    });
-    $.post(url, data, function(resp) {}.bind(this)).always(function() {
-      _this.setState({
-        in_progress: false
-      });
-    });
-
-    _this.getNavJson();
-    return false;
-  },
-
-  /**
-   * Handles the changing of the NavBars grouping threshold.
-   * @param {array} data - Array of tools
-   */
-  onToolReorder: function(data) {
-    var tools = this.state.data;
-    var params = {
-      _session_id: $.cookie('_session_id')
-    };
-
-    data.map(function(tool, i) {
-      var name = getLabel(tool);
-      var index = tools.children.findIndex(
-        x => x.mount_point === name
-      );
-      tools.children[index].ordinal = i;
-      params[i] = name;
-    });
-
-    this.setState({
-      data: tools
-    });
-    var _this = this;
-    var url = _getProjectUrl() + '/admin/mount_order';
-    $.ajax({
-      type: 'POST',
-      url: url,
-      data: params,
-      success: function() {
-        $('#messages').notify('Tool order updated',
-          {
-            status: 'confirm'
-          });
+        this.setState({
+            in_progress: true
+        });
+        $.post(url, data, function () {
+        }.bind(this)).always(function () {
+            _this.setState({
+                in_progress: false
+            });
+        });
+
         _this.getNavJson();
-      },
-
-      error: function() {
-        $('#messages').notify('Error saving tool order.',
-          {
-            status: 'error'
-          });
-      }
-    });
-  },
-
-  render: function() {
-    var editMode = this.state.visible ? 'edit-mode' : '';
-    var _this = this;
-    var navBarSwitch = (showAdmin) => {
-      if (showAdmin) {
+        return false;
+    },
+
+    /**
+     * Handles the changing of the NavBars grouping threshold.
+     * @param {array} data - Array of tools
+     */
+    onToolReorder: function (data) {
+        var tools = this.state.data;
+        var params = {
+            _session_id: $.cookie('_session_id')
+        };
+
+        data.map(function (tool, i) {
+            var name = getLabel(tool);
+            var index = tools.children.findIndex(
+                    x => x.mount_point === name
+            );
+            tools.children[index].ordinal = i;
+            params[i] = name;
+        });
+
+        this.setState({
+            data: tools
+        });
+        var _this = this;
+        var url = _getProjectUrl() + '/admin/mount_order';
+        $.ajax({
+            type: 'POST',
+            url: url,
+            data: params,
+            success: function () {
+                $('#messages').notify('Tool order updated',
+                    {
+                        status: 'confirm'
+                    });
+                _this.getNavJson();
+            },
+
+            error: function () {
+                $('#messages').notify('Error saving tool order.',
+                    {
+                        status: 'error'
+                    });
+            }
+        });
+    },
+
+    render: function () {
+        var editMode = this.state.visible ? 'edit-mode' : '';
+        var _this = this;
+        var navBarSwitch = (showAdmin) => {
+            if (showAdmin) {
+                return (
+                    <AdminNav tools={ _this.state.data.children } data={ _this.state.data
} onToolReorder={ _this.onToolReorder }
+                              onUpdateMountOrder={ _this.onUpdateMountOrder } editMode={
_this.state.visible }
+                        />
+                );
+            } else {
+                return <NormalNavBar items={ _this.state.data.children } key={ `normalNav-${_.uniqueId()}`
}/>;
+            }
+        };
+        var navBar = navBarSwitch(this.state.visible);
+
         return (
-          <AdminNav tools={ _this.state.data.children } data={ _this.state.data } onToolReorder={
_this.onToolReorder } onUpdateMountOrder={ _this.onUpdateMountOrder } editMode={ _this.state.visible
}
-          />
-          );
-      } else {
-        return <NormalNavBar items={ _this.state.data.children } key={ `normalNav-${_.uniqueId()}`
} />;
-      }
-    };
-    var navBar = navBarSwitch(this.state.visible);
-
-    return (
-      <div ref={ _.uniqueId() } className={ 'nav_admin ' + editMode }>
-        { navBar }
-        <div id='bar-config'>
-          <GroupingThreshold onUpdateThreshold={ this.onUpdateThreshold } isHidden={ this.state.visible
} initialValue={ this.state.data.grouping_threshold } />
-        </div>
-        <ToggleAdminButton key={ _.uniqueId() } handleButtonPush={ this.handleToggleAdmin
} visible={ this.state.visible } />
-      </div>
-      );
-  }
+            <div ref={ _.uniqueId() } className={ 'nav_admin ' + editMode }>
+                { navBar }
+                <div id='bar-config'>
+                    <GroupingThreshold onUpdateThreshold={ this.onUpdateThreshold } isHidden={
this.state.visible }
+                                       initialValue={ this.state.data.grouping_threshold
}/>
+                </div>
+                <ToggleAdminButton key={ _.uniqueId() } handleButtonPush={ this.handleToggleAdmin
} visible={ this.state.visible }/>
+            </div>
+        );
+    }
 });


Mime
View raw message