Improve the translatability of the paging header

cms/static/js/spec/views/paging_spec.js

@@ -245,7 +245,6 @@ define([ "jquery", "js/spec_helpers/create_sinon", "URI",
                         expect(pagingHeader.$('.next-page-link')).toHaveClass('is-disabled');
                     });
 
-
                     it('should be disabled on an empty page', function () {
                         var requests = create_sinon.requests(this);
                         pagingView.setPage(0);
@@ -301,6 +300,31 @@ define([ "jquery", "js/spec_helpers/create_sinon", "URI",
                     });
                 });
 
+                describe("Page metadata section", function() {
+                    it('shows the correct metadata for the current page', function () {
+                        var requests = create_sinon.requests(this),
+                            message;
+                        pagingView.setPage(0);
+                        respondWithMockAssets(requests);
+                        message = pagingHeader.$('.meta').html().trim();
+                        expect(message).toBe('<p>Showing <span class="count-current-shown">1-3</span>' +
+                            ' out of <span class="count-total">4 total</span>, ' +
+                            'sorted by <span class="sort-order">Date</span> descending</p>');
+                    });
+
+                    it('shows the correct metadata when sorted ascending', function () {
+                        var requests = create_sinon.requests(this),
+                            message;
+                        pagingView.setPage(0);
+                        pagingView.toggleSortOrder('name-col');
+                        respondWithMockAssets(requests);
+                        message = pagingHeader.$('.meta').html().trim();
+                        expect(message).toBe('<p>Showing <span class="count-current-shown">1-3</span>' +
+                            ' out of <span class="count-total">4 total</span>, ' +
+                            'sorted by <span class="sort-order">Name</span> ascending</p>');
+                    });
+                });
+
                 describe("Asset count label", function () {
                     it('should show correct count on first page', function () {
                         var requests = create_sinon.requests(this);

cms/static/js/views/paging.js

@@ -87,12 +87,6 @@ define(["underscore", "js/views/baseview", "js/views/feedback_alert", "gettext"]
                 return sortInfo.displayName;
             },
 
-            sortDirectionName: function() {
-                var collection = this.collection,
-                    ascending = collection.sortDirection === 'asc';
-                return ascending ? gettext("ascending") : gettext("descending");
-            },
-
             setInitialSortColumn: function(sortColumn) {
                 var collection = this.collection,
                     sortInfo = this.sortableColumns[sortColumn];

cms/static/js/views/paging_header.js

@@ -31,27 +31,47 @@ define(["underscore", "gettext", "js/views/baseview"], function(_, gettext, Base
         },
 
         messageHtml: function() {
+            var message;
+            if (this.view.collection.sortDirection === 'asc') {
+                // Translators: sample result: "Showing 0-9 out of 25, sorted by name ascending"
+                message = gettext('Showing %(current_item_range)s out of %(total_items_count)s, sorted by %(sort_name)s ascending');
+            } else {
+                // Translators: sample result: "Showing 0-9 out of 25, sorted by name descending"
+                message = gettext('Showing %(current_item_range)s out of %(total_items_count)s, sorted by %(sort_name)s descending');
+            }
+            return '<p>' + interpolate(message, {
+                current_item_range: this.currentItemRangeLabel(),
+                total_items_count: this.totalItemsCountLabel(),
+                sort_name: this.sortNameLabel()
+            }, true) + "</p>";
+        },
+
+        currentItemRangeLabel: function() {
             var view = this.view,
                 collection = view.collection,
                 start = collection.start,
                 count = collection.size(),
-                sortName = view.sortDisplayName(),
-                sortDirectionName = view.sortDirectionName(),
-                end = start + count,
-                total = collection.totalCount,
-                fmts = gettext('Showing %(current_span)s%(start)s-%(end)s%(end_span)s out of %(total_span)s%(total)s total%(end_span)s, sorted by %(order_span)s%(sort_order)s%(end_span)s %(sort_direction)s');
-
-            return '<p>' + interpolate(fmts, {
+                end = start + count;
+            return interpolate('<span class="count-current-shown">%(start)s-%(end)s</span>', {
                 start: Math.min(start + 1, end),
-                end: end,
-                total: total,
-                sort_order: sortName,
-                sort_direction: sortDirectionName,
-                current_span: '<span class="count-current-shown">',
-                total_span: '<span class="count-total">',
-                order_span: '<span class="sort-order">',
-                end_span: '</span>'
-            }, true) + "</p>";
+                end: end
+            }, true);
+        },
+
+        totalItemsCountLabel: function() {
+            var totalItemsLabel;
+            totalItemsLabel = interpolate(gettext('%(total_items)s total'), {
+                total_items: this.view.collection.totalCount
+            }, true);
+            return interpolate('<span class="count-total">%(total_items_label)s</span>', {
+                total_items_label: totalItemsLabel
+            }, true);
+        },
+
+        sortNameLabel: function() {
+            return interpolate('<span class="sort-order">%(sort_name)s</span>', {
+                sort_name: this.view.sortDisplayName()
+            }, true);
         },
 
         nextPage: function() {