diff --git a/common/static/coffee/spec/discussion/view/discussion_thread_view_inline_spec.coffee b/common/static/coffee/spec/discussion/view/discussion_thread_view_inline_spec.coffee new file mode 100644 index 0000000000..88304ae82b --- /dev/null +++ b/common/static/coffee/spec/discussion/view/discussion_thread_view_inline_spec.coffee @@ -0,0 +1,89 @@ +describe "DiscussionThreadInlineView", -> + beforeEach -> + setFixtures( + """ + + +
+ """ + ) + + @threadData = { + id: "dummy", + body: "dummy body", + abuse_flaggers: [], + votes: {up_count: "42"} + } + @thread = new Thread(@threadData) + @view = new DiscussionThreadInlineView({ model: @thread }) + @view.setElement($(".thread-fixture")) + spyOn($, "ajax") + # Avoid unnecessary boilerplate + spyOn(@view.showView, "render") + spyOn(@view, "makeWmdEditor") + spyOn(DiscussionThreadView.prototype, "renderResponse") + + assertContentVisible = (view, selector, visible) -> + content = view.$el.find(selector) + expect(content.length).toEqual(1) + expect(content.is(":visible")).toEqual(visible) + + assertExpandedContentVisible = (view, expanded) -> + expect(view.$el.hasClass("expanded")).toEqual(expanded) + assertContentVisible(view, ".post-extended-content", expanded) + assertContentVisible(view, ".expand-post", not expanded) + assertContentVisible(view, ".collapse-post", expanded) + + describe "render", -> + it "uses the cohorted template if cohorted", -> + @view.model.set({group_id: 1}) + @view.render() + expect(@view.$el.find(".cohorted-indicator").length).toEqual(1) + + it "uses the non-cohorted template if not cohorted", -> + @view.render() + expect(@view.$el.find(".non-cohorted-indicator").length).toEqual(1) + + it "shows content that should be visible when collapsed", -> + @view.render() + assertExpandedContentVisible(@view, false) + + it "does not render any responses by default", -> + @view.render() + expect($.ajax).not.toHaveBeenCalled() + expect(@view.$el.find(".responses li").length).toEqual(0) + + describe "expand/collapse", -> + it "shows/hides appropriate content", -> + DiscussionViewSpecHelper.setNextResponseContent({resp_total: 0, children: []}) + @view.render() + @view.expandPost() + assertExpandedContentVisible(@view, true) + @view.collapsePost() + assertExpandedContentVisible(@view, false) diff --git a/common/static/coffee/spec/discussion/view/discussion_thread_view_spec.coffee b/common/static/coffee/spec/discussion/view/discussion_thread_view_spec.coffee index bd251de39f..31a883cb31 100644 --- a/common/static/coffee/spec/discussion/view/discussion_thread_view_spec.coffee +++ b/common/static/coffee/spec/discussion/view/discussion_thread_view_spec.coffee @@ -27,16 +27,8 @@ describe "DiscussionThreadView", -> spyOn(DiscussionThreadView.prototype, "renderResponse") describe "response count and pagination", -> - - setNextResponseContent = (content) -> - $.ajax.andCallFake( - (params) => - params.success({"content": content}) - {always: ->} - ) - renderWithContent = (view, content) -> - setNextResponseContent(content) + DiscussionViewSpecHelper.setNextResponseContent(content) view.render() jasmine.Clock.tick(100) @@ -73,16 +65,16 @@ describe "DiscussionThreadView", -> assertRenderedCorrectly(@view, "5 responses", "Showing first response", "Load all responses") it "correctly re-render when all threads have loaded", -> - setNextResponseContent({resp_total: 5, children: [{}, {}, {}, {}]}) + DiscussionViewSpecHelper.setNextResponseContent({resp_total: 5, children: [{}, {}, {}, {}]}) @view.$el.find(".load-response-button").click() assertRenderedCorrectly(@view, "5 responses", "Showing all responses", null) it "correctly re-render when one page remains", -> - setNextResponseContent({resp_total: 42, children: [{}, {}]}) + DiscussionViewSpecHelper.setNextResponseContent({resp_total: 42, children: [{}, {}]}) @view.$el.find(".load-response-button").click() assertRenderedCorrectly(@view, "42 responses", "Showing first 3 responses", "Load all responses") it "correctly re-render when multiple pages remain", -> - setNextResponseContent({resp_total: 111, children: [{}, {}]}) + DiscussionViewSpecHelper.setNextResponseContent({resp_total: 111, children: [{}, {}]}) @view.$el.find(".load-response-button").click() assertRenderedCorrectly(@view, "111 responses", "Showing first 3 responses", "Load next 100 responses") diff --git a/common/static/coffee/spec/discussion/view/discussion_view_spec_helper.coffee b/common/static/coffee/spec/discussion/view/discussion_view_spec_helper.coffee index c6c69990fa..45a97f3175 100644 --- a/common/static/coffee/spec/discussion/view/discussion_view_spec_helper.coffee +++ b/common/static/coffee/spec/discussion/view/discussion_view_spec_helper.coffee @@ -110,6 +110,12 @@ class @DiscussionViewSpecHelper button.trigger($.Event("keydown", {which: 32})) expect(spy).toHaveBeenCalled() - @checkVoteButtonEvents = (view) -> @checkButtonEvents(view, "toggleVote", ".vote-btn") + + @setNextResponseContent = (content) -> + $.ajax.andCallFake( + (params) => + params.success({"content": content}) + {always: ->} + ) diff --git a/common/static/coffee/src/discussion/views/discussion_thread_view.coffee b/common/static/coffee/src/discussion/views/discussion_thread_view.coffee index 57297a1a1e..c753d15f3c 100644 --- a/common/static/coffee/src/discussion/views/discussion_thread_view.coffee +++ b/common/static/coffee/src/discussion/views/discussion_thread_view.coffee @@ -22,6 +22,7 @@ if Backbone? render: -> @$el.html(@renderTemplate()) + @initLocal() @delegateEvents() @renderShowView() @@ -33,10 +34,7 @@ if Backbone? @responses.on("add", @renderResponse) # Without a delay, jQuery doesn't add the loading extension defined in # utils.coffee before safeAjax is invoked, which results in an error - setTimeout( - => @loadResponses(INITIAL_RESPONSE_PAGE_SIZE, @$el.find(".responses"), true), - 100 - ) + setTimeout((=> @loadInitialResponses()), 100) @ cleanup: -> @@ -71,6 +69,9 @@ if Backbone? gettext("We had some trouble loading more responses. Please try again.") ) + loadInitialResponses: () -> + @loadResponses(INITIAL_RESPONSE_PAGE_SIZE, @$el.find(".responses"), true) + renderResponseCountAndPagination: (responseTotal) => @$el.find(".response-count").html( interpolate( @@ -226,6 +227,9 @@ if Backbone? renderEditView: () -> @renderSubView(@editView) + getShowViewClass: () -> + return DiscussionThreadShowView + createShowView: () -> if @editView? @@ -233,7 +237,8 @@ if Backbone? @editView.$el.empty() @editView = null - @showView = new DiscussionThreadShowView(model: @model) + showViewClass = @getShowViewClass() + @showView = new showViewClass(model: @model) @showView.bind "thread:_delete", @_delete @showView.bind "thread:edit", @edit diff --git a/common/static/coffee/src/discussion/views/discussion_thread_view_inline.coffee b/common/static/coffee/src/discussion/views/discussion_thread_view_inline.coffee index 0282313bff..b15f361472 100644 --- a/common/static/coffee/src/discussion/views/discussion_thread_view_inline.coffee +++ b/common/static/coffee/src/discussion/views/discussion_thread_view_inline.coffee @@ -16,7 +16,7 @@ if Backbone? @$local = @$el @$delegateElement = @$local - render: -> + renderTemplate: () -> if @model.has('group_id') @template = DiscussionUtil.getTemplate("_inline_thread_cohorted") else @@ -25,107 +25,43 @@ if Backbone? if not @model.has('abbreviatedBody') @abbreviateBody() params = @model.toJSON() - @$el.html(Mustache.render(@template, params)) - #@createShowView() + Mustache.render(@template, params) - @initLocal() - @delegateEvents() - @renderShowView() - @renderAttrs() - - @$("span.timeago").timeago() + render: () -> + super() @$el.find('.post-extended-content').hide() + @$el.find('.collapse-post').hide() + + getShowViewClass: () -> + return DiscussionThreadInlineShowView + + loadInitialResponses: () -> if @expanded - @makeWmdEditor "reply-body" - @renderAddResponseButton() - @renderResponses() - @ - createShowView: () -> - - if @editView? - @editView.undelegateEvents() - @editView.$el.empty() - @editView = null - @showView = new DiscussionThreadInlineShowView(model: @model) - @showView.bind "thread:_delete", @_delete - @showView.bind "thread:edit", @edit - - renderResponses: -> - #TODO: threadview - DiscussionUtil.safeAjax - url: "/courses/#{$$course_id}/discussion/forum/#{@model.get('commentable_id')}/threads/#{@model.id}" - $loading: @$el - success: (data, textStatus, xhr) => - # @$el.find(".loading").remove() - Content.loadContentInfos(data['annotated_content_info']) - comments = new Comments(data['content']['children']) - comments.each @renderResponse - @trigger "thread:responses:rendered" - @$('.loading').remove() - - - toggleClosed: (event) -> - #TODO: showview - $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) -> - #TODO: showview - $elem = $(event.target) - url = @model.urlFor('endorse') - endorsed = @model.get('endorsed') - data = { endorsed: not endorsed } - DiscussionUtil.safeAjax - $elem: $elem - url: url - data: data - type: "POST" - success: (response, textStatus) => - @model.set('endorsed', not endorsed) + super() abbreviateBody: -> abbreviated = DiscussionUtil.abbreviateString @model.get('body'), 140 @model.set('abbreviatedBody', abbreviated) expandPost: (event) => - @expanded = true @$el.addClass('expanded') - @$el.find('.post-body').html(@model.get('body')) - @showView.convertMath() @$el.find('.expand-post').css('display', 'none') @$el.find('.collapse-post').css('display', 'block') @$el.find('.post-extended-content').show() - @makeWmdEditor "reply-body" - @renderAttrs() - if @$el.find('.loading').length - @renderAddResponseButton() - @renderResponses() + if not @expanded + @expanded = true + @loadInitialResponses() collapsePost: (event) -> curScroll = $(window).scrollTop() postTop = @$el.offset().top if postTop < curScroll $('html, body').animate({scrollTop: postTop}) - @expanded = false @$el.removeClass('expanded') - @$el.find('.post-body').html(@model.get('abbreviatedBody')) - @showView.convertMath() + @$el.find('.expand-post').css('display', 'block') @$el.find('.collapse-post').css('display', 'none') @$el.find('.post-extended-content').hide() - @$el.find('.expand-post').css('display', 'block') createEditView: () -> super() - @editView.bind "thread:update", @expandPost @editView.bind "thread:update", @abbreviateBody - @editView.bind "thread:cancel_edit", @expandPost diff --git a/common/static/js_test.yml b/common/static/js_test.yml index a52c7a08e8..ec4b061a7b 100644 --- a/common/static/js_test.yml +++ b/common/static/js_test.yml @@ -31,6 +31,7 @@ lib_paths: - js/vendor/jquery.min.js - js/vendor/jasmine-jquery.js - js/vendor/jasmine-imagediff.js + - js/vendor/mustache.js - js/vendor/underscore-min.js - js/vendor/backbone-min.js - js/vendor/jquery.timeago.js diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index ea5d53d9b6..0b26fcac63 100644 --- a/lms/static/sass/_discussion.scss +++ b/lms/static/sass/_discussion.scss @@ -2069,10 +2069,6 @@ body.discussion { font-size: 12px; line-height: 30px; - &.collapse-post { - display: none; - } - .icon { color: $link-color; margin-right: ($baseline*0.25); diff --git a/lms/templates/discussion/mustache/_inline_thread.mustache b/lms/templates/discussion/mustache/_inline_thread.mustache index 4802e2795a..8345b0cfec 100644 --- a/lms/templates/discussion/mustache/_inline_thread.mustache +++ b/lms/templates/discussion/mustache/_inline_thread.mustache @@ -3,23 +3,25 @@
-
- +
+
+
+ +
+
    +
    +
    +

    ${_("Post a response:")}

    +
      +
      +
      + ${_("Submit")} +
      +
      -
        -
      1. ${_("Loading content")}
        2. -
      -
      -

      ${_("Post a response:")}

      -
        -
        -
        - ${_("Submit")} -
        -
      diff --git a/lms/templates/discussion/mustache/_inline_thread_cohorted.mustache b/lms/templates/discussion/mustache/_inline_thread_cohorted.mustache index e33a1f9926..4c6fac4cd9 100644 --- a/lms/templates/discussion/mustache/_inline_thread_cohorted.mustache +++ b/lms/templates/discussion/mustache/_inline_thread_cohorted.mustache @@ -4,23 +4,25 @@
      {{group_string}}
      -
      - +
      +
      +
      + +
      +
        +
        +
        +

        ${_("Post a response:")}

        +
          +
          +
          + ${_("Submit")} +
          +
          -
            -
          1. ${_("Loading content")}
            2. -
          -
          -

          ${_("Post a response:")}

          -
            -
            -
            - ${_("Submit")} -
            -