Skip to content

E
edx-platform
Commit 98920e7e by cahrens
Options

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

parent 24781782
Showing with 24 additions and 38 deletions
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">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment