From 91379aa9a68856105f5abd9cd2596a56637f1e1d Mon Sep 17 00:00:00 2001 From: Arjun Singh Date: Tue, 4 Sep 2012 03:53:37 -0700 Subject: [PATCH 1/4] improve date search, fix respnding, make sidebar expand when discussion column does --- lms/static/coffee/src/discussion/content.coffee | 1 - lms/static/coffee/src/discussion/discussion.coffee | 9 ++++++++- lms/static/coffee/src/discussion/main.coffee | 1 + .../discussion/views/discussion_thread_list_view.coffee | 2 +- .../src/discussion/views/discussion_thread_view.coffee | 2 +- .../src/discussion/views/thread_response_view.coffee | 4 +++- lms/static/js/discussions-temp.js | 5 +++++ 7 files changed, 19 insertions(+), 5 deletions(-) diff --git a/lms/static/coffee/src/discussion/content.coffee b/lms/static/coffee/src/discussion/content.coffee index 93d1414035..9549a93a43 100644 --- a/lms/static/coffee/src/discussion/content.coffee +++ b/lms/static/coffee/src/discussion/content.coffee @@ -24,7 +24,6 @@ if Backbone? updateInfo: (info) -> if info - console.log info.ability @set('ability', info.ability) @set('voted', info.voted) @set('subscribed', info.subscribed) diff --git a/lms/static/coffee/src/discussion/discussion.coffee b/lms/static/coffee/src/discussion/discussion.coffee index 0737aaed0c..148ef64891 100644 --- a/lms/static/coffee/src/discussion/discussion.coffee +++ b/lms/static/coffee/src/discussion/discussion.coffee @@ -5,7 +5,7 @@ if Backbone? initialize: -> @bind "add", (item) => item.discussion = @ - @comparator = @sortByDate + @comparator = @sortByDateRecentFirst find: (id) -> _.first @where(id: id) @@ -19,6 +19,13 @@ if Backbone? sortByDate: (thread) -> thread.get("created_at") + sortByDateRecentFirst: (thread) -> + -(new Date(thread.get("created_at")).getTime()) + #return String.fromCharCode.apply(String, + # _.map(thread.get("created_at").split(""), + # ((c) -> return 0xffff - c.charChodeAt())) + #) + sortByVotes: (thread1, thread2) -> thread1_count = parseInt(thread1.get("votes")['up_count']) thread2_count = parseInt(thread2.get("votes")['up_count']) diff --git a/lms/static/coffee/src/discussion/main.coffee b/lms/static/coffee/src/discussion/main.coffee index 4ec7dc9b8d..dae4af8e02 100644 --- a/lms/static/coffee/src/discussion/main.coffee +++ b/lms/static/coffee/src/discussion/main.coffee @@ -8,6 +8,7 @@ DiscussionApp = threads = element.data("threads") content_info = element.data("content-info") window.user = new DiscussionUser(user_info) + console.log content_info Content.loadContentInfos(content_info) discussion = new Discussion(threads) new DiscussionRouter({discussion: discussion}) 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 66911d3a8e..ef763831ae 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 @@ -89,7 +89,7 @@ class @DiscussionThreadListView extends Backbone.View $(event.target).addClass("active") sortBy = $(event.target).data("sort") if sortBy == "date" - @displayedCollection.comparator = @displayedCollection.sortByDate + @displayedCollection.comparator = @displayedCollection.sortByDateRecentFirst else if sortBy == "votes" @displayedCollection.comparator = @displayedCollection.sortByVotes else if sortBy == "comments" 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 b97fbc30cf..04d89bf2e2 100644 --- a/lms/static/coffee/src/discussion/views/discussion_thread_view.coffee +++ b/lms/static/coffee/src/discussion/views/discussion_thread_view.coffee @@ -111,7 +111,7 @@ class @DiscussionThreadView extends DiscussionContentView event.preventDefault() url = @model.urlFor('reply') body = @$("#wmd-input").val() - response = new Comment(body: body, created_at: (new Date()).toISOString(), username: window.user.get("username"), votes: { up_count: 0 }) + response = new Comment(body: body, created_at: (new Date()).toISOString(), username: window.user.get("username"), votes: { up_count: 0 }, endorsed: false, user_id: window.user.get("id")) @renderResponse(response) @addComment() diff --git a/lms/static/coffee/src/discussion/views/thread_response_view.coffee b/lms/static/coffee/src/discussion/views/thread_response_view.coffee index 8e0509f0f4..cd060d79e0 100644 --- a/lms/static/coffee/src/discussion/views/thread_response_view.coffee +++ b/lms/static/coffee/src/discussion/views/thread_response_view.coffee @@ -8,6 +8,8 @@ class @ThreadResponseView extends DiscussionContentView "click .action-endorse": "toggleEndorse" render: -> + console.log @model + console.log @model.toJSON() @$el.html(@template(@model.toJSON())) if window.user.voted(@model) @$(".vote-btn").addClass("is-cast") @@ -65,7 +67,7 @@ class @ThreadResponseView extends DiscussionContentView body = @$(".comment-form-input").val() if not body.trim().length return - comment = new Comment(body: body, created_at: (new Date()).toISOString(), username: window.user.get("username")) + comment = new Comment(body: body, created_at: (new Date()).toISOString(), username: window.user.get("username"), user_id: window.user.get("id")) @renderComment(comment) @trigger "comment:add" @$(".comment-form-input").val("") diff --git a/lms/static/js/discussions-temp.js b/lms/static/js/discussions-temp.js index 12a3f0e0b8..ad3eb1712c 100644 --- a/lms/static/js/discussions-temp.js +++ b/lms/static/js/discussions-temp.js @@ -68,6 +68,11 @@ $(document).ready(function() { $(window).bind('resize', updateSidebarDimensions); $(window).bind('scroll', updateSidebarCoordinates); + $('.discussion-column').bind("input", function (e) { + console.log("resized"); + updateSidebarCoordinates(); + updateSidebarDimensions(); + }) updateSidebarCoordinates(); updateSidebarDimensions(); }); From ebae40a39246180e561b186fb5aed04005c3b8b6 Mon Sep 17 00:00:00 2001 From: Arjun Singh Date: Tue, 4 Sep 2012 09:21:21 -0700 Subject: [PATCH 2/4] fix search --- .../django_comment_client/forum/views.py | 20 +++++++++---------- .../views/discussion_thread_list_view.coffee | 11 +++++----- .../views/thread_response_view.coffee | 2 -- 3 files changed, 15 insertions(+), 18 deletions(-) diff --git a/lms/djangoapps/django_comment_client/forum/views.py b/lms/djangoapps/django_comment_client/forum/views.py index 51d3a78d03..4607cc10c5 100644 --- a/lms/djangoapps/django_comment_client/forum/views.py +++ b/lms/djangoapps/django_comment_client/forum/views.py @@ -162,22 +162,22 @@ def forum_form_discussion(request, course_id): 'discussion_data': map(utils.safe_content, threads), }) else: - recent_active_threads = cc.search_recent_active_threads( - course_id, - recursive=False, - query_params={'follower_id': request.user.id}, - ) + #recent_active_threads = cc.search_recent_active_threads( + # course_id, + # recursive=False, + # query_params={'follower_id': request.user.id}, + #) - trending_tags = cc.search_trending_tags( - course_id, - ) + #trending_tags = cc.search_trending_tags( + # course_id, + #) escapedict = {'"': '"'} context = { 'csrf': csrf(request)['csrf_token'], 'course': course, 'content': content, - 'recent_active_threads': recent_active_threads, - 'trending_tags': trending_tags, + #'recent_active_threads': recent_active_threads, + #'trending_tags': trending_tags, 'staff_access' : has_access(request.user, course, 'staff'), 'threads': saxutils.escape(json.dumps(threads),escapedict), 'user_info': saxutils.escape(json.dumps(user_info),escapedict), 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 ef763831ae..e485fbfb60 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 @@ -3,7 +3,7 @@ class @DiscussionThreadListView extends Backbone.View events: "click .search": "showSearch" "click .browse": "toggleTopicDrop" - "keyup .post-search-field": "performSearch" + "keydown .post-search-field": "performSearch" "click .sort-bar a": "sortThreads" "click .browse-topic-drop-menu": "filterTopic" "click .browse-topic-drop-search-input": "ignoreClick" @@ -100,8 +100,9 @@ class @DiscussionThreadListView extends Backbone.View clearTimeout(@timer) @timer = setTimeout(callback, ms) - performSearch: -> - callback = => + performSearch: (event) -> + if event.which == 13 + event.preventDefault() url = DiscussionUtil.urlFor("search") text = @$(".post-search-field").val() DiscussionUtil.safeAjax @@ -112,6 +113,4 @@ class @DiscussionThreadListView extends Backbone.View success: (response, textStatus) => if textStatus == 'success' @collection.reset(response.discussion_data) - @displayedCollection.reset(@collection) - - @delay(callback, 300) + @displayedCollection.reset(@collection.models) diff --git a/lms/static/coffee/src/discussion/views/thread_response_view.coffee b/lms/static/coffee/src/discussion/views/thread_response_view.coffee index cd060d79e0..bc3f393661 100644 --- a/lms/static/coffee/src/discussion/views/thread_response_view.coffee +++ b/lms/static/coffee/src/discussion/views/thread_response_view.coffee @@ -8,8 +8,6 @@ class @ThreadResponseView extends DiscussionContentView "click .action-endorse": "toggleEndorse" render: -> - console.log @model - console.log @model.toJSON() @$el.html(@template(@model.toJSON())) if window.user.voted(@model) @$(".vote-btn").addClass("is-cast") From 5c66924fd5dae7a161efc200e9cd3b8df3128165 Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Tue, 4 Sep 2012 12:59:45 -0400 Subject: [PATCH 3/4] fixed drop filter --- lms/static/js/discussions-temp.js | 187 ++++++++++++++---------------- lms/static/sass/_discussion.scss | 8 +- 2 files changed, 92 insertions(+), 103 deletions(-) diff --git a/lms/static/js/discussions-temp.js b/lms/static/js/discussions-temp.js index 12a3f0e0b8..055a7fdece 100644 --- a/lms/static/js/discussions-temp.js +++ b/lms/static/js/discussions-temp.js @@ -14,14 +14,17 @@ var $formTopicDropMenu; var $postListWrapper; var $dropFilter; var $topicFilter; +var $discussionBody; var sidebarWidth; var sidebarHeight; var sidebarHeaderHeight; var sidebarXOffset; var scrollTop; +var discussionsBodyTop; +var discussionsBodyBottom; var tooltipTimer; var tooltipCoords; -var SIDEBAR_PADDING = -1; +var SIDEBAR_PADDING = 10; var SIDEBAR_HEADER_HEIGHT = 87; @@ -35,6 +38,7 @@ $(document).ready(function() { $tooltip = $('
'); $newPost = $('.new-post-article'); $sidebar = $('.sidebar'); + $discussionBody = $('.discussion-body'); $postListWrapper = $('.post-list-wrapper'); $formTopicDropBtn = $('.new-post-article .form-topic-drop-btn'); $formTopicDropMenu = $('.new-post-article .form-topic-drop-menu-wrapper'); @@ -61,23 +65,65 @@ $(document).ready(function() { 'click': hideTooltip }); - //$body.delegate('.browse-topic-drop-btn', 'click', showTopicDrop); - //$body.delegate('.browse-topic-drop-search-input', 'keyup', filterDrop); - $body.delegate('.form-topic-drop-search-input', 'keyup', filterDrop); - //$body.delegate('.browse-topic-drop-menu-wrapper', 'click', setTopic); + $body.delegate('.browse-topic-drop-search-input, .form-topic-drop-search-input', 'keyup', filterDrop); - $(window).bind('resize', updateSidebarDimensions); - $(window).bind('scroll', updateSidebarCoordinates); - updateSidebarCoordinates(); - updateSidebarDimensions(); + $(window).bind('resize', updateSidebar); + $(window).bind('scroll', updateSidebar); + updateSidebar(); }); function filterDrop(e) { + /* + * multiple queries + */ + + // var $drop = $(e.target).parents('.form-topic-drop-menu-wrapper, .browse-topic-drop-menu-wrapper'); + // var queries = $(this).val().split(' '); + // var $items = $drop.find('a'); + + // if(queries.length == 0) { + // $items.show(); + // return; + // } + + // $items.hide(); + // $items.each(function(i) { + // var thisText = $(this).children().not('.unread').text(); + // $(this).parents('ul').siblings('a').not('.unread').each(function(i) { + // thisText = thisText + ' ' + $(this).text(); + // }); + + // var test = true; + // var terms = thisText.split(' '); + + // for(var i = 0; i < queries.length; i++) { + // if(thisText.toLowerCase().search(queries[i].toLowerCase()) == -1) { + // test = false; + // } + // } + + // if(test) { + // $(this).show(); + + // // show children + // $(this).parent().find('a').show(); + + // // show parents + // $(this).parents('ul').siblings('a').show(); + // } + // }); + + + + /* + * single query + */ + var $drop = $(e.target).parents('.form-topic-drop-menu-wrapper, .browse-topic-drop-menu-wrapper'); - var queries = $(this).val().split(' '); + var query = $(this).val(); var $items = $drop.find('a'); - if(queries.length == 0) { + if(query.length == 0) { $items.show(); return; } @@ -92,10 +138,8 @@ function filterDrop(e) { var test = true; var terms = thisText.split(' '); - for(var i = 0; i < queries.length; i++) { - if(thisText.toLowerCase().search(queries[i].toLowerCase()) == -1) { - test = false; - } + if(thisText.toLowerCase().search(query.toLowerCase()) == -1) { + test = false; } if(test) { @@ -272,92 +316,37 @@ function setFormTopic(e) { $formTopicDropBtn.html(boardName + ' ▾'); } -//function updateSidebarCoordinates(e) { -// scrollTop = $(window).scrollTop(); -// sidebarXOffset = $('.discussion-column').offset().top; -// -// var marginTop = scrollTop + SIDEBAR_PADDING > sidebarXOffset ? scrollTop + SIDEBAR_PADDING - sidebarXOffset : 0; -// -// var discussionColumnHeight = $('.discussion-column').height(); -// marginTop = marginTop + sidebarHeight > discussionColumnHeight ? discussionColumnHeight - sidebarHeight + 2 : marginTop; -// -// $sidebar.css('margin-top', marginTop); -// updateSidebarDimensions(); -//} -// -//function updateSidebarDimensions(e) { -// sidebarWidth = $sidebar.width(); -// -// var visibleHeader = sidebarXOffset - scrollTop > 0 ? sidebarXOffset - scrollTop : 0; -// sidebarHeight = $(window).height() - (visibleHeader + SIDEBAR_PADDING * 2); -// sidebarHeight = sidebarHeight > 500 ? sidebarHeight : 500; -// -// var titleWidth = sidebarWidth - 115; -// -// $sidebar.css('height', sidebarHeight + 'px'); -// -// if(!$postListWrapper[0]) { -// $postListWrapper = $('.post-list-wrapper'); -// } -// -// $postListWrapper.css('height', (sidebarHeight - SIDEBAR_HEADER_HEIGHT - 4) + 'px'); -// $sidebarWidthStyles.html('.discussion-body .post-list a .title { width: ' + titleWidth + 'px !important; }'); -//} +function updateSidebar(e) { + // determine page scroll attributes + scrollTop = $(window).scrollTop(); + discussionsBodyTop = $discussionBody.offset().top; + discussionsBodyBottom = discussionsBodyTop + $discussionBody.height(); + var windowHeight = $(window).height(); -function updateSidebarCoordinates(e) { - if (!$('.sidebar').attr('data-top')){ - if ($('.sidebar').hasClass('fixed')){ - return; - } - var offset = $('.sidebar').offset(); - $('.sidebar').attr('data-top', offset.top); - } - $('.sidebar').css('width', .32 * $('.discussion-body').width() + 'px'); + // toggle fixed positioning + if(scrollTop > discussionsBodyTop - SIDEBAR_PADDING) { + $sidebar.addClass('fixed'); + $sidebar.css('top', SIDEBAR_PADDING + 'px'); + } else { + $sidebar.removeClass('fixed'); + $sidebar.css('top', '0'); + } - scrollTop = $(window).scrollTop(); - offset = $('.sidebar').attr('data-top'); + // set sidebar width + var sidebarWidth = .32 * $discussionBody.width() - 10; + $sidebar.css('width', sidebarWidth + 'px'); - if ((offset <= scrollTop)){ - $('.sidebar').addClass('fixed'); - $('.discussion-column').addClass('sidebar-fixed'); - }else{ - $('.sidebar').removeClass('fixed'); - $('.discussion-column').removeClass('sidebar-fixed'); - } + // show the entire sidebar at all times + var sidebarHeight = windowHeight - (scrollTop < discussionsBodyTop - SIDEBAR_PADDING ? discussionsBodyTop - scrollTop : SIDEBAR_PADDING) - SIDEBAR_PADDING - (scrollTop + windowHeight > discussionsBodyBottom + SIDEBAR_PADDING ? scrollTop + windowHeight - discussionsBodyBottom - SIDEBAR_PADDING : 0); + $sidebar.css('height', sidebarHeight > 400 ? sidebarHeight : 400 + 'px'); - discussionColumnHeight = $('.discussion-column').outerHeight(); - discussionColumnBottom = $('.discussion-column').offset().top + discussionColumnHeight; + // update the list height + if(!$postListWrapper[0]) { + $postListWrapper = $('.post-list-wrapper'); + } + $postListWrapper.css('height', (sidebarHeight - SIDEBAR_HEADER_HEIGHT - 4) + 'px'); - windowHeight = $(window).height(); - - if((discussionColumnBottom - scrollTop) < windowHeight){ - //difference = minHeight - (discussionColumnBottom - scrollTop); - //$('.sidebar').height(minHeight); - //console.log(minHeight); - //$('.sidebar').css('top', -difference); - //$('.post-list-wrapper').height(minHeight - SIDEBAR_HEADER_HEIGHT - 4); - $('.sidebar').removeClass('fixed'); - $('.discussion-column').removeClass('sidebar-fixed'); - } - - updateSidebarDimensions(); -} - -function updateSidebarDimensions(e) { - - discussionColumnHeight = $('.discussion-column').outerHeight(); - discussionColumnBottom = $('.discussion-column').offset().top + discussionColumnHeight; - windowHeight = $(window).height(); - sidebarHeight = Math.min(windowHeight, discussionColumnHeight); - $('.sidebar').height(sidebarHeight); - $('.post-list-wrapper').height(sidebarHeight - SIDEBAR_HEADER_HEIGHT - 4); - $('.sidebar').css('width', .32 * $('.discussion-body').width() + 'px'); - - //$('.sidebar').height(discussionColumnBottom - scrollTop); - //$('.post-list-wrapper').height(discussionColumnBottom - scrollTop - SIDEBAR_HEADER_HEIGHT - 4); - - if((discussionColumnBottom - scrollTop) < windowHeight){ - $('.sidebar').height(discussionColumnHeight); - $('.post-list-wrapper').height(discussionColumnHeight - SIDEBAR_HEADER_HEIGHT - 4); - } -} + // update title wrappers + var titleWidth = sidebarWidth - 115; + $sidebarWidthStyles.html('.discussion-body .post-list a .title { width: ' + titleWidth + 'px !important; }'); +} \ No newline at end of file diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index 9a0fddbcc8..27f59d36fc 100644 --- a/lms/static/sass/_discussion.scss +++ b/lms/static/sass/_discussion.scss @@ -555,10 +555,9 @@ body.discussion { width: 32%; height: 550px; border: 1px solid #aaa; - border-right: none !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); background: #f6f6f6; - border-radius: 3px 0 0 3px; + border-radius: 3px; border-right: 1px solid #bcbcbc; &.fixed { @@ -638,6 +637,7 @@ body.discussion { .search { cursor: pointer; + border-radius: 0 3px 0 0; &.is-open { cursor: auto; @@ -1024,7 +1024,7 @@ body.discussion { .discussion-column { - float: left; + float: right; @include box-sizing(border-box); border: 1px solid #aaa; border-radius: 0 3px 3px 0; @@ -1064,7 +1064,7 @@ body.discussion { display: block; position: absolute; top: -1px; - right: -2px; + right: -1px; width: 52px; height: 51px; background: url(../images/follow-dog-ear.png) 0 -52px no-repeat; From 78ae73cf3db54177a58c37bf8435011e2760d4f2 Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Tue, 4 Sep 2012 13:05:51 -0400 Subject: [PATCH 4/4] tweaked dogear and discussion column styles --- lms/static/sass/_discussion.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index 27f59d36fc..a00639792e 100644 --- a/lms/static/sass/_discussion.scss +++ b/lms/static/sass/_discussion.scss @@ -1027,7 +1027,7 @@ body.discussion { float: right; @include box-sizing(border-box); border: 1px solid #aaa; - border-radius: 0 3px 3px 0; + border-radius: 3px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); width: 68%; @@ -1064,7 +1064,7 @@ body.discussion { display: block; position: absolute; top: -1px; - right: -1px; + right: -2px; width: 52px; height: 51px; background: url(../images/follow-dog-ear.png) 0 -52px no-repeat;