diff --git a/lms/static/js/learner_dashboard/views/program_details_view.js b/lms/static/js/learner_dashboard/views/program_details_view.js index fd83ff42df..5211af4853 100644 --- a/lms/static/js/learner_dashboard/views/program_details_view.js +++ b/lms/static/js/learner_dashboard/views/program_details_view.js @@ -5,32 +5,30 @@ 'jquery', 'underscore', 'gettext', + 'edx-ui-toolkit/js/utils/html-utils', + 'js/learner_dashboard/views/program_header_view', 'text!../../../templates/learner_dashboard/program_details_view.underscore' ], - function( - Backbone, - $, - _, - gettext, - pageTpl - ) { + function(Backbone, $, _, gettext, HtmlUtils, HeaderView, pageTpl) { return Backbone.View.extend({ el: '.js-program-details-wrapper', - tpl: _.template(pageTpl), + tpl: HtmlUtils.template(pageTpl), - initialize: function(data) { - this.context = data.context; + initialize: function(options) { + this.programModel = new Backbone.Model(options); this.render(); }, render: function() { - this.$el.html(this.tpl(this.context)); + HtmlUtils.setHtml(this.$el, this.tpl()); this.postRender(); }, postRender: function() { - // Add subviews + this.headerView = new HeaderView({ + model: this.programModel + }); } }); } diff --git a/lms/static/js/learner_dashboard/views/program_header_view.js b/lms/static/js/learner_dashboard/views/program_header_view.js new file mode 100644 index 0000000000..bd20c401de --- /dev/null +++ b/lms/static/js/learner_dashboard/views/program_header_view.js @@ -0,0 +1,58 @@ +;(function (define) { + 'use strict'; + + define(['backbone', + 'jquery', + 'edx-ui-toolkit/js/utils/html-utils', + 'text!../../../templates/learner_dashboard/program_header_view.underscore', + 'picturefill' + ], + function(Backbone, $, HtmlUtils, pageTpl, picturefill) { + return Backbone.View.extend({ + breakpoints: { + min: { + 'medium': '768px', + 'large': '1180px', + 'x-large': '1440px' + } + }, + + el: '.js-program-header', + + tpl: HtmlUtils.template(pageTpl), + + initialize: function() { + this.render(); + }, + + render: function() { + var data = $.extend(this.model.toJSON(), { + breakpoints: this.breakpoints + }); + + if ( this.model.get('name') ) { + HtmlUtils.setHtml(this.$el, this.tpl(data)); + this.postRender(); + } + }, + + postRender: function() { + // To resolve a bug in IE with picturefill reevaluate images + if (navigator.userAgent.indexOf('MSIE') !== -1 || + navigator.appVersion.indexOf('Trident/') > 0){ + /* Microsoft Internet Explorer detected in. */ + window.setTimeout( function() { + this.reEvaluatePicture(); + }.bind(this), 100); + } + }, + + reEvaluatePicture: function(){ + picturefill({ + reevaluate: true + }); + } + }); + } + ); +}).call(this, define || RequireJS.define); diff --git a/lms/static/js/spec/learner_dashboard/program_details_header_spec.js b/lms/static/js/spec/learner_dashboard/program_details_header_spec.js new file mode 100644 index 0000000000..120f4cfabc --- /dev/null +++ b/lms/static/js/spec/learner_dashboard/program_details_header_spec.js @@ -0,0 +1,58 @@ +define([ + 'backbone', + 'jquery', + 'js/learner_dashboard/views/program_header_view' + ], function (Backbone, $, ProgramHeaderView) { + + 'use strict'; + + describe('Program Details Header View', function () { + var view = null, + programModel, + context = { + uuid: '12-ab', + name: 'Astrophysics', + subtitle: 'Learn contemporary astrophysics from the leaders in the field.', + category: 'xseries', + organizations: [ + { + display_name: 'Australian National University', + img: 'common/test/data/static/picture1.jpg', + key: 'ANUx' + } + ], + banner_image_urls: { + w1440h480: 'common/test/data/static/picture1.jpg', + w726h242: 'common/test/data/static/picture2.jpg', + w348h116: 'common/test/data/static/picture3.jpg' + }, + program_details_url: '/dashboard/programs' + }; + + beforeEach(function() { + setFixtures('
'); + programModel = new Backbone.Model(context); + view = new ProgramHeaderView({ + model: programModel + }); + view.render(); + }); + + afterEach(function() { + view.remove(); + }); + + it('should exist', function() { + expect(view).toBeDefined(); + }); + + it('should render the header based on the passed in model', function() { + expect(view.$('.title').html()).toEqual(context.name); + expect(view.$('.subtitle').html()).toEqual(context.subtitle); + expect(view.$('.org-logo').length).toEqual(context.organizations.length); + expect(view.$('.org-logo').attr('src')).toEqual(context.organizations[0].img); + expect(view.$('.org-logo').attr('alt')).toEqual(context.organizations[0].display_name + '\'s logo'); + }); + }); + } +); diff --git a/lms/static/js/spec/main.js b/lms/static/js/spec/main.js index daeda3a82c..1707029d3c 100644 --- a/lms/static/js/spec/main.js +++ b/lms/static/js/spec/main.js @@ -728,6 +728,7 @@ 'js/spec/learner_dashboard/collection_list_view_spec.js', 'js/spec/learner_dashboard/program_card_view_spec.js', 'js/spec/learner_dashboard/sidebar_view_spec.js', + 'js/spec/learner_dashboard/program_details_header_spec.js', 'js/spec/markdown_editor_spec.js', 'js/spec/navigation_spec.js', 'js/spec/search/search_spec.js', diff --git a/lms/static/sass/_build-learner-dashboard.scss b/lms/static/sass/_build-learner-dashboard.scss index 550649e1c3..d77a710ebd 100644 --- a/lms/static/sass/_build-learner-dashboard.scss +++ b/lms/static/sass/_build-learner-dashboard.scss @@ -3,4 +3,5 @@ // Uses the Pattern Library @import 'views/program-list'; +@import 'views/program-details'; @import 'elements/program-card'; diff --git a/lms/static/sass/views/_program-details.scss b/lms/static/sass/views/_program-details.scss new file mode 100644 index 0000000000..3fbbc401bb --- /dev/null +++ b/lms/static/sass/views/_program-details.scss @@ -0,0 +1,3 @@ +.org-logo { + width: 120px; +} diff --git a/lms/templates/learner_dashboard/program_details_view.underscore b/lms/templates/learner_dashboard/program_details_view.underscore index 4dee09557f..22c422b5c1 100644 --- a/lms/templates/learner_dashboard/program_details_view.underscore +++ b/lms/templates/learner_dashboard/program_details_view.underscore @@ -1,9 +1,4 @@ -
-
-

Program Title

-

Program Subtitle

-
-
+
diff --git a/lms/templates/learner_dashboard/program_header_view.underscore b/lms/templates/learner_dashboard/program_header_view.underscore new file mode 100644 index 0000000000..25aff76eed --- /dev/null +++ b/lms/templates/learner_dashboard/program_header_view.underscore @@ -0,0 +1,24 @@ + + + + + +

<%- name %>

+

<%- subtitle %>

+<%- gettext('Programs') %> +<%- StringUtils.interpolate( + gettext('{category}\'s program'), + {category: category} +) %> +<% _.each(organizations, function(org) { %> + +<% }) %> +<% if (category === 'xseries') { %> +

<%- StringUtils.interpolate( + gettext('To complete the {program} XSeries and earn an XSeries Certificate you must successfully earn a Verified Certificate in all courses shown below.'), + {program: name} + ) %>

+<% } %>