add editor to new entries and when key changes
This commit is contained in:
@@ -44,28 +44,28 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
|
||||
listEle$.append(self.template({ key : key, value : JSON.stringify(self.model.get(key))}));
|
||||
self.fieldToSelectorMap[key] = key;
|
||||
});
|
||||
|
||||
var policyValueDivs = listEle$.find('.ace');
|
||||
_.each(policyValueDivs,
|
||||
function (div) {
|
||||
var editor = ace.edit(div);
|
||||
editor.setTheme("ace/theme/chrome");
|
||||
editor.setHighlightActiveLine(false);
|
||||
editor.on("blur",
|
||||
function (e) {
|
||||
var key = $(editor.container).closest('.row').children('.key').attr('id');
|
||||
// TODO: error checking in case it does not parse!
|
||||
var quotedValue = editor.getValue();
|
||||
var JSONValue = JSON.parse(quotedValue);
|
||||
self.model.set(key, JSONValue, {validate: true});
|
||||
|
||||
});
|
||||
// Calling getSession() directly in render causes a crash on Chrome.
|
||||
// Seems to be OK in afterRender method.
|
||||
editor.getSession().setMode("ace/mode/json");
|
||||
});
|
||||
_.each(policyValueDivs, this.attachAce, this);
|
||||
return this;
|
||||
},
|
||||
attachAce : function (div) {
|
||||
var self = this;
|
||||
var editor = ace.edit(div);
|
||||
editor.setTheme("ace/theme/chrome");
|
||||
editor.setHighlightActiveLine(false);
|
||||
editor.on("blur",
|
||||
function (e) {
|
||||
var key = $(editor.container).closest('.row').children('.key').attr('id');
|
||||
// TODO: error checking in case it does not parse!
|
||||
var quotedValue = editor.getValue();
|
||||
var JSONValue = JSON.parse(quotedValue);
|
||||
self.model.set(key, JSONValue, {validate: true});
|
||||
|
||||
});
|
||||
// Calling getSession() directly in render causes a crash on Chrome.
|
||||
// Seems to be OK in afterRender method.
|
||||
editor.getSession().setMode("ace/mode/json");
|
||||
},
|
||||
|
||||
deleteEntry : function(event) {
|
||||
event.preventDefault();
|
||||
@@ -106,10 +106,15 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
|
||||
},
|
||||
addEntry : function() {
|
||||
var listEle$ = this.$el.find('.course-advanced-policy-list');
|
||||
listEle$.append(this.template({ key : "", value : ""}));
|
||||
var newEle = this.template({ key : "", value : JSON.stringify("")});
|
||||
listEle$.append(newEle);
|
||||
// disable the value entry until there's an acceptable key
|
||||
listEle$.find('.course-advanced-policy-value').addClass('disabled');
|
||||
$(newEle).find('.course-advanced-policy-value').addClass('disabled');
|
||||
this.fieldToSelectorMap[this.new_key] = this.new_key;
|
||||
// need to refind b/c replaceWith seems to copy rather than use the specific ele instance
|
||||
var policyValueDivs = this.$el.find('#' + this.new_key).closest('li').find('.ace');
|
||||
// only 1 but hey, let's take advantage of the context mechanism
|
||||
_.each(policyValueDivs, this.attachAce, this);
|
||||
},
|
||||
updateKey : function(event) {
|
||||
// old key: either the key as in the model or new_key.
|
||||
@@ -160,10 +165,6 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
|
||||
this.model.deleteKeys.push(oldKey);
|
||||
this.model.unset(oldKey) ;
|
||||
}
|
||||
else {
|
||||
// enable the value entry
|
||||
this.$el.find('.course-advanced-policy-value').removeClass('disabled');
|
||||
}
|
||||
|
||||
// check for newkey being the name of one which was previously deleted in this session
|
||||
var wasDeleting = this.model.deleteKeys.indexOf(newKey);
|
||||
@@ -172,8 +173,13 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
|
||||
}
|
||||
|
||||
// update gui (sets all the ids etc)
|
||||
$(event.currentTarget).closest('li').replaceWith(this.template({key : newKey, value : this.model.get(newKey) }));
|
||||
|
||||
var newEle = this.template({key : newKey, value : JSON.stringify(this.model.get(newKey)) });
|
||||
$(event.currentTarget).closest('li').replaceWith(newEle);
|
||||
// need to refind b/c replaceWith seems to copy rather than use the specific ele instance
|
||||
var policyValueDivs = this.$el.find('#' + newKey).closest('li').find('.ace');
|
||||
// only 1 but hey, let's take advantage of the context mechanism
|
||||
_.each(policyValueDivs, this.attachAce, this);
|
||||
|
||||
this.fieldToSelectorMap[newKey] = newKey;
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user