From 62b047f3c2eac8da08ef1384b81fd7a9a42fc270 Mon Sep 17 00:00:00 2001 From: Ibrahim Awwal Date: Thu, 13 Sep 2012 03:11:30 -0700 Subject: [PATCH] Refactored DiscussionThreadInlineView to inherit from DiscussionThreadView and use subviews for rendering. Functionality should be the same. Changed a few things in DiscussionThreadView to make this a little easier. --- .../discussion_thread_inline_view.coffee | 217 ------------------ .../views/discussion_thread_show_view.coffee | 38 ++- .../views/discussion_thread_view.coffee | 25 +- .../discussion_thread_view_inline.coffee | 107 +++++++++ .../mustache/_inline_thread.mustache | 27 +-- .../mustache/_inline_thread_show.mustache | 28 +++ 6 files changed, 163 insertions(+), 279 deletions(-) delete mode 100644 lms/static/coffee/src/discussion/views/discussion_thread_inline_view.coffee create mode 100644 lms/static/coffee/src/discussion/views/discussion_thread_view_inline.coffee create mode 100644 lms/templates/discussion/mustache/_inline_thread_show.mustache diff --git a/lms/static/coffee/src/discussion/views/discussion_thread_inline_view.coffee b/lms/static/coffee/src/discussion/views/discussion_thread_inline_view.coffee deleted file mode 100644 index c6847cc6fb..0000000000 --- a/lms/static/coffee/src/discussion/views/discussion_thread_inline_view.coffee +++ /dev/null @@ -1,217 +0,0 @@ -if Backbone? - class @DiscussionThreadInlineView extends DiscussionContentView - expanded = false - 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" - "click .expand-post": "expandPost" - "click .collapse-post": "collapsePost" - - initLocal: -> - @$local = @$el.children(".discussion-article").children(".local") - @$delegateElement = @$local - - initialize: -> - super() - @model.on "change", @updateModelDetails - - render: -> - @template = DiscussionUtil.getTemplate("_inline_thread") - - if not @model.has('abbreviatedBody') - @abbreviateBody() - params = $.extend(@model.toJSON(),{expanded: @expanded}) - if not @model.get('anonymous') - params = $.extend(params, user:{username: @model.username, user_url: @model.user_url}) - @$el.html(Mustache.render(@template, params)) - @initLocal() - @delegateEvents() - @renderDogear() - @renderVoted() - @renderAttrs() - @$("span.timeago").timeago() - @convertMath() - if @expanded - @makeWmdEditor "reply-body" - @renderResponses() - @ - - renderDogear: -> - if window.user.following(@model) - @$(".dogear").addClass("is-followed") - - renderVoted: => - if window.user.voted(@model) - @$("[data-role=discussion-vote]").addClass("is-cast") - else - @$("[data-role=discussion-vote]").removeClass("is-cast") - - updateModelDetails: => - @renderVoted() - @$("[data-role=discussion-vote] .votes-count-number").html(@model.get("votes")["up_count"]) - - convertMath: -> - element = @$(".post-body") - element.html DiscussionUtil.postMathJaxProcessor DiscussionUtil.markdownWithHighlight element.html() - MathJax.Hub.Queue ["Typeset", MathJax.Hub, element[0]] - - renderResponses: -> - 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" - - renderResponse: (response) => - response.set('thread', @model) - view = new ThreadResponseView(model: response) - view.on "comment:add", @addComment - view.render() - @$el.find(".responses").append(view.el) - - addComment: => - @model.comment() - - toggleVote: (event) -> - event.preventDefault() - if window.user.voted(@model) - @unvote() - else - @vote() - - toggleFollowing: (event) -> - $elem = $(event.target) - url = null - console.log "follow" - if not @model.get('subscribed') - @model.follow() - url = @model.urlFor("follow") - else - @model.unfollow() - url = @model.urlFor("unfollow") - DiscussionUtil.safeAjax - $elem: $elem - url: url - type: "POST" - - vote: -> - window.user.vote(@model) - url = @model.urlFor("upvote") - DiscussionUtil.safeAjax - $elem: @$(".discussion-vote") - url: url - type: "POST" - success: (response, textStatus) => - if textStatus == 'success' - @model.set(response) - - unvote: -> - window.user.unvote(@model) - url = @model.urlFor("unvote") - DiscussionUtil.safeAjax - $elem: @$(".discussion-vote") - url: url - type: "POST" - success: (response, textStatus) => - if textStatus == 'success' - @model.set(response) - - submitComment: (event) -> - event.preventDefault() - url = @model.urlFor('reply') - body = @getWmdContent("reply-body") - return if not body.trim().length - @setWmdContent("reply-body", "") - comment = 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")) - comment.set('thread', @model.get('thread')) - @renderResponse(comment) - @model.addComment() - - DiscussionUtil.safeAjax - $elem: $(event.target) - url: url - type: "POST" - dataType: 'json' - data: - body: body - success: (data, textStatus) => - comment.updateInfo(data.annotated_content_info) - comment.set(data.content) - - edit: -> - - - delete: (event) -> - url = @model.urlFor('delete') - if not @model.can('can_delete') - return - if not confirm "Are you sure to delete thread \"#{@model.get('title')}\"?" - return - @model.remove() - @$el.empty() - $elem = $(event.target) - DiscussionUtil.safeAjax - $elem: $elem - url: url - type: "POST" - success: (response, textStatus) => - - 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') - data = { endorsed: not endorsed } - DiscussionUtil.safeAjax - $elem: $elem - url: url - data: data - type: "POST" - success: (response, textStatus) => - @model.set('endorsed', not endorsed) - - 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')) - @convertMath() - @$el.find('.expand-post').css('display', 'none') - @$el.find('.collapse-post').css('display', 'block') - @$el.find('.post-extended-content').show() - @makeWmdEditor "reply-body" - if @$el.find('.loading').length - @renderResponses() - - collapsePost: (event) -> - @expanded = false - @$el.removeClass('expanded') - @$el.find('.post-body').html(@model.get('abbreviatedBody')) - @convertMath() - @$el.find('.collapse-post').css('display', 'none') - @$el.find('.post-extended-content').hide() - @$el.find('.expand-post').css('display', 'block') diff --git a/lms/static/coffee/src/discussion/views/discussion_thread_show_view.coffee b/lms/static/coffee/src/discussion/views/discussion_thread_show_view.coffee index 7a5936a8f7..17a852e8a5 100644 --- a/lms/static/coffee/src/discussion/views/discussion_thread_show_view.coffee +++ b/lms/static/coffee/src/discussion/views/discussion_thread_show_view.coffee @@ -14,9 +14,11 @@ class @DiscussionThreadShowView extends DiscussionContentView super() @model.on "change", @updateModelDetails - render: -> + renderTemplate: -> @template = _.template($("#thread-show-template").html()) - @$el.html(@template(@model.toJSON())) + @template(@model.toJSON()) + render: -> + @$el.html(@renderTemplate()) @delegateEvents() @renderDogear() @renderVoted() @@ -24,7 +26,7 @@ class @DiscussionThreadShowView extends DiscussionContentView @$("span.timeago").timeago() @convertMath() @highlight @$(".post-body") - @highlight @$("h1") + @highlight @$("h1,h3") @ renderDogear: -> @@ -89,28 +91,6 @@ class @DiscussionThreadShowView extends DiscussionContentView if textStatus == 'success' @model.set(response, {silent: true}) - submitComment: (event) -> - event.preventDefault() - url = @model.urlFor('reply') - body = @getWmdContent("reply-body") - return if not body.trim().length - @setWmdContent("reply-body", "") - comment = 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")) - comment.set('thread', @model.get('thread')) - @renderResponse(comment) - @model.addComment() - - DiscussionUtil.safeAjax - $elem: $(event.target) - url: url - type: "POST" - dataType: 'json' - data: - body: body - success: (data, textStatus) => - comment.updateInfo(data.annotated_content_info) - comment.set(data.content) - edit: (event) -> @trigger "thread:edit", event @@ -146,3 +126,11 @@ class @DiscussionThreadShowView extends DiscussionContentView highlight: (el) -> el.html(el.html().replace(/<mark>/g, "").replace(/<\/mark>/g, "")) + +class @DiscussionThreadInlineShowView extends DiscussionThreadShowView + renderTemplate: -> + @template = DiscussionUtil.getTemplate('_inline_thread_show') + params = @model.toJSON() + if not @model.get('anonymous') + params = $.extend(params, user:{username: @model.username, user_url: @model.user_url}) + Mustache.render(@template, params) 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 d53a447880..4703bea00d 100644 --- a/lms/static/coffee/src/discussion/views/discussion_thread_view.coffee +++ b/lms/static/coffee/src/discussion/views/discussion_thread_view.coffee @@ -12,9 +12,12 @@ if Backbone? super() @createShowView() - render: -> + renderTemplate: -> @template = _.template($("#thread-template").html()) - @$el.html(@template(@model.toJSON())) + @template(@model.toJSON()) + + render: -> + @$el.html(@renderTemplate()) @$el.find(".loading").hide() @delegateEvents() @@ -39,13 +42,12 @@ if Backbone? tagSelected: (e) -> @trigger "tag:selected", $(e.target).html() - - renderResponses: -> + renderResponses: -> setTimeout(=> @$el.find(".loading").show() , 200) @responsesRequest = DiscussionUtil.safeAjax - url: "/courses/#{$$course_id}/discussion/forum/#{@model.get('commentable_id')}/threads/#{@model.id}" + url: DiscussionUtil.urlFor('retrieve_single_thread', @model.get('commentable_id'), @model.id) success: (data, textStatus, xhr) => @responsesRequest = null @$el.find(".loading").remove() @@ -144,10 +146,13 @@ if Backbone? @editView.bind "thread:update", @update @editView.bind "thread:cancel_edit", @cancelEdit + renderSubView: (view) -> + view.setElement(@$('.thread-content-wrapper')) + view.render() + view.delegateEvents() + renderEditView: () -> - @editView.setElement(@$('.thread-content-wrapper')) - @editView.render() - @editView.delegateEvents() + @renderSubView(@editView) createShowView: () -> @@ -161,9 +166,7 @@ if Backbone? @showView.bind "thread:edit", @edit renderShowView: () -> - @showView.setElement(@$('.thread-content-wrapper')) - @showView.render() - @showView.delegateEvents() + @renderSubView(@showView) cancelEdit: (event) => @createShowView() diff --git a/lms/static/coffee/src/discussion/views/discussion_thread_view_inline.coffee b/lms/static/coffee/src/discussion/views/discussion_thread_view_inline.coffee new file mode 100644 index 0000000000..4d868df134 --- /dev/null +++ b/lms/static/coffee/src/discussion/views/discussion_thread_view_inline.coffee @@ -0,0 +1,107 @@ +if Backbone? + class @DiscussionThreadInlineView extends DiscussionThreadView + expanded = false + events: + "click .discussion-submit-post": "submitComment" + "click .expand-post": "expandPost" + "click .collapse-post": "collapsePost" + + initLocal: -> + @$local = @$el.children(".discussion-article").children(".local") + if not @$local.length + @$local = @$el + @$delegateElement = @$local + + render: -> + @template = DiscussionUtil.getTemplate("_inline_thread") + + if not @model.has('abbreviatedBody') + @abbreviateBody() + params = @model.toJSON() + @$el.html(Mustache.render(@template, params)) + #@createShowView() + + @initLocal() + @delegateEvents() + @renderShowView() + @renderAttrs() + #@renderTags() #TODO: Decide if we want tags on inline threads + @$("span.timeago").timeago() + @$el.find('.post-extended-content').hide() + if @expanded + @makeWmdEditor "reply-body" + @renderResponses() + @ + createShowView: () -> + @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() + + edit: -> + + 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) + + 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" + if @$el.find('.loading').length + @renderResponses() + + collapsePost: (event) -> + @expanded = false + @$el.removeClass('expanded') + @$el.find('.post-body').html(@model.get('abbreviatedBody')) + @showView.convertMath() + @$el.find('.collapse-post').css('display', 'none') + @$el.find('.post-extended-content').hide() + @$el.find('.expand-post').css('display', 'block') diff --git a/lms/templates/discussion/mustache/_inline_thread.mustache b/lms/templates/discussion/mustache/_inline_thread.mustache index a874b728ce..eb3511f29a 100644 --- a/lms/templates/discussion/mustache/_inline_thread.mustache +++ b/lms/templates/discussion/mustache/_inline_thread.mustache @@ -1,32 +1,7 @@
-
-
-
- + {{votes.up_count}} -

{{title}}

-

- {{#user}} - {{username}} - {{/user}} - {{^user}} - anonymous - {{/user}} - {{created_at}} - - -

-
-
{{abbreviatedBody}}
+
- -
diff --git a/lms/templates/discussion/mustache/_inline_thread_show.mustache b/lms/templates/discussion/mustache/_inline_thread_show.mustache new file mode 100644 index 0000000000..347a78ecc4 --- /dev/null +++ b/lms/templates/discussion/mustache/_inline_thread_show.mustache @@ -0,0 +1,28 @@ +
+
+
+ + {{votes.up_count}} +

{{title}}

+

+ {{#user}} + {{username}} + {{/user}} + {{^user}} + anonymous + {{/user}} + + {{created_at}} + + +

+
+
{{abbreviatedBody}}
+ + +