From 1ac883a40816f471e959e49c8fd2f4e41f5ae9d2 Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Fri, 24 Jul 2015 15:35:56 -0700
Subject: Removes ability for the mention list to cycle from top to bottom and
 vice-versa

---
 web/react/components/mention_list.jsx | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 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 71a6083d2..8eae4d3b1 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -31,24 +31,16 @@ module.exports = React.createClass({
                     e.stopPropagation();
                     e.preventDefault();
 
-                    var tempSelectedMention = -1;
                     if (e.which === 38) {    
                         if (self.getSelection(self.state.selectedMention - 1))
                             self.setState({ selectedMention: self.state.selectedMention - 1, selectedUsername: self.refs['mention' + (self.state.selectedMention - 1)].props.username });
-                        else {
-                            while (self.getSelection(++tempSelectedMention))
-                                ; //Need to find the top of the list
-                            self.setState({ selectedMention: tempSelectedMention - 1, selectedUsername: self.refs['mention' + (tempSelectedMention - 1)].props.username });
-                        }
                     }
                     else if (e.which === 40) {
                         if (self.getSelection(self.state.selectedMention + 1))
                             self.setState({ selectedMention: self.state.selectedMention + 1, selectedUsername: self.refs['mention' + (self.state.selectedMention + 1)].props.username });
-                        else
-                            self.setState({ selectedMention: 0, selectedUsername: self.refs.mention0.props.username });
                     }
 
-                    self.scrollToMention(e.which, tempSelectedMention);
+                    self.scrollToMention(e.which);
                 }
             }
         );
@@ -124,15 +116,15 @@ module.exports = React.createClass({
     isEmpty: function() {
         return (!this.refs.mention0);
     },
-    scrollToMention: function(keyPressed, ifLoopUp) {
+    scrollToMention: function(keyPressed) {
         var direction = keyPressed === 38 ? "up" : "down";
         var scrollAmount = 0;
 
-        if (direction === "up" && ifLoopUp !== -1)
+        /*if (direction === "up" && ifLoopUp !== -1)
             scrollAmount = $("#mentionsbox").height() * 100; //Makes sure that it scrolls all the way to the bottom
         else if (direction === "down" && this.state.selectedMention === 0)
-            scrollAmount = 0;
-        else if (direction === "up") 
+            scrollAmount = 0;*/
+        if (direction === "up") 
             scrollAmount = "-=" + ($('#'+this.refs['mention' + this.state.selectedMention].props.id +"_mentions").innerHeight() - 5);
         else if (direction === "down")
             scrollAmount = "+=" + ($('#'+this.refs['mention' + this.state.selectedMention].props.id +"_mentions").innerHeight() - 5);
-- 
cgit v1.2.3-1-g7c22


From affbf6f01bbf3a0aff509fd301df51b4346c59d3 Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Mon, 3 Aug 2015 12:45:08 -0700
Subject: Cosmetic changes to better follow style guide

---
 web/react/components/mention_list.jsx | 170 +++++++++++++++++++---------------
 1 file changed, 95 insertions(+), 75 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 8eae4d3b1..a0f68df98 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -15,29 +15,29 @@ var MAX_ITEMS_IN_LIST = 25;
 var ITEM_HEIGHT = 36;
 
 module.exports = React.createClass({
-    displayName: "MentionList",
+    displayName: 'MentionList',
     componentDidMount: function() {
-        PostStore.addMentionDataChangeListener(this._onChange);
+        PostStore.addMentionDataChangeListener(this.onListenerChange);
         var self = this;
 
-        $('body').on('keydown.mentionlist', '#'+this.props.id,
+        $('body').on('keydown.mentionlist', '#' + this.props.id,
             function(e) {
-                if (!self.isEmpty() && self.state.mentionText != '-1' && (e.which === 13 || e.which === 9)) {
+                if (!self.isEmpty() && self.state.mentionText !== '-1' && (e.which === 13 || e.which === 9)) {
                     e.stopPropagation();
                     e.preventDefault();
                     self.addCurrentMention();
-                }
-                else if (!self.isEmpty() && self.state.mentionText != '-1' && (e.which === 38 || e.which === 40)) {
+                } else if (!self.isEmpty() && self.state.mentionText !== '-1' && (e.which === 38 || e.which === 40)) {
                     e.stopPropagation();
                     e.preventDefault();
 
-                    if (e.which === 38) {    
-                        if (self.getSelection(self.state.selectedMention - 1))
-                            self.setState({ selectedMention: self.state.selectedMention - 1, selectedUsername: self.refs['mention' + (self.state.selectedMention - 1)].props.username });
-                    }
-                    else if (e.which === 40) {
-                        if (self.getSelection(self.state.selectedMention + 1))
-                            self.setState({ selectedMention: self.state.selectedMention + 1, selectedUsername: self.refs['mention' + (self.state.selectedMention + 1)].props.username });
+                    if (e.which === 38) {
+                        if (self.getSelection(self.state.selectedMention - 1)) {
+                            self.setState({selectedMention: self.state.selectedMention - 1, selectedUsername: self.refs['mention' + (self.state.selectedMention - 1)].props.username});
+                        }
+                    } else if (e.which === 40) {
+                        if (self.getSelection(self.state.selectedMention + 1)) {
+                            self.setState({selectedMention: self.state.selectedMention + 1, selectedUsername: self.refs['mention' + (self.state.selectedMention + 1)].props.username});
+                        }
                     }
 
                     self.scrollToMention(e.which);
@@ -45,43 +45,48 @@ module.exports = React.createClass({
             }
         );
         $(document).click(function(e) {
-            if (!($('#'+self.props.id).is(e.target) || $('#'+self.props.id).has(e.target).length ||
-                ('mentionlist' in self.refs && $(self.refs['mentionlist'].getDOMNode()).has(e.target).length))) {
-                self.setState({mentionText: "-1"})
+            if (!($('#' + self.props.id).is(e.target) || $('#' + self.props.id).has(e.target).length ||
+                ('mentionlist' in self.refs && $(self.refs.mentionlist.getDOMNode()).has(e.target).length))) {
+                self.setState({mentionText: '-1'});
             }
         });
     },
     componentWillUnmount: function() {
-        PostStore.removeMentionDataChangeListener(this._onChange);
-        $('body').off('keydown.mentionlist', '#'+this.props.id);
+        PostStore.removeMentionDataChangeListener(this.onListenerChange);
+        $('body').off('keydown.mentionlist', '#' + this.props.id);
     },
     componentDidUpdate: function() {
-        if (this.state.mentionText != "-1") {
-            if (this.state.selectedUsername !== "" && (!this.getSelection(this.state.selectedMention) || this.state.selectedUsername !== this.refs['mention' + this.state.selectedMention].props.username)) {
+        if (this.state.mentionText !== '-1') {
+            if (this.state.selectedUsername !== '' && (!this.getSelection(this.state.selectedMention) || this.state.selectedUsername !== this.refs['mention' + this.state.selectedMention].props.username)) {
                 var tempSelectedMention = -1;
                 var foundMatch = false;
                 while (tempSelectedMention < this.state.selectedMention && this.getSelection(++tempSelectedMention)) {
                     if (this.state.selectedUsername === this.refs['mention' + tempSelectedMention].props.username) {
-                        this.setState({ selectedMention: tempSelectedMention });
+                        this.setState({selectedMention: tempSelectedMention});
                         foundMatch = true;
                         break;
                     }
                 }
                 if (this.getSelection(0) && !foundMatch) {
-                    this.setState({ selectedMention: 0, selectedUsername: this.refs.mention0.props.username });
+                    this.setState({selectedMention: 0, selectedUsername: this.refs.mention0.props.username});
                 }
             }
-        }
-        else if (this.state.selectedMention !== 0) {
-            this.setState({ selectedMention: 0, selectedUsername: "" });
+        } else if (this.state.selectedMention !== 0) {
+            this.setState({selectedMention: 0, selectedUsername: ''});
         }
     },
-    _onChange: function(id, mentionText, excludeList) {
-        if (id !== this.props.id) return;
+    onListenerChange: function(id, mentionText, excludeList) {
+        if (id !== this.props.id) {
+            return;
+        }
 
         var newState = this.state;
-        if (mentionText != null) newState.mentionText = mentionText;
-        if (excludeList != null) newState.excludeUsers = excludeList;
+        if (mentionText != null) {
+            newState.mentionText = mentionText;
+        }
+        if (excludeList != null) {
+            newState.excludeUsers = excludeList;
+        }
 
         this.setState(newState);
     },
@@ -92,44 +97,49 @@ module.exports = React.createClass({
             username: name
         });
 
-        this.setState({ mentionText: '-1' });
+        this.setState({mentionText: '-1'});
     },
     handleMouseEnter: function(listId) {
-        this.setState({ selectedMention: listId, selectedUsername: this.refs['mention' + listId].props.username });
+        this.setState({selectedMention: listId, selectedUsername: this.refs['mention' + listId].props.username});
     },
     getSelection: function(listId) {
-        if (!this.refs['mention' + listId]) 
+        if (!this.refs['mention' + listId]) {
             return false;
-        else
-            return true;
+        }
+        return true;
     },
     addCurrentMention: function() {
-        if (!this.getSelection(this.state.selectedMention)) 
+        if (!this.getSelection(this.state.selectedMention)) {
             this.addFirstMention();
-        else
+        } else {
             this.refs['mention' + this.state.selectedMention].handleClick();
+        }
     },
     addFirstMention: function() {
-        if (!this.refs.mention0) return;
+        if (!this.refs.mention0) {
+            return;
+        }
         this.refs.mention0.handleClick();
     },
     isEmpty: function() {
         return (!this.refs.mention0);
     },
     scrollToMention: function(keyPressed) {
-        var direction = keyPressed === 38 ? "up" : "down";
+        var direction;
+        if (keyPressed === 38) {
+            direction = 'up';
+        } else {
+            direction = 'down';
+        }
         var scrollAmount = 0;
 
-        /*if (direction === "up" && ifLoopUp !== -1)
-            scrollAmount = $("#mentionsbox").height() * 100; //Makes sure that it scrolls all the way to the bottom
-        else if (direction === "down" && this.state.selectedMention === 0)
-            scrollAmount = 0;*/
-        if (direction === "up") 
-            scrollAmount = "-=" + ($('#'+this.refs['mention' + this.state.selectedMention].props.id +"_mentions").innerHeight() - 5);
-        else if (direction === "down")
-            scrollAmount = "+=" + ($('#'+this.refs['mention' + this.state.selectedMention].props.id +"_mentions").innerHeight() - 5);
+        if (direction === 'up') {
+            scrollAmount = '-=' + ($('#' + this.refs['mention' + this.state.selectedMention].props.id + '_mentions').innerHeight() - 5);
+        } else if (direction === 'down') {
+            scrollAmount = '+=' + ($('#' + this.refs['mention' + this.state.selectedMention].props.id + '_mentions').innerHeight() - 5);
+        }
 
-        $("#mentionsbox").animate({
+        $('#mentionsbox').animate({
             scrollTop: scrollAmount
         }, 75);
     },
@@ -143,12 +153,14 @@ module.exports = React.createClass({
         return false;
     },
     getInitialState: function() {
-        return { excludeUsers: [], mentionText: "-1", selectedMention: 0, selectedUsername: "" };
+        return {excludeUsers: [], mentionText: '-1', selectedMention: 0, selectedUsername: ''};
     },
     render: function() {
         var self = this;
         var mentionText = this.state.mentionText;
-        if (mentionText === '-1') return null;
+        if (mentionText === '-1') {
+            return null;
+        }
 
         var profiles = UserStore.getActiveOnlyProfiles();
         var users = [];
@@ -157,32 +169,38 @@ module.exports = React.createClass({
         }
 
         var all = {};
-        all.username = "all";
-        all.nickname = "";
-        all.secondary_text = "Notifies everyone in the team";
-        all.id = "allmention";
+        all.username = 'all';
+        all.nickname = '';
+        all.secondary_text = 'Notifies everyone in the team';
+        all.id = 'allmention';
         users.push(all);
 
         var channel = {};
-        channel.username = "channel";
-        channel.nickname = "";
-        channel.secondary_text = "Notifies everyone in the channel";
-        channel.id = "channelmention";
+        channel.username = 'channel';
+        channel.nickname = '';
+        channel.secondary_text = 'Notifies everyone in the channel';
+        channel.id = 'channelmention';
         users.push(channel);
 
-        users.sort(function(a,b) {
-            if (a.username < b.username) return -1;
-            if (a.username > b.username) return 1;
+        users.sort(function(a, b) {
+            if (a.username < b.username) {
+                return -1;
+            }
+            if (a.username > b.username) {
+                return 1;
+            }
             return 0;
         });
         var mentions = {};
         var index = 0;
 
         for (var i = 0; i < users.length && index < MAX_ITEMS_IN_LIST; i++) {
-            if (this.alreadyMentioned(users[i].username)) continue;
-
-            if ((users[i].first_name && users[i].first_name.lastIndexOf(mentionText,0) === 0)
-                    || (users[i].last_name && users[i].last_name.lastIndexOf(mentionText,0) === 0) || users[i].username.lastIndexOf(mentionText,0) === 0) {
+            if (this.alreadyMentioned(users[i].username)) {
+                continue;
+            }
+            if ((users[i].first_name && users[i].first_name.lastIndexOf(mentionText, 0) === 0) ||
+                    (users[i].last_name && users[i].last_name.lastIndexOf(mentionText, 0) === 0) ||
+                    users[i].username.lastIndexOf(mentionText, 0) === 0) {
                 mentions[index] = (
                     <Mention
                         ref={'mention' + index}
@@ -190,7 +208,7 @@ module.exports = React.createClass({
                         secondary_text={Utils.getFullName(users[i])}
                         id={users[i].id}
                         listId={index}
-                        isFocused={this.state.selectedMention === index ? "mentions-focus" : ""}
+                        isFocused={this.state.selectedMention === index ? 'mentions-focus' : ''}
                         handleMouseEnter={function(value) { return function() { self.handleMouseEnter(value); } }(index)}
                         handleClick={this.handleClick} />
                 );
@@ -200,21 +218,23 @@ module.exports = React.createClass({
 
         var numMentions = Object.keys(mentions).length;
 
-        if (numMentions < 1) return null;
+        if (numMentions < 1) {
+            return null;
+        }
 
-        var $mention_tab = $('#'+this.props.id);
-        var maxHeight = Math.min(MAX_HEIGHT_LIST, $mention_tab.offset().top - 10);
+        var $mentionTab = $('#' + this.props.id);
+        var maxHeight = Math.min(MAX_HEIGHT_LIST, $mentionTab.offset().top - 10);
         var style = {
-            height: Math.min(maxHeight, (numMentions*ITEM_HEIGHT) + 4),
-            width:  $mention_tab.parent().width(),
-            bottom: $(window).height() - $mention_tab.offset().top,
-            left:   $mention_tab.offset().left
+            height: Math.min(maxHeight, (numMentions * ITEM_HEIGHT) + 4),
+            width: $mentionTab.parent().width(),
+            bottom: $(window).height() - $mentionTab.offset().top,
+            left: $mentionTab.offset().left
         };
 
         return (
-            <div className="mentions--top" style={style}>
-                <div ref="mentionlist" className="mentions-box" id="mentionsbox">
-                    { mentions }
+            <div className='mentions--top' style={style}>
+                <div ref='mentionlist' className='mentions-box' id='mentionsbox'>
+                    {mentions}
                 </div>
             </div>
         );
-- 
cgit v1.2.3-1-g7c22

