mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

Cosmetic changes to better follow style guide

Просмотр исходного кода
Этот коммит содержится в:
Reed Garmsen
2015-08-03 12:45:08 -07:00
родитель 1ac883a408
Коммит affbf6f01b
1 изменённых файлов: 95 добавлений и 75 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

170
web/react/components/mention_list.jsx
Просмотреть файл

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