diff --git a/cms/static/js/spec/views/paging_spec.js b/cms/static/js/spec/views/paging_spec.js index b742ddef60..5deac8e999 100644 --- a/cms/static/js/spec/views/paging_spec.js +++ b/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('
Showing 1-3' + + ' out of 4 total, ' + + 'sorted by Date descending
'); + }); + + 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('Showing 1-3' + + ' out of 4 total, ' + + 'sorted by Name ascending
'); + }); + }); + describe("Asset count label", function () { it('should show correct count on first page', function () { var requests = create_sinon.requests(this); diff --git a/cms/static/js/views/paging.js b/cms/static/js/views/paging.js index 966542ed04..c6c3a491ca 100644 --- a/cms/static/js/views/paging.js +++ b/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]; diff --git a/cms/static/js/views/paging_header.js b/cms/static/js/views/paging_header.js index c8a4f23352..049ae78263 100644 --- a/cms/static/js/views/paging_header.js +++ b/cms/static/js/views/paging_header.js @@ -31,27 +31,48 @@ 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 total, sorted by Date Added 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 total, sorted by Date Added descending" + message = gettext('Showing %(current_item_range)s out of %(total_items_count)s, sorted by %(sort_name)s descending'); + } + return '' + interpolate(message, { + current_item_range: this.currentItemRangeLabel(), + total_items_count: this.totalItemsCountLabel(), + sort_name: this.sortNameLabel() + }, true) + "
"; + }, + + 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 '' + interpolate(fmts, { + end = start + count; + return interpolate('%(start)s-%(end)s', { start: Math.min(start + 1, end), - end: end, - total: total, - sort_order: sortName, - sort_direction: sortDirectionName, - current_span: '', - total_span: '', - order_span: '', - end_span: '' - }, true) + "
"; + end: end + }, true); + }, + + totalItemsCountLabel: function() { + var totalItemsLabel; + // Translators: turns into "25 total" to be used in other sentences, e.g. "Showing 0-9 out of 25 total". + totalItemsLabel = interpolate(gettext('%(total_items)s total'), { + total_items: this.view.collection.totalCount + }, true); + return interpolate('%(total_items_label)s', { + total_items_label: totalItemsLabel + }, true); + }, + + sortNameLabel: function() { + return interpolate('%(sort_name)s', { + sort_name: this.view.sortDisplayName() + }, true); }, nextPage: function() {