From ce9756e44dcdc1dedb46337f492f4ede8719fdd8 Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Sun, 12 Jul 2015 12:34:51 -0700
Subject: Improved selection logic when using both the mouse and arrow keys

---
 web/react/components/mention_list.jsx | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

(limited to 'web/react/components/mention_list.jsx')

diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index 0bef41905..6b1d98cf6 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -32,7 +32,7 @@ module.exports = React.createClass({
 
                     if (!self.getSelection(self.state.selectedMention)) {
                         self.setState({ selectedMention: 0 });
-                        self.refs['mention' + self.state.selectedMention].deselect();
+                        //self.refs['mention' + self.state.selectedMention].deselect();
                     }
                     else {
                         self.refs['mention' + self.state.selectedMention].deselect();
@@ -54,6 +54,8 @@ module.exports = React.createClass({
                         }
                     }
                     self.refs['mention' + self.state.selectedMention].select();
+
+                    //self.checkIfInView('#'+self.props.id);
                 }
             }
         );
@@ -85,6 +87,13 @@ module.exports = React.createClass({
 
         this.setState({ mentionText: '-1' });
     },
+    handleMouseEnter: function(listId) {
+        if (this.getSelection(this.state.selectedMention)) {
+            this.refs['mention' + this.state.selectedMention].deselect();
+        }
+        this.setState({ selectedMention: listId });
+        this.refs['mention' + listId].select();
+    },
     getSelection: function(listId) {
         var mention = this.refs['mention' + listId];
         if (!mention) 
@@ -103,6 +112,15 @@ module.exports = React.createClass({
     isEmpty: function() {
         return (!this.refs.mention0);
     },
+    checkIfInView: function(element) {
+        var offset = element.offset().top - $(window).scrollTop();
+        if(offset > window.innerHeight){
+            // Not in view so scroll to it
+            $('body').animate({scrollTop: offset}, 1000);
+            return false;
+        }
+       return true;
+    },
     alreadyMentioned: function(username) {
         var excludeUsers = this.state.excludeUsers;
         for (var i = 0; i < excludeUsers.length; i++) {
@@ -113,7 +131,7 @@ module.exports = React.createClass({
         return false;
     },
     getInitialState: function() {
-        return { excludeUsers: [], mentionText: "-1", selectedMention: 0 };
+        return { excludeUsers: [], mentionText: "-1", selectedMention: 0, selectedUsername: "" };
     },
     render: function() {
         var mentionText = this.state.mentionText;
@@ -166,6 +184,7 @@ module.exports = React.createClass({
                         id={users[i].id}
                         listId={index}
                         isFocus={this.state.selectedMention === index ? true : false}
+                        handleMouseEnter={this.handleMouseEnter}
                         handleClick={this.handleClick} />
                 );
                 index++;
-- 
cgit v1.2.3-1-g7c22