Refactor Advanced Settings page to use Backbone notifications.

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

@@ -20,9 +20,6 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
                 self.render();
             }
         );
-        // because these are outside of this.$el, they can't be in the event hash
-        $('.save-button').on('click', this, this.saveView);
-        $('.cancel-button').on('click', this, this.revertView);
         this.listenTo(this.model, 'invalid', this.handleValidationError);
     },
     render: function() {
@@ -45,7 +42,6 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
 
         var policyValues = listEle$.find('.json');
         _.each(policyValues, this.attachJSONEditor, this);
-        this.showMessage();
         return this;
     },
     attachJSONEditor : function (textarea) {
@@ -61,7 +57,9 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
             mode: "application/json", lineNumbers: false, lineWrapping: false,
             onChange: function(instance, changeobj) {
                 // this event's being called even when there's no change :-(
-                if (instance.getValue() !== oldValue) self.showSaveCancelButtons();
+                if (instance.getValue() !== oldValue && !self.notificationBarShowing) {
+                    self.showNotificationBar();
+                }
             },
             onFocus : function(mirror) {
               $(textarea).parent().children('label').addClass("is-focused");
@@ -99,59 +97,62 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
             }
         });
     },
-    showMessage: function (type) {
-        $(".wrapper-alert").removeClass("is-shown");
-        if (type) {
-            if (type === this.error_saving) {
-                $(".wrapper-alert-error").addClass("is-shown").attr('aria-hidden','false');
-            }
-            else if (type === this.successful_changes) {
-                $(".wrapper-alert-confirmation").addClass("is-shown").attr('aria-hidden','false');
-                this.hideSaveCancelButtons();
-            }
-        }
-        else {
-            // This is the case of the page first rendering, or when Cancel is pressed.
-            this.hideSaveCancelButtons();
-        }
+    showNotificationBar: function() {
+        var self = this;
+        var message = gettext("Your changes will not take effect until you save your progress. Take care with key and value formatting, as validation is not implemented.")
+        var confirm = new CMS.Views.Notification.Warning({
+            title: gettext("You've Made Some Changes"),
+            message: message,
+            actions: {
+                primary: {
+                    "text": gettext("Save Changes"),
+                    "class": "action-save",
+                    "click": function() {
+                        self.saveView();
+                        confirm.hide();
+                        self.notificationBarShowing = false;
+                    }
+                },
+                secondary: [{
+                    "text": gettext("Cancel"),
+                    "class": "action-cancel",
+                    "click": function() {
+                        self.revertView();
+                        confirm.hide();
+                        self.notificationBarShowing = false;
+                    }
+                }],
+            }});
+        this.notificationBarShowing = true;
+        confirm.show();
     },
-    showSaveCancelButtons: function(event) {
-        if (!this.notificationBarShowing) {
-            this.$el.find(".message-status").removeClass("is-shown");
-            $('.wrapper-notification').removeClass('is-hiding').addClass('is-shown').attr('aria-hidden','false');
-            this.notificationBarShowing = true;
-        }
-    },
-    hideSaveCancelButtons: function() {
-        if (this.notificationBarShowing) {
-            $('.wrapper-notification').removeClass('is-shown').addClass('is-hiding').attr('aria-hidden','true');
-            this.notificationBarShowing = false;
-        }
-    },
-    saveView : function(event) {
-        window.CmsUtils.smoothScrollTop(event);
+    saveView : function() {
         // TODO one last verification scan:
         //    call validateKey on each to ensure proper format
         //    check for dupes
-        var self = event.data;
-        self.model.save({},
+        var self = this;
+        this.model.save({},
             {
             success : function() {
                 self.render();
-                self.showMessage(self.successful_changes);
+                var message = gettext("Please note that validation of your policy key and value pairs is not currently in place yet. If you are having difficulties, please review your policy pairs.");
+                var saving = new CMS.Views.Alert.Confirmation({
+                    title: gettext("Your policy changes have been saved."),
+                    message: message,
+                    closeIcon: false
+                });
+                saving.show();
                 analytics.track('Saved Advanced Settings', {
                     'course': course_location_analytics
                 });
-
             }
         });
     },
-    revertView : function(event) {
-        event.preventDefault();
-        var self = event.data;
-        self.model.deleteKeys = [];
-        self.model.clear({silent : true});
-        self.model.fetch({
+    revertView : function() {
+        var self = this;
+        this.model.deleteKeys = [];
+        this.model.clear({silent : true});
+        this.model.fetch({
             success : function() { self.render(); },
             reset: true
         });

cms/templates/base.html

@@ -61,8 +61,6 @@
     <div class="wrapper wrapper-view">
       <%include file="widgets/header.html" />
 
-      ## remove this block after advanced settings notification is rewritten
-      <%block name="view_alerts"></%block>
       <div id="page-alert"></div>
 
       <%block name="content"></%block>
@@ -74,13 +72,9 @@
       <%include file="widgets/footer.html" />
       <%include file="widgets/tender.html" />
 
-      ## remove this block after advanced settings notification is rewritten
-      <%block name="view_notifications"></%block>
       <div id="page-notification"></div>
     </div>
 
-    ## remove this block after advanced settings notification is rewritten
-    <%block name="view_prompts"></%block>
     <div id="page-prompt"></div>
     <%block name="jsextra"></%block>
   </body>

cms/templates/settings_advanced.html

@@ -104,60 +104,3 @@ editor.render();
   </section>
 </div>
 </%block>
-
-<%block name="view_notifications">
-<!-- notification: change has been made and a save is needed -->
-<div class="wrapper wrapper-notification wrapper-notification-warning" aria-hidden="true" role="dialog" aria-labelledby="notification-changesMade-title" aria-describedby="notification-changesMade-description">
-  <div class="notification warning has-actions">
-    <i class="icon-warning-sign"></i>
-
-    <div class="copy">
-      <h2 class="title title-3" id="notification-changesMade-title">You've Made Some Changes</h2>
-      <p id="notification-changesMade-description">Your changes will not take effect until you <strong>save your progress</strong>. Take care with key and value formatting, as validation is <strong>not implemented</strong>.</p>
-    </div>
-
-    <nav class="nav-actions">
-      <h3 class="sr">Notification Actions</h3>
-      <ul>
-        <li class="nav-item">
-          <a href="" class="action-primary save-button">Save Changes</a>
-        </li>
-        <li class="nav-item">
-          <a href="" class="action-secondary cancel-button">Cancel</a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</div>
-</%block>
-
-<%block name="view_alerts">
-<!-- alert: save confirmed with close -->
-<div class="wrapper wrapper-alert wrapper-alert-confirmation" role="status">
-  <div class="alert confirmation">
-    <i class="icon-ok"></i>
-
-    <div class="copy">
-      <h2 class="title title-3">Your policy changes have been saved.</h2>
-      <p>Please note that validation of your policy key and value pairs is not currently in place yet. If you are having difficulties, please review your policy pairs.</p>
-    </div>
-
-    <a href="" rel="view" class="action action-alert-close">
-      <i class="icon-remove-sign"></i>
-      <span class="label">close alert</span>
-    </a>
-  </div>
-</div>
-
-<!-- alert: error -->
-<div class="wrapper wrapper-alert wrapper-alert-error" role="status">
-  <div class="alert error">
-    <i class="icon-warning-sign"></i>
-
-    <div class="copy">
-      <h2 class="title title-3">There was an error saving your information</h2>
-      <p>Please see the error below and correct it to ensure there are no problems in rendering your course.</p>
-    </div>
-  </div>
-</div>
-</%block>