From 646214b49b47752cf170d7e6677e9464c2a3f786 Mon Sep 17 00:00:00 2001 From: Joram Wilander Date: Mon, 17 Aug 2015 11:35:30 -0400 Subject: Revert "Mm 1640 Fixed odd scrolling issues on channel refresh" --- web/react/components/create_post.jsx | 1 + web/react/components/post_list.jsx | 468 +++++++++++++++------------------ web/react/components/sidebar_right.jsx | 6 + web/react/utils/utils.jsx | 2 + 4 files changed, 223 insertions(+), 254 deletions(-) diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index 523112447..9ca1d5388 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -88,6 +88,7 @@ module.exports = React.createClass({ ); } + $('.post-list-holder-by-time').perfectScrollbar('update'); }, componentDidUpdate: function() { this.resizePostHolder(); diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index edccab644..83f806b79 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -21,65 +21,81 @@ function getStateFromStores() { if (channel == null) channel = {}; return { - postList: PostStore.getCurrentPosts(), + post_list: PostStore.getCurrentPosts(), channel: channel }; } module.exports = React.createClass({ - displayName: 'PostList', - holdPosition: true, // The default state is to hold your scroll position - // 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 + displayName: "PostList", + scrollPosition: 0, + preventScrollTrigger: false, + gotMorePosts: false, + oldScrollHeight: 0, + oldZoom: 0, + scrolledToNew: false, 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 + ';}'); + 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) + ';'); + 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) + ';'); + } 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.onListenerChange); - ChannelStore.addChangeListener(this.onListenerChange); - UserStore.addStatusesChangeListener(this.onTimeChange); - SocketStore.addChangeListener(this.onSocketChange); + PostStore.addChangeListener(this._onChange); + ChannelStore.addChangeListener(this._onChange); + UserStore.addStatusesChangeListener(this._onTimeChange); + SocketStore.addChangeListener(this._onSocketChange); + + $(".post-list-holder-by-time").perfectScrollbar(); + + this.resize(); + + var post_holder = $(".post-list-holder-by-time")[0]; + this.scrollPosition = $(post_holder).scrollTop() + $(post_holder).innerHeight(); + this.oldScrollHeight = post_holder.scrollHeight; + this.oldZoom = (window.outerWidth - 8) / window.innerWidth; - // Timeout exists for the DOM to fully render before making changes var self = this; - function initialScroll() { - self.holdPosition = false; - self.scrollWindow(); - $(document).off('DOMContentLoaded', initialScroll); - } + $(window).resize(function(){ + $(post_holder).perfectScrollbar('update'); + + // this only kind of works, detecting zoom in browsers is a nightmare + var newZoom = (window.outerWidth - 8) / window.innerWidth; - $(document).on('DOMContentLoaded', initialScroll); + if (self.scrollPosition >= post_holder.scrollHeight || (self.oldScrollHeight != post_holder.scrollHeight && self.scrollPosition >= self.oldScrollHeight) || self.oldZoom != newZoom) self.resize(); - // Handle browser resizing - $(window).resize(this.onResize); + self.oldZoom = newZoom; + + if ($('#create_post').length > 0) { + var height = $(window).height() - $('#create_post').height() - $('#error_bar').outerHeight() - 50; + $(".post-list-holder-by-time").css("height", height + "px"); + } + }); + + $(post_holder).scroll(function(e){ + if (!self.preventScrollTrigger) { + self.scrollPosition = $(post_holder).scrollTop() + $(post_holder).innerHeight(); + } + self.preventScrollTrigger = false; + }); - // Highlight stylingx $('body').on('click.userpopover', function(e){ - if ($(e.target).attr('data-toggle') !== 'popover' && - $(e.target).parents('.popover.in').length === 0) { + if ($(e.target).attr('data-toggle') !== 'popover' + && $(e.target).parents('.popover.in').length === 0) { $('.user-popover').popover('hide'); } }); @@ -88,208 +104,180 @@ module.exports = React.createClass({ $('.post-list__content div:last-child .post').addClass('post--last'); $('body').on('mouseenter mouseleave', '.post', function(ev){ - if (ev.type === 'mouseenter') { + 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 { + } + 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') { + 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 { + } + 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() { - this.prepareScrollWindow(); + }, componentDidUpdate: function() { - this.scrollWindow(); + this.resize(); + var post_holder = $(".post-list-holder-by-time")[0]; + this.scrollPosition = $(post_holder).scrollTop() + $(post_holder).innerHeight(); + this.oldScrollHeight = post_holder.scrollHeight; $('.post-list__content div .post').removeClass('post--last'); $('.post-list__content div:last-child .post').addClass('post--last'); }, componentWillUnmount: function() { - PostStore.removeChangeListener(this.onListenerChange); - ChannelStore.removeChangeListener(this.onListenerChange); - UserStore.removeStatusesChangeListener(this.onTimeChange); - SocketStore.removeChangeListener(this.onSocketChange); + PostStore.removeChangeListener(this._onChange); + ChannelStore.removeChangeListener(this._onChange); + UserStore.removeStatusesChangeListener(this._onTimeChange); + SocketStore.removeChangeListener(this._onSocketChange); $('body').off('click.userpopover'); }, - prepareScrollWindow: function() { - var container = $('.post-list-holder-by-time'); - if (this.holdPosition) { - this.scrollHeightFromBottom = container[0].scrollHeight - container.scrollTop(); - } - }, - scrollWindow: function() { - var container = $('.post-list-holder-by-time'); - - // If there's a new message, jump the window to it - // 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); + resize: function() { + var post_holder = $(".post-list-holder-by-time")[0]; + this.preventScrollTrigger = true; + if (this.gotMorePosts) { + this.gotMorePosts = false; + $(post_holder).scrollTop($(post_holder).scrollTop() + (post_holder.scrollHeight-this.oldScrollHeight) ); } else { - container.scrollTop(container[0].scrollHeight - container.innerHeight()); - } - this.holdPosition = true; - }, - onResize: function() { - this.holdPosition = true; - if ($('#create_post').length > 0) { - var height = $(window).height() - $('#create_post').height() - $('#error_bar').outerHeight() - 50; - $('.post-list-holder-by-time').css('height', height + 'px'); + if ($("#new_message")[0] && !this.scrolledToNew) { + $(post_holder).scrollTop($(post_holder).scrollTop() + $("#new_message").offset().top - 63); + this.scrolledToNew = true; + } else { + $(post_holder).scrollTop(post_holder.scrollHeight); + } } - this.forceUpdate(); + $(post_holder).perfectScrollbar('update'); }, - onListenerChange: function() { + _onChange: function() { var newState = getStateFromStores(); if (!utils.areStatesEqual(newState, this.state)) { - this.holdPosition = (newState.channel.id === this.state.channel.id); // If we're on a new channel, go to the bottom, otherwise hold your position + if (this.state.post_list && this.state.post_list.order) { + if (this.state.channel.id === newState.channel.id && this.state.post_list.order.length != newState.post_list.order.length && newState.post_list.order.length > Constants.POST_CHUNK_SIZE) { + this.gotMorePosts = true; + } + } + if (this.state.channel.id !== newState.channel.id) { + this.scrolledToNew = false; + } this.setState(newState); } }, - onSocketChange: function(msg) { - var postList; - var post; - if (msg.action === 'posted') { - post = JSON.parse(msg.props.post); - - postList = PostStore.getPosts(msg.channel_id); - if (!postList) { - return; - } + _onSocketChange: function(msg) { + if (msg.action == "posted") { + var post = JSON.parse(msg.props.post); - postList.posts[post.id] = post; - if (postList.order.indexOf(post.id) === -1) { - postList.order.unshift(post.id); - } + var post_list = PostStore.getPosts(msg.channel_id); + if (!post_list) return; - if (this.state.channel.id === msg.channel_id) { - this.holdPosition = false; - this.setState({postList: postList}); - } else { - this.holdPosition = true; + post_list.posts[post.id] = post; + if (post_list.order.indexOf(post.id) === -1) { + post_list.order.unshift(post.id); } - PostStore.storePosts(post.channel_id, postList); - } else if (msg.action === 'post_edited') { if (this.state.channel.id === msg.channel_id) { - postList = this.state.postList; - if (!(msg.props.post_id in postList.posts)) { - return; - } + this.setState({ post_list: post_list }); + }; - post = postList.posts[msg.props.post_id]; - post.message = msg.props.message; + 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; - postList.posts[post.id] = post; - this.setState({postList: postList}); + var post = post_list.posts[msg.props.post_id]; + post.message = msg.props.message; - this.holdPosition = true; + post_list.posts[post.id] = post; + this.setState({ post_list: post_list }); - PostStore.storePosts(msg.channel_id, postList); + PostStore.storePosts(msg.channel_id, post_list); } else { AsyncClient.getPosts(true, msg.channel_id); } - } else if (msg.action === 'post_deleted') { + } else if (msg.action == "post_deleted") { var activeRoot = $(document.activeElement).closest('.comment-create-body')[0]; - var activeRootPostId = ''; - if (activeRoot && activeRoot.id.length > 0) { - activeRootPostId = activeRoot.id; - } + var activeRootPostId = activeRoot && activeRoot.id.length > 0 ? activeRoot.id : ""; - if (this.state.channel.id === msg.channel_id) { - postList = this.state.postList; - if (!(msg.props.post_id in this.state.postList.posts)) { - return; - } + 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 postList.posts[msg.props.post_id]; - var index = postList.order.indexOf(msg.props.post_id); - if (index > -1) { - postList.order.splice(index, 1); - } + 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 }); - this.setState({postList: postList}); - - PostStore.storePosts(msg.channel_id, postList); + 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) { + if (activeRootPostId === msg.props.post_id && UserStore.getCurrentId() != msg.user_id) { $('#post_deleted').modal('show'); } - } else if (msg.action === 'new_user') { + } else if (msg.action == "new_user") { AsyncClient.getProfiles(); } }, - onTimeChange: function() { - if (!this.state.postList) { - return; - } - for (var id in this.state.postList.posts) { - if (!this.refs[id]) { - continue; - } + _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.postList) { - return; - } + if (!this.state.post_list) return; - var posts = this.state.postList.posts; - var order = this.state.postList.order; - var channelId = this.state.channel.id; + 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...'); + $(this.refs.loadmore.getDOMNode()).text("Retrieving more messages..."); var self = this; - this.holdPosition = true; + var currentPos = $(".post-list").scrollTop; Client.getPosts( - channelId, + channel_id, order.length, Constants.POST_CHUNK_SIZE, function(data) { - $(self.refs.loadmore.getDOMNode()).text('Load more messages'); + $(self.refs.loadmore.getDOMNode()).text("Load more messages"); if (!data) return; if (data.order.length === 0) return; - var postList = {} - postList.posts = $.extend(posts, data.posts); - postList.order = order.concat(data.order); + var post_list = {} + post_list.posts = $.extend(posts, data.posts); + post_list.order = order.concat(data.order); AppDispatcher.handleServerAction({ type: ActionTypes.RECIEVED_POSTS, - id: channelId, - postList: postList + id: channel_id, + post_list: post_list }); Client.getProfiles(); + $(".post-list").scrollTop(currentPos); }, function(err) { - $(self.refs.loadmore.getDOMNode()).text('Load more messages'); - AsyncClient.dispatchError(err, 'getPosts'); + $(self.refs.loadmore.getDOMNode()).text("Load more messages"); + AsyncClient.dispatchError(err, "getPosts"); } ); }, @@ -300,20 +288,19 @@ module.exports = React.createClass({ var order = []; var posts; - var lastViewed = Number.MAX_VALUE; + var last_viewed = Number.MAX_VALUE; - if (ChannelStore.getCurrentMember() != null) { - lastViewed = ChannelStore.getCurrentMember().last_viewed_at; - } + if (ChannelStore.getCurrentMember() != null) + last_viewed = ChannelStore.getCurrentMember().last_viewed_at; - if (this.state.postList != null) { - posts = this.state.postList.posts; - order = this.state.postList.order; + if (this.state.post_list != null) { + posts = this.state.post_list.posts; + order = this.state.post_list.order; } - var renderedLastViewed = false; + var rendered_last_viewed = false; - var user_id = ''; + var user_id = ""; if (UserStore.getCurrentId()) { user_id = UserStore.getCurrentId(); } else { @@ -322,65 +309,60 @@ module.exports = React.createClass({ var channel = this.state.channel; - var moreMessages =

Beginning of Channel

; + var more_messages =

Beginning of Channel

; - var userStyle = {color: UserStore.getCurrentUser().props.theme}; + var userStyle = { color: UserStore.getCurrentUser().props.theme } if (channel != null) { if (order.length > 0 && order.length % Constants.POST_CHUNK_SIZE === 0) { - moreMessages = Load more messages; + more_messages = Load more messages; } else if (channel.type === 'D') { - var teammate = utils.getDirectTeammate(channel.id); + var teammate = utils.getDirectTeammate(channel.id) if (teammate) { - var teammateName; - if (teammate.nickname.length > 0) { - teammateName = teammate.nickname; - } else { - teammateName = teammate.username; - } - moreMessages = ( -
-
- + var teammate_name = teammate.nickname.length > 0 ? teammate.nickname : teammate.username; + more_messages = ( +
+
+
-
+
-

- {'This is the start of your private message history with ' + teammateName + '.'}
- {'Private messages and files shared here are not shown to people outside this area.'} +

+ {"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."}

- Set a description + Set a description
); } else { - moreMessages = ( -
-

{'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.'}

+ more_messages = ( +
+

{"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."}

); } } else if (channel.type === 'P' || channel.type === 'O') { - var uiName = channel.display_name; + var ui_name = channel.display_name var members = ChannelStore.getCurrentExtraInfo().members; - var createorName = ''; + var creator_name = ""; for (var i = 0; i < members.length; i++) { if (members[i].roles.indexOf('admin') > -1) { - createorName = members[i].username; + creator_name = members[i].username; break; } } if (ChannelStore.isDefault(channel)) { - moreMessages = ( -
-

Beginning of {uiName}

-

- Welcome to {uiName}! + more_messages = ( +

+

Beginning of {ui_name}

+

+ Welcome to {ui_name}!

- {'This is the first channel ' + strings.Team + 'mates see when they'} + {"This is the first channel " + strings.Team + "mates see when they"}
sign up - use it for posting updates everyone needs to know.

@@ -392,43 +374,29 @@ module.exports = React.createClass({

); } else if (channel.name === Constants.OFFTOPIC_CHANNEL) { - moreMessages = ( -
-

Beginning of {uiName}

-

- {'This is the start of ' + uiName + ', a channel for non-work-related conversations.'} + more_messages = ( +

+

Beginning of {ui_name}

+

+ {"This is the start of " + ui_name + ", a channel for non-work-related conversations."}

- Set a description + Set a description
); } else { - var uiType; - var permissions; - if (channel.type === 'P') { - uiType = 'private group'; - permissions = ' Only invited members can see this private group.'; - } else { - uiType = 'channel'; - permissions = ' Any member can join and read this channel.'; - } - - var createorText; - if (createorName !== '') { - createorText = 'This is the start of the ' + uiName + ' ' + uiType + ', created by ' + createorName + ' on ' + utils.displayDate(channel.create_at) + '.'; - } else { - createorText = 'This is the start of the ' + uiName + ' ' + uiType + ', created on '+ utils.displayDate(channel.create_at) + '.'; - } - moreMessages = ( -
-

Beginning of {uiName}

-

- {createorText} - {permissions} + var ui_type = channel.type === 'P' ? "private group" : "channel"; + more_messages = ( +

+

Beginning of {ui_name}

+

+ { 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." }

- Set a description - Invite others to this {uiType} + Set a description + Invite others to this {ui_type}
); } @@ -443,23 +411,15 @@ module.exports = React.createClass({ for (var i = order.length-1; i >= 0; i--) { var post = posts[order[i]]; - var parentPost = null; - if (post.parent_id) { - parentPost = posts[post.parent_id]; - } + var parentPost = post.parent_id ? posts[post.parent_id] : null; var sameUser = ''; var sameRoot = false; var hideProfilePic = false; - var prevPost = null; - if (i < order.length - 1) { - prevPost = posts[order[i + 1]]; - } + var prevPost = (i < order.length - 1) ? posts[order[i + 1]] : null; if (prevPost) { - if ((prevPost.user_id === post.user_id) && (post.create_at - prevPost.create_at <= 1000 * 60 * 5)) { - sameUser = 'same--user'; - } + sameUser = (prevPost.user_id === post.user_id) && (post.create_at - prevPost.create_at <= 1000*60*5) ? "same--user" : ""; sameRoot = utils.isComment(post) && (prevPost.id === post.root_id || prevPost.root_id === post.root_id); // we only hide the profile pic if the previous post is not a comment, the current post is not a comment, and the previous post was made by the same user as the current post @@ -468,7 +428,7 @@ module.exports = React.createClass({ // check if it's the last comment in a consecutive string of comments on the same post // it is the last comment if it is last post in the channel or the next post has a different root post - var isLastComment = utils.isComment(post) && (i === 0 || posts[order[i - 1]].root_id !== post.root_id); + var isLastComment = utils.isComment(post) && (i === 0 || posts[order[i-1]].root_id != post.root_id); var postCtl = ( -
-
{currentPostDay.toDateString()}
+
+
+
{currentPostDay.toDateString()}
); } - if (post.create_at > lastViewed && !renderedLastViewed) { - renderedLastViewed = true; + if (post.create_at > last_viewed && !rendered_last_viewed) { + rendered_last_viewed = true; postCtls.push( -
-
-
New Messages
+
+
+
New Messages
); } @@ -499,15 +459,15 @@ module.exports = React.createClass({ previousPostDay = currentPostDay; } } else { - postCtls.push(); + postCtls.push(); } return ( -
-
-
- {moreMessages} - {postCtls} +
+
+
+ { more_messages } + { postCtls }
diff --git a/web/react/components/sidebar_right.jsx b/web/react/components/sidebar_right.jsx index 7ceccb45c..8334b345b 100644 --- a/web/react/components/sidebar_right.jsx +++ b/web/react/components/sidebar_right.jsx @@ -38,6 +38,10 @@ module.exports = React.createClass({ } } }, + resize: function() { + $(".post-list-holder-by-time").scrollTop(100000); + $(".post-list-holder-by-time").perfectScrollbar('update'); + }, getInitialState: function() { return getStateFromStores(); }, @@ -45,6 +49,7 @@ module.exports = React.createClass({ if (! (this.state.search_visible || this.state.post_right_visible)) { $('.inner__wrap').removeClass('move--left').removeClass('move--right'); $('.sidebar--right').removeClass('move--left'); + this.resize(); return (
); @@ -54,6 +59,7 @@ module.exports = React.createClass({ $('.sidebar--left').removeClass('move--right'); $('.sidebar--right').addClass('move--left'); $('.sidebar--right').prepend('
'); + this.resize(); setTimeout(function(){ $('.sidebar__overlay').fadeOut("200", function(){ $(this).remove(); diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index d29930aaf..7591c138f 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -313,6 +313,8 @@ var getYoutubeEmbed = function(link) { var metadata = data.items[0].snippet; $('.video-uploader.'+youtubeId).html(metadata.channelTitle); $('.video-title.'+youtubeId).find('a').html(metadata.title); + $(".post-list-holder-by-time").scrollTop($(".post-list-holder-by-time")[0].scrollHeight); + $(".post-list-holder-by-time").perfectScrollbar('update'); }; if(config.GoogleDeveloperKey) { -- cgit v1.2.3-1-g7c22