= 0
) {
this.input_type = this.format;
this.source_code = true;
this.input = this.theme.getTextareaInput();
}
// HTML5 Input type
else {
this.input_type = this.format;
this.input = this.theme.getFormInputField(this.input_type);
}
}
// Normal text input
else {
this.input_type = 'text';
this.input = this.theme.getFormInputField(this.input_type);
}
// minLength, maxLength, and pattern
if(typeof this.schema.maxLength !== "undefined") this.input.setAttribute('maxlength',this.schema.maxLength);
if(typeof this.schema.pattern !== "undefined") this.input.setAttribute('pattern',this.schema.pattern);
else if(typeof this.schema.minLength !== "undefined") this.input.setAttribute('pattern','.{'+this.schema.minLength+',}');
if(this.getOption('compact')) this.container.setAttribute('class',this.container.getAttribute('class')+' compact');
if(this.schema.readOnly || this.schema.readonly || this.schema.template) {
this.always_disabled = true;
this.input.disabled = true;
}
this.input
.addEventListener('change',function(e) {
e.preventDefault();
e.stopPropagation();
// Don't allow changing if this field is a template
if(self.schema.template) {
this.value = self.value;
return;
}
var val = this.value;
// sanitize value
var sanitized = self.sanitize(val);
if(val !== sanitized) {
this.value = sanitized;
}
self.refreshValue();
self.watch_listener();
self.jsoneditor.notifyWatchers(self.path);
if(self.parent) self.parent.onChildEditorChange(self);
else self.jsoneditor.onChange();
});
if(this.format) this.input.setAttribute('data-schemaformat',this.format);
this.control = this.getTheme().getFormControl(this.label, this.input, this.description);
this.container.appendChild(this.control);
// If the Select2 library is loaded
if(this.input_type === "select" && window.$ && $.fn && $.fn.select2) {
$(this.input).select2();
}
// Any special formatting that needs to happen after the input is added to the dom
requestAnimationFrame(function() {
// Skip in case the input is only a temporary editor,
// otherwise, in the case of an ace_editor creation,
// it will generate an error trying to append it to the missing parentNode
if(self.input.parentNode) self.afterInputReady();
});
this.register();
// Compile and store the template
if(this.schema.template) {
this.template = this.jsoneditor.compileTemplate(this.schema.template, this.template_engine);
this.refreshValue();
this.jsoneditor.notifyWatchers(this.path);
}
else {
this.refreshValue();
this.jsoneditor.notifyWatchers(this.path);
}
},
enable: function() {
if(!this.always_disabled) {
this.input.disabled = false;
// TODO: WYSIWYG and Markdown editors
}
this._super();
},
disable: function() {
this.input.disabled = true;
// TODO: WYSIWYG and Markdown editors
this._super();
},
afterInputReady: function() {
var self = this, options;
// Code editor
if(this.source_code) {
// WYSIWYG html and bbcode editor
if(this.options.wysiwyg &&
['html','bbcode'].indexOf(this.input_type) >= 0 &&
window.$ && $.fn && $.fn.sceditor
) {
options = $extend({},{
plugins: self.input_type==='html'? 'xhtml' : 'bbcode',
emoticonsEnabled: false,
width: '100%',
height: 300
},JSONEditor.plugins.sceditor);
$(self.input).sceditor(options);
self.sceditor_instance = $(self.input).sceditor('instance');
self.sceditor_instance.blur(function() {
// Get editor's value
var val = $(""+self.sceditor_instance.val()+"
");
// Remove sceditor spans/divs
$('#sceditor-start-marker,#sceditor-end-marker,.sceditor-nlf',val).remove();
// Set the value and update
self.input.value = val.html();
self.value = self.input.value;
if(self.parent) self.parent.onChildEditorChange(self);
else self.jsoneditor.onChange();
self.jsoneditor.notifyWatchers(self.path);
});
}
// EpicEditor for markdown (if it's loaded)
else if (this.input_type === 'markdown' && window.EpicEditor) {
this.epiceditor_container = document.createElement('div');
this.input.parentNode.insertBefore(this.epiceditor_container,this.input);
this.input.style.display = 'none';
options = $extend({},JSONEditor.plugins.epiceditor,{
container: this.epiceditor_container,
clientSideStorage: false
});
this.epiceditor = new EpicEditor(options).load();
this.epiceditor.importFile(null,this.getValue());
this.epiceditor.on('update',function() {
var val = self.epiceditor.exportFile();
self.input.value = val;
self.value = val;
if(self.parent) self.parent.onChildEditorChange(self);
else self.jsoneditor.onChange();
self.jsoneditor.notifyWatchers(self.path);
});
}
// ACE editor for everything else
else if(window.ace) {
var mode = this.input_type;
// aliases for c/cpp
if(mode === 'cpp' || mode === 'c++' || mode === 'c') {
mode = 'c_cpp';
}
this.ace_container = document.createElement('div');
this.ace_container.style.width = '100%';
this.ace_container.style.position = 'relative';
this.ace_container.style.height = '400px';
this.input.parentNode.insertBefore(this.ace_container,this.input);
this.input.style.display = 'none';
this.ace_editor = ace.edit(this.ace_container);
this.ace_editor.setValue(this.getValue());
// The theme
if(JSONEditor.plugins.ace.theme) this.ace_editor.setTheme('ace/theme/'+JSONEditor.plugins.ace.theme);
// The mode
mode = ace.require("ace/mode/"+mode);
if(mode) this.ace_editor.getSession().setMode(new mode.Mode());
// Listen for changes
this.ace_editor.on('change',function() {
var val = self.ace_editor.getValue();
self.input.value = val;
self.refreshValue();
if(self.parent) self.parent.onChildEditorChange(self);
else self.jsoneditor.onChange();
self.jsoneditor.notifyWatchers(self.path);
});
}
}
self.theme.afterInputReady(self.input);
},
refreshValue: function() {
this.value = this.input.value;
if(typeof this.value !== "string") this.value = '';
this.serialized = this.value;
},
destroy: function() {
// If using SCEditor, destroy the editor instance
if(this.sceditor_instance) {
this.sceditor_instance.destroy();
}
else if(this.epiceditor) {
this.epiceditor.unload();
}
else if(this.ace_editor) {
this.ace_editor.destroy();
}
this.template = null;
if(this.input.parentNode) this.input.parentNode.removeChild(this.input);
if(this.label && this.label.parentNode) this.label.parentNode.removeChild(this.label);
if(this.description && this.description.parentNode) this.description.parentNode.removeChild(this.description);
this._super();
},
/**
* This is overridden in derivative editors
*/
sanitize: function(value) {
return value;
},
/**
* Re-calculates the value if needed
*/
onWatchedFieldChange: function() {
var self = this, vars, j;
// If this editor needs to be rendered by a macro template
if(this.template) {
vars = this.getWatchedFieldValues();
this.setValue(this.template(vars),false,true);
}
// If this editor uses a dynamic select box
if(this.enumSource) {
vars = this.getWatchedFieldValues();
var select_options = [];
var select_titles = [];
for(var i=0; i height)) {
found = i;
}
}
}
// If there isn't a spot in any of the existing rows, start a new row
if(found === false) {
rows.push({
width: 0,
minh: 999999,
maxh: 0,
editors: []
});
found = rows.length-1;
}
rows[found].editors.push({
key: key,
//editor: editor,
width: width,
height: height
});
rows[found].width += width;
rows[found].minh = Math.min(rows[found].minh,height);
rows[found].maxh = Math.max(rows[found].maxh,height);
});
// Make almost full rows width 12
// Do this by increasing all editors' sizes proprotionately
// Any left over space goes to the biggest editor
// Don't touch rows with a width of 6 or less
for(i=0; i rows[i].editors[biggest].width) biggest = j;
rows[i].editors[j].width *= 12/rows[i].width;
rows[i].editors[j].width = Math.floor(rows[i].editors[j].width);
new_width += rows[i].editors[j].width;
}
if(new_width < 12) rows[i].editors[biggest].width += 12-new_width;
rows[i].width = 12;
}
}
// layout hasn't changed
if(this.layout === JSON.stringify(rows)) return false;
this.layout = JSON.stringify(rows);
// Layout the form
container = document.createElement('div');
for(i=0; i= 0;
}
self.editors[key] = self.jsoneditor.createEditor(editor,{
jsoneditor: self.jsoneditor,
schema: schema,
container: holder,
path: self.path+'.'+key,
parent: self,
required: required
});
self.minwidth = Math.max(self.minwidth,self.editors[key].getNumColumns());
self.maxwidth += self.editors[key].getNumColumns();
});
// Control buttons
this.title_controls = this.getTheme().getHeaderButtonHolder();
this.editjson_controls = this.getTheme().getHeaderButtonHolder();
this.addproperty_controls = this.getTheme().getHeaderButtonHolder();
this.title.appendChild(this.title_controls);
this.title.appendChild(this.editjson_controls);
this.title.appendChild(this.addproperty_controls);
// Show/Hide button
this.collapsed = false;
this.toggle_button = this.getButton('','collapse','Collapse');
this.title_controls.appendChild(this.toggle_button);
this.toggle_button.addEventListener('click',function() {
if(self.collapsed) {
self.editor_holder.style.display = '';
self.collapsed = false;
self.setButtonText(self.toggle_button,'','collapse','Collapse');
}
else {
self.editor_holder.style.display = 'none';
self.collapsed = true;
self.setButtonText(self.toggle_button,'','expand','Expand');
}
});
// If it should start collapsed
if(this.options.collapsed) {
$trigger(this.toggle_button,'click');
}
// Collapse button disabled
if(this.schema.options && typeof this.schema.options.disable_collapse !== "undefined") {
if(this.schema.options.disable_collapse) this.toggle_button.style.display = 'none';
}
else if(this.jsoneditor.options.disable_collapse) {
this.toggle_button.style.display = 'none';
}
// Edit JSON Button
this.editjson_button = this.getButton('JSON','edit','Edit JSON');
this.editjson_button.addEventListener('click',function() {
self.toggleEditJSON();
});
this.editjson_controls.appendChild(this.editjson_button);
this.editjson_controls.appendChild(this.editjson_holder);
// Edit JSON Buttton disabled
if(this.schema.options && typeof this.schema.options.disable_edit_json !== "undefined") {
if(this.schema.options.disable_edit_json) this.editjson_button.style.display = 'none';
}
else if(this.jsoneditor.options.disable_edit_json) {
this.editjson_button.style.display = 'none';
}
// Object Properties Button
this.addproperty_button = this.getButton('Properties','edit','Object Properties');
this.addproperty_button.addEventListener('click',function() {
self.toggleAddProperty();
});
this.addproperty_controls.appendChild(this.addproperty_button);
this.addproperty_controls.appendChild(this.addproperty_holder);
this.refreshAddProperties();
}
// Sort editors by propertyOrder
var sorted = {};
var keys = Object.keys(this.editors);
keys = keys.sort(function(a,b) {
var ordera = self.editors[a].schema.propertyOrder;
var orderb = self.editors[b].schema.propertyOrder;
if(typeof ordera !== "number") ordera = 1000;
if(typeof orderb !== "number") orderb = 1000;
return ordera - orderb;
});
for(var i=0; i= this.schema.maxProperties);
// Check for which editors can't be removed or added back
for(i in this.editors) {
if(!this.editors.hasOwnProperty(i)) continue;
if(this.editors[i].isRequired()) {
if(this.addproperty_checkboxes && this.addproperty_checkboxes[i]) {
this.addproperty_checkboxes[i].disabled = true;
}
}
else if(typeof this.schema.minProperties !== "undefined" && num_props <= this.schema.minProperties) {
if(this.addproperty_checkboxes && this.addproperty_checkboxes[i]) {
this.addproperty_checkboxes[i].disabled = this.addproperty_checkboxes[i].checked;
if(!this.addproperty_checkboxes[i].checked) show_modal = true;
}
else if(this.editors[i].property_removed && can_add) {
show_modal = true;
}
}
else if(this.editors[i].property_removed) {
if(this.addproperty_checkboxes && this.addproperty_checkboxes[i]) {
if(!can_add) {
this.addproperty_checkboxes[i].disabled = true;
}
else {
this.addproperty_checkboxes[i].disabled = false;
show_modal = true;
}
}
else if(can_add) {
show_modal = true;
}
}
else {
if(this.addproperty_checkboxes && this.addproperty_checkboxes[i]) {
this.addproperty_checkboxes[i].disabled = false;
}
show_modal = true;
can_remove = true;
}
}
if(this.canHaveAdditionalProperties()) {
show_modal = true;
}
// Additional addproperty checkboxes not tied to a current editor
if(this.addproperty_checkboxes) {
for(i in this.addproperty_checkboxes) {
if(!this.addproperty_checkboxes.hasOwnProperty(i)) continue;
if(this.editors[i]) continue;
show_modal = true;
this.addproperty_checkboxes[i].disabled = !can_add && !can_remove;
}
}
// If no editors can be added or removed, hide the modal button
if(!show_modal) {
this.hideAddProperty();
this.addproperty_controls.style.display = 'none';
}
// If additional properties are disabled
else if(!this.canHaveAdditionalProperties()) {
this.addproperty_add.style.display = 'none';
this.addproperty_input.style.display = 'none';
}
// If no new properties can be added
else if(!can_add) {
this.addproperty_add.disabled = true;
}
// If new properties can be added
else {
this.addproperty_add.disabled = false;
}
},
setValue: function(value, initial) {
var self = this;
value = value || {};
if(typeof value !== "object" || value instanceof Array) value = {};
// First, set the values for all of the defined properties
$each(this.editors, function(i,editor) {
if(typeof value[i] !== "undefined") {
// If property is removed, add property
if(editor.property_removed) {
self.addObjectProperty(i);
}
editor.setValue(value[i],initial);
}
else {
// If property isn't required, remove property
if(!initial && !editor.property_removed && !editor.isRequired()) {
self.removeObjectProperty(i);
return;
}
editor.setValue(editor.getDefault(),initial);
}
});
// If additional properties are allowed, create the editors for any of those
if(this.canHaveAdditionalProperties()) {
$each(value, function(i,val) {
if(!self.editors[i]) {
self.addObjectProperty(i);
if(self.editors[i]) {
self.editors[i].setValue(val,initial);
}
}
});
}
this.refreshValue();
this.jsoneditor.notifyWatchers(this.path);
},
showValidationErrors: function(errors) {
var self = this;
// Get all the errors that pertain to this editor
var my_errors = [];
var other_errors = [];
$each(errors, function(i,error) {
if(error.path === self.path) {
my_errors.push(error);
}
else {
other_errors.push(error);
}
});
// Show errors for this editor
if(this.error_holder) {
if(my_errors.length) {
var message = [];
this.error_holder.innerHTML = '';
this.error_holder.style.display = '';
$each(my_errors, function(i,error) {
self.error_holder.appendChild(self.theme.getErrorMessage(error.message));
});
}
// Hide error area
else {
this.error_holder.style.display = 'none';
}
}
// Show error for the table row if this is inside a table
if(this.getOption('table_row')) {
if(my_errors.length) {
this.theme.addTableRowError(this.container);
}
else {
this.theme.removeTableRowError(this.container);
}
}
// Show errors for child editors
$each(this.editors, function(i,editor) {
editor.showValidationErrors(other_errors);
});
}
});
JSONEditor.defaults.editors.array = JSONEditor.AbstractEditor.extend({
getDefault: function() {
return this.schema.default || [];
},
register: function() {
this._super();
if(this.rows) {
for(var i=0; i= this.schema.items.length) {
if(this.schema.additionalItems===true) {
return {};
}
else if(this.schema.additionalItems) {
return $extend({},this.schema.additionalItems);
}
}
else {
return $extend({},this.schema.items[i]);
}
}
else if(this.schema.items) {
return $extend({},this.schema.items);
}
else {
return {};
}
},
getItemInfo: function(i) {
// Get the schema for this item
var schema = this.getItemSchema(i);
// Check if it's cached
this.item_info = this.item_info || {};
var stringified = JSON.stringify(schema);
if(typeof this.item_info[stringified] !== "undefined") return this.item_info[stringified];
// Create a temporary editor with this schema and get info
var tmp = document.createElement('div');
this.container.appendChild(tmp);
// Ignore events on this temporary editor
tmp.addEventListener('change_header_text',function(e) {
e.preventDefault();
e.stopPropagation();
});
var editor = this.jsoneditor.getEditorClass(schema, this.jsoneditor);
editor = this.jsoneditor.createEditor(editor,{
jsoneditor: this.jsoneditor,
schema: schema,
container: tmp,
path: this.path+'.'+i,
parent: this,
required: true
});
this.item_info[stringified] = {
child_editors: editor.getChildEditors()? true : false,
title: schema.title || 'item',
width: editor.getNumColumns(),
default: editor.getDefault()
};
editor.destroy();
if(tmp.parentNode) tmp.parentNode.removeChild(tmp);
return this.item_info[stringified];
},
getElementEditor: function(i) {
var item_info = this.getItemInfo(i);
var schema = this.getItemSchema(i);
schema.title = item_info.title+' '+i;
var editor = this.jsoneditor.getEditorClass(schema, this.jsoneditor);
var holder;
if(this.tabs_holder) {
holder = this.theme.getTabContent();
}
else if(item_info.child_editors) {
holder = this.theme.getChildEditorHolder();
}
else {
holder = this.theme.getIndentedPanel();
}
this.row_holder.appendChild(holder);
var ret = this.jsoneditor.createEditor(editor,{
jsoneditor: this.jsoneditor,
schema: schema,
container: holder,
path: this.path+'.'+i,
parent: this,
required: true
});
if(!ret.title_controls) {
ret.array_controls = this.theme.getButtonHolder();
holder.appendChild(ret.array_controls);
}
return ret;
},
destroy: function() {
this.empty(true);
if(this.title) this.title.parentNode.removeChild(this.title);
if(this.description) this.description.parentNode.removeChild(this.description);
if(this.row_holder) this.row_holder.parentNode.removeChild(this.row_holder);
if(this.controls) this.controls.parentNode.removeChild(this.controls);
if(this.panel) this.panel.parentNode.removeChild(this.panel);
this.rows = this.row_cache = this.title = this.description = this.row_holder = this.panel = this.controls = null;
this._super();
},
empty: function(hard) {
if(!this.rows) return;
var self = this;
$each(this.rows,function(i,row) {
if(hard) {
if(row.tab && row.tab.parentNode) row.tab.parentNode.removeChild(row.tab);
self.destroyRow(row,true);
self.row_cache[i] = null;
}
self.rows[i] = null;
});
self.rows = [];
if(hard) self.row_cache = [];
},
destroyRow: function(row,hard) {
var holder = row.container;
if(hard) {
row.destroy();
if(holder.parentNode) holder.parentNode.removeChild(holder);
if(row.tab && row.tab.parentNode) row.tab.parentNode.removeChild(row.tab);
}
else {
if(row.tab) row.tab.style.display = 'none';
holder.style.display = 'none';
row.unregister();
}
},
getMax: function() {
if((this.schema.items instanceof Array) && this.schema.additionalItems === false) {
return Math.min(this.schema.items.length,this.schema.maxItems || Infinity);
}
else {
return this.schema.maxItems || Infinity;
}
},
refreshTabs: function(refresh_headers) {
var self = this;
$each(this.rows, function(i,row) {
if(!row.tab) return;
if(refresh_headers) {
row.tab_text.textContent = row.getHeaderText();
}
else {
if(row.tab === self.active_tab) {
self.theme.markTabActive(row.tab);
row.container.style.display = '';
}
else {
self.theme.markTabInactive(row.tab);
row.container.style.display = 'none';
}
}
});
},
setValue: function(value, initial) {
// Update the array's value, adding/removing rows when necessary
value = value || [];
if(!(value instanceof Array)) value = [value];
var serialized = JSON.stringify(value);
if(serialized === this.serialized) return;
// Make sure value has between minItems and maxItems items in it
if(this.schema.minItems) {
while(value.length < this.schema.minItems) {
value.push(this.getItemInfo(value.length).default);
}
}
if(this.getMax() && value.length > this.getMax()) {
value = value.slice(0,this.getMax());
}
var self = this;
$each(value,function(i,val) {
if(self.rows[i]) {
// TODO: don't set the row's value if it hasn't changed
self.rows[i].setValue(val);
}
else if(self.row_cache[i]) {
self.rows[i] = self.row_cache[i];
self.rows[i].setValue(val);
self.rows[i].container.style.display = '';
if(self.rows[i].tab) self.rows[i].tab.style.display = '';
self.rows[i].register();
}
else {
self.addRow(val);
}
});
for(var j=value.length; j= this.rows.length;
$each(this.rows,function(i,editor) {
// Hide the move down button for the last row
if(editor.movedown_buttons) {
if(i === self.rows.length - 1) {
editor.movedown_button.style.display = 'none';
}
else {
editor.movedown_button.style.display = '';
}
}
// Hide the delete button if we have minItems items
if(editor.delete_button) {
if(minItems) {
editor.delete_button.style.display = 'none';
}
else {
editor.delete_button.style.display = '';
}
}
// Get the value for this editor
self.value[i] = editor.getValue();
});
var controls_needed = false;
if(!this.value.length) {
this.delete_last_row_button.style.display = 'none';
this.remove_all_rows_button.style.display = 'none';
}
else if(this.value.length === 1) {
this.remove_all_rows_button.style.display = 'none';
// If there are minItems items in the array, hide the delete button beneath the rows
if(minItems || this.hide_delete_buttons) {
this.delete_last_row_button.style.display = 'none';
}
else {
this.delete_last_row_button.style.display = '';
controls_needed = true;
}
}
else {
// If there are minItems items in the array, hide the delete button beneath the rows
if(minItems || this.hide_delete_buttons) {
this.delete_last_row_button.style.display = 'none';
this.remove_all_rows_button.style.display = 'none';
}
else {
this.delete_last_row_button.style.display = '';
this.remove_all_rows_button.style.display = '';
controls_needed = true;
}
}
// If there are maxItems in the array, hide the add button beneath the rows
if((this.getMax() && this.getMax() <= this.rows.length) || this.hide_add_button){
this.add_row_button.style.display = 'none';
}
else {
this.add_row_button.style.display = '';
controls_needed = true;
}
if(controls_needed) {
this.controls.style.display = '';
}
else {
this.controls.style.display = 'none';
}
}
},
addRow: function(value) {
var self = this;
var i = this.rows.length;
self.rows[i] = this.getElementEditor(i);
self.row_cache[i] = self.rows[i];
if(self.tabs_holder) {
self.rows[i].tab_text = document.createElement('span');
self.rows[i].tab_text.textContent = self.rows[i].getHeaderText();
self.rows[i].tab = self.theme.getTab(self.rows[i].tab_text);
self.rows[i].tab.addEventListener('click', function(e) {
self.active_tab = self.rows[i].tab;
self.refreshTabs();
e.preventDefault();
e.stopPropagation();
});
self.theme.addTab(self.tabs_holder, self.rows[i].tab);
}
var controls_holder = self.rows[i].title_controls || self.rows[i].array_controls;
// Buttons to delete row, move row up, and move row down
if(!self.hide_delete_buttons) {
self.rows[i].delete_button = this.getButton(self.getItemTitle(),'delete','Delete '+self.getItemTitle());
self.rows[i].delete_button.className += ' delete';
self.rows[i].delete_button.setAttribute('data-i',i);
self.rows[i].delete_button.addEventListener('click',function() {
var i = this.getAttribute('data-i')*1;
var value = self.getValue();
var newval = [];
var new_active_tab = null;
$each(value,function(j,row) {
if(j===i) {
// If the one we're deleting is the active tab
if(self.rows[j].tab === self.active_tab) {
// Make the next tab active if there is one
if(self.rows[j+1]) new_active_tab = self.rows[j+1].tab;
// Otherwise, make the previous tab active if there is one
else if(j) new_active_tab = self.rows[j-1].tab;
}
return; // If this is the one we're deleting
}
newval.push(row);
});
self.setValue(newval);
if(new_active_tab) {
self.active_tab = new_active_tab;
self.refreshTabs();
}
if(self.parent) self.parent.onChildEditorChange(self);
else self.jsoneditor.onChange();
});
if(controls_holder) {
controls_holder.appendChild(self.rows[i].delete_button);
}
}
if(i && !self.hide_move_buttons) {
self.rows[i].moveup_button = this.getButton('','moveup','Move up');
self.rows[i].moveup_button.className += ' moveup';
self.rows[i].moveup_button.setAttribute('data-i',i);
self.rows[i].moveup_button.addEventListener('click',function() {
var i = this.getAttribute('data-i')*1;
if(i<=0) return;
var rows = self.getValue();
var tmp = rows[i-1];
rows[i-1] = rows[i];
rows[i] = tmp;
self.setValue(rows);
self.active_tab = self.rows[i-1].tab;
self.refreshTabs();
if(self.parent) self.parent.onChildEditorChange(self);
else self.jsoneditor.onChange();
});
if(controls_holder) {
controls_holder.appendChild(self.rows[i].moveup_button);
}
}
if(!self.hide_move_buttons) {
self.rows[i].movedown_button = this.getButton('','movedown','Move down');
self.rows[i].movedown_button.className += ' movedown';
self.rows[i].movedown_button.setAttribute('data-i',i);
self.rows[i].movedown_button.addEventListener('click',function() {
var i = this.getAttribute('data-i')*1;
var rows = self.getValue();
if(i>=rows.length-1) return;
var tmp = rows[i+1];
rows[i+1] = rows[i];
rows[i] = tmp;
self.setValue(rows);
self.active_tab = self.rows[i+1].tab;
self.refreshTabs();
if(self.parent) self.parent.onChildEditorChange(self);
else self.jsoneditor.onChange();
});
if(controls_holder) {
controls_holder.appendChild(self.rows[i].movedown_button);
}
}
if(value) self.rows[i].setValue(value);
self.refreshTabs();
},
addControls: function() {
var self = this;
this.collapsed = false;
this.toggle_button = this.getButton('','collapse','Collapse');
this.title_controls.appendChild(this.toggle_button);
var row_holder_display = self.row_holder.style.display;
var controls_display = self.controls.style.display;
this.toggle_button.addEventListener('click',function() {
if(self.collapsed) {
self.collapsed = false;
self.row_holder.style.display = row_holder_display;
if(self.tabs_holder) self.tabs_holder.style.display = '';
self.controls.style.display = controls_display;
self.setButtonText(this,'','collapse','Collapse');
}
else {
self.collapsed = true;
self.row_holder.style.display = 'none';
if(self.tabs_holder) self.tabs_holder.style.display = 'none';
self.controls.style.display = 'none';
self.setButtonText(this,'','expand','Expand');
}
});
// If it should start collapsed
if(this.options.collapsed) {
$trigger(this.toggle_button,'click');
}
// Collapse button disabled
if(this.schema.options && typeof this.schema.options.disable_collapse !== "undefined") {
if(this.schema.options.disable_collapse) this.toggle_button.style.display = 'none';
}
else if(this.jsoneditor.options.disable_collapse) {
this.toggle_button.style.display = 'none';
}
// Add "new row" and "delete last" buttons below editor
this.add_row_button = this.getButton(this.getItemTitle(),'add','Add '+this.getItemTitle());
this.add_row_button.addEventListener('click',function() {
var i = self.rows.length;
if(self.row_cache[i]) {
self.rows[i] = self.row_cache[i];
self.rows[i].container.style.display = '';
if(self.rows[i].tab) self.rows[i].tab.style.display = '';
self.rows[i].register();
}
else {
self.addRow();
}
self.active_tab = self.rows[i].tab;
self.refreshTabs();
self.refreshValue();
if(self.parent) self.parent.onChildEditorChange(self);
else self.jsoneditor.onChange();
self.jsoneditor.notifyWatchers(self.path);
});
self.controls.appendChild(this.add_row_button);
this.delete_last_row_button = this.getButton('Last '+this.getItemTitle(),'delete','Delete Last '+this.getItemTitle());
this.delete_last_row_button.addEventListener('click',function() {
var rows = self.getValue();
var new_active_tab = null;
if(self.rows.length > 1 && self.rows[self.rows.length-1].tab === self.active_tab) new_active_tab = self.rows[self.rows.length-2].tab;
rows.pop();
self.setValue(rows);
if(new_active_tab) {
self.active_tab = new_active_tab;
self.refreshTabs();
}
if(self.parent) self.parent.onChildEditorChange(self);
else self.jsoneditor.onChange();
});
self.controls.appendChild(this.delete_last_row_button);
this.remove_all_rows_button = this.getButton('All','delete','Delete All');
this.remove_all_rows_button.addEventListener('click',function() {
self.setValue([]);
if(self.parent) self.parent.onChildEditorChange(self);
else self.jsoneditor.onChange();
});
self.controls.appendChild(this.remove_all_rows_button);
if(self.tabs) {
this.add_row_button.style.width = '100%';
this.add_row_button.style.textAlign = 'left';
this.add_row_button.style.marginBottom = '3px';
this.delete_last_row_button.style.width = '100%';
this.delete_last_row_button.style.textAlign = 'left';
this.delete_last_row_button.style.marginBottom = '3px';
this.remove_all_rows_button.style.width = '100%';
this.remove_all_rows_button.style.textAlign = 'left';
this.remove_all_rows_button.style.marginBottom = '3px';
}
},
showValidationErrors: function(errors) {
var self = this;
// Get all the errors that pertain to this editor
var my_errors = [];
var other_errors = [];
$each(errors, function(i,error) {
if(error.path === self.path) {
my_errors.push(error);
}
else {
other_errors.push(error);
}
});
// Show errors for this editor
if(this.error_holder) {
if(my_errors.length) {
var message = [];
this.error_holder.innerHTML = '';
this.error_holder.style.display = '';
$each(my_errors, function(i,error) {
self.error_holder.appendChild(self.theme.getErrorMessage(error.message));
});
}
// Hide error area
else {
this.error_holder.style.display = 'none';
}
}
// Show errors for child editors
$each(this.rows, function(i,row) {
row.showValidationErrors(other_errors);
});
}
});
JSONEditor.defaults.editors.table = JSONEditor.defaults.editors.array.extend({
addProperty: function() {
this._super();
if(this.value.length) this.table.style.display = '';
},
removeProperty: function() {
this._super();
this.table.style.display = 'none';
},
register: function() {
this._super();
if(this.rows) {
for(var i=0; i this.schema.maxItems) {
value = value.slice(0,this.schema.maxItems);
}
var serialized = JSON.stringify(value);
if(serialized === this.serialized) return;
var numrows_changed = false;
var self = this;
$each(value,function(i,val) {
if(self.rows[i]) {
// TODO: don't set the row's value if it hasn't changed
self.rows[i].setValue(val);
}
else {
self.addRow(val);
numrows_changed = true;
}
});
for(var j=value.length; j= this.rows.length;
var need_row_buttons = false;
$each(this.rows,function(i,editor) {
// Hide the move down button for the last row
if(editor.movedown_button) {
if(i === self.rows.length - 1) {
editor.movedown_button.style.display = 'none';
}
else {
need_row_buttons = true;
editor.movedown_button.style.display = '';
}
}
// Hide the delete button if we have minItems items
if(editor.delete_button) {
if(minItems) {
editor.delete_button.style.display = 'none';
}
else {
need_row_buttons = true;
editor.delete_button.style.display = '';
}
}
if(editor.moveup_button) {
need_row_buttons = true;
}
});
// Show/hide controls column in table
$each(this.rows,function(i,editor) {
if(need_row_buttons) {
editor.controls_cell.style.display = '';
}
else {
editor.controls_cell.style.display = 'none';
}
});
if(need_row_buttons) {
this.controls_header_cell.style.display = '';
}
else {
this.controls_header_cell.style.display = 'none';
}
var controls_needed = false;
if(!this.value.length) {
this.delete_last_row_button.style.display = 'none';
this.remove_all_rows_button.style.display = 'none';
this.table.style.display = 'none';
}
else if(this.value.length === 1 || this.hide_delete_buttons) {
this.table.style.display = '';
this.remove_all_rows_button.style.display = 'none';
// If there are minItems items in the array, hide the delete button beneath the rows
if(minItems || this.hide_delete_buttons) {
this.delete_last_row_button.style.display = 'none';
}
else {
this.delete_last_row_button.style.display = '';
controls_needed = true;
}
}
else {
this.table.style.display = '';
// If there are minItems items in the array, hide the delete button beneath the rows
if(minItems || this.hide_delete_buttons) {
this.delete_last_row_button.style.display = 'none';
this.remove_all_rows_button.style.display = 'none';
}
else {
this.delete_last_row_button.style.display = '';
this.remove_all_rows_button.style.display = '';
controls_needed = true;
}
}
// If there are maxItems in the array, hide the add button beneath the rows
if((this.schema.maxItems && this.schema.maxItems <= this.rows.length) || this.hide_add_button) {
this.add_row_button.style.display = 'none';
}
else {
this.add_row_button.style.display = '';
controls_needed = true;
}
if(!controls_needed) {
this.controls.style.display = 'none';
}
else {
this.controls.style.display = '';
}
},
refreshValue: function() {
var self = this;
this.value = [];
$each(this.rows,function(i,editor) {
// Get the value for this editor
self.value[i] = editor.getValue();
});
this.serialized = JSON.stringify(this.value);
},
addRow: function(value) {
var self = this;
var i = this.rows.length;
self.rows[i] = this.getElementEditor(i);
var controls_holder = self.rows[i].table_controls;
// Buttons to delete row, move row up, and move row down
if(!this.hide_delete_buttons) {
self.rows[i].delete_button = this.getButton('','delete','Delete');
self.rows[i].delete_button.className += ' delete';
self.rows[i].delete_button.setAttribute('data-i',i);
self.rows[i].delete_button.addEventListener('click',function() {
var i = this.getAttribute('data-i')*1;
var value = self.getValue();
var newval = [];
$each(value,function(j,row) {
if(j===i) return; // If this is the one we're deleting
newval.push(row);
});
self.setValue(newval);
if(self.parent) self.parent.onChildEditorChange(self);
else self.jsoneditor.onChange();
});
controls_holder.appendChild(self.rows[i].delete_button);
}
if(i && !this.hide_move_buttons) {
self.rows[i].moveup_button = this.getButton('','moveup','Move up');
self.rows[i].moveup_button.className += ' moveup';
self.rows[i].moveup_button.setAttribute('data-i',i);
self.rows[i].moveup_button.addEventListener('click',function() {
var i = this.getAttribute('data-i')*1;
if(i<=0) return;
var rows = self.getValue();
var tmp = rows[i-1];
rows[i-1] = rows[i];
rows[i] = tmp;
self.setValue(rows);
if(self.parent) self.parent.onChildEditorChange(self);
else self.jsoneditor.onChange();
});
controls_holder.appendChild(self.rows[i].moveup_button);
}
if(!this.hide_move_buttons) {
self.rows[i].movedown_button = this.getButton('','movedown','Move down');
self.rows[i].movedown_button.className += ' movedown';
self.rows[i].movedown_button.setAttribute('data-i',i);
self.rows[i].movedown_button.addEventListener('click',function() {
var i = this.getAttribute('data-i')*1;
var rows = self.getValue();
if(i>=rows.length-1) return;
var tmp = rows[i+1];
rows[i+1] = rows[i];
rows[i] = tmp;
self.setValue(rows);
if(self.parent) self.parent.onChildEditorChange(self);
else self.jsoneditor.onChange();
});
controls_holder.appendChild(self.rows[i].movedown_button);
}
if(value) self.rows[i].setValue(value);
self.jsoneditor.notifyWatchers(self.path);
},
addControls: function() {
var self = this;
this.collapsed = false;
this.toggle_button = this.getButton('','collapse','Collapse');
this.title_controls.appendChild(this.toggle_button);
this.toggle_button.addEventListener('click',function(e) {
e.preventDefault();
e.stopPropagation();
if(self.collapsed) {
self.collapsed = false;
self.panel.style.display = '';
self.setButtonText(this,'','collapse','Collapse');
}
else {
self.collapsed = true;
self.panel.style.display = 'none';
self.setButtonText(this,'','expand','Expand');
}
});
// If it should start collapsed
if(this.options.collapsed) {
$trigger(this.toggle_button,'click');
}
// Collapse button disabled
if(this.schema.options && typeof this.schema.options.disable_collapse !== "undefined") {
if(this.schema.options.disable_collapse) this.toggle_button.style.display = 'none';
}
else if(this.jsoneditor.options.disable_collapse) {
this.toggle_button.style.display = 'none';
}
// Add "new row" and "delete last" buttons below editor
this.add_row_button = this.getButton(this.getItemTitle(),'add','Add '+this.getItemTitle());
this.add_row_button.addEventListener('click',function(e) {
e.preventDefault();
e.stopPropagation();
self.addRow();
self.refreshValue();
self.refreshRowButtons();
if(self.parent) self.parent.onChildEditorChange(self);
else self.jsoneditor.onChange();
});
self.controls.appendChild(this.add_row_button);
this.delete_last_row_button = this.getButton('Last '+this.getItemTitle(),'delete','Delete Last '+this.getItemTitle());
this.delete_last_row_button.addEventListener('click',function(e) {
e.preventDefault();
e.stopPropagation();
var rows = self.getValue();
rows.pop();
self.setValue(rows);
if(self.parent) self.parent.onChildEditorChange(self);
else self.jsoneditor.onChange();
});
self.controls.appendChild(this.delete_last_row_button);
this.remove_all_rows_button = this.getButton('All','delete','Delete All');
this.remove_all_rows_button.addEventListener('click',function(e) {
e.preventDefault();
e.stopPropagation();
self.setValue([]);
if(self.parent) self.parent.onChildEditorChange(self);
else self.jsoneditor.onChange();
});
self.controls.appendChild(this.remove_all_rows_button);
}
});
// Multiple Editor (for when `type` is an array)
JSONEditor.defaults.editors.multiple = JSONEditor.AbstractEditor.extend({
getDefault: function() {
return this.schema.default || null;
},
register: function() {
if(this.editors) {
for(var i=0; inull';
}
// Array or Object
else if(typeof el === "object") {
// TODO: use theme
var ret = '';
$each(el,function(i,child) {
var html = self.getHTML(child);
// Add the keys to object children
if(!(el instanceof Array)) {
// TODO: use theme
html = ''+i+': '+html+'
';
}
// TODO: use theme
ret += ''+html+'';
});
if(el instanceof Array) ret = ''+ret+'
';
else ret = "';
return ret;
}
// Boolean
else if(typeof el === "boolean") {
return el? 'true' : 'false';
}
// String
else if(typeof el === "string") {
return el.replace(/&/g,'&').replace(//g,'>');
}
// Number
else {
return el;
}
},
setValue: function(val) {
if(this.value !== val) {
this.value = val;
this.refreshValue();
this.jsoneditor.notifyWatchers(this.path);
}
},
destroy: function() {
this.display_area.parentNode.removeChild(this.display_area);
this.title.parentNode.removeChild(this.title);
this.switcher.parentNode.removeChild(this.switcher);
this._super();
}
});
JSONEditor.defaults.editors.select = JSONEditor.AbstractEditor.extend({
getDefault: function() {
return this.schema.default || '';
},
setValue: function(value,initial) {
value = this.typecast(value||'');
// Sanitize value before setting it
var sanitized = value;
if(this.enum_values.indexOf(sanitized) < 0) {
sanitized = this.enum_values[0];
}
if(this.value === sanitized) {
return;
}
this.input.value = this.enum_options[this.enum_values.indexOf(sanitized)];
this.value = sanitized;
this.jsoneditor.notifyWatchers(this.path);
},
register: function() {
this._super();
if(!this.input) return;
this.input.setAttribute('name',this.formname);
},
unregister: function() {
this._super();
if(!this.input) return;
this.input.removeAttribute('name');
},
getNumColumns: function() {
var longest_text = this.getTitle().length;
for(var i=0; i 2) {
$(this.input).select2();
}
this.register();
self.theme.afterInputReady(self.input);
this.jsoneditor.notifyWatchers(this.path);
},
enable: function() {
if(!this.always_disabled) this.input.disabled = false;
this._super();
},
disable: function() {
this.input.disabled = true;
this._super();
},
destroy: function() {
if(this.label) this.label.parentNode.removeChild(this.label);
if(this.description) this.description.parentNode.removeChild(this.description);
this.input.parentNode.removeChild(this.input);
this._super();
}
});
JSONEditor.defaults.editors.multiselect = JSONEditor.AbstractEditor.extend({
getDefault: function() {
return [];
},
build: function() {
var self = this, i;
if(!this.getOption('compact',false)) this.header = this.label = this.theme.getFormInputLabel(this.getTitle());
if(this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description);
this.select_options = {};
this.select_values = {};
var e = this.schema.items.enum || [];
var options = [];
for(i=0; iSize: '+Math.floor((this.value.length-this.value.split(',')[0].length-1)/1.33333)+' bytes';
if(mime.substr(0,5)==="image") {
this.preview.innerHTML += '
';
var img = document.createElement('img');
img.style.maxWidth = '100%';
img.style.maxHeight = '100px';
img.src = this.value;
this.preview.appendChild(img);
}
}
},
enable: function() {
if(this.uploader) this.uploader.disabled = false;
this._super();
},
disable: function() {
if(this.uploader) this.uploader.disabled = true;
this._super();
},
setValue: function(val) {
if(this.value !== val) {
this.value = val;
this.input.value = this.value;
this.refreshPreview();
this.watch_listener();
this.jsoneditor.notifyWatchers(this.path);
}
},
destroy: function() {
this.preview.parentNode.removeChild(this.preview);
this.title.parentNode.removeChild(this.title);
this.input.parentNode.removeChild(this.input);
if(this.uploader) this.uploader.parentNode.removeChild(this.uploader);
this._super();
}
});
JSONEditor.AbstractTheme = Class.extend({
getContainer: function() {
return document.createElement('div');
},
getFloatRightLinkHolder: function() {
var el = document.createElement('div');
el.style = el.style || {};
el.style.float = 'right';
el.style['margin-left'] = '10px';
return el;
},
getModal: function() {
var el = document.createElement('div');
el.style.backgroundColor = 'white';
el.style.border = '1px solid black';
el.style.boxShadow = '3px 3px black';
el.style.position = 'absolute';
el.style.zIndex = '10';
el.style.display = 'none';
return el;
},
getGridContainer: function() {
var el = document.createElement('div');
return el;
},
getGridRow: function() {
var el = document.createElement('div');
el.className = 'row';
return el;
},
getGridColumn: function() {
var el = document.createElement('div');
return el;
},
setGridColumnSize: function(el,size) {
},
getLink: function(text) {
var el = document.createElement('a');
el.setAttribute('href','#');
el.appendChild(document.createTextNode(text));
return el;
},
disableHeader: function(header) {
header.style.color = '#ccc';
},
disableLabel: function(label) {
label.style.color = '#ccc';
},
enableHeader: function(header) {
header.style.color = '';
},
enableLabel: function(label) {
label.style.color = '';
},
getFormInputLabel: function(text) {
var el = document.createElement('label');
el.appendChild(document.createTextNode(text));
return el;
},
getCheckboxLabel: function(text) {
var el = this.getFormInputLabel(text);
el.style.fontWeight = 'normal';
return el;
},
getHeader: function(text) {
var el = document.createElement('h3');
if(typeof text === "string") {
el.textContent = text;
}
else {
el.appendChild(text);
}
return el;
},
getCheckbox: function() {
var el = this.getFormInputField('checkbox');
el.style.display = 'inline-block';
el.style.width = 'auto';
return el;
},
getMultiCheckboxHolder: function(controls,label,description) {
var el = document.createElement('div');
if(label) {
label.style.display = 'block';
el.appendChild(label);
}
for(var i in controls) {
if(!controls.hasOwnProperty(i)) continue;
controls[i].style.display = 'inline-block';
controls[i].style.marginRight = '20px';
el.appendChild(controls[i]);
}
if(description) el.appendChild(description);
return el;
},
getSelectInput: function(options) {
var select = document.createElement('select');
if(options) this.setSelectOptions(select, options);
return select;
},
getSwitcher: function(options) {
var switcher = this.getSelectInput(options);
switcher.style.backgroundColor = 'transparent';
switcher.style.height = 'auto';
switcher.style.fontStyle = 'italic';
switcher.style.fontWeight = 'normal';
switcher.style.padding = '0 0 0 3px';
return switcher;
},
getSwitcherOptions: function(switcher) {
return switcher.getElementsByTagName('option');
},
setSwitcherOptions: function(switcher, options, titles) {
this.setSelectOptions(switcher, options, titles);
},
setSelectOptions: function(select, options, titles) {
titles = titles || [];
select.innerHTML = '';
for(var i=0; i');
input.errmsg = input.parentNode.getElementsByClassName('errormsg')[0];
}
else {
input.errmsg.style.display = '';
}
input.errmsg.textContent = text;
},
removeInputError: function(input) {
if(!input.errmsg) return;
input.group.className = input.group.className.replace(/ error/g,'');
input.errmsg.style.display = 'none';
}
});
// Foundation 3 Specific Theme
JSONEditor.defaults.themes.foundation3 = JSONEditor.defaults.themes.foundation.extend({
getHeaderButtonHolder: function() {
var el = this._super();
el.style.fontSize = '.6em';
return el;
},
getFormInputLabel: function(text) {
var el = this._super(text);
el.style.fontWeight = 'bold';
return el;
},
getTabHolder: function() {
var el = document.createElement('div');
el.className = 'row';
el.innerHTML = "
";
return el;
},
setGridColumnSize: function(el,size) {
var sizes = ['zero','one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve'];
el.className = 'columns '+sizes[size];
},
getTab: function(text) {
var el = document.createElement('dd');
var a = document.createElement('a');
a.setAttribute('href','#');
a.appendChild(text);
el.appendChild(a);
return el;
},
getTabContentHolder: function(tab_holder) {
return tab_holder.children[1];
},
getTabContent: function() {
var el = document.createElement('div');
el.className = 'content active';
el.style.paddingLeft = '5px';
return el;
},
markTabActive: function(tab) {
tab.className += ' active';
},
markTabInactive: function(tab) {
tab.className = tab.className.replace(/\s*active/g,'');
},
addTab: function(holder, tab) {
holder.children[0].appendChild(tab);
}
});
// Foundation 4 Specific Theme
JSONEditor.defaults.themes.foundation4 = JSONEditor.defaults.themes.foundation.extend({
getHeaderButtonHolder: function() {
var el = this._super();
el.style.fontSize = '.6em';
return el;
},
setGridColumnSize: function(el,size) {
el.className = 'columns large-'+size;
},
getFormInputDescription: function(text) {
var el = this._super(text);
el.style.fontSize = '.8rem';
return el;
},
getFormInputLabel: function(text) {
var el = this._super(text);
el.style.fontWeight = 'bold';
return el;
}
});
// Foundation 5 Specific Theme
JSONEditor.defaults.themes.foundation5 = JSONEditor.defaults.themes.foundation.extend({
getFormInputDescription: function(text) {
var el = this._super(text);
el.style.fontSize = '.8rem';
return el;
},
setGridColumnSize: function(el,size) {
el.className = 'columns medium-'+size;
},
getButton: function(text, icon, title) {
var el = this._super(text,icon,title);
el.className = el.className.replace(/\s*small/g,'') + ' tiny';
return el;
},
getTabHolder: function() {
var el = document.createElement('div');
el.innerHTML = "
";
return el;
},
getTab: function(text) {
var el = document.createElement('dd');
var a = document.createElement('a');
a.setAttribute('href','#');
a.appendChild(text);
el.appendChild(a);
return el;
},
getTabContentHolder: function(tab_holder) {
return tab_holder.children[1];
},
getTabContent: function() {
var el = document.createElement('div');
el.className = 'content active';
el.style.paddingLeft = '5px';
return el;
},
markTabActive: function(tab) {
tab.className += ' active';
},
markTabInactive: function(tab) {
tab.className = tab.className.replace(/\s*active/g,'');
},
addTab: function(holder, tab) {
holder.children[0].appendChild(tab);
}
});
JSONEditor.defaults.themes.html = JSONEditor.AbstractTheme.extend({
getFormInputLabel: function(text) {
var el = this._super(text);
el.style.display = 'block';
el.style.marginBottom = '3px';
el.style.fontWeight = 'bold';
return el;
},
getFormInputDescription: function(text) {
var el = this._super(text);
el.style.fontSize = '.8em';
el.style.margin = 0;
el.style.display = 'inline-block';
el.style.fontStyle = 'italic';
return el;
},
getIndentedPanel: function() {
var el = this._super();
el.style.border = '1px solid #ddd';
el.style.padding = '5px';
el.style.margin = '5px';
el.style.borderRadius = '3px';
return el;
},
getChildEditorHolder: function() {
var el = this._super();
el.style.marginBottom = '8px';
return el;
},
getHeaderButtonHolder: function() {
var el = this.getButtonHolder();
el.style.display = 'inline-block';
el.style.marginLeft = '10px';
el.style.fontSize = '.8em';
el.style.verticalAlign = 'middle';
return el;
},
getTable: function() {
var el = this._super();
el.style.borderBottom = '1px solid #ccc';
el.style.marginBottom = '5px';
return el;
},
addInputError: function(input, text) {
input.style.borderColor = 'red';
if(!input.errmsg) {
var group = this.closest(input,'.form-control');
input.errmsg = document.createElement('div');
input.errmsg.setAttribute('class','errmsg');
input.errmsg.style = input.errmsg.style || {};
input.errmsg.style.color = 'red';
group.appendChild(input.errmsg);
}
else {
input.errmsg.style.display = 'block';
}
input.errmsg.innerHTML = '';
input.errmsg.appendChild(document.createTextNode(text));
},
removeInputError: function(input) {
input.style.borderColor = '';
if(input.errmsg) input.errmsg.style.display = 'none';
}
});
JSONEditor.defaults.themes.jqueryui = JSONEditor.AbstractTheme.extend({
getTable: function() {
var el = this._super();
el.setAttribute('cellpadding',5);
el.setAttribute('cellspacing',0);
return el;
},
getTableHeaderCell: function(text) {
var el = this._super(text);
el.className = 'ui-state-active';
el.style.fontWeight = 'bold';
return el;
},
getTableCell: function() {
var el = this._super();
el.className = 'ui-widget-content';
return el;
},
getHeaderButtonHolder: function() {
var el = this.getButtonHolder();
el.style.marginLeft = '10px';
el.style.fontSize = '.6em';
el.style.display = 'inline-block';
return el;
},
getFormInputDescription: function(text) {
var el = this.getDescription(text);
el.style.marginLeft = '10px';
el.style.display = 'inline-block';
return el;
},
getFormControl: function(label, input, description) {
var el = this._super(label,input,description);
if(input.type === 'checkbox') {
el.style.lineHeight = '25px';
el.style.padding = '3px 0';
}
else {
el.style.padding = '4px 0 8px 0';
}
return el;
},
getDescription: function(text) {
var el = document.createElement('span');
el.style.fontSize = '.8em';
el.style.fontStyle = 'italic';
el.textContent = text;
return el;
},
getButtonHolder: function() {
var el = document.createElement('div');
el.className = 'ui-buttonset';
el.style.fontSize = '.7em';
return el;
},
getFormInputLabel: function(text) {
var el = document.createElement('label');
el.style.fontWeight = 'bold';
el.style.display = 'block';
el.textContent = text;
return el;
},
getButton: function(text, icon, title) {
var button = document.createElement("button");
button.className = 'ui-button ui-widget ui-state-default ui-corner-all';
// Icon only
if(icon && !text) {
button.className += ' ui-button-icon-only';
icon.className += ' ui-button-icon-primary ui-icon-primary';
button.appendChild(icon);
}
// Icon and Text
else if(icon) {
button.className += ' ui-button-text-icon-primary';
icon.className += ' ui-button-icon-primary ui-icon-primary';
button.appendChild(icon);
}
// Text only
else {
button.className += ' ui-button-text-only';
}
var el = document.createElement('span');
el.className = 'ui-button-text';
el.textContent = text||title||".";
button.appendChild(el);
button.setAttribute('title',title);
return button;
},
setButtonText: function(button,text, icon, title) {
button.innerHTML = '';
button.className = 'ui-button ui-widget ui-state-default ui-corner-all';
// Icon only
if(icon && !text) {
button.className += ' ui-button-icon-only';
icon.className += ' ui-button-icon-primary ui-icon-primary';
button.appendChild(icon);
}
// Icon and Text
else if(icon) {
button.className += ' ui-button-text-icon-primary';
icon.className += ' ui-button-icon-primary ui-icon-primary';
button.appendChild(icon);
}
// Text only
else {
button.className += ' ui-button-text-only';
}
var el = document.createElement('span');
el.className = 'ui-button-text';
el.textContent = text||title||".";
button.appendChild(el);
button.setAttribute('title',title);
},
getIndentedPanel: function() {
var el = document.createElement('div');
el.className = 'ui-widget-content ui-corner-all';
el.style.padding = '1em 1.4em';
el.style.marginBottom = '20px';
return el;
},
afterInputReady: function(input) {
if(input.controls) return;
input.controls = this.closest(input,'.form-control');
},
addInputError: function(input,text) {
if(!input.controls) return;
if(!input.errmsg) {
input.errmsg = document.createElement('div');
input.errmsg.className = 'ui-state-error';
input.controls.appendChild(input.errmsg);
}
else {
input.errmsg.style.display = '';
}
input.errmsg.textContent = text;
},
removeInputError: function(input) {
if(!input.errmsg) return;
input.errmsg.style.display = 'none';
},
markTabActive: function(tab) {
tab.className = tab.className.replace(/\s*ui-widget-header/g,'')+' ui-state-active';
},
markTabInactive: function(tab) {
tab.className = tab.className.replace(/\s*ui-state-active/g,'')+' ui-widget-header';
}
});
JSONEditor.AbstractIconLib = Class.extend({
mapping: {
collapse: '',
expand: '',
delete: '',
edit: '',
add: '',
cancel: '',
save: '',
moveup: '',
movedown: ''
},
icon_prefix: '',
getIconClass: function(key) {
if(this.mapping[key]) return this.icon_prefix+this.mapping[key];
else return null;
},
getIcon: function(key) {
var iconclass = this.getIconClass(key);
if(!iconclass) return null;
var i = document.createElement('i');
i.className = iconclass;
return i;
}
});
JSONEditor.defaults.iconlibs.bootstrap2 = JSONEditor.AbstractIconLib.extend({
mapping: {
collapse: 'chevron-down',
expand: 'chevron-up',
delete: 'trash',
edit: 'pencil',
add: 'plus',
cancel: 'ban-circle',
save: 'ok',
moveup: 'arrow-up',
movedown: 'arrow-down'
},
icon_prefix: 'icon-'
});
JSONEditor.defaults.iconlibs.bootstrap3 = JSONEditor.AbstractIconLib.extend({
mapping: {
collapse: 'chevron-down',
expand: 'chevron-right',
delete: 'remove',
edit: 'pencil',
add: 'plus',
cancel: 'floppy-remove',
save: 'floppy-saved',
moveup: 'arrow-up',
movedown: 'arrow-down'
},
icon_prefix: 'glyphicon glyphicon-'
});
JSONEditor.defaults.iconlibs.fontawesome3 = JSONEditor.AbstractIconLib.extend({
mapping: {
collapse: 'chevron-down',
expand: 'chevron-right',
delete: 'remove',
edit: 'pencil',
add: 'plus',
cancel: 'ban-circle',
save: 'save',
moveup: 'arrow-up',
movedown: 'arrow-down'
},
icon_prefix: 'icon-'
});
JSONEditor.defaults.iconlibs.fontawesome4 = JSONEditor.AbstractIconLib.extend({
mapping: {
collapse: 'caret-square-o-down',
expand: 'caret-square-o-right',
delete: 'times',
edit: 'pencil',
add: 'plus',
cancel: 'ban',
save: 'save',
moveup: 'arrow-up',
movedown: 'arrow-down'
},
icon_prefix: 'fa fa-'
});
JSONEditor.defaults.iconlibs.foundation2 = JSONEditor.AbstractIconLib.extend({
mapping: {
collapse: 'minus',
expand: 'plus',
delete: 'remove',
edit: 'edit',
add: 'add-doc',
cancel: 'error',
save: 'checkmark',
moveup: 'up-arrow',
movedown: 'down-arrow'
},
icon_prefix: 'foundicon-'
});
JSONEditor.defaults.iconlibs.foundation3 = JSONEditor.AbstractIconLib.extend({
mapping: {
collapse: 'minus',
expand: 'plus',
delete: 'x',
edit: 'pencil',
add: 'page-add',
cancel: 'x-circle',
save: 'save',
moveup: 'arrow-up',
movedown: 'arrow-down'
},
icon_prefix: 'fi-'
});
JSONEditor.defaults.iconlibs.jqueryui = JSONEditor.AbstractIconLib.extend({
mapping: {
collapse: 'triangle-1-s',
expand: 'triangle-1-e',
delete: 'trash',
edit: 'pencil',
add: 'plusthick',
cancel: 'closethick',
save: 'disk',
moveup: 'arrowthick-1-n',
movedown: 'arrowthick-1-s'
},
icon_prefix: 'ui-icon ui-icon-'
});
JSONEditor.defaults.templates.default = function() {
var expandVars = function(vars) {
var expanded = {};
$each(vars, function(i,el) {
if(typeof el === "object" && el !== null) {
var tmp = {};
$each(el, function(j,item) {
tmp[i+'.'+j] = item;
});
$extend(expanded,expandVars(tmp));
}
else {
expanded[i] = el;
}
});
return expanded;
};
return {
compile: function(template) {
return function (vars) {
var expanded = expandVars(vars);
var ret = template+"";
// Only supports basic {{var}} macro replacement
$each(expanded,function(key,value) {
ret = ret.replace(new RegExp('{{\\s*'+key+'\\s*}}','g'),value);
});
return ret;
};
}
};
};
JSONEditor.defaults.templates.ejs = function() {
if(!window.EJS) return false;
return {
compile: function(template) {
var compiled = new EJS({
text: template
});
return function(context) {
return compiled.render(context);
};
}
};
};
JSONEditor.defaults.templates.handlebars = function() {
return window.Handlebars;
};
JSONEditor.defaults.templates.hogan = function() {
if(!window.Hogan) return false;
return {
compile: function(template) {
var compiled = Hogan.compile(template);
return function(context) {
return compiled.render(context);
};
}
};
};
JSONEditor.defaults.templates.markup = function() {
if(!window.Mark || !window.Mark.up) return false;
return {
compile: function(template) {
return function(context) {
return Mark.up(template,context);
};
}
};
};
JSONEditor.defaults.templates.mustache = function() {
if(!window.Mustache) return false;
return {
compile: function(template) {
return function(view) {
return Mustache.render(template, view);
};
}
};
};
JSONEditor.defaults.templates.swig = function() {
return window.swig;
};
JSONEditor.defaults.templates.underscore = function() {
if(!window._) return false;
return {
compile: function(template) {
return function(context) {
return _.template(template, context);
};
}
};
};
// Set the default theme
JSONEditor.defaults.theme = 'html';
// Set the default template engine
JSONEditor.defaults.template = 'default';
// Default options when initializing JSON Editor
JSONEditor.defaults.options = {};
// Miscellaneous Plugin Settings
JSONEditor.plugins = {
ace: {
theme: ''
},
epiceditor: {
},
sceditor: {
}
};
// Default per-editor options
for(var i in JSONEditor.defaults.editors) {
if(!JSONEditor.defaults.editors.hasOwnProperty(i)) continue;
JSONEditor.defaults.editors[i].options = JSONEditor.defaults.editors.options || {};
}
// Set the default resolvers
// Use "multiple" as a fall back for everything
JSONEditor.defaults.resolvers.unshift(function(schema) {
if(typeof schema.type !== "string") return "multiple";
});
// If the type is set and it's a basic type, use the primitive editor
JSONEditor.defaults.resolvers.unshift(function(schema) {
// If the schema is a simple type
if(typeof schema.type === "string") return schema.type;
});
// Use the select editor for all boolean values
JSONEditor.defaults.resolvers.unshift(function(schema) {
if(schema.type === 'boolean') {
return "select";
}
});
// Use the multiple editor for schemas where the `type` is set to "any"
JSONEditor.defaults.resolvers.unshift(function(schema) {
// If the schema can be of any type
if(schema.type === "any") return "multiple";
});
// Editor for base64 encoded files
JSONEditor.defaults.resolvers.unshift(function(schema) {
// If the schema can be of any type
if(schema.type === "string" && schema.media && schema.media.binaryEncoding==="base64") {
return "base64";
}
});
// Use the table editor for arrays with the format set to `table`
JSONEditor.defaults.resolvers.unshift(function(schema) {
// Type `array` with format set to `table`
if(schema.type == "array" && schema.format == "table") {
return "table";
}
});
// Use the `enum` or `select` editors for schemas with enumerated properties
JSONEditor.defaults.resolvers.unshift(function(schema) {
if(schema.enum) {
if(schema.type === "array" || schema.type === "object") {
return "enum";
}
else if(schema.type === "number" || schema.type === "integer" || schema.type === "string") {
return "select";
}
}
});
// Use the 'multiselect' editor for arrays of enumerated strings/numbers/integers
JSONEditor.defaults.resolvers.unshift(function(schema) {
if(schema.type === "array" && schema.items && !(schema.items instanceof Array) && schema.uniqueItems && schema.items.enum && ['string','number','integer'].indexOf(schema.items.type) >= 0) {
return 'multiselect';
}
});
// Use the multiple editor for schemas with `oneOf` set
JSONEditor.defaults.resolvers.unshift(function(schema) {
// If this schema uses `oneOf`
if(schema.oneOf) return "multiple";
});
/**
* This is a small wrapper for using JSON Editor like a typical jQuery plugin.
*/
if(window.jQuery || window.Zepto) {
window.$ = window.$ || {};
$.jsoneditor = JSONEditor.defaults;
(window.jQuery || window.Zepto).fn.jsoneditor = function(options) {
var self = this;
var editor = this.data('jsoneditor');
if(options === 'value') {
if(!editor) throw "Must initialize jsoneditor before getting/setting the value";
// Set value
if(arguments.length > 1) {
editor.setValue(arguments[1]);
}
// Get value
else {
return editor.getValue();
}
}
else if(options === 'validate') {
if(!editor) throw "Must initialize jsoneditor before validating";
// Validate a specific value
if(arguments.length > 1) {
return editor.validate(arguments[1]);
}
// Validate current value
else {
return editor.validate();
}
}
else if(options === 'destroy') {
if(editor) {
editor.destroy();
this.data('jsoneditor',null);
}
}
else {
// Destroy first
if(editor) {
editor.destroy();
}
// Create editor
editor = new JSONEditor(this.get(0),options);
this.data('jsoneditor',editor);
// Setup event listeners
editor.on('change',function() {
self.trigger('change');
});
editor.on('ready',function() {
self.trigger('ready');
});
}
return this;
};
}
window.JSONEditor = JSONEditor;
})();