Skip to content

E
edx-platform
Commit cc63f9c2 by cahrens
Options

Unique IDs, other cleanup.

parent 4b850f4d
Showing with 21 additions and 26 deletions
cms/static/client_templates/advanced_entry.html
<li class="field-group course-advanced-policy-list-item">
<div class="field text key" id="<%= (_.isEmpty(key) ? '__new_advanced_key__' : key) %>">
<label for="course-advanced-policy-key">Policy Key:</label>
<input type="text" class="short" id="course-advanced-policy-key" value="<%= key %>" />
<label for="<%= keyUniqueId %>">Policy Key:</label>
<input type="text" class="short policy-key" id="<%= keyUniqueId %>" value="<%= key %>" />
<span class="tip tip-stacked">Keys are case sensitive and cannot contain spaces or start with a number</span>
</div>
<div class="field text value">
<label for="course-advanced-policy-value">Policy Value:</label>
<textarea class="json text" id="course-advanced-policy-value"><%= value %></textarea>
<label for="<%= valueUniqueId %>">Policy Value:</label>
<textarea class="json text" id="<%= valueUniqueId %>"><%= value %></textarea>
</div>
<div class="actions">
......
cms/static/js/views/settings/advanced_view.js
......@@ -7,12 +7,10 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
// Model class is CMS.Models.Settings.Advanced
events : {
'click .delete-button' : "deleteEntry",
// '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' : "showSaveCancelButtons"
'change .policy-key' : "updateKey",
'keydown .policy-key' : "showSaveCancelButtons"
// TODO enable/disable save based on validation (currently enabled whenever there are changes)
},
initialize : function() {
......@@ -43,7 +41,7 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
var self = this;
_.each(_.sortBy(_.keys(this.model.attributes), _.identity),
function(key) {
listEle$.append(self.template({ key : key, value : JSON.stringify(self.model.get(key), null, 4)}));
listEle$.append(self.getTemplate(key, self.model.get(key)));
self.fieldToSelectorMap[key] = key;
});
var policyValues = listEle$.find('.json');
......@@ -54,8 +52,7 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
attachJSONEditor : function (textarea) {
// Since we are allowing duplicate keys at the moment, it is possible that we will try to attach
// JSON Editor to a value that already has one. Therefore only attach if no CodeMirror peer exists.
var siblings = $(textarea).siblings();
if (siblings.length >= 1 && $(siblings[0]).hasClass('CodeMirror')) {
if ( $(textarea).siblings().hasClass('CodeMirror')) {
return;
}
......@@ -185,10 +182,8 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
},
addEntry : function() {
var listEle$ = this.$el.find('.course-advanced-policy-list');
var newEle = this.template({ key : "", value : JSON.stringify("")});
var newEle = this.getTemplate("", "");
listEle$.append(newEle);
// disable the value entry until there's an acceptable key
$(newEle).find('.course-advanced-policy-value').addClass('disabled');
this.fieldToSelectorMap[this.model.new_key] = this.model.new_key;
// need to re-find b/c replaceWith seems to copy rather than use the specific ele instance
var policyValueDivs = this.$el.find('#' + this.model.new_key).closest('li').find('.json');
......@@ -198,9 +193,10 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
this.showSaveCancelButtons();
},
updateKey : function(event) {
var parentElement = $(event.currentTarget).closest('.key');
// old key: either the key as in the model or new_key.
// That is, it doesn't change as the val changes until val is accepted.
var oldKey = $(event.currentTarget).closest('.key').attr('id');
var oldKey = parentElement.attr('id');
// TODO: validation of keys with spaces. For now at least trim strings to remove initial and
// trailing whitespace
var newKey = $.trim($(event.currentTarget).val());
......@@ -257,15 +253,8 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
this.model.deleteKeys.splice(wasDeleting, 1);
}
// update gui (sets all the ids etc)
var newEle = this.template({key : newKey, value : JSON.stringify(this.model.get(newKey)) });
$(event.currentTarget).closest('li').replaceWith(newEle);
// need to re-find b/c replaceWith seems to copy rather than use the specific ele instance
var policyValueDivs = this.$el.find('#' + newKey).closest('li').find('.json');
// Because we are not dis-allowing duplicate key definitions, we may get back more than one
// div. But attachJSONEditor will only attach editor if it is not already defined.
_.each(policyValueDivs, this.attachJSONEditor, this);
// Update the ID to the new value.
parentElement.attr('id', newKey);
this.fieldToSelectorMap[newKey] = newKey;
}
......@@ -282,5 +271,10 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
// }
// else return true;
return true;
},
getTemplate: function (key, value) {
return this.template({ key : key, value : JSON.stringify(value, null, 4),
keyUniqueId: _.uniqueId('policy_key_'), valueUniqueId: _.uniqueId('policy_value_')});
}
});
\ No newline at end of file
cms/templates/settings_advanced.html
......@@ -54,11 +54,11 @@ editor.render();
<article class="content-primary" role="main">
<form id="settings_advanced" class="settings-advanced" method="post" action="">
<div class="message message-status confirm is-shown">
<div class="message message-status confirm">
Your policy changes have been saved.
</div>
<div class="message message-status error is-shown">
<div class="message message-status error">
There was an error saving your information. Please see below.
</div>
......
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