From d8e3108a25dd713e9fb7082dca09c157a11e729a Mon Sep 17 00:00:00 2001 From: Matthew Mongeau Date: Tue, 4 Sep 2012 17:25:57 -0400 Subject: [PATCH] Sidebar positioning and height. --- .../src/discussion/discussion_router.coffee | 3 ++ .../views/discussion_thread_list_view.coffee | 39 +++++++++++++++++++ .../views/discussion_thread_view.coffee | 1 + lms/static/js/discussions-temp.js | 14 +++---- 4 files changed, 50 insertions(+), 7 deletions(-) diff --git a/lms/static/coffee/src/discussion/discussion_router.coffee b/lms/static/coffee/src/discussion/discussion_router.coffee index 824ef896fb..1a8949720b 100644 --- a/lms/static/coffee/src/discussion/discussion_router.coffee +++ b/lms/static/coffee/src/discussion/discussion_router.coffee @@ -14,6 +14,7 @@ class @DiscussionRouter extends Backbone.Router @newPostView.on "thread:created", @navigateToThread allThreads: -> + @nav.updateSidebar() # TODO: Do something reasonable here # $(".discussion-column").html($('#blank-slate-template').html()) @@ -29,6 +30,8 @@ class @DiscussionRouter extends Backbone.Router @main = new DiscussionThreadView(el: $(".discussion-column"), model: @thread) @main.render() + @main.on "thread:responses:rendered", => + @nav.updateSidebar() navigateToThread: (thread_id) => thread = @discussion.get(thread_id) diff --git a/lms/static/coffee/src/discussion/views/discussion_thread_list_view.coffee b/lms/static/coffee/src/discussion/views/discussion_thread_list_view.coffee index 85e0d8d614..12d75e8ed7 100644 --- a/lms/static/coffee/src/discussion/views/discussion_thread_list_view.coffee +++ b/lms/static/coffee/src/discussion/views/discussion_thread_list_view.coffee @@ -11,9 +11,44 @@ class @DiscussionThreadListView extends Backbone.View initialize: -> @displayedCollection = new Discussion(@collection.models) @collection.on "change", @reloadDisplayedCollection + @sidebar_padding = 10 + @sidebar_header_height = 87 reloadDisplayedCollection: => @displayedCollection.reset(@collection.models) + @updateSidebar() + + updateSidebar: => + + scrollTop = $(window).scrollTop(); + windowHeight = $(window).height(); + + $discussionBody = $(".discussion-body") + discussionsBodyTop = $discussionBody.offset().top; + discussionsBodyBottom = discussionsBodyTop + $discussionBody.height(); + + $sidebar = $(".sidebar") + if scrollTop > discussionsBodyTop - @sidebar_padding + $sidebar.addClass('fixed'); + $sidebar.css('top', @sidebar_padding); + else + $sidebar.removeClass('fixed'); + $sidebar.css('top', '0'); + + sidebarWidth = .32 * $discussionBody.width() - 10; + $sidebar.css('width', sidebarWidth + 'px'); + + sidebarHeight = windowHeight - Math.max(discussionsBodyTop - scrollTop, @sidebar_padding) + + topAmount = scrollTop + windowHeight + bottomAmount = discussionsBodyBottom + @sidebar_padding + amount = Math.max(topAmount - bottomAmount, 0) + + sidebarHeight = sidebarHeight - @sidebar_padding - amount + $sidebar.css 'height', Math.max(sidebarHeight, 400) + + $postListWrapper = @$('.post-list-wrapper') + $postListWrapper.css('height', (sidebarHeight - @sidebar_header_height - 4) + 'px'); # Because we want the behavior that when the body is clicked the menu is @@ -25,6 +60,10 @@ class @DiscussionThreadListView extends Backbone.View render: -> @timer = 0 @$el.html(@template()) + + $(window).bind "scroll", @updateSidebar + $(window).bind "resize", @updateSidebar + @displayedCollection.on "reset", @renderThreads @renderThreads() @ diff --git a/lms/static/coffee/src/discussion/views/discussion_thread_view.coffee b/lms/static/coffee/src/discussion/views/discussion_thread_view.coffee index 8bb2d663a1..5e2c604bee 100644 --- a/lms/static/coffee/src/discussion/views/discussion_thread_view.coffee +++ b/lms/static/coffee/src/discussion/views/discussion_thread_view.coffee @@ -54,6 +54,7 @@ class @DiscussionThreadView extends DiscussionContentView Content.loadContentInfos(data['annotated_content_info']) comments = new Comments(data['content']['children']) comments.each @renderResponse + @trigger "thread:responses:rendered" renderResponse: (response) => view = new ThreadResponseView(model: response) diff --git a/lms/static/js/discussions-temp.js b/lms/static/js/discussions-temp.js index 71a5c16e67..3ab289294e 100644 --- a/lms/static/js/discussions-temp.js +++ b/lms/static/js/discussions-temp.js @@ -67,13 +67,13 @@ $(document).ready(function() { $body.delegate('.browse-topic-drop-search-input, .form-topic-drop-search-input', 'keyup', filterDrop); - $(window).bind('resize', updateSidebar); - $(window).bind('scroll', updateSidebar); - $('.discussion-column').bind("input", function (e) { - console.log("resized"); - updateSidebar(); - }) - updateSidebar(); +// $(window).bind('resize', updateSidebar); +// $(window).bind('scroll', updateSidebar); +// $('.discussion-column').bind("input", function (e) { +// console.log("resized"); +// updateSidebar(); +// }) +// updateSidebar(); }); function filterDrop(e) {