Merge pull request #11926 from edx/christina/course-discovery-template

Clean up escaping in course discovery templates.

lms/static/js/discovery/views/refine_sidebar.js

@@ -4,8 +4,8 @@ define([
     'jquery',
     'underscore',
     'backbone',
-    'gettext'
-], function ($, _, Backbone, gettext) {
+    'edx-ui-toolkit/js/utils/html-utils'
+], function ($, _, Backbone, HtmlUtils) {
     'use strict';
 
     return Backbone.View.extend({
@@ -18,10 +18,10 @@ define([
         },
 
         initialize: function (options) {
-            this.meanings = options.meanings || {}
+            this.meanings = options.meanings || {};
             this.$container = this.$el.find('.search-facets-lists');
-            this.facetTpl = _.template($('#facet-tpl').html());
-            this.facetOptionTpl = _.template($('#facet_option-tpl').html());
+            this.facetTpl = HtmlUtils.template($('#facet-tpl').html());
+            this.facetOptionTpl = HtmlUtils.template($('#facet_option-tpl').html());
         },
 
         facetName: function (key) {
@@ -35,31 +35,32 @@ define([
         },
 
         renderOptions: function (options) {
-            var html = _.map(options, function(option) {
+            return HtmlUtils.joinHtml.apply(this, _.map(options, function(option) {
                 var data = _.clone(option.attributes);
                 data.name = this.termName(data.facet, data.term);
                 return this.facetOptionTpl(data);
-            }, this).join('');
-            return html;
+            }, this));
         },
 
         renderFacet: function (facetKey, options) {
             return this.facetTpl({
                 name: facetKey,
                 displayName: this.facetName(facetKey),
-                options: this.renderOptions(options),
+                optionsHtml: this.renderOptions(options),
                 listIsHuge: (options.length > 9)
             });
         },
 
         render: function () {
             var grouped = this.collection.groupBy('facet');
-            var html = _.map(grouped, function(options, facetKey) {
-                if (options.length > 0) {
-                    return this.renderFacet(facetKey, options);
-                }
-            }, this).join('');
-            this.$container.html(html);
+            var htmlSnippet = HtmlUtils.joinHtml.apply(
+                this, _.map(grouped, function(options, facetKey) {
+                    if (options.length > 0) {
+                        return this.renderFacet(facetKey, options);
+                    }
+                }, this)
+            );
+            HtmlUtils.setHtml(this.$container, htmlSnippet);
             return this;
         },
 
@@ -90,7 +91,7 @@ define([
                 $target.data('value'),
                 $target.data('text')
             );
-        },
+        }
 
     });
 

lms/templates/course.html

@@ -3,27 +3,27 @@
 from django.utils.translation import ugettext as _
 from django.core.urlresolvers import reverse
 %>
-<%page args="course" />
-<article class="course" id="${course.id | h}" role="region" aria-label="${course.display_name_with_default_escaped}">
+<%page args="course" expression_filter="h"/>
+<article class="course" id="${course.id}" role="region" aria-label="${course.display_name_with_default}">
   <a href="${reverse('about_course', args=[course.id.to_deprecated_string()])}">
     <header class="course-image">
       <div class="cover-image">
-        <img src="${course.course_image_url | h}" alt="${course.display_name_with_default_escaped} ${course.display_number_with_default | h}" />
+        <img src="${course.course_image_url}" alt="${course.display_name_with_default} ${course.display_number_with_default}" />
         <div class="learn-more" aria-hidden=true>${_("LEARN MORE")}</div>
       </div>
     </header>
     <div class="course-info" aria-hidden="true">
       <h2 class="course-name">
-        <span class="course-organization">${course.display_org_with_default | h}</span>
-        <span class="course-code">${course.display_number_with_default | h}</span>
-        <span class="course-title">${course.display_name_with_default_escaped}</span>
+        <span class="course-organization">${course.display_org_with_default}</span>
+        <span class="course-code">${course.display_number_with_default}</span>
+        <span class="course-title">${course.display_name_with_default}</span>
       </h2>
       <div class="course-date" aria-hidden="true">${_("Starts")}: ${course.start_datetime_text()}</div>
     </div>
     <div class="sr">
       <ul>
-      <li>${course.display_org_with_default | h}</li>
-      <li>${course.display_number_with_default | h}</li>
+      <li>${course.display_org_with_default}</li>
+      <li>${course.display_number_with_default}</li>
       <li>${_("Starts")}: <time itemprop="startDate" datetime="${course.start_datetime_text()}">${course.start_datetime_text()}</time></li>
     </ul>
     </div>

lms/templates/courses_list.html

+<%page expression_filter="h"/>
 <%namespace name='static' file='static_content.html'/>
 <%! from django.utils.translation import ugettext as _ %>
 

lms/templates/discovery/course_card.underscore

-<article class="course" role="region" aria-label="<%= content.display_name %>">
+<article class="course" role="region" aria-label="<%- content.display_name %>">
     <a href="/courses/<%- course %>/about">
         <header class="course-image">
             <div class="cover-image">
-                <img src="<%- image_url %>" alt="<%= content.display_name %> <%= content.number %>" />
-                <div class="learn-more" aria-hidden=true><%= gettext("LEARN MORE") %></div>
+                <img src="<%- image_url %>" alt="<%- content.display_name %> <%- content.number %>" />
+                <div class="learn-more" aria-hidden=true><%- gettext("LEARN MORE") %></div>
             </div>
         </header>
         <section class="course-info" aria-hidden="true">
             <h2 class="course-name">
-                <span class="course-organization"><%= org %></span>
-                <span class="course-code"><%= content.number %></span>
-                <span class="course-title"><%= content.display_name %></span>
+                <span class="course-organization"><%- org %></span>
+                <span class="course-code"><%- content.number %></span>
+                <span class="course-title"><%- content.display_name %></span>
             </h2>
             <div class="course-date" aria-hidden="true">
-                <%= interpolate(
+                <%- interpolate(
                       gettext("Starts: %(start_date)s"),
                       { start_date: start }, true
                     ) %>
@@ -21,9 +21,9 @@
         </section>
         <div class="sr">
             <ul>
-                <li><%= org %></li>
-                <li><%= content.number %></li>
-                <li><%= gettext("Starts") %><time itemprop="startDate" datetime="<%- start %>"><%- start %></time></li>
+                <li><%- org %></li>
+                <li><%- content.number %></li>
+                <li><%- gettext("Starts") %><time itemprop="startDate" datetime="<%- start %>"><%- start %></time></li>
             </ul>
         </div>
     </a>

lms/templates/discovery/facet.underscore

 <h3 class="header-facet">
-    <%= displayName %>
+    <%- displayName %>
 </h3>
-<ul data-facet="<%= name %>" class="facet-list collapse">
-    <%= options %>
+<ul data-facet="<%- name %>" class="facet-list collapse">
+    <%= HtmlUtils.ensureHtml(optionsHtml) %>
 </ul>
 <% if (listIsHuge) { %>
     <div class="toggle ">
         <button class="show-more discovery-button">
-            <%= gettext("More") %>
+            <%- gettext("More") %>
         </button>
         <button class="show-less hidden discovery-button">
-            <%= gettext("Less") %>
+            <%- gettext("Less") %>
         </button>
     </div>
 <% } %>

lms/templates/discovery/facet_option.underscore

 <li>
-    <button data-facet="<%= facet %>" data-value="<%= term %>" data-text="<%= name %>" class="facet-option discovery-button <%= selected ? 'selected' : '' %>">
-        <%= name %>
+    <button data-facet="<%- facet %>" data-value="<%- term %>" data-text="<%- name %>" class="facet-option discovery-button <%- selected ? 'selected' : '' %>">
+        <%- name %>
         <span class="count">
-            <span class="count-number"><%= count %></span>
+            <span class="count-number"><%- count %></span>
         </span>
     </button>
 </li>

lms/templates/discovery/filter_bar.underscore

 <div class="filters-inner">
     <ul class="active-filters facet-list"></ul>
-    <button id="clear-all-filters" class="clear-filters flt-right discovery-button"><%= gettext('Clear All') %></button>
+    <button id="clear-all-filters" class="clear-filters flt-right discovery-button"><%- gettext('Clear All') %></button>
 </div>