diff --git a/lms/static/coffee/src/discussion/discussion_router.coffee b/lms/static/coffee/src/discussion/discussion_router.coffee index 4dc599898a..824ef896fb 100644 --- a/lms/static/coffee/src/discussion/discussion_router.coffee +++ b/lms/static/coffee/src/discussion/discussion_router.coffee @@ -15,7 +15,7 @@ class @DiscussionRouter extends Backbone.Router allThreads: -> # TODO: Do something reasonable here - $(".discussion-column").html("No thread selected.") + # $(".discussion-column").html($('#blank-slate-template').html()) setActiveThread: => if @thread diff --git a/lms/static/coffee/src/discussion/main.coffee b/lms/static/coffee/src/discussion/main.coffee index dae4af8e02..4ec7dc9b8d 100644 --- a/lms/static/coffee/src/discussion/main.coffee +++ b/lms/static/coffee/src/discussion/main.coffee @@ -8,7 +8,6 @@ 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_content_view.coffee b/lms/static/coffee/src/discussion/views/discussion_content_view.coffee index 5d7aeb2a37..915c2757f2 100644 --- a/lms/static/coffee/src/discussion/views/discussion_content_view.coffee +++ b/lms/static/coffee/src/discussion/views/discussion_content_view.coffee @@ -1,18 +1,27 @@ class @DiscussionContentView extends Backbone.View - partialRenderer: + attrRenderer: endorsed: (endorsed) -> + if endorsed + @$(".action-endorse").addClass("is-endorsed") + else + @$(".action-endorse").removeClass("is-endorsed") - closed: (closed) -> # we should just re-render the whole thread, or update according to new abilities + closed: (closed) -> + return if not @$(".action-openclose").length + return if not @$(".post-status-closed").length + if closed + @$(".post-status-closed").show() + @$(".action-openclose").html(@$(".action-openclose").html().replace("Close", "Open")) + @$(".discussion-reply-new").hide() + else + @$(".post-status-closed").hide() + @$(".action-openclose").html(@$(".action-openclose").html().replace("Open", "Close")) + @$(".discussion-reply-new").show() voted: (voted) -> - if voted - @$(".discussion-vote").addClass("is-cast") - else - @$(".discussion-vote").removeClass("is-cast") votes_point: (votes_point) -> - @$(".discussion-vote .votes-count-number").html(votes_point) comments_count: (comments_count) -> @@ -23,7 +32,6 @@ class @DiscussionContentView extends Backbone.View @$(".dogear").removeClass("is-followed") ability: (ability) -> - console.log "ability changed" for action, selector of @abilityRenderer if not ability[action] selector.disable.apply(@) @@ -40,12 +48,19 @@ class @DiscussionContentView extends Backbone.View can_endorse: enable: -> @$(".action-endorse").css("cursor", "auto") disable: -> @$(".action-endorse").css("cursor", "default") + can_openclose: + enable: -> @$(".action-openclose").closest("li").show() + disable: -> @$(".action-openclose").closest("li").hide() - renderPartial: -> - console.log "changed" + renderPartialAttrs: -> for attr, value of @model.changedAttributes() - if @partialRenderer[attr] - @partialRenderer[attr].apply(@, [value]) + if @attrRenderer[attr] + @attrRenderer[attr].apply(@, [value]) + + renderAttrs: -> + for attr, value of @model.attributes + if @attrRenderer[attr] + @attrRenderer[attr].apply(@, [value]) initialize: -> - @model.bind('change', @renderPartial, @) + @model.bind('change', @renderPartialAttrs, @) 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 f302f364ce..3dddb7d901 100644 --- a/lms/static/coffee/src/discussion/views/discussion_thread_view.coffee +++ b/lms/static/coffee/src/discussion/views/discussion_thread_view.coffee @@ -1,34 +1,24 @@ class @DiscussionThreadView extends DiscussionContentView - abilityRenderer: - editable: - enable: -> @$(".action-edit").closest("li").show() - disable: -> @$(".action-edit").closest("li").hide() - can_delete: - enable: -> @$(".action-delete").closest("li").show() - disable: -> @$(".action-delete").closest("li").hide() - can_endorse: - enable: -> - @$(".action-endorse").css("cursor", "auto") - disable: -> - @$(".action-endorse").css("cursor", "default") - events: "click .discussion-vote": "toggleVote" "click .action-follow": "toggleFollowing" "click .discussion-submit-post": "submitComment" "click .action-edit": "edit" "click .action-delete": "delete" + "click .action-openclose": "toggleClosed" template: _.template($("#thread-template").html()) initialize: -> + super() @model.on "change", @updateModelDetails render: -> @$el.html(@template(@model.toJSON())) @renderDogear() @renderVoted() + @renderAttrs() @$("span.timeago").timeago() Markdown.makeWmdEditor @$(".reply-body"), "", DiscussionUtil.urlFor("upload"), (text) -> DiscussionUtil.postMathJaxProcessor(text) @convertMath() @@ -135,7 +125,21 @@ class @DiscussionThreadView extends DiscussionContentView delete: -> - toggleEndorse: -> + toggleClosed: (event) -> + $elem = $(event.target) + url = @model.urlFor('close') + closed = @model.get('closed') + data = { closed: not closed } + DiscussionUtil.safeAjax + $elem: $elem + url: url + data: data + type: "POST" + success: (response, textStatus) => + @model.set('closed', not closed) + @model.set('ability', response.ability) + + toggleEndorse: (event) -> $elem = $(event.target) url = @model.urlFor('endorse') endorsed = @model.get('endorsed') diff --git a/lms/static/coffee/src/discussion/views/response_comment_view.coffee b/lms/static/coffee/src/discussion/views/response_comment_view.coffee index 634fad6556..351f0f5689 100644 --- a/lms/static/coffee/src/discussion/views/response_comment_view.coffee +++ b/lms/static/coffee/src/discussion/views/response_comment_view.coffee @@ -3,6 +3,7 @@ class @ResponseCommentView extends DiscussionContentView template: _.template($("#response-comment-template").html()) render: -> @$el.html(@template(@model.toJSON())) + @renderAttrs() @$(".timeago").timeago() @convertMath() @ 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 bc3f393661..ceb604994c 100644 --- a/lms/static/coffee/src/discussion/views/thread_response_view.coffee +++ b/lms/static/coffee/src/discussion/views/thread_response_view.coffee @@ -11,6 +11,7 @@ class @ThreadResponseView extends DiscussionContentView @$el.html(@template(@model.toJSON())) if window.user.voted(@model) @$(".vote-btn").addClass("is-cast") + @renderAttrs() @$(".posted-details").timeago() @convertMath() @renderComments() diff --git a/lms/static/js/discussions-temp.js b/lms/static/js/discussions-temp.js index ad3eb1712c..71a5c16e67 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,28 +65,69 @@ $(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); + $(window).bind('resize', updateSidebar); + $(window).bind('scroll', updateSidebar); $('.discussion-column').bind("input", function (e) { console.log("resized"); - updateSidebarCoordinates(); - updateSidebarDimensions(); + updateSidebar(); }) - updateSidebarCoordinates(); - updateSidebarDimensions(); + 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; } @@ -97,10 +142,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) { @@ -277,92 +320,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; }'); } diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index c6cebe9517..b2048bc55d 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,10 +1024,10 @@ body.discussion { .discussion-column { - float: left; + 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%; @@ -1038,9 +1038,17 @@ body.discussion { } } + .blank-slate h1 { + margin-top: 195px; + text-align: center; + color: #ccc; + } + + .blank-slate, .discussion-article { position: relative; padding: 40px; + min-height: 468px; h1 { margin-bottom: 10px; diff --git a/lms/templates/discussion/_underscore_templates.html b/lms/templates/discussion/_underscore_templates.html index a86644de9f..29e4bf3fc5 100644 --- a/lms/templates/discussion/_underscore_templates.html +++ b/lms/templates/discussion/_underscore_templates.html @@ -18,14 +18,13 @@ (this post is about ${'<%- courseware_title %>'}) ${'<% } %>'} -
- ${'<% if (closed) { %>'} - This thread is closed. - ${'<% } %>'} +
    diff --git a/lms/templates/discussion/index.html b/lms/templates/discussion/index.html index 48ed88fdfb..545b218e54 100644 --- a/lms/templates/discussion/index.html +++ b/lms/templates/discussion/index.html @@ -26,7 +26,12 @@
    -
    +
    +
    +

    ${course.title} discussion forum

    + +
    +