show Save and Cancel button when admin change Instructor image asset path from…

show Save and Cancel button when admin change Instructor image asset path from Studio schedule and details page

cms/static/js/spec/views/settings/main_spec.js

@@ -333,7 +333,7 @@ define([
                             "name": "test_name",
                             "title": "test_title",
                             "organization": "test_org",
-                            "image": "",
+                            "image": "test_image",
                             "bio": "test_bio"
                         }]
                     }
@@ -344,6 +344,7 @@ define([
             this.view.$("#course-instructor-title-0").val('test_title').trigger('change');
             this.view.$("#course-instructor-organization-0").val('test_org').trigger('change');
             this.view.$("#course-instructor-bio-0").val('test_bio').trigger('change');
+            this.view.$("#course-instructor-image-0").val('test_image').trigger('change');
 
             this.view.saveView();
             AjaxHelpers.expectJsonRequest(

cms/static/js/views/settings/main.js

@@ -236,6 +236,13 @@ var DetailsView = ValidatingView.extend({
             this.model.set('instructor_info', {instructors: instructors});
             this.showNotificationBar();
             break;
+        case 'course-instructor-image-' + index:
+            instructors = this.model.get('instructor_info').instructors.slice(0);
+            instructors[index].image = $(event.currentTarget).val();
+            this.model.set('instructor_info', {instructors: instructors});
+            this.showNotificationBar();
+            this.updateImagePreview(event.currentTarget, '#course-instructor-image-preview-' + index);
+            break;
         case 'course-image-url':
             this.updateImageField(event, 'course_image_name', '#course-image');
             break;
@@ -308,10 +315,13 @@ var DetailsView = ValidatingView.extend({
         // If image path is entered directly, we need to strip the asset prefix
         image_name = _.last(image_name.split('block@'));
         this.model.set(image_field, image_name);
+        this.updateImagePreview(event.currentTarget, selector);
+    },
+    updateImagePreview: function(imagePathInputElement, previewSelector) {
         // Wait to set the image src until the user stops typing
         clearTimeout(this.imageTimer);
         this.imageTimer = setTimeout(function() {
-            $(selector).attr('src', $(event.currentTarget).val());
+            $(previewSelector).attr('src', $(imagePathInputElement).val());
         }, 1000);
     },
     removeVideo: function(event) {

cms/templates/js/course-instructor-details.underscore

@@ -26,11 +26,11 @@
   <div class="field image field-course-instructor-image current-instructor-image">
   <label for="course-instructor-image-<%- index %>"><%- gettext("Photo") %></label>
     <span class="wrapper-instructor-image">
-        <img class="instructor-image" src="<%- data['image']%>" alt="<%- gettext('Instructor Photo') %>" />
+        <img id="course-instructor-image-preview-<%- index %>" class="instructor-image" src="<%- data['image']%>" alt="<%- gettext('Instructor Photo') %>" />
     </span>
     <div class="wrapper-input">
       <div class="input">
-        <input type="text" dir="ltr" class="long new-instructor-image-url" id="course-instructor-image-<%- index %>" value="<%- data['image'] %>" data-field="image" placeholder="<%- gettext('Instructor Photo URL') %>" autocomplete="off" />
+        <input type="text" dir="ltr" class="long new-instructor-image-url" id="course-instructor-image-<%- index %>" value="<%- data['image'] %>" data-index="<%- index %>"" data-field="image" placeholder="<%- gettext('Instructor Photo URL') %>" autocomplete="off" />
         <span class="tip tip-stacked"><%- gettext("Please add a photo of the instructor (Note: only JPEG or PNG format supported)")%></span>
       </div>
       <button type="button" class="action action-upload-instructor-image" data-index=<%- index %>><%- gettext("Upload Photo") %></button>