Studio support of Section Highlights

cms/static/js/models/xblock_info.js

@@ -159,7 +159,12 @@ function(Backbone, _, str, ModuleUtils) {
              * some additional fields that are not stored in the course descriptor
              * (for example, which groups are selected for this particular XBlock).
              */
-            user_partitions: null
+            user_partitions: null,
+            /**
+             * This xBlock's Highlights to message to learners.
+             */
+            highlights: null,
+            highlights_enabled: null
         },
 
         initialize: function() {

cms/static/js/views/course_outline.js

@@ -197,6 +197,19 @@ define(['jquery', 'underscore', 'js/views/xblock_outline', 'common/js/components
                 }
             },
 
+            highlightsXBlock: function() {
+                var modal = CourseOutlineModalsFactory.getModal('highlights', this.model, {
+                    onSave: this.refresh.bind(this),
+                    xblockType: XBlockViewUtils.getXBlockType(
+                        this.model.get('category'), this.parentView.model, true
+                    )
+                });
+
+                if (modal) {
+                    modal.show();
+                }
+            },
+
             addButtonActions: function(element) {
                 XBlockOutlineView.prototype.addButtonActions.apply(this, arguments);
                 element.find('.configure-button').click(function(event) {
@@ -207,6 +220,10 @@ define(['jquery', 'underscore', 'js/views/xblock_outline', 'common/js/components
                     event.preventDefault();
                     this.publishXBlock();
                 }.bind(this));
+                element.find('.highlights-button').click(function(event) {
+                    event.preventDefault();
+                    this.highlightsXBlock();
+                }.bind(this));
             },
 
             makeContentDraggable: function(element) {

cms/static/js/views/modals/base_modal.js

@@ -5,7 +5,7 @@
  *
  *   getTitle():
  *     returns the title for the modal.
- *   getHTMLContent():
+ *   getContentHtml():
  *     returns the HTML content to be shown inside the modal.
  *
  * A modal implementation should also provide the following options:

cms/static/js/views/modals/course_outline_modals.js

@@ -13,10 +13,11 @@ define(['jquery', 'backbone', 'underscore', 'gettext', 'js/views/baseview',
     $, Backbone, _, gettext, BaseView, BaseModal, date, XBlockViewUtils, DateUtils, HtmlUtils, StringUtils
 ) {
     'use strict';
-    var CourseOutlineXBlockModal, SettingsXBlockModal, PublishXBlockModal, AbstractEditor, BaseDateEditor,
+    var CourseOutlineXBlockModal, SettingsXBlockModal, PublishXBlockModal, HighlightsXBlockModal,
+        AbstractEditor, BaseDateEditor,
         ReleaseDateEditor, DueDateEditor, GradingEditor, PublishEditor, AbstractVisibilityEditor,
         StaffLockEditor, UnitAccessEditor, ContentVisibilityEditor, TimedExaminationPreferenceEditor,
-        AccessEditor, ShowCorrectnessEditor;
+        AccessEditor, ShowCorrectnessEditor, HighlightsEditor;
 
     CourseOutlineXBlockModal = BaseModal.extend({
         events: _.extend({}, BaseModal.prototype.events, {
@@ -206,6 +207,38 @@ define(['jquery', 'backbone', 'underscore', 'gettext', 'js/views/baseview',
         }
     });
 
+    HighlightsXBlockModal = CourseOutlineXBlockModal.extend({
+        initialize: function() {
+            CourseOutlineXBlockModal.prototype.initialize.call(this);
+            if (this.options.xblockType) {
+                this.options.modalName = 'highlights-' + this.options.xblockType;
+            }
+        },
+
+        getTitle: function() {
+            return StringUtils.interpolate(
+                gettext('Highlights for {display_name}'),
+                {display_name: this.model.get('display_name')}
+            );
+        },
+
+        getIntroductionMessage: function() {
+            return StringUtils.interpolate(
+                gettext(
+                    'The highlights you provide here are messaged (i.e., emailed) to learners. Each {item}\'s ' +
+                    'highlights are emailed at the time that we expect the learner to start working on that {item}. ' +
+                    'At this time, we assume that each {item} will take 1 week to complete.'
+                ),
+                {item: this.options.xblockType}
+            );
+        },
+
+        addActionButtons: function() {
+            this.addActionButton('save', gettext('Save'), true);
+            this.addActionButton('cancel', gettext('Cancel'));
+        }
+    });
+
     AbstractEditor = BaseView.extend({
         tagName: 'section',
         templateName: null,
@@ -844,12 +877,58 @@ define(['jquery', 'backbone', 'underscore', 'gettext', 'js/views/baseview',
         }
     });
 
+    HighlightsEditor = AbstractEditor.extend({
+        templateName: 'highlights-editor',
+        className: 'edit-show-highlights',
+
+        currentValue: function() {
+            var highlights = [];
+            $('.highlight-input-text').each(function() {
+                var value = $(this).val();
+                if (value !== '' && value !== null) {
+                    highlights.push(value);
+                }
+            });
+            return highlights;
+        },
+
+        hasChanges: function() {
+            return this.model.get('highlights') !== this.currentValue();
+        },
+
+        getRequestData: function() {
+            if (this.hasChanges()) {
+                return {
+                    publish: 'republish',
+                    metadata: {
+                        highlights: this.currentValue()
+                    }
+                };
+            } else {
+                return {};
+            }
+        },
+        getContext: function() {
+            return $.extend(
+                {},
+                AbstractEditor.prototype.getContext.call(this),
+                {
+                    highlights: this.model.get('highlights') || []
+                }
+            );
+        }
+    });
+
     return {
         getModal: function(type, xblockInfo, options) {
             if (type === 'edit') {
                 return this.getEditModal(xblockInfo, options);
             } else if (type === 'publish') {
                 return this.getPublishModal(xblockInfo, options);
+            } else if (type === 'highlights') {
+                return this.getHighlightsModal(xblockInfo, options);
+            } else {
+                return null;
             }
         },
 
@@ -918,6 +997,13 @@ define(['jquery', 'backbone', 'underscore', 'gettext', 'js/views/baseview',
                 editors: [PublishEditor],
                 model: xblockInfo
             }, options));
+        },
+
+        getHighlightsModal: function(xblockInfo, options) {
+            return new HighlightsXBlockModal($.extend({
+                editors: [HighlightsEditor],
+                model: xblockInfo
+            }, options));
         }
     };
 });

cms/static/sass/views/_outline.scss

@@ -634,6 +634,23 @@
     }
   }
 
+  // outline: highlight settings
+  .highlights-button {
+    cursor: pointer;
+    color: $uxpl-blue-base;
+  }
+
+  .highlight-input-text {
+    width: 100%;
+    margin-bottom: 5px;
+    margin-top: 5px;
+  }
+
+  .highlights-description {
+    font-size: 80%;
+    font-weight: bolder;
+  }
+
   // outline: edit item settings
   .wrapper-modal-window-bulkpublish-section,
   .wrapper-modal-window-bulkpublish-subsection,