Merge branch 'authoring' of https://github.com/edx/edx-ora2 into grady/fix-option-deletion-wrapper

Conflicts:
	openassessment/xblock/static/css/openassessment.css
	openassessment/xblock/static/js/openassessment-lms.min.js

openassessment/templates/openassessmentblock/edit/oa_edit_criterion.html

@@ -4,7 +4,7 @@
     <div class="openassessment_criterion_header view-outline">
         <a class="action expand-collapse collapse"><i class="icon-caret-down ui-toggle-expansion"></i></a>
         <h6 class="openassessment_criterion_header_title">{% trans "Criterion" %}</h6>
-        <div class="openassessment_rubric_remove_button"><h2>{% trans "Remove" %}</h2></div>
+        <div class="openassessment_criterion_remove_button"><h2>{% trans "Remove" %}</h2></div>
     </div>
     <div class="openassessment_criterion_body wrapper-comp-settings">
         <ul class="list-input settings-list openassessment_criterion_basic_editor">

openassessment/templates/openassessmentblock/edit/oa_edit_option.html

@@ -3,7 +3,7 @@
 <li class="openassessment_criterion_option">
     <div class="openassessment_option_header">
         <span class="openassessment_option_header_title">{% trans "Option" %}</span>
-        <div class="openassessment_rubric_remove_button">
+        <div class="openassessment_criterion_option_remove_button">
             <h2>{% trans "Remove" %}</h2>
         </div>
     </div>

openassessment/xblock/static/js/src/lms/oa_container.js

@@ -10,11 +10,19 @@ For example, to create a container for an item called "test_item",
 the DOM should look something like:
     <div id="test_container" />
     <div id="test_item_template">
-        <div class="test_item_remove_button">Remove</div>
-        <p>This is the default value for the item.</p>
+        <div class="test_item">
+            <div class="test_item_remove_button">Remove</div>
+            <p>This is the default value for the item.</p>
+        </div>
     </div>
     <div id="test_item_add_button">Add</div>
 
+A critical property of this setup is that the element you want to
+include/duplicate is wrapped inside of a template element which is
+the one that your reference when referring to a template. In the
+above example, $("#test_item_template") would be the appropriate
+reference to the template.
+
 You can then initialize the container:
 >>> var container = $("#test_container").get(0);
 >>> var template = $("#test_item_template").get(0);
@@ -82,6 +90,8 @@ OpenAssessment.Container.prototype = {
         // Copy the template into the container
         // Remove any CSS IDs (since now the element is not unique)
         // and add the item class so we can find it later.
+        // Note that the element we add is the first child of the template element.
+        // For more on the template structure expected, see the class comment
         $(this.templateElement)
             .children().first()
             .clone()
@@ -94,7 +104,7 @@ OpenAssessment.Container.prototype = {
         // Since we just added the new element to the container,
         // it should be the last one.
         var container = this;
-        var containerItem = $("." + this.containerItemClass, this.containerElement).last()
+        var containerItem = $("." + this.containerItemClass, this.containerElement).last();
         containerItem.find('.' + this.removeButtonClass)
             .click(function(eventData) { container.remove(eventData.target); } );
 

openassessment/xblock/static/js/src/lms/oa_container_item.js

@@ -57,7 +57,7 @@ OpenAssessment.RubricCriterion = function(element) {
             containerElement: $(".openassessment_criterion_option_list", this.element).get(0),
             templateElement: $("#openassessment_option_template").get(0),
             addButtonElement: $(".openassessment_criterion_add_option", this.element).get(0),
-            removeButtonClass: "openassessment_rubric_remove_button",
+            removeButtonClass: "openassessment_criterion_option_remove_button",
             containerItemClass: "openassessment_criterion_option",
         }
     );

openassessment/xblock/static/js/src/studio/oa_edit_rubric.js

@@ -8,7 +8,7 @@ OpenAssessment.EditRubricView = function(element) {
             containerElement: $("#openassessment_criterion_list", this.element).get(0),
             templateElement: $("#openassessment_criterion_template", this.element).get(0),
             addButtonElement: $("#openassessment_rubric_add_criterion", this.element).get(0),
-            removeButtonClass: "openassessment_rubric_remove_button",
+            removeButtonClass: "openassessment_criterion_remove_button",
             containerItemClass: "openassessment_criterion",
         }
     );

openassessment/xblock/static/sass/oa/utilities/_developer.scss

@@ -390,6 +390,10 @@
     .openassessment_criterion {
       padding-bottom: 10px;
 
+      .openassessment_criterion_remove_button{
+        @extend .openassessment_rubric_remove_button;
+      }
+
       .openassessment_criterion_header {
         margin: 10px;
         padding: 5px;
@@ -501,6 +505,10 @@
     .openassessment_criterion_option{
       padding: 5px;
 
+      .openassessment_criterion_option_remove_button{
+        @extend .openassessment_rubric_remove_button;
+      }
+
       .openassessment_option_header{
         background-color: $edx-gray-l2;
         padding: 5px 5px 5px 10px;