228 строки
11 KiB
JavaScript
228 строки
11 KiB
JavaScript
// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
|
|
// See License.txt for license information.
|
|
|
|
var client = require('../utils/client.jsx');
|
|
var AsyncClient = require('../utils/async_client.jsx');
|
|
var UserStore = require('../stores/user_store.jsx');
|
|
var ChannelStore = require('../stores/channel_store.jsx');
|
|
var TeamStore = require('../stores/team_store.jsx');
|
|
var MessageWrapper = require('./message_wrapper.jsx');
|
|
var NotifyCounts = require('./notify_counts.jsx');
|
|
|
|
var Constants = require('../utils/constants.jsx');
|
|
var ActionTypes = Constants.ActionTypes;
|
|
var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
|
|
|
|
function getStateFromStores() {
|
|
return {
|
|
channel: ChannelStore.getCurrent(),
|
|
member: ChannelStore.getCurrentMember(),
|
|
users: ChannelStore.getCurrentExtraInfo().members
|
|
};
|
|
}
|
|
|
|
module.exports = React.createClass({
|
|
displayName: 'Navbar',
|
|
propTypes: {
|
|
teamDisplayName: React.PropTypes.string
|
|
},
|
|
componentDidMount: function() {
|
|
ChannelStore.addChangeListener(this.onListenerChange);
|
|
ChannelStore.addExtraInfoChangeListener(this.onListenerChange);
|
|
$('.inner__wrap').click(this.hideSidebars);
|
|
|
|
$('body').on('click.infopopover', function handlePopoverClick(e) {
|
|
if ($(e.target).attr('data-toggle') !== 'popover' && $(e.target).parents('.popover.in').length === 0) {
|
|
$('.info-popover').popover('hide');
|
|
}
|
|
});
|
|
},
|
|
componentWillUnmount: function() {
|
|
ChannelStore.removeChangeListener(this.onListenerChange);
|
|
},
|
|
handleSubmit: function(e) {
|
|
e.preventDefault();
|
|
},
|
|
handleLeave: function() {
|
|
client.leaveChannel(this.state.channel.id,
|
|
function success() {
|
|
AsyncClient.getChannels(true);
|
|
window.location.href = TeamStore.getCurrentTeamUrl() + '/channels/town-square';
|
|
},
|
|
function error(err) {
|
|
AsyncClient.dispatchError(err, 'handleLeave');
|
|
}
|
|
);
|
|
},
|
|
hideSidebars: function(e) {
|
|
var windowWidth = $(window).outerWidth();
|
|
if (windowWidth <= 768) {
|
|
AppDispatcher.handleServerAction({
|
|
type: ActionTypes.RECIEVED_SEARCH,
|
|
results: null
|
|
});
|
|
|
|
AppDispatcher.handleServerAction({
|
|
type: ActionTypes.RECIEVED_POST_SELECTED,
|
|
results: null
|
|
});
|
|
|
|
if (e.target.className !== 'navbar-toggle' && e.target.className !== 'icon-bar') {
|
|
$('.inner__wrap').removeClass('move--right move--left move--left-small');
|
|
$('.sidebar--left').removeClass('move--right');
|
|
$('.sidebar--right').removeClass('move--left');
|
|
$('.sidebar--menu').removeClass('move--left');
|
|
}
|
|
}
|
|
},
|
|
toggleLeftSidebar: function() {
|
|
$('.inner__wrap').toggleClass('move--right');
|
|
$('.sidebar--left').toggleClass('move--right');
|
|
},
|
|
toggleRightSidebar: function() {
|
|
$('.inner__wrap').toggleClass('move--left-small');
|
|
$('.sidebar--menu').toggleClass('move--left');
|
|
},
|
|
onListenerChange: function() {
|
|
this.setState(getStateFromStores());
|
|
$('#navbar .navbar-brand .description').popover({placement: 'bottom', trigger: 'click', html: true});
|
|
},
|
|
getInitialState: function() {
|
|
return getStateFromStores();
|
|
},
|
|
render: function() {
|
|
var currentId = UserStore.getCurrentId();
|
|
var popoverContent = '';
|
|
var channelTitle = this.props.teamDisplayName;
|
|
var isAdmin = false;
|
|
var isDirect = false;
|
|
var channel = this.state.channel;
|
|
|
|
if (channel) {
|
|
popoverContent = React.renderToString(<MessageWrapper message={channel.description} options={{singleline: true, noMentionHighlight: true}}/>);
|
|
isAdmin = this.state.member.roles.indexOf('admin') > -1;
|
|
|
|
if (channel.type === 'O') {
|
|
channelTitle = channel.display_name;
|
|
} else if (channel.type === 'P') {
|
|
channelTitle = channel.display_name;
|
|
} else if (channel.type === 'D') {
|
|
isDirect = true;
|
|
if (this.state.users.length > 1) {
|
|
if (this.state.users[0].id === currentId) {
|
|
channelTitle = UserStore.getProfile(this.state.users[1].id).username;
|
|
} else {
|
|
channelTitle = UserStore.getProfile(this.state.users[0].id).username;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (channel.description.length === 0) {
|
|
popoverContent = React.renderToString(<div>No channel description yet. <br /><a href='#' data-toggle='modal' data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id} data-target='#edit_channel'>Click here</a> to add one.</div>);
|
|
}
|
|
}
|
|
|
|
var navbarCollapseButton = null;
|
|
if (currentId == null) {
|
|
navbarCollapseButton = (<button type='button' className='navbar-toggle' data-toggle='collapse' data-target='#navbar-collapse-1'>
|
|
<span className='sr-only'>Toggle sidebar</span>
|
|
<span className='icon-bar'></span>
|
|
<span className='icon-bar'></span>
|
|
<span className='icon-bar'></span>
|
|
</button>);
|
|
}
|
|
|
|
var sidebarCollapseButton = null;
|
|
if (currentId != null) {
|
|
sidebarCollapseButton = (<button type='button' className='navbar-toggle' data-toggle='collapse' data-target='#sidebar-nav' onClick={this.toggleLeftSidebar}>
|
|
<span className='sr-only'>Toggle sidebar</span>
|
|
<span className='icon-bar'></span>
|
|
<span className='icon-bar'></span>
|
|
<span className='icon-bar'></span>
|
|
<NotifyCounts />
|
|
</button>);
|
|
}
|
|
|
|
var rightSidebarCollapseButton = null;
|
|
if (currentId != null) {
|
|
rightSidebarCollapseButton = (<button type='button' className='navbar-toggle menu-toggle pull-right' data-toggle='collapse' data-target='#sidebar-nav' onClick={this.toggleRightSidebar}>
|
|
<span dangerouslySetInnerHTML={{__html: Constants.MENU_ICON}} />
|
|
</button>);
|
|
}
|
|
|
|
var channelMenuDropdown = null;
|
|
if (channel) {
|
|
var viewInfoOption = <li role='presentation'><a role='menuitem' data-toggle='modal' data-target='#channel_info' data-channelid={channel.id} href='#'>View Info</a></li>
|
|
|
|
var addMembersOption = null;
|
|
if (!isDirect && !ChannelStore.isDefault(channel)) {
|
|
addMembersOption = <li role='presentation'><a role='menuitem' data-toggle='modal' data-target='#channel_invite' href='#'>Add Members</a></li>;
|
|
}
|
|
|
|
var manageMembersOption = null;
|
|
if (!isDirect && isAdmin && !ChannelStore.isDefault(channel)) {
|
|
manageMembersOption = <li role='presentation'><a role='menuitem' data-toggle='modal' data-target='#channel_members' href='#'>Manage Members</a></li>;
|
|
}
|
|
|
|
var setChannelDescriptionOption = <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}>Set Channel Description...</a></li>;
|
|
|
|
var notificationPreferenceOption = null;
|
|
if (!isDirect) {
|
|
notificationPreferenceOption = <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#channel_notifications' data-title={channel.display_name} data-channelid={channel.id}>Notification Preferences</a></li>;
|
|
}
|
|
|
|
var renameChannelOption = null;
|
|
if (!isDirect && isAdmin && !ChannelStore.isDefault(channel)) {
|
|
renameChannelOption = <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#rename_channel' data-display={channel.display_name} data-name={channel.name} data-channelid={channel.id}>Rename Channel...</a></li>;
|
|
}
|
|
|
|
var deleteChannelOption = null;
|
|
if (!isDirect && isAdmin && !ChannelStore.isDefault(channel)) {
|
|
deleteChannelOption = <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#delete_channel' data-title={channel.display_name} data-channelid={channel.id}>Delete Channel...</a></li>;
|
|
}
|
|
|
|
var leaveChannelOption = null;
|
|
if (!isDirect && !ChannelStore.isDefault(channel)) {
|
|
leaveChannelOption = <li role='presentation'><a role='menuitem' href='#' onClick={this.handleLeave}>Leave Channel</a></li>;
|
|
}
|
|
|
|
channelMenuDropdown = (<div className='navbar-brand'>
|
|
<div className='dropdown'>
|
|
<div data-toggle='popover' data-content={popoverContent} className='description info-popover'></div>
|
|
<a href='#' className='dropdown-toggle theme' type='button' id='channel_header_dropdown' data-toggle='dropdown' aria-expanded='true'>
|
|
<span className='heading'>{channelTitle} </span>
|
|
<span className='glyphicon glyphicon-chevron-down header-dropdown__icon'></span>
|
|
</a>
|
|
<ul className='dropdown-menu' role='menu' aria-labelledby='channel_header_dropdown'>
|
|
{viewInfoOption}
|
|
{addMembersOption}
|
|
{manageMembersOption}
|
|
{setChannelDescriptionOption}
|
|
{notificationPreferenceOption}
|
|
{renameChannelOption}
|
|
{deleteChannelOption}
|
|
{leaveChannelOption}
|
|
</ul>
|
|
</div>
|
|
</div>);
|
|
} else {
|
|
channelMenuDropdown = (<div className='navbar-brand'>
|
|
<a href='/' className='heading'>{channelTitle}</a>
|
|
</div>);
|
|
}
|
|
|
|
return (
|
|
<nav className='navbar navbar-default navbar-fixed-top' role='navigation'>
|
|
<div className='container-fluid theme'>
|
|
<div className='navbar-header'>
|
|
{navbarCollapseButton}
|
|
{sidebarCollapseButton}
|
|
{rightSidebarCollapseButton}
|
|
{channelMenuDropdown}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|
|
});
|