Parcourir la source

Display Pivotal Education related courseware

This change adds a new "Related Courseware" section in the side
container; this section lists links to courses and talks that are
relevant to the current project page.

Relevant content is fetched by the browser, with an AJAX request sent to
the Pivotal Education LMS API. This API uses the Referrer HTTP header as
input parameter to its content selection algorithm.

Note that CORS HTTP headers are also used to allow/disallow AJAX cross
domain requests.
Brian Clozel il y a 10 ans
Parent
commit
bf15ee8a6d
2 fichiers modifiés avec 66 ajouts et 0 suppressions
  1. 20 0
      _includes/widget_templates.html
  2. 46 0
      js/projectDocumentationWidget.js

+ 20 - 0
_includes/widget_templates.html

@@ -29,6 +29,26 @@
     </div>
     </div>
 </script>
 </script>
 
 
+<script type="text/html" id="project-courses-widget-template">
+    <h2>Related Courseware</h2>
+    {@ if(hasCourses) { @}
+        <h3 id="education">Pivotal Education</h3>
+        <ul>
+        {@ _.each(courses, function(course) { @}
+          <li><a href="{@= course.url @}">{@= course.name @}</a></li>
+        {@ }); @}
+        </ul>
+    {@ } @}
+    {@ if(hasTalks) { @}
+        <h3 id="talks">Engineering Talks</h3>
+        <ul>
+        {@ _.each(talks, function(talk) { @}
+          <li><a href="{@= talk.url @}">{@= talk.name @}</a></li>
+        {@ }); @}
+        </ul>
+    {@ } @}
+</script>
+
 <script type="text/html" id="project-download-widget-controls-template">
 <script type="text/html" id="project-download-widget-controls-template">
     <div class="js-download-widget-selector">
     <div class="js-download-widget-selector">
         <select class='selector selectpicker'>
         <select class='selector selectpicker'>

+ 46 - 0
js/projectDocumentationWidget.js

@@ -11,14 +11,19 @@ Spring.ProjectDocumentationWidget = function () {
   var quickStartEl = $('[data-download-widget-controls]');
   var quickStartEl = $('[data-download-widget-controls]');
   var mavenWidgetEl = $('.js-download-maven-widget');
   var mavenWidgetEl = $('.js-download-maven-widget');
   var documentationEl = $('.js-documentation-widget');
   var documentationEl = $('.js-documentation-widget');
+  var resourcesEl = $('.project-sidebar-resource--wrapper');
 
 
   var projectUrl = apiBaseUrl + "/project_metadata/" + projectId;
   var projectUrl = apiBaseUrl + "/project_metadata/" + projectId;
   var promise = Spring.loadProject(projectUrl);
   var promise = Spring.loadProject(projectUrl);
+  var coursesPromise = Spring.loadCourses("https://pivotallms.biglms.com/api/courses");
 
 
   promise.then(function (project) {
   promise.then(function (project) {
     Spring.buildDocumentationWidget(documentationEl, project);
     Spring.buildDocumentationWidget(documentationEl, project);
     Spring.buildQuickStartWidget(quickStartEl, mavenWidgetEl, project);
     Spring.buildQuickStartWidget(quickStartEl, mavenWidgetEl, project);
   });
   });
+  coursesPromise.then(function(courseware) {
+    Spring.buildCoursesWidget(resourcesEl, courseware);
+  });
 };
 };
 
 
 Spring.buildDocumentationWidget = function (documentationEl, project) {
 Spring.buildDocumentationWidget = function (documentationEl, project) {
@@ -29,6 +34,17 @@ Spring.buildDocumentationWidget = function (documentationEl, project) {
   }).render();
   }).render();
 
 
 }
 }
+Spring.buildCoursesWidget = function (resourcesEl, courseware) {
+  if(courseware.hasContent) {
+    var tpl = $("#project-courses-widget-template").text();
+    var view = new Spring.CoursesWidgetView({
+      el: resourcesEl,
+      model: courseware,
+      template: $("#project-courses-widget-template").text()
+    });
+    view.render();
+  }
+}
 Spring.buildQuickStartWidget = function (quickStartEl, mavenWidgetEl, project) {
 Spring.buildQuickStartWidget = function (quickStartEl, mavenWidgetEl, project) {
   new Spring.QuickStartSelectorView({
   new Spring.QuickStartSelectorView({
     el: quickStartEl,
     el: quickStartEl,
@@ -47,6 +63,13 @@ Spring.loadProject = function (url) {
     });
     });
 }
 }
 
 
+Spring.loadCourses = function (url) {
+  return $.getJSON(url)
+    .then(function(data) {
+      return new Spring.Courseware(data);
+  });
+}
+
 Spring.Release = function (data) {
 Spring.Release = function (data) {
   _.extend(this, data);
   _.extend(this, data);
 }
 }
@@ -63,6 +86,15 @@ Spring.Release.prototype = {
   }
   }
 }
 }
 
 
+Spring.Courseware = function (data) {
+  this.courses = data["edu1"];
+  this.talks = data["eng1"];
+  this.hasCourses = this.courses != null;
+  this.hasTalks = this.talks != null;
+  this.hasContent = this.hasTalks || this.hasCourses;
+  return this;
+};
+
 Spring.Project = function (data) {
 Spring.Project = function (data) {
   _.extend(this, data);
   _.extend(this, data);
   var self = this;
   var self = this;
@@ -87,6 +119,20 @@ Spring.DocumentationWidgetView = Backbone.View.extend({
   }
   }
 });
 });
 
 
+Spring.CoursesWidgetView = Backbone.View.extend({
+  initialize: function () {
+    this.template = _.template(this.options.template);
+    _.bindAll(this, "render");
+  },
+
+  render: function () {
+    this.$el.append(
+      this.template(this.model)
+    );
+    return this;
+  }
+});
+
 Spring.SnippetView = Backbone.View.extend({
 Spring.SnippetView = Backbone.View.extend({
   initialize: function () {
   initialize: function () {
     var snippetType = this.options.snippetType;
     var snippetType = this.options.snippetType;