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

Clean up escaping in course discovery templates.
2016-03-30 09:37:45 -04:00
parent 84e88ebaaa bdef3bed9f
commit a2faef242a
7 changed files with 45 additions and 43 deletions
--- a/lms/static/js/discovery/views/refine_sidebar.js
+++ b/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')
            );
-        },
+        }

    });

--- a/lms/templates/course.html
+++ b/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>
--- a/lms/templates/courses_list.html
+++ b/lms/templates/courses_list.html
@@ -1,3 +1,4 @@
+<%page expression_filter="h"/>
 <%namespace name='static' file='static_content.html'/>
 <%! from django.utils.translation import ugettext as _ %>

--- a/lms/templates/discovery/course_card.underscore
+++ b/lms/templates/discovery/course_card.underscore
@@ -1,19 +1,19 @@
-<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>
--- a/lms/templates/discovery/facet.underscore
+++ b/lms/templates/discovery/facet.underscore
@@ -1,16 +1,16 @@
 <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>
 <% } %>
--- a/lms/templates/discovery/facet_option.underscore
+++ b/lms/templates/discovery/facet_option.underscore
@@ -1,8 +1,8 @@
 <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>
--- a/lms/templates/discovery/filter_bar.underscore
+++ b/lms/templates/discovery/filter_bar.underscore
@@ -1,4 +1,4 @@
 <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>