// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. var PostStore = require('../stores/post_store.jsx'); var ChannelStore = require('../stores/channel_store.jsx'); var UserStore = require('../stores/user_store.jsx'); var UserProfile = require( './user_profile.jsx' ); var AsyncClient = require('../utils/async_client.jsx'); var Post = require('./post.jsx'); var LoadingScreen = require('./loading_screen.jsx'); var SocketStore = require('../stores/socket_store.jsx'); var utils = require('../utils/utils.jsx'); var Client = require('../utils/client.jsx'); var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); var Constants = require('../utils/constants.jsx'); var ActionTypes = Constants.ActionTypes; function getStateFromStores() { var channel = ChannelStore.getCurrent(); if (channel == null) channel = {}; return { post_list: PostStore.getCurrentPosts(), channel: channel }; } module.exports = React.createClass({ displayName: "PostList", oldZoom: 0, holdPosition: false, // The default state is to scroll to the bottom on change // This behavior should NOT be taken advantage of, always set this to the desired state scrollHeightFromBottom: 0, // This represents the distance from the container's scrollHeight // and current scrollTop // Based on equation scrollTop + scrollHeightFromBottom = scrollHeight componentDidMount: function() { // Add CSS required to have the theme colors var user = UserStore.getCurrentUser(); if (user.props && user.props.theme) { utils.changeCss('div.theme', 'background-color:'+user.props.theme+';'); utils.changeCss('.btn.btn-primary', 'background: ' + user.props.theme+';'); utils.changeCss('.modal .modal-header', 'background: ' + user.props.theme+';'); utils.changeCss('.mention', 'background: ' + user.props.theme+';'); utils.changeCss('.mention-link', 'color: ' + user.props.theme+';'); utils.changeCss('@media(max-width: 768px){.search-bar__container', 'background: ' + user.props.theme+';}'); } if (user.props.theme != '#000000' && user.props.theme != '#585858') { utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, -10) +';'); utils.changeCss('a.theme', 'color:'+user.props.theme+'; fill:'+user.props.theme+'!important;'); } else if (user.props.theme == '#000000') { utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +50) +';'); $('.team__header').addClass('theme--black'); } else if (user.props.theme == '#585858') { utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +10) +';'); $('.team__header').addClass('theme--gray'); } // Start our Store listeners PostStore.addChangeListener(this._onChange); ChannelStore.addChangeListener(this._onChange); UserStore.addStatusesChangeListener(this._onTimeChange); SocketStore.addChangeListener(this._onSocketChange); // Timeout exists for the DOM to fully render before making changes setTimeout(this.scrollWindow, 1) // Highlight stylingx $('body').on('click.userpopover', function(e){ if ($(e.target).attr('data-toggle') !== 'popover' && $(e.target).parents('.popover.in').length === 0) { $('.user-popover').popover('hide'); } }); $('.post-list__content div .post').removeClass('post--last'); $('.post-list__content div:last-child .post').addClass('post--last'); $('body').on('mouseenter mouseleave', '.post', function(ev){ if(ev.type === 'mouseenter'){ $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--after'); $(this).parent('div').next('.date-separator, .new-separator').addClass('hovered--before'); } else { $(this).parent('div').prev('.date-separator, .new-separator').removeClass('hovered--after'); $(this).parent('div').next('.date-separator, .new-separator').removeClass('hovered--before'); } }); $('body').on('mouseenter mouseleave', '.post.post--comment.same--root', function(ev){ if(ev.type === 'mouseenter'){ $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--comment'); $(this).parent('div').next('.date-separator, .new-separator').addClass('hovered--comment'); } else { $(this).parent('div').prev('.date-separator, .new-separator').removeClass('hovered--comment'); $(this).parent('div').next('.date-separator, .new-separator').removeClass('hovered--comment'); } }); }, componentWillUpdate: function() { var container = $('.post-list-holder-by-time'); if (this.holdPosition) { this.scrollHeightFromBottom = container[0].scrollHeight - container.scrollTop(); } }, componentDidUpdate: function() { this.scrollWindow() $('.post-list__content div .post').removeClass('post--last'); $('.post-list__content div:last-child .post').addClass('post--last'); }, componentWillUnmount: function() { PostStore.removeChangeListener(this._onChange); ChannelStore.removeChangeListener(this._onChange); UserStore.removeStatusesChangeListener(this._onTimeChange); SocketStore.removeChangeListener(this._onSocketChange); $('body').off('click.userpopover'); }, scrollWindow: function() { var container = $('.post-list-holder-by-time'); // If there's a new message, this jumps the window to that // If there's no new message, we check if there is a scroll position to retrieve from the previous state // If we don't, then we just jump to the bottom if ($('#new_message').length) { container.scrollTop(container.scrollTop() + $('#new_message').offset().top - container.offset().top - $('.new-separator').height()); } else if (this.holdPosition) { container.scrollTop(container[0].scrollHeight - this.scrollHeightFromBottom); this.holdPosition = false; } else { container.scrollTop(container[0].scrollHeight - container.innerHeight()); } }, _onChange: function() { var newState = getStateFromStores(); if (!utils.areStatesEqual(newState, this.state)) { this.setState(newState); } }, _onSocketChange: function(msg) { if (msg.action == "posted") { var post = JSON.parse(msg.props.post); var post_list = PostStore.getPosts(msg.channel_id); if (!post_list) return; post_list.posts[post.id] = post; if (post_list.order.indexOf(post.id) === -1) { post_list.order.unshift(post.id); } this.holdPosition = false; if (this.state.channel.id === msg.channel_id) { this.setState({ post_list: post_list }); }; PostStore.storePosts(post.channel_id, post_list); } else if (msg.action == "post_edited") { if (this.state.channel.id == msg.channel_id) { var post_list = this.state.post_list; if (!(msg.props.post_id in post_list.posts)) return; var post = post_list.posts[msg.props.post_id]; post.message = msg.props.message; post_list.posts[post.id] = post; this.setState({ post_list: post_list }); this.holdPosition = true; PostStore.storePosts(msg.channel_id, post_list); } else { AsyncClient.getPosts(true, msg.channel_id); } } else if (msg.action == "post_deleted") { var activeRoot = $(document.activeElement).closest('.comment-create-body')[0]; var activeRootPostId = activeRoot && activeRoot.id.length > 0 ? activeRoot.id : ""; if (this.state.channel.id == msg.channel_id) { var post_list = this.state.post_list; if (!(msg.props.post_id in this.state.post_list.posts)) return; delete post_list.posts[msg.props.post_id]; var index = post_list.order.indexOf(msg.props.post_id); if (index > -1) post_list.order.splice(index, 1); this.holdPosition = true; this.setState({ post_list: post_list }); PostStore.storePosts(msg.channel_id, post_list); } else { AsyncClient.getPosts(true, msg.channel_id); } if (activeRootPostId === msg.props.post_id && UserStore.getCurrentId() != msg.user_id) { $('#post_deleted').modal('show'); } } else if (msg.action == "new_user") { AsyncClient.getProfiles(); } }, _onTimeChange: function() { if (!this.state.post_list) return; for (var id in this.state.post_list.posts) { if (!this.refs[id]) continue; this.refs[id].forceUpdateInfo(); } }, getMorePosts: function(e) { e.preventDefault(); if (!this.state.post_list) return; var posts = this.state.post_list.posts; var order = this.state.post_list.order; var channel_id = this.state.channel.id; $(this.refs.loadmore.getDOMNode()).text("Retrieving more messages..."); var self = this; this.holdPosition = true; Client.getPosts( channel_id, order.length, Constants.POST_CHUNK_SIZE, function(data) { $(self.refs.loadmore.getDOMNode()).text("Load more messages"); console.log("here") if (!data) return; if (data.order.length === 0) return; var post_list = {} post_list.posts = $.extend(posts, data.posts); post_list.order = order.concat(data.order); AppDispatcher.handleServerAction({ type: ActionTypes.RECIEVED_POSTS, id: channel_id, post_list: post_list }); Client.getProfiles(); }, function(err) { $(self.refs.loadmore.getDOMNode()).text("Load more messages"); AsyncClient.dispatchError(err, "getPosts"); } ); }, getInitialState: function() { return getStateFromStores(); }, render: function() { var order = []; var posts; var last_viewed = Number.MAX_VALUE; if (ChannelStore.getCurrentMember() != null) last_viewed = ChannelStore.getCurrentMember().last_viewed_at; if (this.state.post_list != null) { posts = this.state.post_list.posts; order = this.state.post_list.order; } var rendered_last_viewed = false; var user_id = ""; if (UserStore.getCurrentId()) { user_id = UserStore.getCurrentId(); } else { return
; } var channel = this.state.channel; var more_messages =Beginning of Channel
; var userStyle = { color: UserStore.getCurrentUser().props.theme } if (channel != null) { if (order.length > 0 && order.length % Constants.POST_CHUNK_SIZE === 0) { more_messages = Load more messages; } else if (channel.type === 'D') { var teammate = utils.getDirectTeammate(channel.id) if (teammate) { var teammate_name = teammate.nickname.length > 0 ? teammate.nickname : teammate.username; more_messages = (
{"This is the start of your private message history with " + teammate_name + "." }
{"Private messages and files shared here are not shown to people outside this area."}
{"This is the start of your private message history with this " + strings.Team + "mate. Private messages and files shared here are not shown to people outside this area."}
Welcome to {ui_name}!
{"This is the first channel " + strings.Team + "mates see when they"}
sign up - use it for posting updates everyone needs to know.
To create a new channel or join an existing one, go to
the Left Hand Sidebar under “Channels” and click “More…”.
{"This is the start of " + ui_name + ", a channel for non-work-related conversations."}
{ creator_name != "" ? "This is the start of the " + ui_name + " " + ui_type + ", created by " + creator_name + " on " + utils.displayDate(channel.create_at) + "."
: "This is the start of the " + ui_name + " " + ui_type + ", created on "+ utils.displayDate(channel.create_at) + "." }
{ channel.type === 'P' ? " Only invited members can see this private group." : " Any member can join and read this channel." }