From 6e67be40544f537d624f7f4449b8fcb97e338fb3 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Fri, 19 Jun 2015 16:04:33 -0700 Subject: Added framework for handling up and down arrow key presses to move between different @mention choices --- web/react/components/mention_list.jsx | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) (limited to 'web') diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx index 103ff29bb..3796d465f 100644 --- a/web/react/components/mention_list.jsx +++ b/web/react/components/mention_list.jsx @@ -56,6 +56,22 @@ module.exports = React.createClass({ this.setState({ mentionText: '-1' }); }, + handleKeyDown: function(e) { + var selectedMention = this.state.selectedMention ? this.state.selectedMention : 1; + + // Need to be able to know number of mentions, use in conditionals & still + // need to figure out how to highlight the mention I want every time. + // Remember separate Mention Ref within for, second if statement in render + // Maybe have the call there instead? Ehhh maybe not but need that to be able + // to "select" it maybe... + if (e.key === "ArrowUp") { + selectedMention = selectedMention === ? 1 : selectedMention++; + } + else if (e.key === "ArrowDown") { + selectedMention = selectedMention === 1 ? : selectedMention--; + } + this.setState({selectedMention: selectedMention}); + } addFirstMention: function() { if (!this.refs.mention0) return; this.refs.mention0.handleClick(); @@ -144,7 +160,7 @@ module.exports = React.createClass({ return (
-
+
{ mentions }
-- cgit v1.2.3-1-g7c22 From f635376aa45e2fbaa30698949a0c991ea06aa320 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Fri, 19 Jun 2015 16:04:56 -0700 Subject: Added comma --- web/react/components/mention_list.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web') diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx index 3796d465f..a2c6f0ff7 100644 --- a/web/react/components/mention_list.jsx +++ b/web/react/components/mention_list.jsx @@ -71,7 +71,7 @@ module.exports = React.createClass({ selectedMention = selectedMention === 1 ? : selectedMention--; } this.setState({selectedMention: selectedMention}); - } + }, addFirstMention: function() { if (!this.refs.mention0) return; this.refs.mention0.handleClick(); -- cgit v1.2.3-1-g7c22 From 924fd8609bb0b512cd60c1f345ec22dcb6bf0612 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Mon, 22 Jun 2015 17:39:55 -0700 Subject: Changed parts of framework --- web/react/components/mention_list.jsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) (limited to 'web') diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx index a2c6f0ff7..115ab1b2a 100644 --- a/web/react/components/mention_list.jsx +++ b/web/react/components/mention_list.jsx @@ -56,8 +56,8 @@ module.exports = React.createClass({ this.setState({ mentionText: '-1' }); }, - handleKeyDown: function(e) { - var selectedMention = this.state.selectedMention ? this.state.selectedMention : 1; + handleKeyDown: function(e, numMentions) { + var selectedMention = this.state.selectedMention <= nunMentions ? this.state.selectedMention : 1; // Need to be able to know number of mentions, use in conditionals & still // need to figure out how to highlight the mention I want every time. @@ -65,10 +65,10 @@ module.exports = React.createClass({ // Maybe have the call there instead? Ehhh maybe not but need that to be able // to "select" it maybe... if (e.key === "ArrowUp") { - selectedMention = selectedMention === ? 1 : selectedMention++; + selectedMention = selectedMention === numMentions ? 1 : selectedMention++; } else if (e.key === "ArrowDown") { - selectedMention = selectedMention === 1 ? : selectedMention--; + selectedMention = selectedMention === 1 ? numMentions : selectedMention--; } this.setState({selectedMention: selectedMention}); }, @@ -89,7 +89,7 @@ module.exports = React.createClass({ return false; }, getInitialState: function() { - return { excludeUsers: [], mentionText: "-1" }; + return { excludeUsers: [], mentionText: "-1", selectedMention: 1 }; }, render: function() { var mentionText = this.state.mentionText; @@ -158,9 +158,11 @@ module.exports = React.createClass({ left: $mention_tab.offset().left }; + //mentions[this.state.selectedMention].focus(); + return (
-
+
{ mentions }
-- cgit v1.2.3-1-g7c22 From 63b9dd85b6efd9d292d4d79240e00b7d27e6616c Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Fri, 10 Jul 2015 09:49:44 -0700 Subject: Changed model of handling key down and focus change --- web/react/components/mention.jsx | 19 +++++++++++++++++- web/react/components/mention_list.jsx | 38 ++++++++++++++++++++--------------- 2 files changed, 40 insertions(+), 17 deletions(-) (limited to 'web') diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx index 520b81cbb..7a8045134 100644 --- a/web/react/components/mention.jsx +++ b/web/react/components/mention.jsx @@ -6,6 +6,23 @@ module.exports = React.createClass({ handleClick: function() { this.props.handleClick(this.props.username); }, + handleKeyDown: function(e) { + var selectedMention = this.state.selectedMention <= nunMentions ? this.state.selectedMention : 1; + + console.log("Here: keyDown"); + + if (e.key === "ArrowUp") { + //selectedMention = selectedMention === numMentions ? 1 : selectedMention++; + this.props.handleFocus(this.props.listId); + } + else if (e.key === "ArrowDown") { + //selectedMention = selectedMention === 1 ? numMentions : selectedMention--; + this.props.handleFocus(this.props.listId); + } + else if (e.key === "Enter") { + this.handleClick(); + } + }, render: function() { var icon; var timestamp = UserStore.getCurrentUser().update_at; @@ -15,7 +32,7 @@ module.exports = React.createClass({ icon = ; } return ( -
+
{icon}
@{this.props.username}{this.props.secondary_text}
diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx index 115ab1b2a..c5b4030c8 100644 --- a/web/react/components/mention_list.jsx +++ b/web/react/components/mention_list.jsx @@ -18,6 +18,8 @@ module.exports = React.createClass({ componentDidMount: function() { PostStore.addMentionDataChangeListener(this._onChange); + console.log("here!"); + var self = this; $('body').on('keypress.mentionlist', '#'+this.props.id, function(e) { @@ -26,6 +28,16 @@ module.exports = React.createClass({ e.preventDefault(); self.addFirstMention(); } + if (!self.isEmpty() && self.state.mentionText != '-1' && e.which === 38) { + e.stopPropagation(); + e.preventDefault(); + self.handleFocus(0); + } + if (!self.isEmpty() && self.state.mentionText != '-1' && e.which === 40) { + e.stopPropagation(); + e.preventDefault(); + self.addFirstMention(UserStore.getActiveOnlyProfiles().length - 1); + } } ); $(document).click(function(e) { @@ -56,21 +68,13 @@ module.exports = React.createClass({ this.setState({ mentionText: '-1' }); }, - handleKeyDown: function(e, numMentions) { - var selectedMention = this.state.selectedMention <= nunMentions ? this.state.selectedMention : 1; - - // Need to be able to know number of mentions, use in conditionals & still - // need to figure out how to highlight the mention I want every time. - // Remember separate Mention Ref within for, second if statement in render - // Maybe have the call there instead? Ehhh maybe not but need that to be able - // to "select" it maybe... - if (e.key === "ArrowUp") { - selectedMention = selectedMention === numMentions ? 1 : selectedMention++; - } - else if (e.key === "ArrowDown") { - selectedMention = selectedMention === 1 ? numMentions : selectedMention--; - } - this.setState({selectedMention: selectedMention}); + handleFocus: function(listId) { + console.log("here! 1"); + var mention = this.refs['mention' + index]; + if (!mention) return; + var mentionRef = mention.refs.mention; + mentionRef.getDOMNode().focus(); + console.log("here! 2"); }, addFirstMention: function() { if (!this.refs.mention0) return; @@ -140,6 +144,8 @@ module.exports = React.createClass({ username={users[i].username} secondary_text={users[i].secondary_text} id={users[i].id} + listId={index} + handleFocus={this.handleFocus} handleClick={this.handleClick} /> ); index++; @@ -162,7 +168,7 @@ module.exports = React.createClass({ return (
-
+
{ mentions }
-- cgit v1.2.3-1-g7c22 From 59b2a42ac89ca03a196bf5d20d617174a5bc30bb Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Sat, 11 Jul 2015 12:57:28 -0700 Subject: Have arrow key selection working, but visually does not highlight correct mention. Also if user continues to type things might get weird. --- web/react/components/mention.jsx | 23 ++++++++++-- web/react/components/mention_list.jsx | 56 +++++++++++++++++++---------- web/sass-files/sass/partials/_mentions.scss | 4 +++ 3 files changed, 63 insertions(+), 20 deletions(-) (limited to 'web') diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx index 7a8045134..abb6ae5c6 100644 --- a/web/react/components/mention.jsx +++ b/web/react/components/mention.jsx @@ -6,22 +6,41 @@ module.exports = React.createClass({ handleClick: function() { this.props.handleClick(this.props.username); }, - handleKeyDown: function(e) { + /*handleUp: function(e) { var selectedMention = this.state.selectedMention <= nunMentions ? this.state.selectedMention : 1; console.log("Here: keyDown"); if (e.key === "ArrowUp") { //selectedMention = selectedMention === numMentions ? 1 : selectedMention++; + e.preventDefault(); this.props.handleFocus(this.props.listId); } else if (e.key === "ArrowDown") { //selectedMention = selectedMention === 1 ? numMentions : selectedMention--; + e.preventDefault(); this.props.handleFocus(this.props.listId); } else if (e.key === "Enter") { + e.preventDefault(); this.handleClick(); } + },*/ + handleFocus: function() { + console.log("Entering " + this.props.listId); + this.setState({ isFocused: "mentions-focus" }) + }, + handleBlur: function() { + console.log("Leaving " + this.props.listId); + this.setState({ isFocused: "" }); + }, + getInitialState: function() { + if (this.props.isFocus) { + return { isFocused: "mentions-focus" }; + } + else { + return { isFocused: "" }; + } }, render: function() { var icon; @@ -32,7 +51,7 @@ module.exports = React.createClass({ icon = ; } return ( -
+
{icon}
@{this.props.username}{this.props.secondary_text}
diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx index c5b4030c8..882b0d6ad 100644 --- a/web/react/components/mention_list.jsx +++ b/web/react/components/mention_list.jsx @@ -17,26 +17,44 @@ module.exports = React.createClass({ displayName: "MentionList", componentDidMount: function() { PostStore.addMentionDataChangeListener(this._onChange); - - console.log("here!"); - var self = this; $('body').on('keypress.mentionlist', '#'+this.props.id, function(e) { - if (!self.isEmpty() && self.state.mentionText != '-1' && e.which === 13) { + if (!self.isEmpty() && self.state.mentionText != '-1' && (e.which === 13 || e.which === 9)) { + e.stopPropagation(); + e.preventDefault(); + self.addCurrentMention(); + } + } + ); + $('body').on('keydown.mentionlist', '#'+this.props.id, + function(e) { + console.log("here! top"); + if (!self.isEmpty() && self.state.mentionText != '-1' && (e.which === 13 || e.which === 9)) { e.stopPropagation(); e.preventDefault(); - self.addFirstMention(); + self.addCurrentMention(); } if (!self.isEmpty() && self.state.mentionText != '-1' && e.which === 38) { + console.log("here! 38"); e.stopPropagation(); e.preventDefault(); - self.handleFocus(0); + + if (self.handleSelection(self.state.selectedMention - 1)) + self.setState({ selectedMention: self.state.selectedMention - 1 }); + else { + self.setState({ selectedMention: 0}); + } } if (!self.isEmpty() && self.state.mentionText != '-1' && e.which === 40) { + console.log("here! 40"); e.stopPropagation(); e.preventDefault(); - self.addFirstMention(UserStore.getActiveOnlyProfiles().length - 1); + + if (self.handleSelection(self.state.selectedMention + 1)) + self.setState({ selectedMention: self.state.selectedMention + 1 }); + else + self.setState({ selectedMention: 0 }); } } ); @@ -68,13 +86,17 @@ module.exports = React.createClass({ this.setState({ mentionText: '-1' }); }, - handleFocus: function(listId) { + handleSelection: function(listId) { console.log("here! 1"); - var mention = this.refs['mention' + index]; - if (!mention) return; - var mentionRef = mention.refs.mention; - mentionRef.getDOMNode().focus(); - console.log("here! 2"); + var mention = this.refs['mention' + listId]; + if (!mention) + return false; + else + return true; + }, + addCurrentMention: function() { + if (!this.refs['mention' + this.state.selectedMention]) return; + this.refs['mention' + this.state.selectedMention].handleClick(); }, addFirstMention: function() { if (!this.refs.mention0) return; @@ -93,7 +115,7 @@ module.exports = React.createClass({ return false; }, getInitialState: function() { - return { excludeUsers: [], mentionText: "-1", selectedMention: 1 }; + return { excludeUsers: [], mentionText: "-1", selectedMention: 0 }; }, render: function() { var mentionText = this.state.mentionText; @@ -138,14 +160,14 @@ module.exports = React.createClass({ if (firstName.lastIndexOf(mentionText,0) === 0 || lastName.lastIndexOf(mentionText,0) === 0 || users[i].username.lastIndexOf(mentionText,0) === 0) { - mentions[i+1] = ( + mentions[index] = ( ); index++; @@ -164,8 +186,6 @@ module.exports = React.createClass({ left: $mention_tab.offset().left }; - //mentions[this.state.selectedMention].focus(); - return (
diff --git a/web/sass-files/sass/partials/_mentions.scss b/web/sass-files/sass/partials/_mentions.scss index 7e8c1869a..1396f21a1 100644 --- a/web/sass-files/sass/partials/_mentions.scss +++ b/web/sass-files/sass/partials/_mentions.scss @@ -37,6 +37,10 @@ } } +.mentions-focus { + background-color: #E6F2FA; +} + .mentions-text { font-color:black; } -- cgit v1.2.3-1-g7c22 From 9cc3d3428521fbc3a31def4f4780275d763a4011 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Sat, 11 Jul 2015 14:25:18 -0700 Subject: Highlighting now occurs as you arrow key thru mention list. However some small bugs remain. --- web/react/components/mention.jsx | 28 ++---------------- web/react/components/mention_list.jsx | 55 +++++++++++++++++------------------ 2 files changed, 30 insertions(+), 53 deletions(-) (limited to 'web') diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx index abb6ae5c6..4abf8d0df 100644 --- a/web/react/components/mention.jsx +++ b/web/react/components/mention.jsx @@ -6,32 +6,10 @@ module.exports = React.createClass({ handleClick: function() { this.props.handleClick(this.props.username); }, - /*handleUp: function(e) { - var selectedMention = this.state.selectedMention <= nunMentions ? this.state.selectedMention : 1; - - console.log("Here: keyDown"); - - if (e.key === "ArrowUp") { - //selectedMention = selectedMention === numMentions ? 1 : selectedMention++; - e.preventDefault(); - this.props.handleFocus(this.props.listId); - } - else if (e.key === "ArrowDown") { - //selectedMention = selectedMention === 1 ? numMentions : selectedMention--; - e.preventDefault(); - this.props.handleFocus(this.props.listId); - } - else if (e.key === "Enter") { - e.preventDefault(); - this.handleClick(); - } - },*/ - handleFocus: function() { - console.log("Entering " + this.props.listId); + select: function() { this.setState({ isFocused: "mentions-focus" }) }, - handleBlur: function() { - console.log("Leaving " + this.props.listId); + deselect: function() { this.setState({ isFocused: "" }); }, getInitialState: function() { @@ -51,7 +29,7 @@ module.exports = React.createClass({ icon = ; } return ( -
+
{icon}
@{this.props.username}{this.props.secondary_text}
diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx index 882b0d6ad..0bef41905 100644 --- a/web/react/components/mention_list.jsx +++ b/web/react/components/mention_list.jsx @@ -18,43 +18,42 @@ module.exports = React.createClass({ componentDidMount: function() { PostStore.addMentionDataChangeListener(this._onChange); var self = this; - $('body').on('keypress.mentionlist', '#'+this.props.id, - function(e) { - if (!self.isEmpty() && self.state.mentionText != '-1' && (e.which === 13 || e.which === 9)) { - e.stopPropagation(); - e.preventDefault(); - self.addCurrentMention(); - } - } - ); + $('body').on('keydown.mentionlist', '#'+this.props.id, function(e) { - console.log("here! top"); if (!self.isEmpty() && self.state.mentionText != '-1' && (e.which === 13 || e.which === 9)) { e.stopPropagation(); e.preventDefault(); self.addCurrentMention(); } - if (!self.isEmpty() && self.state.mentionText != '-1' && e.which === 38) { - console.log("here! 38"); + else if (!self.isEmpty() && self.state.mentionText != '-1' && (e.which === 38 || e.which === 40)) { e.stopPropagation(); e.preventDefault(); - if (self.handleSelection(self.state.selectedMention - 1)) - self.setState({ selectedMention: self.state.selectedMention - 1 }); + if (!self.getSelection(self.state.selectedMention)) { + self.setState({ selectedMention: 0 }); + self.refs['mention' + self.state.selectedMention].deselect(); + } else { - self.setState({ selectedMention: 0}); + self.refs['mention' + self.state.selectedMention].deselect(); + if (e.which === 38) { + if (self.getSelection(self.state.selectedMention - 1)) + self.setState({ selectedMention: self.state.selectedMention - 1 }); + else { + var tempSelectedMention = -1; + while (self.getSelection(++tempSelectedMention)) + ; + self.setState({ selectedMention: tempSelectedMention - 1 }); + } + } + else { + if (self.getSelection(self.state.selectedMention + 1)) + self.setState({ selectedMention: self.state.selectedMention + 1 }); + else + self.setState({ selectedMention: 0 }); + } } - } - if (!self.isEmpty() && self.state.mentionText != '-1' && e.which === 40) { - console.log("here! 40"); - e.stopPropagation(); - e.preventDefault(); - - if (self.handleSelection(self.state.selectedMention + 1)) - self.setState({ selectedMention: self.state.selectedMention + 1 }); - else - self.setState({ selectedMention: 0 }); + self.refs['mention' + self.state.selectedMention].select(); } } ); @@ -86,8 +85,7 @@ module.exports = React.createClass({ this.setState({ mentionText: '-1' }); }, - handleSelection: function(listId) { - console.log("here! 1"); + getSelection: function(listId) { var mention = this.refs['mention' + listId]; if (!mention) return false; @@ -95,7 +93,7 @@ module.exports = React.createClass({ return true; }, addCurrentMention: function() { - if (!this.refs['mention' + this.state.selectedMention]) return; + if (!this.refs['mention' + this.state.selectedMention]) this.addFirstMention(); this.refs['mention' + this.state.selectedMention].handleClick(); }, addFirstMention: function() { @@ -173,6 +171,7 @@ module.exports = React.createClass({ index++; } } + var numMentions = Object.keys(mentions).length; if (numMentions < 1) return null; -- cgit v1.2.3-1-g7c22 From ce9756e44dcdc1dedb46337f492f4ede8719fdd8 Mon Sep 17 00:00:00 2001 From: Reed Garmsen 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.jsx | 3 ++- web/react/components/mention_list.jsx | 23 +++++++++++++++++++++-- 2 files changed, 23 insertions(+), 3 deletions(-) (limited to 'web') diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx index 4abf8d0df..1f6d1bcf1 100644 --- a/web/react/components/mention.jsx +++ b/web/react/components/mention.jsx @@ -21,6 +21,7 @@ module.exports = React.createClass({ } }, render: function() { + var self = this; var icon; var timestamp = UserStore.getCurrentUser().update_at; if (this.props.id != null) { @@ -29,7 +30,7 @@ module.exports = React.createClass({ icon = ; } return ( -
+
{icon}
@{this.props.username}{this.props.secondary_text}
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 From 6f93cbb490b41ec206b66018090f34e690a145a3 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Sun, 12 Jul 2015 12:49:33 -0700 Subject: When moving from a mention lower in the list to one higher in the list by typing more, now properly highlights --- web/react/components/mention_list.jsx | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'web') diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx index 6b1d98cf6..e6b2f5e04 100644 --- a/web/react/components/mention_list.jsx +++ b/web/react/components/mention_list.jsx @@ -70,6 +70,11 @@ module.exports = React.createClass({ PostStore.removeMentionDataChangeListener(this._onChange); $('body').off('keypress.mentionlist', '#'+this.props.id); }, + componentDidUpdate: function() { + if (this.state.mentionText != "-1" && !this.getSelection(this.state.selectedMention)) { + this.refs.mention0.select(); + } + }, _onChange: function(id, mentionText, excludeList) { if (id !== this.props.id) return; -- cgit v1.2.3-1-g7c22 From da228fc167494962dd222835510ff3a7db2e3a24 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Sun, 12 Jul 2015 18:39:14 -0700 Subject: Minor changes towards getting interior scrolling working with arrow keys --- web/react/components/mention_list.jsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) (limited to 'web') diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx index e6b2f5e04..92a843bc5 100644 --- a/web/react/components/mention_list.jsx +++ b/web/react/components/mention_list.jsx @@ -55,7 +55,8 @@ module.exports = React.createClass({ } self.refs['mention' + self.state.selectedMention].select(); - //self.checkIfInView('#'+self.props.id); + self.checkIfInView($('#'+self.props.id)); + self.checkIfInView($('#'+self.refs['mention' + self.state.selectedMention].props.id)); } } ); @@ -118,10 +119,10 @@ module.exports = React.createClass({ return (!this.refs.mention0); }, checkIfInView: function(element) { - var offset = element.offset().top - $(window).scrollTop(); + var offset = element.offset().top - $(window).scrollTop(); //$(this.props.id) ?? if(offset > window.innerHeight){ // Not in view so scroll to it - $('body').animate({scrollTop: offset}, 1000); + $('body').animate({scrollTop: offset}, 1000); //$(this.props.id) ?? return false; } return true; @@ -136,7 +137,7 @@ module.exports = React.createClass({ return false; }, getInitialState: function() { - return { excludeUsers: [], mentionText: "-1", selectedMention: 0, selectedUsername: "" }; + return { excludeUsers: [], mentionText: "-1", selectedMention: 0 }; }, render: function() { var mentionText = this.state.mentionText; -- cgit v1.2.3-1-g7c22 From 346f727949866083d8fd94763c6df5660424c850 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Mon, 13 Jul 2015 09:53:39 -0700 Subject: Better handling of previous highlight when you backspace (therefore re-enlarging the number of mentions) --- web/react/components/mention_list.jsx | 57 +++++++++++++++++++++++++++-------- 1 file changed, 45 insertions(+), 12 deletions(-) (limited to 'web') diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx index 92a843bc5..9dd80ebd5 100644 --- a/web/react/components/mention_list.jsx +++ b/web/react/components/mention_list.jsx @@ -31,32 +31,40 @@ module.exports = React.createClass({ e.preventDefault(); if (!self.getSelection(self.state.selectedMention)) { - self.setState({ selectedMention: 0 }); + //self.setState({ selectedMention: 0, selectedUsername: self.refs.mention0.props.username }); //self.refs['mention' + self.state.selectedMention].deselect(); + var tempSelectedMention = -1 + while (self.getSelection(++tempSelectedMention)) { + if (self.state.selectedUsername === self.refs['mention' + tempSelectedMention].props.username) { + this.refs['mention' + tempSelectedMention].select(); + this.setState({ selectedMention: tempSelectedMention }); + break; + } + } } else { self.refs['mention' + self.state.selectedMention].deselect(); if (e.which === 38) { if (self.getSelection(self.state.selectedMention - 1)) - self.setState({ selectedMention: self.state.selectedMention - 1 }); + self.setState({ selectedMention: self.state.selectedMention - 1, selectedUsername: self.refs['mention' + (self.state.selectedMention - 1)].props.username }); else { var tempSelectedMention = -1; while (self.getSelection(++tempSelectedMention)) ; - self.setState({ selectedMention: tempSelectedMention - 1 }); + self.setState({ selectedMention: tempSelectedMention - 1, selectedUsername: self.refs['mention' + (tempSelectedMention - 1)].props.username }); } } else { if (self.getSelection(self.state.selectedMention + 1)) - self.setState({ selectedMention: 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 }); + self.setState({ selectedMention: 0, selectedUsername: self.refs.mention0.props.username }); } } self.refs['mention' + self.state.selectedMention].select(); - self.checkIfInView($('#'+self.props.id)); - self.checkIfInView($('#'+self.refs['mention' + self.state.selectedMention].props.id)); + //self.checkIfInView($('#'+self.props.id)); + //self.checkIfInView($('#'+self.refs['mention' + self.state.selectedMention].props.id)); } } ); @@ -69,11 +77,36 @@ module.exports = React.createClass({ }, componentWillUnmount: function() { PostStore.removeMentionDataChangeListener(this._onChange); - $('body').off('keypress.mentionlist', '#'+this.props.id); + $('body').off('keydown.mentionlist', '#'+this.props.id); + }, + componentWillUpdate: function() { + if (this.state.mentionText != "-1" && this.getSelection(this.state.selectedMention)) { + this.refs['mention' + this.state.selectedMention].deselect(); + } }, componentDidUpdate: function() { - if (this.state.mentionText != "-1" && !this.getSelection(this.state.selectedMention)) { - this.refs.mention0.select(); + /*if (this.state.mentionText != "-1" && !this.getSelection(this.state.selectedMention)) { + }*/ + if (this.state.mentionText != "-1" /*&& this.getSelection(this.state.selectedMention)*/) { + 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 (this.getSelection(++tempSelectedMention)) { + if (this.state.selectedUsername === this.refs['mention' + tempSelectedMention].props.username) { + this.refs['mention' + tempSelectedMention].select(); + this.setState({ selectedMention: tempSelectedMention }); + foundMatch = true; + break; + } + } + if (!foundMatch) { + this.refs.mention0.select(); + this.setState({ selectedMention: 0, selectedUsername: this.refs.mention0.props.username }); + } + } + else { + this.refs['mention' + this.state.selectedMention].select(); + } } }, _onChange: function(id, mentionText, excludeList) { @@ -97,7 +130,7 @@ module.exports = React.createClass({ if (this.getSelection(this.state.selectedMention)) { this.refs['mention' + this.state.selectedMention].deselect(); } - this.setState({ selectedMention: listId }); + this.setState({ selectedMention: listId, selectedUsername: this.refs['mention' + listId].props.username }); this.refs['mention' + listId].select(); }, getSelection: function(listId) { @@ -137,7 +170,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; -- cgit v1.2.3-1-g7c22 From 4bb2451bd5ac7f570e510a0cb96c14f0b17e4fab Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Mon, 13 Jul 2015 13:11:03 -0700 Subject: Minor changes and tweaks trying to get scrolling to work --- web/react/components/mention_list.jsx | 31 ++++++++++++++++++++----------- 1 file changed, 20 insertions(+), 11 deletions(-) (limited to 'web') diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx index 9dd80ebd5..ab511e424 100644 --- a/web/react/components/mention_list.jsx +++ b/web/react/components/mention_list.jsx @@ -50,7 +50,7 @@ module.exports = React.createClass({ else { var tempSelectedMention = -1; 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 }); } } @@ -64,7 +64,10 @@ module.exports = React.createClass({ self.refs['mention' + self.state.selectedMention].select(); //self.checkIfInView($('#'+self.props.id)); - //self.checkIfInView($('#'+self.refs['mention' + self.state.selectedMention].props.id)); + self.checkIfInView(); + //console.log('#'+self.refs['mention' + self.state.selectedMention].props.id); + //console.log($('#'+self.refs['mention' + self.state.selectedMention].props.id)); + //console.log($('#'+self.props.id)); } } ); @@ -85,9 +88,7 @@ module.exports = React.createClass({ } }, componentDidUpdate: function() { - /*if (this.state.mentionText != "-1" && !this.getSelection(this.state.selectedMention)) { - }*/ - if (this.state.mentionText != "-1" /*&& this.getSelection(this.state.selectedMention)*/) { + 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; @@ -141,8 +142,10 @@ module.exports = React.createClass({ return true; }, addCurrentMention: function() { - if (!this.refs['mention' + this.state.selectedMention]) this.addFirstMention(); - this.refs['mention' + this.state.selectedMention].handleClick(); + if (!this.refs['mention' + this.state.selectedMention]) + this.addFirstMention(); + else + this.refs['mention' + this.state.selectedMention].handleClick(); }, addFirstMention: function() { if (!this.refs.mention0) return; @@ -151,14 +154,20 @@ module.exports = React.createClass({ isEmpty: function() { return (!this.refs.mention0); }, - checkIfInView: function(element) { - var offset = element.offset().top - $(window).scrollTop(); //$(this.props.id) ?? - if(offset > window.innerHeight){ + checkIfInView: function() { + var element = $('#'+this.refs['mention' + this.state.selectedMention].props.id); + //var top = $('.mentions-box').position().bottom; + //$(".mentions-box").css("bottom", top+303); + //$("#"+this.props.id).scrollTop($("#"+this.props.id).scrollTop() + $("div.mentions-name.mentions-focused").position().top); + console.log(element.length); + console.log(element + " " + element.offset()); + var offset = element.offset().bottom - $('#'+this.props.id).scrollTop(); //$(this.props.id) ?? + if(offset > $('#'+this.props.id).innerHeight){ // Not in view so scroll to it $('body').animate({scrollTop: offset}, 1000); //$(this.props.id) ?? return false; } - return true; + return true; }, alreadyMentioned: function(username) { var excludeUsers = this.state.excludeUsers; -- cgit v1.2.3-1-g7c22 From 61e7b9b2be969212dbb3577ef734a27620a525be Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Tue, 14 Jul 2015 16:13:31 -0700 Subject: Getting scrolling working with the arrow keys --- web/react/components/mention.jsx | 2 +- web/react/components/mention_list.jsx | 57 ++++++++++++++++++++++++++--------- 2 files changed, 43 insertions(+), 16 deletions(-) (limited to 'web') diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx index 1f6d1bcf1..3f6ec4a7b 100644 --- a/web/react/components/mention.jsx +++ b/web/react/components/mention.jsx @@ -30,7 +30,7 @@ module.exports = React.createClass({ icon = ; } return ( -
+
{icon}
@{this.props.username}{this.props.secondary_text}
diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx index ab511e424..2f4f92e24 100644 --- a/web/react/components/mention_list.jsx +++ b/web/react/components/mention_list.jsx @@ -30,6 +30,8 @@ module.exports = React.createClass({ e.stopPropagation(); e.preventDefault(); + var tempSelectedMention = -1 + if (!self.getSelection(self.state.selectedMention)) { //self.setState({ selectedMention: 0, selectedUsername: self.refs.mention0.props.username }); //self.refs['mention' + self.state.selectedMention].deselect(); @@ -64,7 +66,7 @@ module.exports = React.createClass({ self.refs['mention' + self.state.selectedMention].select(); //self.checkIfInView($('#'+self.props.id)); - self.checkIfInView(); + self.checkIfInView(e.which, tempSelectedMention); //console.log('#'+self.refs['mention' + self.state.selectedMention].props.id); //console.log($('#'+self.refs['mention' + self.state.selectedMention].props.id)); //console.log($('#'+self.props.id)); @@ -154,20 +156,43 @@ module.exports = React.createClass({ isEmpty: function() { return (!this.refs.mention0); }, - checkIfInView: function() { - var element = $('#'+this.refs['mention' + this.state.selectedMention].props.id); - //var top = $('.mentions-box').position().bottom; - //$(".mentions-box").css("bottom", top+303); - //$("#"+this.props.id).scrollTop($("#"+this.props.id).scrollTop() + $("div.mentions-name.mentions-focused").position().top); - console.log(element.length); - console.log(element + " " + element.offset()); - var offset = element.offset().bottom - $('#'+this.props.id).scrollTop(); //$(this.props.id) ?? - if(offset > $('#'+this.props.id).innerHeight){ - // Not in view so scroll to it - $('body').animate({scrollTop: offset}, 1000); //$(this.props.id) ?? - return false; + checkIfInView: function(keyPressed, ifLoopUp) { + var element = $('#'+this.refs['mention' + this.state.selectedMention].props.id +"_mentions"); + var offset = element.offset().top - $("#mentionsbox").scrollTop(); + var direction = keyPressed === 38 ? "up" : "down"; + console.log("element offset top: " + $(element).offset().top + " box offset top: " + $("#mentionsbox").offset().top); + var scrollAmount; + if (direction === "up" && ifLoopUp !== -1) { + /*$("#mentionsbox").animate({ + scrollTop: ("#mentionsbox").offset().top + }, 50);*/ + scrollAmount = $("#mentionsbox").offset().top; + } + else if (direction === "down" && !this.refs['mention' + this.state.selectedMention].props.listId) { + /*$("#mentionsbox").animate({ + scrollTop: 0 + }, 50);*/ + scrollAmount = 0; + } + else if (direction === "up") { + /*$("#mentionsbox").animate({ + scrollTop: '-=28' + }, 50);*/ + scrollAmount = "-=28"; + } + else if (direction === "down") { + /*$("#mentionsbox").animate({ + scrollTop: '+=28' + }, 50);*/ + scrollAmount = "+=28"; } - return true; + $("#mentionsbox").animate({ + scrollTop: scrollAmount + }, 50); + /*$("#mentionsbox").animate({ + scrollTop: $(element).offset().top - $("#mentionsbox").offset().top + //scrollTop: $(element).offset().top - $("#mentionsbox").offset().top + }, 50);*/ }, alreadyMentioned: function(username) { var excludeUsers = this.state.excludeUsers; @@ -195,12 +220,14 @@ module.exports = React.createClass({ all.username = "all"; all.full_name = ""; all.secondary_text = "Notifies everyone in the team"; + all.id = "allmention"; users.push(all); var channel = {}; channel.username = "channel"; channel.full_name = ""; channel.secondary_text = "Notifies everyone in the channel"; + channel.id = "channelmention"; users.push(channel); users.sort(function(a,b) { @@ -254,7 +281,7 @@ module.exports = React.createClass({ return (
-
+
{ mentions }
-- cgit v1.2.3-1-g7c22 From 9747053a4e017e64a21278981fe43573385488a0 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Tue, 14 Jul 2015 18:36:54 -0700 Subject: Fixes not selecting an element that hasn't been scrolled to --- web/react/components/mention.jsx | 4 +- web/react/components/mention_list.jsx | 70 ++++++++++++----------------------- 2 files changed, 27 insertions(+), 47 deletions(-) (limited to 'web') diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx index 3f6ec4a7b..24098516e 100644 --- a/web/react/components/mention.jsx +++ b/web/react/components/mention.jsx @@ -24,7 +24,9 @@ module.exports = React.createClass({ var self = this; var icon; var timestamp = UserStore.getCurrentUser().update_at; - if (this.props.id != null) { + if (this.props.id === "allmention" || this.props.id === "channelmention") { + icon = ; + } else if (this.props.id != null) { icon = ; diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx index 2f4f92e24..7cc90e36f 100644 --- a/web/react/components/mention_list.jsx +++ b/web/react/components/mention_list.jsx @@ -33,9 +33,6 @@ module.exports = React.createClass({ var tempSelectedMention = -1 if (!self.getSelection(self.state.selectedMention)) { - //self.setState({ selectedMention: 0, selectedUsername: self.refs.mention0.props.username }); - //self.refs['mention' + self.state.selectedMention].deselect(); - var tempSelectedMention = -1 while (self.getSelection(++tempSelectedMention)) { if (self.state.selectedUsername === self.refs['mention' + tempSelectedMention].props.username) { this.refs['mention' + tempSelectedMention].select(); @@ -50,7 +47,6 @@ module.exports = React.createClass({ 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 { - var tempSelectedMention = -1; 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 }); @@ -65,11 +61,10 @@ module.exports = React.createClass({ } self.refs['mention' + self.state.selectedMention].select(); - //self.checkIfInView($('#'+self.props.id)); - self.checkIfInView(e.which, tempSelectedMention); - //console.log('#'+self.refs['mention' + self.state.selectedMention].props.id); - //console.log($('#'+self.refs['mention' + self.state.selectedMention].props.id)); - //console.log($('#'+self.props.id)); + self.scrollToMention(e.which, tempSelectedMention); + } + else if (e.which === 46 || e.which === 8) { + self.setState({ lessText: true }); } } ); @@ -94,7 +89,7 @@ module.exports = React.createClass({ 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 (this.getSelection(++tempSelectedMention)) { + while (!this.state.lessText && this.getSelection(++tempSelectedMention)) { if (this.state.selectedUsername === this.refs['mention' + tempSelectedMention].props.username) { this.refs['mention' + tempSelectedMention].select(); this.setState({ selectedMention: tempSelectedMention }); @@ -102,15 +97,18 @@ module.exports = React.createClass({ break; } } - if (!foundMatch) { + if (this.refs.mention0 != undefined && !foundMatch) { this.refs.mention0.select(); - this.setState({ selectedMention: 0, selectedUsername: this.refs.mention0.props.username }); + this.setState({ selectedMention: 0, selectedUsername: this.refs.mention0.props.username, lessText: false }); } } - else { + else if (this.refs['mention' + this.state.selectedMention] != undefined) { this.refs['mention' + this.state.selectedMention].select(); } } + else if (this.state.selectedMention !== 0) { + this.setState({ selectedMention: 0, selectedUsername: "" }); + } }, _onChange: function(id, mentionText, excludeList) { if (id !== this.props.id) return; @@ -118,6 +116,7 @@ module.exports = React.createClass({ var newState = this.state; if (mentionText != null) newState.mentionText = mentionText; if (excludeList != null) newState.excludeUsers = excludeList; + this.setState(newState); }, handleClick: function(name) { @@ -156,43 +155,22 @@ module.exports = React.createClass({ isEmpty: function() { return (!this.refs.mention0); }, - checkIfInView: function(keyPressed, ifLoopUp) { - var element = $('#'+this.refs['mention' + this.state.selectedMention].props.id +"_mentions"); - var offset = element.offset().top - $("#mentionsbox").scrollTop(); + scrollToMention: function(keyPressed, ifLoopUp) { var direction = keyPressed === 38 ? "up" : "down"; - console.log("element offset top: " + $(element).offset().top + " box offset top: " + $("#mentionsbox").offset().top); - var scrollAmount; - if (direction === "up" && ifLoopUp !== -1) { - /*$("#mentionsbox").animate({ - scrollTop: ("#mentionsbox").offset().top - }, 50);*/ - scrollAmount = $("#mentionsbox").offset().top; - } - else if (direction === "down" && !this.refs['mention' + this.state.selectedMention].props.listId) { - /*$("#mentionsbox").animate({ - scrollTop: 0 - }, 50);*/ + var scrollAmount = 0; + + if (direction === "up" && ifLoopUp !== -1) + scrollAmount = $("#mentionsbox").innerHeight() + 10000000; //innerHeight is not the real height of the box in the RHS sometimes; this compensates as it should always go to the bottom anyway + else if (direction === "down" && this.refs['mention' + this.state.selectedMention].props.listId === 0) scrollAmount = 0; - } - else if (direction === "up") { - /*$("#mentionsbox").animate({ - scrollTop: '-=28' - }, 50);*/ - scrollAmount = "-=28"; - } - else if (direction === "down") { - /*$("#mentionsbox").animate({ - scrollTop: '+=28' - }, 50);*/ - scrollAmount = "+=28"; - } + else 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({ scrollTop: scrollAmount }, 50); - /*$("#mentionsbox").animate({ - scrollTop: $(element).offset().top - $("#mentionsbox").offset().top - //scrollTop: $(element).offset().top - $("#mentionsbox").offset().top - }, 50);*/ }, alreadyMentioned: function(username) { var excludeUsers = this.state.excludeUsers; @@ -204,7 +182,7 @@ module.exports = React.createClass({ return false; }, getInitialState: function() { - return { excludeUsers: [], mentionText: "-1", selectedMention: 0, selectedUsername: "" }; + return { excludeUsers: [], mentionText: "-1", selectedMention: 0, selectedUsername: "", lessText: false }; }, render: function() { var mentionText = this.state.mentionText; -- cgit v1.2.3-1-g7c22 From c5c4c0b4de6275ca3f4188c07d2d0d88ba230bd1 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Tue, 14 Jul 2015 19:59:09 -0700 Subject: Few minor bug fixes --- web/react/components/mention_list.jsx | 50 ++++++++++++----------------------- 1 file changed, 17 insertions(+), 33 deletions(-) (limited to 'web') diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx index 7cc90e36f..17c513714 100644 --- a/web/react/components/mention_list.jsx +++ b/web/react/components/mention_list.jsx @@ -31,41 +31,26 @@ module.exports = React.createClass({ e.preventDefault(); var tempSelectedMention = -1 - - if (!self.getSelection(self.state.selectedMention)) { - while (self.getSelection(++tempSelectedMention)) { - if (self.state.selectedUsername === self.refs['mention' + tempSelectedMention].props.username) { - this.refs['mention' + tempSelectedMention].select(); - this.setState({ selectedMention: tempSelectedMention }); - break; - } + self.refs['mention' + self.state.selectedMention].deselect(); + 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 { - self.refs['mention' + self.state.selectedMention].deselect(); - 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 (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 }); - } + 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.refs['mention' + self.state.selectedMention].select(); + self.refs['mention' + self.state.selectedMention].select(); self.scrollToMention(e.which, tempSelectedMention); } - else if (e.which === 46 || e.which === 8) { - self.setState({ lessText: true }); - } } ); $(document).click(function(e) { @@ -89,7 +74,7 @@ module.exports = React.createClass({ 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 (!this.state.lessText && this.getSelection(++tempSelectedMention)) { + while (tempSelectedMention < this.state.selectedMention && this.getSelection(++tempSelectedMention)) { if (this.state.selectedUsername === this.refs['mention' + tempSelectedMention].props.username) { this.refs['mention' + tempSelectedMention].select(); this.setState({ selectedMention: tempSelectedMention }); @@ -99,7 +84,7 @@ module.exports = React.createClass({ } if (this.refs.mention0 != undefined && !foundMatch) { this.refs.mention0.select(); - this.setState({ selectedMention: 0, selectedUsername: this.refs.mention0.props.username, lessText: false }); + this.setState({ selectedMention: 0, selectedUsername: this.refs.mention0.props.username }); } } else if (this.refs['mention' + this.state.selectedMention] != undefined) { @@ -136,8 +121,7 @@ module.exports = React.createClass({ this.refs['mention' + listId].select(); }, getSelection: function(listId) { - var mention = this.refs['mention' + listId]; - if (!mention) + if (!this.refs['mention' + listId]) return false; else return true; @@ -182,7 +166,7 @@ module.exports = React.createClass({ return false; }, getInitialState: function() { - return { excludeUsers: [], mentionText: "-1", selectedMention: 0, selectedUsername: "", lessText: false }; + return { excludeUsers: [], mentionText: "-1", selectedMention: 0, selectedUsername: "" }; }, render: function() { var mentionText = this.state.mentionText; -- cgit v1.2.3-1-g7c22 From cbcf44ac8506d316d57a7e0bb30baad258618bdb Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Tue, 14 Jul 2015 20:14:23 -0700 Subject: Minor changes to scroll 'feel' and logic flow --- web/react/components/mention_list.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'web') diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx index 17c513714..1852a3ebc 100644 --- a/web/react/components/mention_list.jsx +++ b/web/react/components/mention_list.jsx @@ -41,7 +41,7 @@ module.exports = React.createClass({ self.setState({ selectedMention: tempSelectedMention - 1, selectedUsername: self.refs['mention' + (tempSelectedMention - 1)].props.username }); } } - else { + 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 @@ -82,12 +82,12 @@ module.exports = React.createClass({ break; } } - if (this.refs.mention0 != undefined && !foundMatch) { + if (this.getSelection(0) && !foundMatch) { this.refs.mention0.select(); this.setState({ selectedMention: 0, selectedUsername: this.refs.mention0.props.username }); } } - else if (this.refs['mention' + this.state.selectedMention] != undefined) { + else if (this.getSelection(this.state.selectedMention)) { this.refs['mention' + this.state.selectedMention].select(); } } @@ -144,7 +144,7 @@ module.exports = React.createClass({ var scrollAmount = 0; if (direction === "up" && ifLoopUp !== -1) - scrollAmount = $("#mentionsbox").innerHeight() + 10000000; //innerHeight is not the real height of the box in the RHS sometimes; this compensates as it should always go to the bottom anyway + scrollAmount = $("#mentionsbox").height() * 100; //Makes sure that it scrolls all the way to the bottom else if (direction === "down" && this.refs['mention' + this.state.selectedMention].props.listId === 0) scrollAmount = 0; else if (direction === "up") @@ -154,7 +154,7 @@ module.exports = React.createClass({ $("#mentionsbox").animate({ scrollTop: scrollAmount - }, 50); + }, 75); }, alreadyMentioned: function(username) { var excludeUsers = this.state.excludeUsers; -- cgit v1.2.3-1-g7c22 From 15b90ff72f7db4d611c5c5035e2d8cd310d4deff Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Tue, 14 Jul 2015 20:35:52 -0700 Subject: Added missing semi-colons --- web/react/components/mention.jsx | 2 +- web/react/components/mention_list.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'web') diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx index 24098516e..f5ca4ce6d 100644 --- a/web/react/components/mention.jsx +++ b/web/react/components/mention.jsx @@ -7,7 +7,7 @@ module.exports = React.createClass({ this.props.handleClick(this.props.username); }, select: function() { - this.setState({ isFocused: "mentions-focus" }) + this.setState({ isFocused: "mentions-focus" }); }, deselect: function() { this.setState({ isFocused: "" }); diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx index 1852a3ebc..1df7a8298 100644 --- a/web/react/components/mention_list.jsx +++ b/web/react/components/mention_list.jsx @@ -30,7 +30,7 @@ module.exports = React.createClass({ e.stopPropagation(); e.preventDefault(); - var tempSelectedMention = -1 + var tempSelectedMention = -1; self.refs['mention' + self.state.selectedMention].deselect(); if (e.which === 38) { if (self.getSelection(self.state.selectedMention - 1)) -- cgit v1.2.3-1-g7c22 From cb4cd741a45fc86a7c2d96e61abd65ad4bd728e1 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Thu, 16 Jul 2015 09:21:51 -0700 Subject: Code simplification and rebasing --- web/react/components/mention.jsx | 15 ++------------- web/react/components/mention_list.jsx | 23 ++++------------------- 2 files changed, 6 insertions(+), 32 deletions(-) (limited to 'web') diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx index f5ca4ce6d..114dc183f 100644 --- a/web/react/components/mention.jsx +++ b/web/react/components/mention.jsx @@ -6,19 +6,8 @@ module.exports = React.createClass({ handleClick: function() { this.props.handleClick(this.props.username); }, - select: function() { - this.setState({ isFocused: "mentions-focus" }); - }, - deselect: function() { - this.setState({ isFocused: "" }); - }, getInitialState: function() { - if (this.props.isFocus) { - return { isFocused: "mentions-focus" }; - } - else { - return { isFocused: "" }; - } + return null; }, render: function() { var self = this; @@ -32,7 +21,7 @@ module.exports = React.createClass({ icon = ; } return ( -
+
{icon}
@{this.props.username}{this.props.secondary_text}
diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx index 1df7a8298..fff0c10b8 100644 --- a/web/react/components/mention_list.jsx +++ b/web/react/components/mention_list.jsx @@ -31,7 +31,6 @@ module.exports = React.createClass({ e.preventDefault(); var tempSelectedMention = -1; - self.refs['mention' + self.state.selectedMention].deselect(); 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 }); @@ -48,7 +47,6 @@ module.exports = React.createClass({ self.setState({ selectedMention: 0, selectedUsername: self.refs.mention0.props.username }); } - self.refs['mention' + self.state.selectedMention].select(); self.scrollToMention(e.which, tempSelectedMention); } } @@ -64,11 +62,6 @@ module.exports = React.createClass({ PostStore.removeMentionDataChangeListener(this._onChange); $('body').off('keydown.mentionlist', '#'+this.props.id); }, - componentWillUpdate: function() { - if (this.state.mentionText != "-1" && this.getSelection(this.state.selectedMention)) { - this.refs['mention' + this.state.selectedMention].deselect(); - } - }, 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)) { @@ -76,20 +69,15 @@ module.exports = React.createClass({ var foundMatch = false; while (tempSelectedMention < this.state.selectedMention && this.getSelection(++tempSelectedMention)) { if (this.state.selectedUsername === this.refs['mention' + tempSelectedMention].props.username) { - this.refs['mention' + tempSelectedMention].select(); this.setState({ selectedMention: tempSelectedMention }); foundMatch = true; break; } } if (this.getSelection(0) && !foundMatch) { - this.refs.mention0.select(); this.setState({ selectedMention: 0, selectedUsername: this.refs.mention0.props.username }); } } - else if (this.getSelection(this.state.selectedMention)) { - this.refs['mention' + this.state.selectedMention].select(); - } } else if (this.state.selectedMention !== 0) { this.setState({ selectedMention: 0, selectedUsername: "" }); @@ -114,11 +102,7 @@ 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, selectedUsername: this.refs['mention' + listId].props.username }); - this.refs['mention' + listId].select(); }, getSelection: function(listId) { if (!this.refs['mention' + listId]) @@ -127,7 +111,7 @@ module.exports = React.createClass({ return true; }, addCurrentMention: function() { - if (!this.refs['mention' + this.state.selectedMention]) + if (!this.getSelection(this.state.selectedMention)) this.addFirstMention(); else this.refs['mention' + this.state.selectedMention].handleClick(); @@ -169,6 +153,7 @@ module.exports = React.createClass({ return { excludeUsers: [], mentionText: "-1", selectedMention: 0, selectedUsername: "" }; }, render: function() { + var self = this; var mentionText = this.state.mentionText; if (mentionText === '-1') return null; @@ -220,8 +205,8 @@ module.exports = React.createClass({ secondary_text={users[i].secondary_text} id={users[i].id} listId={index} - isFocus={this.state.selectedMention === index ? true : false} - handleMouseEnter={this.handleMouseEnter} + isFocused={this.state.selectedMention === index ? "mentions-focus" : ""} + handleMouseEnter={function(value) { return function() { self.handleMouseEnter(value); } }(index)} handleClick={this.handleClick} /> ); index++; -- cgit v1.2.3-1-g7c22 From 1f87c46360b434335ee4b8eae5162b8d37de6f4b Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Thu, 16 Jul 2015 09:27:18 -0700 Subject: Minor code change for clarity --- web/react/components/mention_list.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web') diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx index fff0c10b8..c5ff82346 100644 --- a/web/react/components/mention_list.jsx +++ b/web/react/components/mention_list.jsx @@ -129,7 +129,7 @@ module.exports = React.createClass({ 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.refs['mention' + this.state.selectedMention].props.listId === 0) + else if (direction === "down" && this.state.selectedMention === 0) scrollAmount = 0; else if (direction === "up") scrollAmount = "-=" + ($('#'+this.refs['mention' + this.state.selectedMention].props.id +"_mentions").innerHeight() - 5); -- cgit v1.2.3-1-g7c22