From ea4250bbbc21492a7f114daca30d839bc7644e90 Mon Sep 17 00:00:00 2001 From: nickago Date: Fri, 31 Jul 2015 16:45:14 -0700 Subject: Added comments to confusing post list method --- web/react/components/post_list.jsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'web/react') diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 83f806b79..e7d57df8d 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -29,12 +29,15 @@ function getStateFromStores() { module.exports = React.createClass({ displayName: "PostList", scrollPosition: 0, - preventScrollTrigger: false, + preventScrollTrigger: false, // Can't think of an intuitive name, but when true, + // scrollPosition is affected by the 'on scroll' event below 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+';'); @@ -55,11 +58,13 @@ module.exports = React.createClass({ $('.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); + // Initialize perfect scrollbar $(".post-list-holder-by-time").perfectScrollbar(); this.resize(); @@ -69,6 +74,8 @@ module.exports = React.createClass({ this.oldScrollHeight = post_holder.scrollHeight; this.oldZoom = (window.outerWidth - 8) / window.innerWidth; + /*************** End of 'run on mount' code, Start of event listeners *****************/ + var self = this; $(window).resize(function(){ $(post_holder).perfectScrollbar('update'); -- cgit v1.2.3-1-g7c22 From f9070177c181b7c0c06d6bb3f97748f1d69c2a6e Mon Sep 17 00:00:00 2001 From: nickago Date: Fri, 31 Jul 2015 17:20:38 -0700 Subject: Added more comments and did cosmetic refactoring to understand code easier --- web/react/components/post_list.jsx | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) (limited to 'web/react') diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index e7d57df8d..7ea7202e7 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -93,6 +93,9 @@ module.exports = React.createClass({ } }); + // scrollPosistion records and holds every position that the user has been at + // Disabled by preventScrollTrigger + // Consider storing this in localStorage instead $(post_holder).scroll(function(e){ if (!self.preventScrollTrigger) { self.scrollPosition = $(post_holder).scrollTop() + $(post_holder).innerHeight(); @@ -154,13 +157,11 @@ module.exports = React.createClass({ if (this.gotMorePosts) { this.gotMorePosts = false; $(post_holder).scrollTop($(post_holder).scrollTop() + (post_holder.scrollHeight-this.oldScrollHeight) ); + } else if ($("#new_message")[0] && !this.scrolledToNew) { + $(post_holder).scrollTop($(post_holder).scrollTop() + $("#new_message").offset().top - 63); + this.scrolledToNew = true; } else { - 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); - } + $(post_holder).scrollTop(post_holder.scrollHeight); } $(post_holder).perfectScrollbar('update'); }, @@ -168,10 +169,13 @@ module.exports = React.createClass({ var newState = getStateFromStores(); if (!utils.areStatesEqual(newState, this.state)) { - 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.post_list && + this.state.post_list.order && + 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) { + // Thus marking the end of the conditional + this.gotMorePosts = true; } if (this.state.channel.id !== newState.channel.id) { this.scrolledToNew = false; -- cgit v1.2.3-1-g7c22 From 505865311e4758547a6cb65e78b1a9d885ed2745 Mon Sep 17 00:00:00 2001 From: nickago Date: Sat, 1 Aug 2015 10:46:09 -0700 Subject: Further added comments and split up if statments to make it more readable --- web/react/components/post_list.jsx | 26 ++++++++++++++++++++------ 1 file changed, 20 insertions(+), 6 deletions(-) (limited to 'web/react') diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 7ea7202e7..53aed9412 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -29,12 +29,14 @@ function getStateFromStores() { module.exports = React.createClass({ displayName: "PostList", scrollPosition: 0, - preventScrollTrigger: false, // Can't think of an intuitive name, but when true, - // scrollPosition is affected by the 'on scroll' event below + preventScrollTrigger: false, // Can't think of an intuitive name, but when true, + // scrollPosition is affected by the 'on scroll' event below gotMorePosts: false, oldScrollHeight: 0, oldZoom: 0, - scrolledToNew: false, + scrolledToNew: false, // Signifies we've already scrolled to the "new message" bar + // one time, don't want to do it again even if the bar + // doesn't go away componentDidMount: function() { // Add CSS required to have the theme colors @@ -69,6 +71,10 @@ module.exports = React.createClass({ this.resize(); + // Set initial values of these component properties, will be updated on every re-render + // scrollPosition - scroll point of bottom of current viewport + // oldScrollHeight - bottom scroll point possible of viewport + // oldZoom - represents "browser zoom" var post_holder = $(".post-list-holder-by-time")[0]; this.scrollPosition = $(post_holder).scrollTop() + $(post_holder).innerHeight(); this.oldScrollHeight = post_holder.scrollHeight; @@ -83,10 +89,19 @@ module.exports = React.createClass({ // this only kind of works, detecting zoom in browsers is a nightmare var newZoom = (window.outerWidth - 8) / window.innerWidth; - if (self.scrollPosition >= post_holder.scrollHeight || (self.oldScrollHeight != post_holder.scrollHeight && self.scrollPosition >= self.oldScrollHeight) || self.oldZoom != newZoom) self.resize(); + // We resize if : + // 1. We are scrolled below the max scroll + // 2. ??? + // 3. We changed zoom sizes + if (self.scrollPosition >= post_holder.scrollHeight || + (self.oldScrollHeight !== post_holder.scrollHeight && self.scrollPosition >= self.oldScrollHeight) || + self.oldZoom !== newZoom) { + self.resize(); + } self.oldZoom = newZoom; + // Sets the size of the viewport, doesn't affect the overflowed component 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"); @@ -94,7 +109,7 @@ module.exports = React.createClass({ }); // scrollPosistion records and holds every position that the user has been at - // Disabled by preventScrollTrigger + // unless preventScrollTrigger is enabled, then it skips one reading // Consider storing this in localStorage instead $(post_holder).scroll(function(e){ if (!self.preventScrollTrigger) { @@ -174,7 +189,6 @@ module.exports = React.createClass({ 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) { - // Thus marking the end of the conditional this.gotMorePosts = true; } if (this.state.channel.id !== newState.channel.id) { -- cgit v1.2.3-1-g7c22 From 41248959c838c050a34bd27558684a5f1aa8a7e9 Mon Sep 17 00:00:00 2001 From: nickago Date: Mon, 3 Aug 2015 10:30:21 -0700 Subject: Filled out comments for post list --- web/react/components/post_list.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web/react') diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 53aed9412..0abb3107e 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -91,7 +91,7 @@ module.exports = React.createClass({ // We resize if : // 1. We are scrolled below the max scroll - // 2. ??? + // 2. Edge case similar to offscreen resizing // 3. We changed zoom sizes if (self.scrollPosition >= post_holder.scrollHeight || (self.oldScrollHeight !== post_holder.scrollHeight && self.scrollPosition >= self.oldScrollHeight) || -- cgit v1.2.3-1-g7c22 From 3d492bf450a245aafbfb5b3cff320c1d45832b37 Mon Sep 17 00:00:00 2001 From: nickago Date: Tue, 11 Aug 2015 10:28:30 -0700 Subject: Completely rehauled scrolling system, finished base implementation --- web/react/components/create_post.jsx | 2 +- web/react/components/post_list.jsx | 123 ++++++++++----------------------- web/react/components/post_right.jsx | 1 + web/react/components/sidebar_right.jsx | 7 +- web/react/utils/utils.jsx | 3 +- 5 files changed, 42 insertions(+), 94 deletions(-) (limited to 'web/react') diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index 9ca1d5388..d6b98cbbc 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -88,7 +88,7 @@ module.exports = React.createClass({ ); } - $('.post-list-holder-by-time').perfectScrollbar('update'); + // Scrolling Code Was Here }, componentDidUpdate: function() { this.resizePostHolder(); diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 0abb3107e..cfbdad571 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -28,15 +28,13 @@ function getStateFromStores() { module.exports = React.createClass({ displayName: "PostList", - scrollPosition: 0, - preventScrollTrigger: false, // Can't think of an intuitive name, but when true, - // scrollPosition is affected by the 'on scroll' event below - gotMorePosts: false, - oldScrollHeight: 0, oldZoom: 0, - scrolledToNew: false, // Signifies we've already scrolled to the "new message" bar - // one time, don't want to do it again even if the bar - // doesn't go away + 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 @@ -66,58 +64,10 @@ module.exports = React.createClass({ UserStore.addStatusesChangeListener(this._onTimeChange); SocketStore.addChangeListener(this._onSocketChange); - // Initialize perfect scrollbar - $(".post-list-holder-by-time").perfectScrollbar(); - - this.resize(); - - // Set initial values of these component properties, will be updated on every re-render - // scrollPosition - scroll point of bottom of current viewport - // oldScrollHeight - bottom scroll point possible of viewport - // oldZoom - represents "browser zoom" - 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; - - /*************** End of 'run on mount' code, Start of event listeners *****************/ - - var self = this; - $(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; - - // We resize if : - // 1. We are scrolled below the max scroll - // 2. Edge case similar to offscreen resizing - // 3. We changed zoom sizes - if (self.scrollPosition >= post_holder.scrollHeight || - (self.oldScrollHeight !== post_holder.scrollHeight && self.scrollPosition >= self.oldScrollHeight) || - self.oldZoom !== newZoom) { - self.resize(); - } - - self.oldZoom = newZoom; - - // Sets the size of the viewport, doesn't affect the overflowed component - 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"); - } - }); - - // scrollPosistion records and holds every position that the user has been at - // unless preventScrollTrigger is enabled, then it skips one reading - // Consider storing this in localStorage instead - $(post_holder).scroll(function(e){ - if (!self.preventScrollTrigger) { - self.scrollPosition = $(post_holder).scrollTop() + $(post_holder).innerHeight(); - } - self.preventScrollTrigger = false; - }); + // 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) { @@ -149,13 +99,15 @@ module.exports = React.createClass({ $(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.resize(); - var post_holder = $(".post-list-holder-by-time")[0]; - this.scrollPosition = $(post_holder).scrollTop() + $(post_holder).innerHeight(); - this.oldScrollHeight = post_holder.scrollHeight; + this.scrollWindow() $('.post-list__content div .post').removeClass('post--last'); $('.post-list__content div:last-child .post').addClass('post--last'); }, @@ -166,34 +118,25 @@ module.exports = React.createClass({ SocketStore.removeChangeListener(this._onSocketChange); $('body').off('click.userpopover'); }, - 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 if ($("#new_message")[0] && !this.scrolledToNew) { - $(post_holder).scrollTop($(post_holder).scrollTop() + $("#new_message").offset().top - 63); - this.scrolledToNew = true; + 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 { - $(post_holder).scrollTop(post_holder.scrollHeight); + container.scrollTop(container[0].scrollHeight - container.innerHeight()); } - $(post_holder).perfectScrollbar('update'); }, _onChange: function() { var newState = getStateFromStores(); if (!utils.areStatesEqual(newState, this.state)) { - if (this.state.post_list && - this.state.post_list.order && - 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); } }, @@ -209,6 +152,8 @@ module.exports = React.createClass({ post_list.order.unshift(post.id); } + this.holdPosition = false; + if (this.state.channel.id === msg.channel_id) { this.setState({ post_list: post_list }); }; @@ -225,6 +170,8 @@ module.exports = React.createClass({ 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); @@ -241,6 +188,8 @@ module.exports = React.createClass({ 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); @@ -274,7 +223,7 @@ module.exports = React.createClass({ $(this.refs.loadmore.getDOMNode()).text("Retrieving more messages..."); var self = this; - var currentPos = $(".post-list").scrollTop; + this.holdPosition = true; Client.getPosts( channel_id, @@ -282,6 +231,7 @@ module.exports = React.createClass({ Constants.POST_CHUNK_SIZE, function(data) { $(self.refs.loadmore.getDOMNode()).text("Load more messages"); + console.log("here") if (!data) return; @@ -298,7 +248,6 @@ module.exports = React.createClass({ }); Client.getProfiles(); - $(".post-list").scrollTop(currentPos); }, function(err) { $(self.refs.loadmore.getDOMNode()).text("Load more messages"); diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx index ad8b54012..e7a6fcf2a 100644 --- a/web/react/components/post_right.jsx +++ b/web/react/components/post_right.jsx @@ -119,6 +119,7 @@ RootPost = React.createClass({ CommentPost = React.createClass({ render: function() { + console.log("YOU NEED TO REMOVE THE POST RIGHT ENTRY") var post = this.props.post; var commentClass = "post"; diff --git a/web/react/components/sidebar_right.jsx b/web/react/components/sidebar_right.jsx index 8334b345b..a39bceeb8 100644 --- a/web/react/components/sidebar_right.jsx +++ b/web/react/components/sidebar_right.jsx @@ -39,8 +39,7 @@ module.exports = React.createClass({ } }, resize: function() { - $(".post-list-holder-by-time").scrollTop(100000); - $(".post-list-holder-by-time").perfectScrollbar('update'); + // Scrolling Code Was Here }, getInitialState: function() { return getStateFromStores(); @@ -49,7 +48,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(); + // Scrolling Code Was Here return (
); @@ -59,7 +58,7 @@ module.exports = React.createClass({ $('.sidebar--left').removeClass('move--right'); $('.sidebar--right').addClass('move--left'); $('.sidebar--right').prepend('
'); - this.resize(); + // Scrolling Code Was Here setTimeout(function(){ $('.sidebar__overlay').fadeOut("200", function(){ $(this).remove(); diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 2214b6239..5e4e8e3a2 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -313,8 +313,7 @@ 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'); + // Scrolling Code Was Here }; if(config.GoogleDeveloperKey) { -- cgit v1.2.3-1-g7c22 From 6028d013d60f3252a3226f891322997c56a4d8cc Mon Sep 17 00:00:00 2001 From: nickago Date: Tue, 11 Aug 2015 10:28:48 -0700 Subject: Added case for window resize and cleaned up function --- web/react/components/post_list.jsx | 31 +++++++++++++++++++++++-------- web/react/utils/utils.jsx | 1 - 2 files changed, 23 insertions(+), 9 deletions(-) (limited to 'web/react') diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index cfbdad571..8de43697c 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -65,7 +65,10 @@ module.exports = React.createClass({ SocketStore.addChangeListener(this._onSocketChange); // Timeout exists for the DOM to fully render before making changes - setTimeout(this.scrollWindow, 1) + setTimeout(this.scrollWindow, 1); + + // Handle browser resizing + $(window).resize(this.onResize); // Highlight stylingx $('body').on('click.userpopover', function(e){ @@ -101,13 +104,10 @@ module.exports = React.createClass({ }); }, componentWillUpdate: function() { - var container = $('.post-list-holder-by-time'); - if (this.holdPosition) { - this.scrollHeightFromBottom = container[0].scrollHeight - container.scrollTop(); - } + this.prepareScrollWindow(); }, componentDidUpdate: function() { - this.scrollWindow() + this.scrollWindow(); $('.post-list__content div .post').removeClass('post--last'); $('.post-list__content div:last-child .post').addClass('post--last'); }, @@ -118,25 +118,40 @@ module.exports = React.createClass({ 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, this jumps the window to that + // 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); - this.holdPosition = false; } else { container.scrollTop(container[0].scrollHeight - container.innerHeight()); } + this.holdPosition = false; + }, + 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"); + } + this.forceUpdate(); }, _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 this.setState(newState); } }, diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 5e4e8e3a2..437008992 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -313,7 +313,6 @@ var getYoutubeEmbed = function(link) { var metadata = data.items[0].snippet; $('.video-uploader.'+youtubeId).html(metadata.channelTitle); $('.video-title.'+youtubeId).find('a').html(metadata.title); - // Scrolling Code Was Here }; if(config.GoogleDeveloperKey) { -- cgit v1.2.3-1-g7c22 From f614249dd3446cd7bdfc05cba606614509afab49 Mon Sep 17 00:00:00 2001 From: nickago Date: Tue, 11 Aug 2015 10:40:40 -0700 Subject: Removed personal debugging code and notes --- web/react/components/create_post.jsx | 1 - web/react/components/post_list.jsx | 8 ++++---- web/react/components/post_right.jsx | 1 - web/react/components/sidebar_right.jsx | 5 ----- 4 files changed, 4 insertions(+), 11 deletions(-) (limited to 'web/react') diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index d6b98cbbc..523112447 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -88,7 +88,6 @@ module.exports = React.createClass({ ); } - // Scrolling Code Was Here }, componentDidUpdate: function() { this.resizePostHolder(); diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 8de43697c..d09c2e537 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -167,11 +167,12 @@ module.exports = React.createClass({ post_list.order.unshift(post.id); } - this.holdPosition = false; - if (this.state.channel.id === msg.channel_id) { + this.holdPosition = false; this.setState({ post_list: post_list }); - }; + } else { + this.holdPosition = true; + } PostStore.storePosts(post.channel_id, post_list); } else if (msg.action == "post_edited") { @@ -246,7 +247,6 @@ module.exports = React.createClass({ Constants.POST_CHUNK_SIZE, function(data) { $(self.refs.loadmore.getDOMNode()).text("Load more messages"); - console.log("here") if (!data) return; diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx index e7a6fcf2a..ad8b54012 100644 --- a/web/react/components/post_right.jsx +++ b/web/react/components/post_right.jsx @@ -119,7 +119,6 @@ RootPost = React.createClass({ CommentPost = React.createClass({ render: function() { - console.log("YOU NEED TO REMOVE THE POST RIGHT ENTRY") var post = this.props.post; var commentClass = "post"; diff --git a/web/react/components/sidebar_right.jsx b/web/react/components/sidebar_right.jsx index a39bceeb8..7ceccb45c 100644 --- a/web/react/components/sidebar_right.jsx +++ b/web/react/components/sidebar_right.jsx @@ -38,9 +38,6 @@ module.exports = React.createClass({ } } }, - resize: function() { - // Scrolling Code Was Here - }, getInitialState: function() { return getStateFromStores(); }, @@ -48,7 +45,6 @@ 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'); - // Scrolling Code Was Here return (
); @@ -58,7 +54,6 @@ module.exports = React.createClass({ $('.sidebar--left').removeClass('move--right'); $('.sidebar--right').addClass('move--left'); $('.sidebar--right').prepend('
'); - // Scrolling Code Was Here setTimeout(function(){ $('.sidebar__overlay').fadeOut("200", function(){ $(this).remove(); -- cgit v1.2.3-1-g7c22 From d36c1de9410b8899ee66e01d341e67ca3b35b179 Mon Sep 17 00:00:00 2001 From: nickago Date: Wed, 12 Aug 2015 09:38:10 -0700 Subject: Changed the default for update to hold your position in the list --- web/react/components/post_list.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'web/react') diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index d09c2e537..e80351be5 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -29,7 +29,7 @@ function getStateFromStores() { module.exports = React.createClass({ displayName: "PostList", oldZoom: 0, - holdPosition: false, // The default state is to scroll to the bottom on change + 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 @@ -137,7 +137,7 @@ module.exports = React.createClass({ } else { container.scrollTop(container[0].scrollHeight - container.innerHeight()); } - this.holdPosition = false; + this.holdPosition = true; }, onResize: function() { this.holdPosition = true; -- cgit v1.2.3-1-g7c22 From ec370604ac458d183ee6feff968b1640e01aa2de Mon Sep 17 00:00:00 2001 From: nickago Date: Wed, 12 Aug 2015 09:40:47 -0700 Subject: Removed usused variable --- web/react/components/post_list.jsx | 1 - 1 file changed, 1 deletion(-) (limited to 'web/react') diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index e80351be5..bb4f7c2b1 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -28,7 +28,6 @@ function getStateFromStores() { module.exports = React.createClass({ displayName: "PostList", - oldZoom: 0, 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 -- cgit v1.2.3-1-g7c22 From d53827cce396035695c15a282c602e3d3a184369 Mon Sep 17 00:00:00 2001 From: nickago Date: Wed, 12 Aug 2015 10:35:50 -0700 Subject: Added non-default reliant behavior to initial scroll on mount --- web/react/components/post_list.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'web/react') diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index bb4f7c2b1..1850d6256 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -64,7 +64,11 @@ module.exports = React.createClass({ SocketStore.addChangeListener(this._onSocketChange); // Timeout exists for the DOM to fully render before making changes - setTimeout(this.scrollWindow, 1); + var self = this + setTimeout(function initialScroll() { + self.holdPosition = false; + self.scrollWindow(); + }, 1); // Handle browser resizing $(window).resize(this.onResize); -- cgit v1.2.3-1-g7c22 From 6c78ec343927275f3460fff7d4afc34889b2004b Mon Sep 17 00:00:00 2001 From: nickago Date: Fri, 14 Aug 2015 09:58:12 -0700 Subject: Changed timeout code to event based --- web/react/components/post_list.jsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'web/react') diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 1850d6256..96bcf28e1 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -65,10 +65,13 @@ module.exports = React.createClass({ // Timeout exists for the DOM to fully render before making changes var self = this - setTimeout(function initialScroll() { + function initialScroll() { self.holdPosition = false; self.scrollWindow(); - }, 1); + $(document).off('DOMContentLoaded', initialScroll) + } + + $(document).on('DOMContentLoaded', initialScroll); // Handle browser resizing $(window).resize(this.onResize); -- cgit v1.2.3-1-g7c22 From dd8b0acc57135d65c621c53d05df80b7a4f872fd Mon Sep 17 00:00:00 2001 From: nickago Date: Fri, 14 Aug 2015 12:30:09 -0700 Subject: cosmetic refactoring --- web/react/components/post_list.jsx | 351 +++++++++++++++++++++---------------- 1 file changed, 198 insertions(+), 153 deletions(-) (limited to 'web/react') diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 96bcf28e1..edccab644 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -21,13 +21,13 @@ function getStateFromStores() { if (channel == null) channel = {}; return { - post_list: PostStore.getCurrentPosts(), + postList: PostStore.getCurrentPosts(), channel: channel }; } module.exports = React.createClass({ - displayName: "PostList", + 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 @@ -39,36 +39,36 @@ module.exports = React.createClass({ // 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._onChange); - ChannelStore.addChangeListener(this._onChange); - UserStore.addStatusesChangeListener(this._onTimeChange); - SocketStore.addChangeListener(this._onSocketChange); + PostStore.addChangeListener(this.onListenerChange); + ChannelStore.addChangeListener(this.onListenerChange); + UserStore.addStatusesChangeListener(this.onTimeChange); + SocketStore.addChangeListener(this.onSocketChange); // Timeout exists for the DOM to fully render before making changes - var self = this + var self = this; function initialScroll() { self.holdPosition = false; self.scrollWindow(); - $(document).off('DOMContentLoaded', initialScroll) + $(document).off('DOMContentLoaded', initialScroll); } $(document).on('DOMContentLoaded', initialScroll); @@ -78,8 +78,8 @@ module.exports = React.createClass({ // 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,22 +88,20 @@ 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'); } @@ -118,10 +116,10 @@ module.exports = React.createClass({ $('.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); + PostStore.removeChangeListener(this.onListenerChange); + ChannelStore.removeChangeListener(this.onListenerChange); + UserStore.removeStatusesChangeListener(this.onTimeChange); + SocketStore.removeChangeListener(this.onSocketChange); $('body').off('click.userpopover'); }, prepareScrollWindow: function() { @@ -149,11 +147,11 @@ module.exports = React.createClass({ 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"); + $('.post-list-holder-by-time').css('height', height + 'px'); } this.forceUpdate(); }, - _onChange: function() { + onListenerChange: function() { var newState = getStateFromStores(); if (!utils.areStatesEqual(newState, this.state)) { @@ -161,118 +159,137 @@ module.exports = React.createClass({ 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; + 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; + } - post_list.posts[post.id] = post; - if (post_list.order.indexOf(post.id) === -1) { - post_list.order.unshift(post.id); + postList.posts[post.id] = post; + if (postList.order.indexOf(post.id) === -1) { + postList.order.unshift(post.id); } if (this.state.channel.id === msg.channel_id) { this.holdPosition = false; - this.setState({ post_list: post_list }); + this.setState({postList: postList}); } else { this.holdPosition = true; } - 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; + 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; + } - var post = post_list.posts[msg.props.post_id]; + post = postList.posts[msg.props.post_id]; post.message = msg.props.message; - post_list.posts[post.id] = post; - this.setState({ post_list: post_list }); + postList.posts[post.id] = post; + this.setState({postList: postList}); this.holdPosition = true; - PostStore.storePosts(msg.channel_id, post_list); + PostStore.storePosts(msg.channel_id, postList); } 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 = activeRoot && activeRoot.id.length > 0 ? activeRoot.id : ""; + var activeRootPostId = ''; + if (activeRoot && activeRoot.id.length > 0) { + activeRootPostId = 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; + if (this.state.channel.id === msg.channel_id) { + postList = this.state.postList; + if (!(msg.props.post_id in this.state.postList.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); + delete postList.posts[msg.props.post_id]; + var index = postList.order.indexOf(msg.props.post_id); + if (index > -1) { + postList.order.splice(index, 1); + } this.holdPosition = true; - this.setState({ post_list: post_list }); + this.setState({postList: postList}); - PostStore.storePosts(msg.channel_id, post_list); + PostStore.storePosts(msg.channel_id, postList); } 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.post_list) return; - for (var id in this.state.post_list.posts) { - if (!this.refs[id]) continue; + onTimeChange: function() { + if (!this.state.postList) { + return; + } + for (var id in this.state.postList.posts) { + if (!this.refs[id]) { + continue; + } this.refs[id].forceUpdateInfo(); } }, getMorePosts: function(e) { e.preventDefault(); - if (!this.state.post_list) return; + if (!this.state.postList) { + return; + } - var posts = this.state.post_list.posts; - var order = this.state.post_list.order; - var channel_id = this.state.channel.id; + var posts = this.state.postList.posts; + var order = this.state.postList.order; + var channelId = 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; Client.getPosts( - channel_id, + channelId, 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 post_list = {} - post_list.posts = $.extend(posts, data.posts); - post_list.order = order.concat(data.order); + var postList = {} + postList.posts = $.extend(posts, data.posts); + postList.order = order.concat(data.order); AppDispatcher.handleServerAction({ type: ActionTypes.RECIEVED_POSTS, - id: channel_id, - post_list: post_list + id: channelId, + postList: postList }); Client.getProfiles(); }, 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'); } ); }, @@ -283,19 +300,20 @@ module.exports = React.createClass({ var order = []; var posts; - var last_viewed = Number.MAX_VALUE; + var lastViewed = Number.MAX_VALUE; - if (ChannelStore.getCurrentMember() != null) - last_viewed = ChannelStore.getCurrentMember().last_viewed_at; + if (ChannelStore.getCurrentMember() != null) { + lastViewed = ChannelStore.getCurrentMember().last_viewed_at; + } - if (this.state.post_list != null) { - posts = this.state.post_list.posts; - order = this.state.post_list.order; + if (this.state.postList != null) { + posts = this.state.postList.posts; + order = this.state.postList.order; } - var rendered_last_viewed = false; + var renderedLastViewed = false; - var user_id = ""; + var user_id = ''; if (UserStore.getCurrentId()) { user_id = UserStore.getCurrentId(); } else { @@ -304,60 +322,65 @@ module.exports = React.createClass({ var channel = this.state.channel; - var more_messages =

Beginning of Channel

; + var moreMessages =

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) { - more_messages = Load more messages; + moreMessages = Load more messages; } else if (channel.type === 'D') { - var teammate = utils.getDirectTeammate(channel.id) + var teammate = utils.getDirectTeammate(channel.id); if (teammate) { - var teammate_name = teammate.nickname.length > 0 ? teammate.nickname : teammate.username; - more_messages = ( -
-
- + var teammateName; + if (teammate.nickname.length > 0) { + teammateName = teammate.nickname; + } else { + teammateName = teammate.username; + } + moreMessages = ( +
+
+
-
+
-

- {"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 ' + teammateName + '.'}
+ {'Private messages and files shared here are not shown to people outside this area.'}

- Set a description + Set a description
); } else { - 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."}

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

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

Beginning of {ui_name}

-

- Welcome to {ui_name}! + moreMessages = ( +

+

Beginning of {uiName}

+

+ Welcome to {uiName}!

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

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

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

Beginning of {ui_name}

-

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

+

Beginning of {uiName}

+

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

- Set a description + Set a description
); } else { - 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." } + 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}

- Set a description - Invite others to this {ui_type} + Set a description + Invite others to this {uiType}
); } @@ -406,15 +443,23 @@ module.exports = React.createClass({ for (var i = order.length-1; i >= 0; i--) { var post = posts[order[i]]; - var parentPost = post.parent_id ? posts[post.parent_id] : null; + var parentPost = null; + if (post.parent_id) { + parentPost = posts[post.parent_id]; + } var sameUser = ''; var sameRoot = false; var hideProfilePic = false; - var prevPost = (i < order.length - 1) ? posts[order[i + 1]] : null; + var prevPost = null; + if (i < order.length - 1) { + prevPost = posts[order[i + 1]]; + } if (prevPost) { - sameUser = (prevPost.user_id === post.user_id) && (post.create_at - prevPost.create_at <= 1000*60*5) ? "same--user" : ""; + if ((prevPost.user_id === post.user_id) && (post.create_at - prevPost.create_at <= 1000 * 60 * 5)) { + sameUser = '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 @@ -423,7 +468,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 > last_viewed && !rendered_last_viewed) { - rendered_last_viewed = true; + if (post.create_at > lastViewed && !renderedLastViewed) { + renderedLastViewed = true; postCtls.push( -
-
-
New Messages
+
+
+
New Messages
); } @@ -454,15 +499,15 @@ module.exports = React.createClass({ previousPostDay = currentPostDay; } } else { - postCtls.push(); + postCtls.push(); } return ( -
-
-
- { more_messages } - { postCtls } +
+
+
+ {moreMessages} + {postCtls}
-- cgit v1.2.3-1-g7c22