2.0.1 Beta

src/app/components/AvailableModulesMenu.jsx

@@ -5,6 +5,8 @@ import { stopCtxPropagation } from '../utils/UtilityFunctions';
 import cn from 'classnames';
 import { MountFixed, MountGimballed, MountTurret } from './SvgIcons';
 
+const PRESS_THRESHOLD = 5000; // mouse/touch down threshold
+
 /**
  * Available modules menu
  */
@@ -31,20 +33,19 @@ export default class AvailableModulesMenu extends TranslatedComponent {
   constructor(props, context) {
     super(props);
     this._hideDiff = this._hideDiff.bind(this);
-    this._diffMove = this._diffMove.bind(this);
-    this.state = { list: this._initList(props, context) };
+    this.state = this._initState(props, context);
   }
 
   /**
    * Initiate the list of available moduels
    * @param  {Object} props   React Component properties
    * @param  {Object} context React Component context
-   * @return {Array}         Array of React Components
+   * @return {Object}         list: Array of React Components, currentGroup Component if any
    */
-  _initList(props, context) {
+  _initState(props, context) {
     let translate = context.language.translate;
     let { m, warning, shipMass, onSelect, modules } = props;
-    let list;
+    let list, currentGroup;
     let buildGroup = this._buildGroup.bind(
       this,
       translate,
@@ -62,14 +63,19 @@ export default class AvailableModulesMenu extends TranslatedComponent {
     } else {
       list = [];
       // At present time slots with grouped options (Hardpoints and Internal) can be empty
-      list.push(<div className={'empty-c upp'} key={'empty'} onClick={onSelect.bind(null, null)} >{translate('empty')}</div>);
+      list.push(<div className='empty-c upp' key='empty' onClick={onSelect.bind(null, null)} >{translate('empty')}</div>);
       for (let g in modules) {
-        list.push(<div ref={g} key={g} className={'select-group cap'}>{translate(g)}</div>);
+        if (m && g == m.grp) {
+          list.push(<div ref={(elem) => this.groupElem = elem} key={g} className={'select-group cap'}>{translate(g)}</div>);
+        } else {
+          list.push(<div key={g} className={'select-group cap'}>{translate(g)}</div>);
+        }
+
         list.push(buildGroup(g, modules[g]));
       }
     }
 
-    return list;
+    return { list, currentGroup };
   }
 
   /**
@@ -97,6 +103,22 @@ export default class AvailableModulesMenu extends TranslatedComponent {
         active,
         disabled
       });
+      let eventHandlers;
+
+      if (disabled || active) {
+        eventHandlers = {};
+      } else {
+        let showDiff = this._showDiff.bind(this, mountedModule, m);
+        let select = onSelect.bind(null, m);
+
+        eventHandlers = {
+          onMouseEnter: this._over.bind(this, showDiff),
+          onTouchStart: this._touchStart.bind(this, showDiff),
+          onTouchEnd: this._touchEnd.bind(this, select),
+          onMouseLeave: this._hideDiff,
+          onClick: select
+        };
+      }
 
       switch(m.mount) {
         case 'F': mount = <MountFixed className={'lg'} />; break;
@@ -108,19 +130,10 @@ export default class AvailableModulesMenu extends TranslatedComponent {
         elems.push(<br key={m.grp + i} />);
       }
 
-      let showDiff = disabled || active ? null  : this._showDiff.bind(this, mountedModule, m);
-
       elems.push(
-        <li
-            key={m.id}
-            className={classes}
-            onMouseEnter={showDiff}
-            onTouchStart={showDiff}
-            onMouseLeave={this._hideDiff}
-            onClick={disabled ? null : onSelect.bind(null, m)}
-        >
+        <li key={m.id} className={classes} {...eventHandlers}>
           {mount}
-          <span>{(mount ? ' ' : '') + m.class + m.rating + (m.missile ? '/' + m.missile : '') + (m.name ? ' ' + translate(m.name) : '')}</span>
+          {(mount ? ' ' : '') + m.class + m.rating + (m.missile ? '/' + m.missile : '') + (m.name ? ' ' + translate(m.name) : '')}
         </li>
       );
       prevClass = m.class;
@@ -135,22 +148,46 @@ export default class AvailableModulesMenu extends TranslatedComponent {
    * mounted module and the hovered modules
    * @param  {Object} mm    The module mounet currently
    * @param  {Object} m     The hovered module
-   * @param  {SyntheticEvent} event Event
+   * @param  {DOMRect} rect DOMRect for target element
    */
-  _showDiff(mm, m, event) {
-    event.preventDefault();
+  _showDiff(mm, m, rect) {
     if (this.props.diffDetails) {
-      this.context.tooltip(this.props.diffDetails(m, mm), event.currentTarget.getBoundingClientRect());
+      this.touchTimeout = null;
+      this.context.tooltip(this.props.diffDetails(m, mm), rect);
     }
   }
 
-  _touchStart(event) {
+  /**
+   * Mouse over diff handler
+   * @param  {Function} showDiff diff tooltip callback
+   * @param  {SyntheticEvent} event Event
+   */
+  _over(showDiff, event) {
     event.preventDefault();
-    console.log(Object.assign({}, event));
+    showDiff(event.currentTarget.getBoundingClientRect());
   }
 
-  _diffMove(event) {
-    console.log(Object.assign({}, event));
+  /**
+   * Toucch Start - Show diff after press, otherwise treat as tap
+   * @param  {Function} showDiff diff tooltip callback
+   * @param  {SyntheticEvent} event Event
+   */
+  _touchStart(showDiff, event) {
+    let rect = event.currentTarget.getBoundingClientRect();
+    this.touchTimeout = setTimeout(showDiff.bind(this, rect), PRESS_THRESHOLD);
+  }
+
+  /**
+   * Touch End - Select module on tap
+   * @param  {Function} select Select module callback
+   * @param  {SyntheticEvent} event Event
+   */
+  _touchEnd(select, event) {
+    if (this.touchTimeout !== null) {  // If timeout has not fired (been nulled out) yet
+      select();
+    }
+    event.preventDefault();
+    this._hideDiff();
   }
 
   /**
@@ -158,18 +195,17 @@ export default class AvailableModulesMenu extends TranslatedComponent {
    * @param  {SyntheticEvent} event Event
    */
   _hideDiff(event) {
-    event.preventDefault();
+    clearTimeout(this.touchTimeout);
+    this.touchTimeout = null;
     this.context.tooltip();
   }
 
   /**
-   * Scroll to mounted (if it exists) component on mount
+   * Scroll to mounted (if it exists) module group on mount
    */
   componentDidMount() {
-    let m = this.props.m;
-
-    if (!(this.props.modules instanceof Array) && m && m.grp) {
-      findDOMNode(this).scrollTop = this.refs[m.grp].offsetTop; // Scroll to currently selected group
+    if (this.groupElem) {  // Scroll to currently selected group
+      findDOMNode(this).scrollTop = this.groupElem.offsetTop;
     }
   }
 
@@ -179,7 +215,7 @@ export default class AvailableModulesMenu extends TranslatedComponent {
    * @param  {Object} nextContext Incoming/Next conext
    */
   componentWillReceiveProps(nextProps, nextContext) {
-    this.setState({ list: this._initList(nextProps, nextContext) });
+    this.setState(this._initState(nextProps, nextContext));
   }
 
   /**
@@ -192,9 +228,6 @@ export default class AvailableModulesMenu extends TranslatedComponent {
           className={cn('select', this.props.className)}
           onScroll={this._hideDiff}
           onClick={(e) => e.stopPropagation() }
-          onTouchStart={this._touchStart}
-          onTouchEnd={this._hideDiff}
-          onTouchCancel={this._hideDiff}
           onContextMenu={stopCtxPropagation}
       >
         {this.state.list}