Merge pull request #12126 from edx/alasdair/ECOM-3986-program-list-page-eventing

Update the program listing page sidebar approach

lms/static/js/learner_dashboard/views/explore_new_programs_view.js

+;(function (define) {
+    'use strict';
+
+    define(['backbone',
+            'jquery',
+            'underscore',
+            'gettext',
+            'text!../../../templates/learner_dashboard/explore_new_programs.underscore'
+           ],
+         function(
+             Backbone,
+             $,
+             _,
+             gettext,
+             exploreTpl
+         ) {
+            return Backbone.View.extend({
+                el: '.program-advertise',
+
+                tpl: _.template(exploreTpl),
+
+                initialize: function(data) {
+                    this.context = data.context;
+                    this.$parentEl = $(this.parentEl);
+
+                    if (this.context.xseriesUrl){
+                        // Only render if there is an XSeries link
+                        this.render();
+                    } else {
+                        /**
+                         *  If not rendering remove el because
+                         *  styles are applied to it
+                         */
+                        this.remove();
+                    }
+                },
+
+                render: function() {
+                    this.$el.html(this.tpl(this.context));  
+                }
+            });
+        }
+    );
+}).call(this, define || RequireJS.define);

lms/static/js/learner_dashboard/views/program_card_view.js

@@ -17,16 +17,21 @@
              picturefill
          ) {
             return Backbone.View.extend({
+
                 className: 'program-card',
+
                 tpl: _.template(programCardTpl),
+
                 initialize: function() {
                     this.render();
                 },
+
                 render: function() {
                     var templated = this.tpl(this.model.toJSON());
                     this.$el.html(templated);
                     this.postRender();
                 },
+
                 postRender: function() {
                     if(navigator.userAgent.indexOf('MSIE') !== -1 ||
                         navigator.appVersion.indexOf('Trident/') > 0){
@@ -36,6 +41,7 @@
                         }.bind(this), 100);
                     }
                 },
+
                 // Defer loading the rest of the page to limit FOUC
                 reLoadBannerImage: function() {
                     var $img = this.$('.program_card .banner-image'),

lms/static/js/learner_dashboard/views/sidebar_view.js

@@ -5,6 +5,7 @@
             'jquery',
             'underscore',
             'gettext',
+            'js/learner_dashboard/views/explore_new_programs_view',
             'text!../../../templates/learner_dashboard/sidebar.underscore'
            ],
          function(
@@ -12,19 +13,27 @@
              $,
              _,
              gettext,
+             NewProgramsView,
              sidebarTpl
          ) {
             return Backbone.View.extend({
                 el: '.sidebar',
+
                 tpl: _.template(sidebarTpl),
+
                 initialize: function(data) {
                     this.context = data.context;
                 },
+
                 render: function() {
-                    if (this.context.xseriesUrl){
-                        //Only show the xseries advertising panel if the link is passed in
                     this.$el.html(this.tpl(this.context));
-                    }
+                    this.postRender();
+                },
+
+                postRender: function() {
+                    this.newProgramsView = new NewProgramsView({
+                        context: this.context
+                    });
                 }
             });
         }

lms/static/js/spec/learner_dashboard/sidebar_view_spec.js

@@ -34,7 +34,7 @@ define([
             it('should load the xseries advertising based on passed in xseries URL', function() {
                 var $sidebar = view.$el;
                 expect($sidebar.find('.program-advertise .advertise-message').html().trim())
-                    .toEqual('Browse recently launched courses and see what\'s new in our favorite subjects');
+                    .toEqual('Browse recently launched courses and see what\'s new in your favorite subjects');
                 expect($sidebar.find('.program-advertise .ad-link a').attr('href')).toEqual(context.xseriesUrl);
             });
 

lms/templates/learner_dashboard/explore_new_programs.underscore

+<div class="advertise-message">
+    <%- gettext('Browse recently launched courses and see what\'s new in your favorite subjects') %>
+</div>
+<div class="ad-link">
+    <a href="<%- xseriesUrl %>" class="btn">
+        <i class="icon fa fa-search" aria-hidden="true"></i> 
+        <span><%- gettext('Explore New XSeries') %></span>
+    </a>
+</div>

lms/templates/learner_dashboard/sidebar.underscore

-<div class="program-advertise">
-    <div class="advertise-message">
-        <%- gettext('Browse recently launched courses and see what\'s new in our favorite subjects') %>
-	</div>
-    <div class="ad-link">
-        <a href="<%- xseriesUrl %>" class="btn">
-            <i class="icon fa fa-search" aria-hidden="true"></i> 
-            <span><%- gettext('Explore New XSeries') %></span>
-        </a>
-    </div
-</div>
-<div class="certificate-container">
-</div>
+<div class="program-advertise"></div>
+<div class="certificate-container"></div>