Merge pull request #12550 from edx/alasdair/ECOM-4216-program-details-header

ECOM-4216 Program Details Header View

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
+                    });
                 }
             });
         }

lms/static/js/learner_dashboard/views/program_header_view.js

+;(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);

lms/static/js/spec/learner_dashboard/program_details_header_spec.js

+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('<div class="js-program-header"></div>');
+                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');
+            });
+        });
+    }
+);

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',

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';

lms/static/sass/views/_program-details.scss

+.org-logo {
+  width: 120px;
+}

lms/templates/learner_dashboard/program_details_view.underscore

-<header class="program-header">
-    <div>
-        <h2 class="hd-2">Program Title</h2>
-        <p>Program Subtitle</p>
-    </div>
-</header>
+<header class="js-program-header program-header"></header>
 <div class="js-program-progress-view"></div>
 <div class="js-course-list"></div>
 <aside class="js-course-sidebar"></aside>

lms/templates/learner_dashboard/program_header_view.underscore

+<picture>
+    <source srcset="<%- banner_image_urls.w1440h480 %>" media="(min-width: <%- breakpoints.min['x-large'] %>)">
+    <source srcset="<%- banner_image_urls.w726h242 %>" media="(min-width: <%- breakpoints.min.medium %>)">
+    <img class="banner-image" srcset="<%- banner_image_urls.w348h116 %>" alt="">
+</picture>
+<h2 class="hd-2 title"><%- name %></h2>
+<p class="subtitle"><%- subtitle %></p>
+<a href="<%- program_details_url %>" class="breadcrumb"><%- gettext('Programs') %></a>
+<span><%- StringUtils.interpolate(
+    gettext('{category}\'s program'),
+    {category: category}
+) %></span>
+<% _.each(organizations, function(org) { %>
+	<img src="<%- org.img %>" class="org-logo" alt="<%- StringUtils.interpolate(
+	    gettext('{organization}\'s logo'),
+	    {organization: org.display_name}
+	) %>">
+<% }) %>
+<% if (category === 'xseries') { %>
+	<p><%- 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}
+    ) %></p>
+<% } %>