Merge pull request #9133 from edx/andya/remove-mustache-from-discussions

Remove Mustache usage from discussions

common/static/coffee/spec/discussion/discussion_spec_helper.coffee

@@ -44,6 +44,7 @@ class @DiscussionSpecHelper
             'thread-list-item', 'discussion-home', 'search-alert',
             'new-post', 'thread-type', 'new-post-menu-entry',
             'new-post-menu-category', 'topic', 'post-user-display',
+            'inline-discussion', 'pagination', 'user-profile', 'profile-thread'
         ]
         templateNamesNoTrailingTemplate = [
             'forum-action-endorse', 'forum-action-answer', 'forum-action-follow',

common/static/coffee/spec/discussion/view/discussion_thread_profile_view_spec.coffee

@@ -2,30 +2,22 @@
 describe "DiscussionThreadProfileView", ->
 
     beforeEach ->
-
-        setFixtures """
-        <article class="discussion-thread" id="thread_1"></article>
-        <script type='text/template' id='_profile_thread'>
-          <article class="discussion-article" data-id="{{id}}">
-            <div class="discussion-post local">
-              <div class="post-body">{{{abbreviatedBody}}}</div>
-            </div>
-          </article>
-        </script>
-        """
+        DiscussionSpecHelper.setUpGlobals()
+        DiscussionSpecHelper.setUnderscoreFixtures()
         @threadData = {
             id: "1",
             body: "dummy body",
             discussion: new Discussion()
             abuse_flaggers: [],
             commentable_id: 'dummy_discussion',
-            votes: {up_count: "42"}
+            votes: {up_count: "42"},
+            created_at: "2014-09-09T20:11:08Z"
         }
         @imageTag = '<img src="https://www.google.com.pk/images/srpr/logo11w.png">'
         window.MathJax = { Hub: { Queue: -> } }
 
     makeView = (thread) ->
-      view = new DiscussionThreadProfileView(el: $("article#thread_#{thread.id}"), model: thread)
+      view = new DiscussionThreadProfileView(model: thread)
       spyConvertMath(view)
       return view
 

common/static/coffee/spec/discussion/view/discussion_user_profile_view_spec.coffee

 describe "DiscussionUserProfileView", ->
     beforeEach ->
         DiscussionSpecHelper.setUpGlobals()
-        setFixtures(
-            """
-            <script type="text/template" id="_user_profile">
-                <section class="discussion">
-                    {{#threads}}
-                        <article class="discussion-thread" id="thread_{{id}}"/>
-                    {{/threads}}
-                </section>
-                <section class="pagination"/>
-            </script>
-            <script type="text/template" id="_profile_thread">
-                <div class="profile-thread" id="thread_{{id}}"/>
-            </script>
-            <script type="text/template" id="_pagination">
-                <div class="discussion-paginator">
-                    <a href="#different-page"/>
-                </div>
-                <div
-                    class="pagination-params"
-                    data-leftdots="{{leftdots}}"
-                    data-page="{{page}}"
-                    data-rightdots="{{rightdots}}"
-                >
-                    {{#previous}}
-                        <div class="previous" data-url="{{url}}" data-number="{{number}}"/>
-                    {{/previous}}
-                    {{#first}}
-                        <div class="first" data-url="{{url}}" data-number="{{number}}"/>
-                    {{/first}}
-                    {{#lowPages}}
-                        <div class="lowPages" data-url="{{url}}" data-number="{{number}}"/>
-                    {{/lowPages}}
-                    {{#highPages}}
-                        <div class="highPages" data-url="{{url}}" data-number="{{number}}"/>
-                    {{/highPages}}
-                    {{#last}}
-                        <div class="last" data-url="{{url}}" data-number="{{number}}"/>
-                    {{/last}}
-                    {{#next}}
-                        <div class="next" data-url="{{url}}" data-number="{{number}}"/>
-                    {{/next}}
-                </div>
-            </script>
-            <div class="user-profile-fixture"/>
-            """
-        )
+        DiscussionSpecHelper.setUnderscoreFixtures()
         spyOn(DiscussionThreadProfileView.prototype, "render")
 
+    makeThreads = (numThreads) ->
+        _.map(_.range(numThreads), (i) -> {id: i.toString(), body: "dummy body"})
+
     makeView = (threads, page, numPages) ->
-        return new DiscussionUserProfileView(
-            el: $(".user-profile-fixture")
+        new DiscussionUserProfileView(
             collection: threads
             page: page
             numPages: numPages
@@ -59,7 +16,7 @@ describe "DiscussionUserProfileView", ->
 
     describe "thread rendering should be correct", ->
         checkRender = (numThreads) ->
-            threads = _.map(_.range(numThreads), (i) -> {id: i.toString(), body: "dummy body"})
+            threads = makeThreads(numThreads)
             view = makeView(threads, 1, 1)
             expect(view.$(".discussion").children().length).toEqual(numThreads)
             _.each(threads, (thread) -> expect(view.$("#thread_#{thread.id}").length).toEqual(1))
@@ -80,28 +37,18 @@ describe "DiscussionUserProfileView", ->
 
         checkRender = (params) ->
             view = makeView([], params.page, params.numPages)
-            paramsQuery = view.$(".pagination-params")
-            expect(paramsQuery.length).toEqual(1)
-            _.each(
-                ["page", "leftdots", "rightdots"],
-                (param) ->
-                    expect(paramsQuery.data(param)).toEqual(params[param])
-            )
-            _.each(
-                ["previous", "first", "last", "next"],
-                (param) ->
-                    expected = params[param]
-                    expect(paramsQuery.find("." + param).data()).toEqual(
-                        if expected then pageInfo(expected) else null
-                    )
-            )
-            _.each(
-                ["lowPages", "highPages"]
-                (param) ->
-                    expect(paramsQuery.find("." + param).map(-> $(this).data()).get()).toEqual(
-                        _.map(params[param], pageInfo)
-                    )
-            )
+            paginator = view.$(".discussion-paginator")
+            expect(paginator.find(".current-page").text()).toEqual(params["page"].toString())
+            expect(paginator.find(".first-page").length).toBe(if params["first"] then 1 else 0);
+            expect(paginator.find(".previous-page").length).toBe(if params["previous"] then 1 else 0);
+            expect(paginator.find(".previous-ellipses").length).toBe(if params["leftdots"] then 1 else 0);
+            expect(paginator.find(".next-page").length).toBe(if params["next"] then 1 else 0);
+            expect(paginator.find(".next-ellipses").length).toBe(if params["rightdots"] then 1 else 0);
+            expect(paginator.find(".last-page").length).toBe(if params["last"] then 1 else 0);
+
+            get_page_number = (element) => parseInt($(element).text())
+            expect(_.map(paginator.find(".lower-page a"), get_page_number)).toEqual(params["lowPages"])
+            expect(_.map(paginator.find(".higher-page a"), get_page_number)).toEqual(params["highPages"])
 
         it "for one page", ->
             checkRender(
@@ -245,7 +192,7 @@ describe "DiscussionUserProfileView", ->
 
     describe "pagination interaction", ->
         beforeEach ->
-            @view = makeView([], 1, 1)
+            @view = makeView(makeThreads(3), 1, 2)
             spyOn($, "ajax")
 
         it "causes updated rendering", ->
@@ -259,9 +206,8 @@ describe "DiscussionUserProfileView", ->
                     {always: ->}
             )
             @view.$(".pagination a").first().click()
-            expect(@view.$("#thread_on_page_42").length).toEqual(1)
-            expect(@view.$(".pagination-params").data("page")).toEqual(42)
-            expect(@view.$(".pagination-params .last").data("number")).toEqual(99)
+            expect(@view.$(".current-page").text()).toEqual("42")
+            expect(@view.$(".last-page").text()).toEqual("99")
 
         it "handles AJAX errors", ->
             spyOn(DiscussionUtil, "discussionAlert")

common/static/coffee/src/discussion/discussion_module_view.coffee

@@ -9,7 +9,6 @@ if Backbone?
         (event) -> DiscussionUtil.activateOnSpace(event, @toggleNewPost)
       "click .discussion-paginator a": "navigateToPage"
 
-    paginationTemplate: -> DiscussionUtil.getTemplate("_pagination")
     page_re: /\?discussion_page=(\d+)/
     initialize: ->
       @toggleDiscussionBtn = @$(".discussion-show")
@@ -91,7 +90,10 @@ if Backbone?
       @discussion = new Discussion()
       @discussion.reset(response.discussion_data, {silent: false})
 
-      $discussion = $(Mustache.render $("script#_inline_discussion").html(), {'threads':response.discussion_data, 'discussionId': discussionId})
+      $discussion = _.template($("#inline-discussion-template").html())(
+        'threads': response.discussion_data,
+        'discussionId': discussionId
+      )
       if @$('section.discussion').length
         @$('section.discussion').replaceWith($discussion)
       else
@@ -149,8 +151,8 @@ if Backbone?
       pageUrl = (number) ->
         "?discussion_page=#{number}"
       params = DiscussionUtil.getPaginationParams(@page, numPages, pageUrl)
-      thing = Mustache.render @paginationTemplate(), params
-      @$('section.pagination').html(thing)
+      pagination = _.template($("#pagination-template").html())(params)
+      @$('section.pagination').html(pagination)
 
     navigateToPage: (event) =>
       event.preventDefault()

common/static/coffee/src/discussion/views/discussion_thread_profile_view.coffee

 if Backbone?
   class @DiscussionThreadProfileView extends Backbone.View
     render: ->
-      @template = DiscussionUtil.getTemplate("_profile_thread")
       @convertMath()
       @abbreviateBody()
       params = $.extend(@model.toJSON(),{permalink: @model.urlFor('retrieve')})
       if not @model.get('anonymous')
         params = $.extend(params, user:{username: @model.username, user_url: @model.user_url})
-      @$el.html(Mustache.render(@template, params))
+      @$el.html(_.template($("#profile-thread-template").html())(params))
       @$("span.timeago").timeago()
       element = @$(".post-body")
       if MathJax?

common/static/coffee/src/discussion/views/discussion_user_profile_view.coffee

@@ -12,15 +12,13 @@ if Backbone?
       @discussion.reset(@collection, {silent: false})
 
     render: () =>
-      profileTemplate = $("script#_user_profile").html()
-      @$el.html(Mustache.render(profileTemplate, {threads: @discussion.models}))
+      @$el.html(_.template($("#user-profile-template").html())({threads: @discussion.models}))
       @discussion.map (thread) ->
         new DiscussionThreadProfileView(el: @$("article#thread_#{thread.id}"), model: thread).render()
       baseUri = URI(window.location).removeSearch("page")
       pageUrlFunc = (page) -> baseUri.clone().addSearch("page", page)
       paginationParams = DiscussionUtil.getPaginationParams(@page, @numPages, pageUrlFunc)
-      paginationTemplate = $("script#_pagination").html()
-      @$el.find(".pagination").html(Mustache.render(paginationTemplate, paginationParams))
+      @$el.find(".pagination").html(_.template($("#pagination-template").html())(paginationParams))
 
     changePage: (event) ->
       event.preventDefault()

lms/templates/discussion/mustache/_inline_discussion.mustache → common/static/common/templates/discussion/inline-discussion.underscore

-<%! from django.utils.translation import ugettext as _ %>
-
-<section class="discussion" data-discussion-id="{{discussionId}}">
+<section class="discussion" data-discussion-id="<%= discussionId %>">
     <article class="new-post-article"></article>
 
     <section class="threads">
-        {{#threads}}
-            <article class="discussion-thread" id="thread_{{id}}">
+        <% _.each(threads, function(thread) { %>
+            <article class="discussion-thread" id="thread_<%= thread.id %>">
             </article>
-        {{/threads}}
+        <% }); %>
     </section>
 
     <section class="pagination">

common/static/common/templates/discussion/pagination.underscore

+<nav class="discussion-paginator">
+    <ol>
+        <% if (previous) { %>
+            <li class="previous-page"><a class="discussion-pagination" href="<%= previous.url %>" data-page-number="<%= previous.number %>">&lt; <%- gettext("Previous") %></a></li>
+        <% } %>
+        <% if (first) { %>
+            <li class="first-page"><a class="discussion-pagination" href="<%= first.url %>" data-page-number="1">1</a></li>
+        <% } %>
+        <% if (leftdots) { %>
+            <li class="previous-ellipses"><%- gettext("…") %></li>
+        <% } %>
+
+        <% _.each(lowPages, function(page) { %>
+            <li class="lower-page"><a class="discussion-pagination" href="<%= page.url %>" data-page-number="<%= page.number %>"><%= page.number %></a></li>
+        <% }); %>
+        <li class="current-page"><span><%= page %></span></li>
+        <% _.each(highPages, function(page) { %>
+            <li class="higher-page"><a class="discussion-pagination" href="<%= page.url %>" data-page-number="<%= page.number %>"><%= page.number %></a></li>
+        <% }); %>
+
+        <% if (rightdots) { %>
+            <li class="next-ellipses"><%- gettext("…") %></li>
+        <% } %>
+        <% if (last) { %>
+            <li class="last-page"><a class="discussion-pagination" href="<%= last.url %>" data-page-number="<%= last.number %>"><%= last.number %></a></li>
+        <% } %>
+        <% if (next) { %>
+            <li class="next-page"><a class="discussion-pagination" href="<%= next.url %>" data-page-number="<%= next.number %>"><%- gettext("Next") %> &gt;</a></li>
+        <% } %>
+    </ol>
+</nav>

common/static/common/templates/discussion/profile-thread.underscore

+<article class="discussion-article" data-id="<%- id %>">
+    <div class="discussion-post">
+        <header>
+            <h3><%- title %></h3>
+            <p class="posted-details">
+                <% if (user) { %>
+                    <a href="<%- user.url %>" class="username"><%- user.username %></a>
+                <% } else { %>
+                    <%- gettext("anonymous") %>
+                <% } %>
+
+                <span class="timeago" title="<%- created_at %>"><%- created_at %></span>
+                <span class="post-status-closed top-post-status" style="display: none">
+                    &bull; <%- gettext("This thread is closed.") %>
+                </span>
+            </p>
+        </header>
+        <div class="post-body"><%= abbreviatedBody %></div>
+    </div>
+    <div class="post-tools">
+        <a href="<%- permalink %>"><%- gettext("View discussion") %></a>
+    </div>
+
+</article>

common/static/common/templates/discussion/user-profile.underscore

+<h2><%- gettext("Active Threads") %></h2>
+<section class="discussion">
+    <% _.each(threads, function(thread) { %>
+        <article class="discussion-thread" id="thread_<%= thread.id %>"/>
+    <% }); %>
+</section>
+<section class="pagination"/>

lms/djangoapps/django_comment_client/helpers.py

-from django.conf import settings
-from mako.template import Template
-
-import os
-
-
-def include_mustache_templates():
-    mustache_dir = settings.PROJECT_ROOT / 'templates' / 'discussion' / 'mustache'
-
-    def is_valid_file_name(file_name):
-        return file_name.endswith('.mustache')
-
-    def read_file(file_name):
-        return open(mustache_dir / file_name, "r").read().decode('utf-8')
-
-    def template_id_from_file_name(file_name):
-        return file_name.rpartition('.')[0]
-
-    def process_mako(template_content):
-        return Template(template_content).render_unicode()
-
-    def make_script_tag(id, content):
-        return u"<script type='text/template' id='{0}'>{1}</script>".format(id, content)
-
-    return u'\n'.join(
-        make_script_tag(template_id_from_file_name(file_name), process_mako(read_file(file_name)))
-        for file_name in os.listdir(mustache_dir)
-        if is_valid_file_name(file_name)
-    )

lms/templates/discussion/_js_body_dependencies.html

-<%! from django_comment_client.helpers import include_mustache_templates %>
-
 <%include file="/mathjax_include.html" />
-${include_mustache_templates()}

lms/templates/discussion/_js_head_dependencies.html

@@ -9,7 +9,6 @@
 <script type="text/javascript" src="${static.url('js/jquery.autocomplete.js')}"></script>
 <script type="text/javascript" src="${static.url('js/vendor/jquery.timeago.js')}"></script>
 <script type="text/javascript" src="${static.url('js/src/jquery.timeago.locale.js')}"></script>
-<script type="text/javascript" src="${static.url('js/vendor/mustache.js')}"></script>
 <script type="text/javascript" src="${static.url('js/src/tooltip_manager.js')}"></script>
 
 <link href="${static.url('css/vendor/jquery.autocomplete.css')}" rel="stylesheet" type="text/css">

lms/templates/discussion/_recent_active_posts.html

 <%!
 from django.utils.translation import ugettext as _
-import django_comment_client.helpers as helpers
+from django_comment_client.utils import permalink
 %>
 
 % if recent_active_threads:
@@ -11,7 +11,7 @@ import django_comment_client.helpers as helpers
     </header>
     <ol class="discussion-sidebar-following-list">
       % for thread in recent_active_threads:
-        <li><a href="${helpers.permalink(thread) | h}"><span class="sidebar-following-name">${thread['title'] | h}</span> <span class="sidebar-vote-count">${thread['votes']['point'] | h}</span></a></li>
+        <li><a href="${permalink(thread) | h}"><span class="sidebar-following-name">${thread['title'] | h}</span> <span class="sidebar-vote-count">${thread['votes']['point'] | h}</span></a></li>
       % endfor
     <ol>
   </article>

lms/templates/discussion/_underscore_templates.html

@@ -6,7 +6,16 @@ window.PLATFORM_NAME = ${json.dumps(settings.PLATFORM_NAME)};
 window.ENABLE_DISCUSSION_HOME_PANEL = ${json.dumps(settings.FEATURES.get('ENABLE_DISCUSSION_HOME_PANEL', False))};
 </script>
 
-% for template_name in ['thread', 'thread-show', 'thread-edit', 'thread-response', 'thread-response-show', 'thread-response-edit', 'response-comment-show', 'response-comment-edit', 'thread-list-item', 'discussion-home', 'search-alert', 'new-post', 'thread-type', 'new-post-menu-entry', 'new-post-menu-category', 'topic', 'post-user-display']:
+<%
+template_names = [
+    'thread', 'thread-show', 'thread-edit', 'thread-response', 'thread-response-show', 'thread-response-edit',
+    'response-comment-show', 'response-comment-edit', 'thread-list-item', 'discussion-home', 'search-alert',
+    'new-post', 'thread-type', 'new-post-menu-entry', 'new-post-menu-category', 'topic', 'post-user-display',
+    'inline-discussion', 'pagination', 'user-profile', 'profile-thread'
+]
+%>
+
+% for template_name in template_names:
 <script aria-hidden="true" type="text/template" id="${template_name}-template">
     <%static:include path="common/templates/discussion/${template_name}.underscore" />
 </script>

lms/templates/discussion/index.html

@@ -2,7 +2,6 @@
 <%namespace name='static' file='../static_content.html'/>
 <%!
 from django.utils.translation import ugettext as _
-import django_comment_client.helpers as helpers
 from django.template.defaultfilters import escapejs
 from django.core.urlresolvers import reverse
 %>

lms/templates/discussion/mustache/_pagination.mustache

-<%! from django.utils.translation import ugettext as _ %>
-
-<nav class="discussion-{{discussiontype}}-paginator discussion-paginator">
-    <ol>
-        {{#previous}}
-        <li><a class="discussion-pagination" href="{{url}}" data-page-number="{{number}}">&lt; ${_("Previous")}</a></li>
-        {{/previous}}
-        {{#first}}
-        <li><a class="discussion-pagination" href="{{url}}" data-page-number="1">1</a></li>
-        {{/first}}
-        {{#leftdots}}
-        <li>${_(u"…")}</li>
-        {{/leftdots}}
-
-        {{#lowPages}}
-        <li><a class="discussion-pagination" href="{{url}}" data-page-number="{{number}}">{{number}}</a></li>
-        {{/lowPages}}
-        <li class="current-page"><span>{{page}}</span></li>
-        {{#highPages}}
-        <li><a class="discussion-pagination" href="{{url}}" data-page-number="{{number}}">{{number}}</a></li>
-        {{/highPages}}
-
-        {{#rightdots}}
-        <li>${_(u"…")}</li>
-        {{/rightdots}}
-        {{#last}}
-        <li><a class="discussion-pagination" href="{{url}}" data-page-number="{{number}}">{{number}}</a></li>
-        {{/last}}
-        {{#next}}
-        <li><a class="discussion-pagination" href="{{url}}" data-page-number="{{number}}">${_("Next")} &gt;</a></li>
-        {{/next}}
-    </ol>
-</nav>
-

lms/templates/discussion/mustache/_profile_thread.mustache

-<%! from django.utils.translation import ugettext as _ %>
-
-<article class="discussion-article" data-id="{{id}}">
-    <div class="discussion-post">
-        <header>
-            <h3>{{title}}</h3>
-            <p class="posted-details">                
-                {{#user}}
-                <a href="{{user_url}}" class="username">{{username}}</a>
-                {{/user}}
-                {{^user}}
-                ${_("anonymous")}
-                {{/user}}
-
-                <span class="timeago" title="{{created_at}}">{{created_at}}</span>
-                <span class="post-status-closed top-post-status" style="display: none">
-                    &bull; ${_("This thread is closed.")}
-                </span>
-            </p>
-        </header>
-        <div class="post-body">{{{abbreviatedBody}}}</div>
-    </div>
-    <div class="post-tools">
-        <a href="{{permalink}}">${_("View discussion")}</a>
-    </div>
-
-</article>

lms/templates/discussion/mustache/_user_profile.mustache

-<%! from django.utils.translation import ugettext as _ %>
-
-<h2>${_("Active Threads")}</h2>
-<section class="discussion">
-    {{#threads}}
-        <article class="discussion-thread" id="thread_{{id}}"/>
-    {{/threads}}
-</section>
-<section class="pagination"/>