Browse 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 10 năm trước cách đây
mục cha
commit
06a7a5099a
2 tập tin đã thay đổi với 66 bổ sung0 xóa
  1. 20 0
      _includes/widget_templates.html
  2. 46 0
      js/projectDocumentationWidget.js

+ 20 - 0
_includes/widget_templates.html

@@ -29,6 +29,26 @@
     </div>
 </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">
     <div class="js-download-widget-selector">
         <select class='selector selectpicker'>

+ 46 - 0
js/projectDocumentationWidget.js

@@ -11,14 +11,19 @@ Spring.ProjectDocumentationWidget = function () {
   var quickStartEl = $('[data-download-widget-controls]');
   var mavenWidgetEl = $('.js-download-maven-widget');
   var documentationEl = $('.js-documentation-widget');
+  var resourcesEl = $('.project-sidebar-resource--wrapper');
 
   var projectUrl = apiBaseUrl + "/project_metadata/" + projectId;
   var promise = Spring.loadProject(projectUrl);
+  var coursesPromise = Spring.loadCourses("https://pivotallms.biglms.com/api/courses");
 
   promise.then(function (project) {
     Spring.buildDocumentationWidget(documentationEl, project);
     Spring.buildQuickStartWidget(quickStartEl, mavenWidgetEl, project);
   });
+  coursesPromise.then(function(courseware) {
+    Spring.buildCoursesWidget(resourcesEl, courseware);
+  });
 };
 
 Spring.buildDocumentationWidget = function (documentationEl, project) {
@@ -29,6 +34,17 @@ Spring.buildDocumentationWidget = function (documentationEl, project) {
   }).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) {
   new Spring.QuickStartSelectorView({
     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) {
   _.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) {
   _.extend(this, data);
   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({
   initialize: function () {
     var snippetType = this.options.snippetType;