Convert to RequireJS text for templates
This commit is contained in:
Andy Armstrong
@@ -1,65 +1,65 @@
|
||||
define(["underscore", "js/views/baseview"], function(_, BaseView) {
|
||||
define(["underscore", "backbone", "text!common/templates/components/paging-footer.underscore"],
|
||||
function(_, Backbone, paging_footer_template) {
|
||||
|
||||
var PagingFooter = BaseView.extend({
|
||||
events : {
|
||||
"click .next-page-link": "nextPage",
|
||||
"click .previous-page-link": "previousPage",
|
||||
"change .page-number-input": "changePage"
|
||||
},
|
||||
var PagingFooter = Backbone.View.extend({
|
||||
events : {
|
||||
"click .next-page-link": "nextPage",
|
||||
"click .previous-page-link": "previousPage",
|
||||
"change .page-number-input": "changePage"
|
||||
},
|
||||
|
||||
initialize: function(options) {
|
||||
var view = options.view,
|
||||
collection = view.collection;
|
||||
this.view = view;
|
||||
this.template = this.loadTemplate('paging-footer');
|
||||
collection.bind('add', _.bind(this.render, this));
|
||||
collection.bind('remove', _.bind(this.render, this));
|
||||
collection.bind('reset', _.bind(this.render, this));
|
||||
this.render();
|
||||
},
|
||||
initialize: function(options) {
|
||||
var view = options.view,
|
||||
collection = view.collection;
|
||||
this.view = view;
|
||||
collection.bind('add', _.bind(this.render, this));
|
||||
collection.bind('remove', _.bind(this.render, this));
|
||||
collection.bind('reset', _.bind(this.render, this));
|
||||
this.render();
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var view = this.view,
|
||||
collection = view.collection,
|
||||
currentPage = collection.currentPage,
|
||||
lastPage = collection.totalPages - 1;
|
||||
this.$el.html(this.template({
|
||||
current_page: collection.currentPage,
|
||||
total_pages: collection.totalPages
|
||||
}));
|
||||
this.$(".previous-page-link").toggleClass("is-disabled", currentPage === 0).attr('aria-disabled', currentPage === 0);;
|
||||
this.$(".next-page-link").toggleClass("is-disabled", currentPage === lastPage).attr('aria-disabled', currentPage === lastPage);
|
||||
return this;
|
||||
},
|
||||
render: function() {
|
||||
var view = this.view,
|
||||
collection = view.collection,
|
||||
currentPage = collection.currentPage,
|
||||
lastPage = collection.totalPages - 1;
|
||||
this.$el.html(_.template(paging_footer_template, {
|
||||
current_page: collection.currentPage,
|
||||
total_pages: collection.totalPages
|
||||
}));
|
||||
this.$(".previous-page-link").toggleClass("is-disabled", currentPage === 0).attr('aria-disabled', currentPage === 0);;
|
||||
this.$(".next-page-link").toggleClass("is-disabled", currentPage === lastPage).attr('aria-disabled', currentPage === lastPage);
|
||||
return this;
|
||||
},
|
||||
|
||||
changePage: function() {
|
||||
var view = this.view,
|
||||
collection = view.collection,
|
||||
currentPage = collection.currentPage + 1,
|
||||
pageInput = this.$("#page-number-input"),
|
||||
pageNumber = parseInt(pageInput.val(), 10);
|
||||
if (pageNumber > collection.totalPages) {
|
||||
pageNumber = false;
|
||||
changePage: function() {
|
||||
var view = this.view,
|
||||
collection = view.collection,
|
||||
currentPage = collection.currentPage + 1,
|
||||
pageInput = this.$("#page-number-input"),
|
||||
pageNumber = parseInt(pageInput.val(), 10);
|
||||
if (pageNumber > collection.totalPages) {
|
||||
pageNumber = false;
|
||||
}
|
||||
if (pageNumber <= 0) {
|
||||
pageNumber = false;
|
||||
}
|
||||
// If we still have a page number by this point,
|
||||
// and it's not the current page, load it.
|
||||
if (pageNumber && pageNumber !== currentPage) {
|
||||
view.setPage(pageNumber - 1);
|
||||
}
|
||||
pageInput.val(""); // Clear the value as the label will show beneath it
|
||||
},
|
||||
|
||||
nextPage: function() {
|
||||
this.view.nextPage();
|
||||
},
|
||||
|
||||
previousPage: function() {
|
||||
this.view.previousPage();
|
||||
}
|
||||
if (pageNumber <= 0) {
|
||||
pageNumber = false;
|
||||
}
|
||||
// If we still have a page number by this point,
|
||||
// and it's not the current page, load it.
|
||||
if (pageNumber && pageNumber !== currentPage) {
|
||||
view.setPage(pageNumber - 1);
|
||||
}
|
||||
pageInput.val(""); // Clear the value as the label will show beneath it
|
||||
},
|
||||
});
|
||||
|
||||
nextPage: function() {
|
||||
this.view.nextPage();
|
||||
},
|
||||
|
||||
previousPage: function() {
|
||||
this.view.previousPage();
|
||||
}
|
||||
});
|
||||
|
||||
return PagingFooter;
|
||||
}); // end define();
|
||||
return PagingFooter;
|
||||
}); // end define();
|
||||
|
||||
@@ -1,113 +1,113 @@
|
||||
define(["underscore", "gettext", "js/views/baseview"], function(_, gettext, BaseView) {
|
||||
define(["underscore", "backbone", "gettext", "text!common/templates/components/paging-header.underscore"],
|
||||
function(_, Backbone, gettext, paging_header_template) {
|
||||
|
||||
var PagingHeader = BaseView.extend({
|
||||
events : {
|
||||
"click .next-page-link": "nextPage",
|
||||
"click .previous-page-link": "previousPage"
|
||||
},
|
||||
var PagingHeader = Backbone.View.extend({
|
||||
events : {
|
||||
"click .next-page-link": "nextPage",
|
||||
"click .previous-page-link": "previousPage"
|
||||
},
|
||||
|
||||
initialize: function(options) {
|
||||
var view = options.view,
|
||||
collection = view.collection;
|
||||
this.view = view;
|
||||
this.template = this.loadTemplate('paging-header');
|
||||
collection.bind('add', _.bind(this.render, this));
|
||||
collection.bind('remove', _.bind(this.render, this));
|
||||
collection.bind('reset', _.bind(this.render, this));
|
||||
},
|
||||
initialize: function(options) {
|
||||
var view = options.view,
|
||||
collection = view.collection;
|
||||
this.view = view;
|
||||
collection.bind('add', _.bind(this.render, this));
|
||||
collection.bind('remove', _.bind(this.render, this));
|
||||
collection.bind('reset', _.bind(this.render, this));
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var view = this.view,
|
||||
collection = view.collection,
|
||||
currentPage = collection.currentPage,
|
||||
lastPage = collection.totalPages - 1,
|
||||
messageHtml = this.messageHtml();
|
||||
this.$el.html(this.template({
|
||||
messageHtml: messageHtml
|
||||
}));
|
||||
this.$(".previous-page-link").toggleClass("is-disabled", currentPage === 0).attr('aria-disabled', currentPage === 0);
|
||||
this.$(".next-page-link").toggleClass("is-disabled", currentPage === lastPage).attr('aria-disabled', currentPage === lastPage);
|
||||
return this;
|
||||
},
|
||||
render: function() {
|
||||
var view = this.view,
|
||||
collection = view.collection,
|
||||
currentPage = collection.currentPage,
|
||||
lastPage = collection.totalPages - 1,
|
||||
messageHtml = this.messageHtml();
|
||||
this.$el.html(_.template(paging_header_template, {
|
||||
messageHtml: messageHtml
|
||||
}));
|
||||
this.$(".previous-page-link").toggleClass("is-disabled", currentPage === 0).attr('aria-disabled', currentPage === 0);
|
||||
this.$(".next-page-link").toggleClass("is-disabled", currentPage === lastPage).attr('aria-disabled', currentPage === lastPage);
|
||||
return this;
|
||||
},
|
||||
|
||||
messageHtml: function() {
|
||||
var message = '';
|
||||
var asset_type = false;
|
||||
if (this.view.collection.assetType) {
|
||||
if (this.view.collection.sortDirection === 'asc') {
|
||||
// Translators: sample result:
|
||||
// "Showing 0-9 out of 25 total, filtered by Images, sorted by Date Added ascending"
|
||||
message = gettext('Showing %(current_item_range)s out of %(total_items_count)s, filtered by %(asset_type)s, sorted by %(sort_name)s ascending');
|
||||
} else {
|
||||
// Translators: sample result:
|
||||
// "Showing 0-9 out of 25 total, filtered by Images, sorted by Date Added descending"
|
||||
message = gettext('Showing %(current_item_range)s out of %(total_items_count)s, filtered by %(asset_type)s, sorted by %(sort_name)s descending');
|
||||
messageHtml: function() {
|
||||
var message = '';
|
||||
var asset_type = false;
|
||||
if (this.view.collection.assetType) {
|
||||
if (this.view.collection.sortDirection === 'asc') {
|
||||
// Translators: sample result:
|
||||
// "Showing 0-9 out of 25 total, filtered by Images, sorted by Date Added ascending"
|
||||
message = gettext('Showing %(current_item_range)s out of %(total_items_count)s, filtered by %(asset_type)s, sorted by %(sort_name)s ascending');
|
||||
} else {
|
||||
// Translators: sample result:
|
||||
// "Showing 0-9 out of 25 total, filtered by Images, sorted by Date Added descending"
|
||||
message = gettext('Showing %(current_item_range)s out of %(total_items_count)s, filtered by %(asset_type)s, sorted by %(sort_name)s descending');
|
||||
}
|
||||
asset_type = this.filterNameLabel();
|
||||
}
|
||||
asset_type = this.filterNameLabel();
|
||||
}
|
||||
else {
|
||||
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');
|
||||
else {
|
||||
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 '<p>' + interpolate(message, {
|
||||
current_item_range: this.currentItemRangeLabel(),
|
||||
total_items_count: this.totalItemsCountLabel(),
|
||||
asset_type: asset_type,
|
||||
sort_name: this.sortNameLabel()
|
||||
}, true) + "</p>";
|
||||
},
|
||||
|
||||
currentItemRangeLabel: function() {
|
||||
var view = this.view,
|
||||
collection = view.collection,
|
||||
start = collection.start,
|
||||
count = collection.size(),
|
||||
end = start + count;
|
||||
return interpolate('<span class="count-current-shown">%(start)s-%(end)s</span>', {
|
||||
start: Math.min(start + 1, end),
|
||||
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('<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);
|
||||
},
|
||||
|
||||
filterNameLabel: function() {
|
||||
return interpolate('<span class="filter-column">%(filter_name)s</span>', {
|
||||
filter_name: this.view.filterDisplayName()
|
||||
}, true);
|
||||
},
|
||||
|
||||
nextPage: function() {
|
||||
this.view.nextPage();
|
||||
},
|
||||
|
||||
previousPage: function() {
|
||||
this.view.previousPage();
|
||||
}
|
||||
});
|
||||
|
||||
return '<p>' + interpolate(message, {
|
||||
current_item_range: this.currentItemRangeLabel(),
|
||||
total_items_count: this.totalItemsCountLabel(),
|
||||
asset_type: asset_type,
|
||||
sort_name: this.sortNameLabel()
|
||||
}, true) + "</p>";
|
||||
},
|
||||
|
||||
currentItemRangeLabel: function() {
|
||||
var view = this.view,
|
||||
collection = view.collection,
|
||||
start = collection.start,
|
||||
count = collection.size(),
|
||||
end = start + count;
|
||||
return interpolate('<span class="count-current-shown">%(start)s-%(end)s</span>', {
|
||||
start: Math.min(start + 1, end),
|
||||
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('<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);
|
||||
},
|
||||
|
||||
filterNameLabel: function() {
|
||||
return interpolate('<span class="filter-column">%(filter_name)s</span>', {
|
||||
filter_name: this.view.filterDisplayName()
|
||||
}, true);
|
||||
},
|
||||
|
||||
nextPage: function() {
|
||||
this.view.nextPage();
|
||||
},
|
||||
|
||||
previousPage: function() {
|
||||
this.view.previousPage();
|
||||
}
|
||||
});
|
||||
|
||||
return PagingHeader;
|
||||
}); // end define();
|
||||
return PagingHeader;
|
||||
}); // end define();
|
||||
|
||||
Reference in New Issue
Block a user