Switch to new notification/Save/Cancel mechanism (attached to bottom of viewport).

cms/static/js/views/settings/advanced_view.js

@@ -10,14 +10,13 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
     // Model class is CMS.Models.Settings.Advanced
     events : {
         'click .delete-button' : "deleteEntry",
-        'click .save-button' : "saveView",
-        'click .cancel-button' : "revertView",
+//        'click .save-button' : "saveView",      TODO: put back once Advanced is not in tab view
+//        'click .cancel-button' : "revertView",  with current code, must attach listener in initialize method
         'click .new-button' : "addEntry",
         // update model on changes
         'change #course-advanced-policy-key' : "updateKey",
-        'keydown #course-advanced-policy-key' : "enableSaveCancelButtons"
+        'keydown #course-advanced-policy-key' : "showSaveCancelButtons"
         // TODO enable/disable save based on validation (currently enabled whenever there are changes)
-        // TODO enable/disable new button?
     },
     initialize : function() {
         var self = this;
@@ -29,6 +28,8 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
                 self.render();
             }
         );
+        $('.save-button').on('click', this, this.saveView);
+        $('.cancel-button').on('click', this, this.revertView);
         this.model.on('error', this.handleValidationError, this);
     },
     render: function() {
@@ -58,7 +59,7 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
         CodeMirror.fromTextArea(textarea, {
             mode: "application/json", lineNumbers: false, lineWrapping: true,
             onChange: function() {
-                self.enableSaveCancelButtons();
+                self.showSaveCancelButtons();
             },
             onBlur: function (mirror) {
                 var key = $(mirror.getWrapperElement()).closest('.row').children('.key').attr('id');
@@ -78,31 +79,29 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
                 this.$el.find(".message-status.error").addClass("is-shown");
             }
             else if (type === this.unsaved_changes) {
-                this.$el.find(".message-status.warning").addClass("is-shown");
+                $('.wrapper-notification').addClass('is-shown');
             }
             else if (type === this.successful_changes) {
                 this.$el.find(".message-status.confirm").addClass("is-shown");
-                this.disableSaveCancelButtons();
+                this.hideSaveCancelButtons();
             }
         }
         else {
             // This is the case of the page first rendering.
-            this.disableSaveCancelButtons();
+            this.hideSaveCancelButtons();
         }
     },
 
-    enableSaveCancelButtons: function() {
-       if (!this.buttonsEnabled) {
-           this.$el.find(".save-button").removeClass('disabled');
-           this.$el.find(".cancel-button").show();
-           this.buttonsEnabled = true;
+    showSaveCancelButtons: function() {
+       if (!this.buttonsVisible) {
+           $('.wrapper-notification').addClass('is-shown');
+           this.buttonsVisible = true;
        }
     },
 
-    disableSaveCancelButtons: function() {
-        this.$el.find(".save-button").addClass('disabled');
-        this.$el.find(".cancel-button").hide();
-        this.buttonsEnabled = false;
+    hideSaveCancelButtons: function() {
+        $('.wrapper-notification').removeClass('is-shown');
+        this.buttonsVisible = false;
     },
 
     toggleNewButton: function (enable) {
@@ -134,8 +133,8 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
         // TODO one last verification scan:
         //    call validateKey on each to ensure proper format
         //    check for dupes
-        var self = this;
-        this.model.save({},
+        var self = event.data;
+        self.model.save({},
             {
             success : function() {
                 self.render();
@@ -145,10 +144,10 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
         });
     },
     revertView : function(event) {
-        this.model.deleteKeys = [];
-        var self = this;
-        this.model.clear({silent : true});
-        this.model.fetch({
+        var self = event.data;
+        self.model.deleteKeys = [];
+        self.model.clear({silent : true});
+        self.model.fetch({
             success : function() { self.render(); },
             error : CMS.ServerError
         });

cms/templates/settings.html

@@ -28,12 +28,6 @@ from contentstore import utils
   <script type="text/javascript">
     $(document).ready(function(){
 
-        // to show/hide the alert, just toggle the "is-shown" class with JS - CSS handles the rest
-        $('.test-notification').click(function(e){
-          e.preventDefault();
-          $('.wrapper-notification').toggleClass('is-shown');
-        });        
-
         // proactively populate advanced b/c it has the filtered list and doesn't really follow the model pattern
         var advancedModel = new CMS.Models.Settings.Advanced(${advanced_dict | n}, {parse:true});
         advancedModel.blacklistKeys = ${advanced_blacklist | n};
@@ -59,8 +53,7 @@ from contentstore import utils
 <%block name="content">
   <!-- -->
   <div class="main-wrapper">
-    <div class="inner-wrapper">      
-      <a href="#" class="test-notification">Test Notification (for testing purposes)!</a>
+    <div class="inner-wrapper">
 
       <h1>Settings</h1>
 
@@ -753,10 +746,6 @@ from contentstore import utils
               There was an error saving your information. Please see below.
             </div>
 
-            <div class="message message-status warning is-shown">
-              Your changes will not take effect until you press "Save" on the bottom of the page.
-            </div>
-
             <section class="settings-advanced-policies">
               <header>
                 <h3>Manual Policy Definition</h3>
@@ -774,8 +763,6 @@ from contentstore import utils
 
                   <!-- advanced policy actions -->
                   <div class="actions actions-advanced-policies">
-                    <a href="#" class="save-button">Save</a>
-                    <a href="#" class="cancel-button">Cancel</a>
                     <a href="#" class="new-button new-advanced-policy-item add-policy-data">
                       <span class="plus-icon white"></span>New Manual Policy
                     </a>
@@ -795,7 +782,7 @@ from contentstore import utils
     <div class="notification warning">
       <div class="copy">
         <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
-        <p><strong>Note: </strong>Your changes will not take effect until you <strong>save your progress</strong>.</p> 
+        <p><strong>Note: </strong>Your changes will not take effect until you <strong>save your progress</strong>.</p>
       </div>
 
       <div class="actions">