Add generic paging framework
Authors: - Daniel Friedman - Ben McMorran - Peter Fogg TNL-1892
This commit is contained in:
Ben McMorran
committed by
Daniel Friedman
Daniel Friedman
parent
65a36a64df
commit
351e491c82
@@ -6,6 +6,7 @@
|
||||
* "square_card" or "list_card". Defaults to "square_card".
|
||||
* - action (function): Action to take when the action button is clicked. Defaults to a no-op.
|
||||
* - cardClass (string or function): Class name for this card's DOM element. Defaults to the empty string.
|
||||
* - pennant (string or function): Text of the card's pennant. No pennant is displayed if this value is falsy.
|
||||
* - title (string or function): Title of the card. Defaults to the empty string.
|
||||
* - description (string or function): Description of the card. Defaults to the empty string.
|
||||
* - details (array or function): Array of child views to be rendered as details of this card. The class "meta-detail"
|
||||
@@ -17,10 +18,10 @@
|
||||
;(function (define) {
|
||||
'use strict';
|
||||
define(['jquery',
|
||||
'underscore',
|
||||
'backbone',
|
||||
'text!templates/components/card/square_card.underscore',
|
||||
'text!templates/components/card/list_card.underscore'],
|
||||
function ($, Backbone, squareCardTemplate, listCardTemplate) {
|
||||
'text!templates/components/card/card.underscore'],
|
||||
function ($, _, Backbone, cardTemplate) {
|
||||
var CardView = Backbone.View.extend({
|
||||
events: {
|
||||
'click .action' : 'action'
|
||||
@@ -40,13 +41,11 @@
|
||||
},
|
||||
|
||||
initialize: function () {
|
||||
this.template = this.switchOnConfiguration(
|
||||
_.template(squareCardTemplate),
|
||||
_.template(listCardTemplate)
|
||||
);
|
||||
this.render();
|
||||
},
|
||||
|
||||
template: _.template(cardTemplate),
|
||||
|
||||
switchOnConfiguration: function (square_result, list_result) {
|
||||
return this.callIfFunction(this.configuration) === 'square_card' ?
|
||||
square_result : list_result;
|
||||
@@ -61,20 +60,30 @@
|
||||
},
|
||||
|
||||
className: function () {
|
||||
return 'card ' +
|
||||
this.switchOnConfiguration('square-card', 'list-card') +
|
||||
' ' + this.callIfFunction(this.cardClass);
|
||||
var result = 'card ' +
|
||||
this.switchOnConfiguration('square-card', 'list-card') + ' ' +
|
||||
this.callIfFunction(this.cardClass);
|
||||
if (this.callIfFunction(this.pennant)) {
|
||||
result += ' has-pennant';
|
||||
}
|
||||
return result;
|
||||
},
|
||||
|
||||
render: function () {
|
||||
var maxLength = 72,
|
||||
description = this.callIfFunction(this.description);
|
||||
if (description.length > maxLength) {
|
||||
description = description.substring(0, maxLength).trim() + '...'
|
||||
}
|
||||
this.$el.html(this.template({
|
||||
pennant: this.callIfFunction(this.pennant),
|
||||
title: this.callIfFunction(this.title),
|
||||
description: this.callIfFunction(this.description),
|
||||
description: description,
|
||||
action_class: this.callIfFunction(this.actionClass),
|
||||
action_url: this.callIfFunction(this.actionUrl),
|
||||
action_content: this.callIfFunction(this.actionContent)
|
||||
}));
|
||||
var detailsEl = this.$el.find('.card-meta-details');
|
||||
var detailsEl = this.$el.find('.card-meta');
|
||||
_.each(this.callIfFunction(this.details), function (detail) {
|
||||
// Call setElement to rebind event handlers
|
||||
detail.setElement(detail.el).render();
|
||||
@@ -86,6 +95,7 @@
|
||||
|
||||
action: function () { },
|
||||
cardClass: '',
|
||||
pennant: '',
|
||||
title: '',
|
||||
description: '',
|
||||
details: [],
|
||||
|
||||
@@ -12,13 +12,20 @@
|
||||
it('can render itself as a square card', function () {
|
||||
var view = new CardView({ configuration: 'square_card' });
|
||||
expect(view.$el).toHaveClass('square-card');
|
||||
expect(view.$el.find('.card-meta-wrapper .action').length).toBe(1);
|
||||
expect(view.$el.find('.wrapper-card-meta .action').length).toBe(1);
|
||||
});
|
||||
|
||||
it('can render itself as a list card', function () {
|
||||
var view = new CardView({ configuration: 'list_card' });
|
||||
expect(view.$el).toHaveClass('list-card');
|
||||
expect(view.$el.find('.card-core-wrapper .action').length).toBe(1);
|
||||
expect(view.$el.find('.wrapper-card-meta .action').length).toBe(1);
|
||||
});
|
||||
|
||||
it('renders a pennant only if the pennant value is truthy', function () {
|
||||
var view = new (CardView.extend({ pennant: '' }))();
|
||||
expect(view.$el.find('.card-type').length).toBe(0);
|
||||
view = new (CardView.extend({ pennant: 'Test Pennant' }))();
|
||||
expect(view.$el.find('.card-type').length).toBe(1);
|
||||
});
|
||||
|
||||
it('can render child views', function () {
|
||||
@@ -38,6 +45,7 @@
|
||||
|
||||
var verifyContent = function (view) {
|
||||
expect(view.$el).toHaveClass('test-card');
|
||||
expect(view.$el.find('.card-type').text()).toContain('Pennant');
|
||||
expect(view.$el.find('.card-title').text()).toContain('A test title');
|
||||
expect(view.$el.find('.card-description').text()).toContain('A test description');
|
||||
expect(view.$el.find('.action')).toHaveClass('test-action');
|
||||
@@ -45,9 +53,10 @@
|
||||
expect(view.$el.find('.action').text()).toContain('A test action');
|
||||
};
|
||||
|
||||
it('can have strings for cardClass, title, description, and action', function () {
|
||||
it('can have strings for cardClass, pennant, title, description, and action', function () {
|
||||
var view = new (CardView.extend({
|
||||
cardClass: 'test-card',
|
||||
pennant: 'Pennant',
|
||||
title: 'A test title',
|
||||
description: 'A test description',
|
||||
actionClass: 'test-action',
|
||||
@@ -57,9 +66,10 @@
|
||||
verifyContent(view);
|
||||
});
|
||||
|
||||
it('can have functions for cardClass, title, description, and action', function () {
|
||||
it('can have functions for cardClass, pennant, title, description, and action', function () {
|
||||
var view = new (CardView.extend({
|
||||
cardClass: function () { return 'test-card'; },
|
||||
pennant: function () { return 'Pennant'; },
|
||||
title: function () { return 'A test title'; },
|
||||
description: function () { return 'A test description'; },
|
||||
actionClass: function () { return 'test-action'; },
|
||||
|
||||
@@ -31,6 +31,7 @@
|
||||
'backbone': 'xmodule_js/common_static/js/vendor/backbone-min',
|
||||
'backbone.associations': 'xmodule_js/common_static/js/vendor/backbone-associations-min',
|
||||
'backbone.paginator': 'xmodule_js/common_static/js/vendor/backbone.paginator.min',
|
||||
'URI': 'xmodule_js/common_static/js/vendor/URI.min',
|
||||
"backbone-super": "js/vendor/backbone-super",
|
||||
'tinymce': 'xmodule_js/common_static/js/vendor/tinymce/js/tinymce/tinymce.full.min',
|
||||
'jquery.tinymce': 'xmodule_js/common_static/js/vendor/tinymce/js/tinymce/jquery.tinymce',
|
||||
|
||||
@@ -57,6 +57,7 @@ lib_paths:
|
||||
- xmodule_js/common_static/js/vendor/underscore-min.js
|
||||
- xmodule_js/common_static/js/vendor/underscore.string.min.js
|
||||
- xmodule_js/common_static/js/vendor/backbone-min.js
|
||||
- xmodule_js/common_static/js/vendor/backbone.paginator.min.js
|
||||
- xmodule_js/common_static/js/vendor/edxnotes/annotator-full.min.js
|
||||
- xmodule_js/common_static/js/test/i18n.js
|
||||
- xmodule_js/common_static/js/vendor/date.js
|
||||
|
||||
@@ -49,6 +49,7 @@
|
||||
"text": 'js/vendor/requirejs/text',
|
||||
"backbone": "js/vendor/backbone-min",
|
||||
"backbone-super": "js/vendor/backbone-super",
|
||||
"backbone.paginator": "js/vendor/backbone.paginator.min",
|
||||
"underscore.string": "js/vendor/underscore.string.min",
|
||||
// Files needed by OVA
|
||||
"annotator": "js/vendor/ova/annotator-full",
|
||||
@@ -89,6 +90,10 @@
|
||||
deps: ["underscore", "jquery"],
|
||||
exports: "Backbone"
|
||||
},
|
||||
"backbone.paginator": {
|
||||
deps: ["backbone"],
|
||||
exports: "Backbone.Paginator"
|
||||
},
|
||||
"backbone-super": {
|
||||
deps: ["backbone"]
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user