Skip to content

Commit

Permalink
Add name attributes to form inputs so JSON Editor can be embedded in …
Browse files Browse the repository at this point in the history 
…an HTML form.

Add LZ-string compression to demo page direct links. Was running into URI request length errors with large schemas and values.
  • Loading branch information
@jdorn
jdorn committed Apr 28, 2014
1 parent 6342626 commit 31cdd3f
Show file tree
Hide file tree
Showing 9 changed files with 89 additions and 16 deletions.
5 changes: 5 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,11 @@ Here are all the available options:
<td>If <code>true</code>, remove all Edit JSON buttons from objects.</td>
<td><code>false</code></td>
</tr>
<tr>
<td>form_name_root</td>
<td>The first part of the `name` attribute of form inputs in the editor. An full example name is `root[person][name]` where "root" is the form_name_root.</td>
<td>root</td>
</tr>
<tr>
<td>iconlib</td>
<td>The icon library to use for the editor. See the <strong>CSS Integration</strong> section below for more info.</td>
Expand Down
10 changes: 6 additions & 4 deletions demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@

<style>[class*="foundicon-"] {font-family: GeneralFoundicons;font-style: normal;}</style>
<script src='dist/jsoneditor.js'></script>
<!-- This library is used to provide direct links to the demo. It is not required for JSON Editor -->
<script src='https://rawgit.com/pieroxy/lz-string/master/libs/lz-string-1.3.3-min.js'></script>
</head>
<body>
<div class='container'>
Expand Down Expand Up @@ -130,7 +132,7 @@ <h2>Code</h2>
var schema;
if(window.location.href.match('[?&]schema=([^&]+)')) {
try {
schema = JSON.parse(atob(window.location.href.match('[?&]schema=([^&]+)')[1]));
schema = JSON.parse(LZString.decompressFromBase64(window.location.href.match('[?&]schema=([^&]+)')[1]));
}
catch(e) {
console.log('invalid starting schema');
Expand Down Expand Up @@ -233,8 +235,8 @@ <h2>Code</h2>
var updateDirectLink = function() {
var url = window.location.href.replace(/\?.*/,'');

url += '?schema='+btoa(JSON.stringify(schema));
url += '&value='+btoa(JSON.stringify(jsoneditor.getValue()));
url += '?schema='+LZString.compressToBase64(JSON.stringify(schema));
url += '&value='+LZString.compressToBase64(JSON.stringify(jsoneditor.getValue()));

for(var i in JSONEditor.defaults.options) {
if(!JSONEditor.defaults.options.hasOwnProperty(i)) continue;
Expand Down Expand Up @@ -382,7 +384,7 @@ <h2>Code</h2>
refreshBooleanOptions(true);
reload();
if(window.location.href.match('[?&]value=([^&]+)')) {
jsoneditor.setValue(JSON.parse(atob(window.location.href.match('[?&]value=([^&]+)')[1])));
jsoneditor.setValue(JSON.parse(LZString.decompressFromBase64(window.location.href.match('[?&]value=([^&]+)')[1])));
}
})();
</script>
Expand Down
39 changes: 36 additions & 3 deletions dist/jsoneditor.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/*! JSON Editor v0.6.4 - JSON Schema -> HTML Editor
/*! JSON Editor v0.6.5 - JSON Schema -> HTML Editor
* By Jeremy Dorn - https://github.com/jdorn/json-editor/
* Released under the MIT license
*
* Date: 2014-04-26
* Date: 2014-04-27
*/

/**
Expand Down Expand Up @@ -1354,6 +1354,8 @@ JSONEditor.AbstractEditor = Class.extend({

if(!options.path && !this.schema.id) this.schema.id = 'root';
this.path = options.path || 'root';
this.formname = options.formname || this.path.replace(/\.([^.]+)/g,'[$1]');
if(this.jsoneditor.options.form_name_root) this.formname = this.formname.replace(/^root\[/,this.jsoneditor.options.form_name_root+'[');
if(this.schema.id) this.container.setAttribute('data-schemaid',this.schema.id);
if(this.schema.type && typeof this.schema.type === "string") this.container.setAttribute('data-schematype',this.schema.type);
this.container.setAttribute('data-schemapath',this.path);
Expand Down Expand Up @@ -1773,6 +1775,16 @@ JSONEditor.defaults.editors.string = JSONEditor.AbstractEditor.extend({
getDefault: function() {
return this.schema.default || '';
},
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');
},
setValue: function(value,initial,from_template) {
var self = this;

Expand Down Expand Up @@ -2058,6 +2070,8 @@ JSONEditor.defaults.editors.string = JSONEditor.AbstractEditor.extend({
requestAnimationFrame(function() {
self.afterInputReady();
});

this.register();

// Compile and store the template
if(this.schema.template) {
Expand Down Expand Up @@ -3391,6 +3405,7 @@ JSONEditor.defaults.editors.array = JSONEditor.AbstractEditor.extend({
else {
if(row.tab) row.tab.style.display = 'none';
holder.style.display = 'none';
row.unregister();
}
},
getMax: function() {
Expand Down Expand Up @@ -3451,6 +3466,7 @@ JSONEditor.defaults.editors.array = JSONEditor.AbstractEditor.extend({
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);
Expand Down Expand Up @@ -3704,6 +3720,7 @@ JSONEditor.defaults.editors.array = JSONEditor.AbstractEditor.extend({
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();
Expand Down Expand Up @@ -4678,6 +4695,16 @@ JSONEditor.defaults.editors.select = JSONEditor.AbstractEditor.extend({
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<this.enum_options.length; i++) {
Expand Down Expand Up @@ -4722,17 +4749,20 @@ JSONEditor.defaults.editors.select = JSONEditor.AbstractEditor.extend({
this.input_type = 'select';
this.enum_options = [];
this.enum_values = [];
this.enum_display = [];

// Enum options enumerated
if(this.schema.enum) {
$each(this.schema.enum,function(i,option) {
self.enum_options[i] = ""+option;
self.enum_display[i] = ""+option;
self.enum_values[i] = self.typecast(option);
});
}
// Boolean
else if(this.schema.type === "boolean") {
self.enum_options = ['true','false'];
self.enum_display = ['true','false'];
self.enum_options = ['1',''];
self.enum_values = [true,false];
}
// Other, not supported
Expand All @@ -4743,6 +4773,7 @@ JSONEditor.defaults.editors.select = JSONEditor.AbstractEditor.extend({
if(this.getOption('compact')) this.container.setAttribute('class',this.container.getAttribute('class')+' compact');

this.input = this.theme.getSelectInput(this.enum_options);
this.theme.setSelectOptions(this.input,this.enum_options,this.enum_display);

if(this.schema.readOnly || this.schema.readonly) {
this.always_disabled = true;
Expand Down Expand Up @@ -4776,6 +4807,8 @@ JSONEditor.defaults.editors.select = JSONEditor.AbstractEditor.extend({
if(window.$ && $.fn && $.fn.select2 && this.enum_options.length > 2) {
$(this.input).select2();
}

this.register();

self.theme.afterInputReady(self.input);
this.jsoneditor.notifyWatchers(this.path);
Expand Down
12 changes: 6 additions & 6 deletions dist/jsoneditor.min.js
View file

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions src/editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@ JSONEditor.AbstractEditor = Class.extend({

if(!options.path && !this.schema.id) this.schema.id = 'root';
this.path = options.path || 'root';
this.formname = options.formname || this.path.replace(/\.([^.]+)/g,'[$1]');
if(this.jsoneditor.options.form_name_root) this.formname = this.formname.replace(/^root\[/,this.jsoneditor.options.form_name_root+'[');
if(this.schema.id) this.container.setAttribute('data-schemaid',this.schema.id);
if(this.schema.type && typeof this.schema.type === "string") this.container.setAttribute('data-schematype',this.schema.type);
this.container.setAttribute('data-schemapath',this.path);
Expand Down
3 changes: 3 additions & 0 deletions src/editors/array.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,7 @@ JSONEditor.defaults.editors.array = JSONEditor.AbstractEditor.extend({
else {
if(row.tab) row.tab.style.display = 'none';
holder.style.display = 'none';
row.unregister();
}
},
getMax: function() {
Expand Down Expand Up @@ -330,6 +331,7 @@ JSONEditor.defaults.editors.array = JSONEditor.AbstractEditor.extend({
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);
Expand Down Expand Up @@ -583,6 +585,7 @@ JSONEditor.defaults.editors.array = JSONEditor.AbstractEditor.extend({
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();
Expand Down
18 changes: 17 additions & 1 deletion src/editors/select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,16 @@ JSONEditor.defaults.editors.select = JSONEditor.AbstractEditor.extend({
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<this.enum_options.length; i++) {
Expand Down Expand Up @@ -63,17 +73,20 @@ JSONEditor.defaults.editors.select = JSONEditor.AbstractEditor.extend({
this.input_type = 'select';
this.enum_options = [];
this.enum_values = [];
this.enum_display = [];

// Enum options enumerated
if(this.schema.enum) {
$each(this.schema.enum,function(i,option) {
self.enum_options[i] = ""+option;
self.enum_display[i] = ""+option;
self.enum_values[i] = self.typecast(option);
});
}
// Boolean
else if(this.schema.type === "boolean") {
self.enum_options = ['true','false'];
self.enum_display = ['true','false'];
self.enum_options = ['1',''];
self.enum_values = [true,false];
}
// Other, not supported
Expand All @@ -84,6 +97,7 @@ JSONEditor.defaults.editors.select = JSONEditor.AbstractEditor.extend({
if(this.getOption('compact')) this.container.setAttribute('class',this.container.getAttribute('class')+' compact');

this.input = this.theme.getSelectInput(this.enum_options);
this.theme.setSelectOptions(this.input,this.enum_options,this.enum_display);

if(this.schema.readOnly || this.schema.readonly) {
this.always_disabled = true;
Expand Down Expand Up @@ -117,6 +131,8 @@ JSONEditor.defaults.editors.select = JSONEditor.AbstractEditor.extend({
if(window.$ && $.fn && $.fn.select2 && this.enum_options.length > 2) {
$(this.input).select2();
}

this.register();

self.theme.afterInputReady(self.input);
this.jsoneditor.notifyWatchers(this.path);
Expand Down
12 changes: 12 additions & 0 deletions src/editors/string.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,16 @@ JSONEditor.defaults.editors.string = JSONEditor.AbstractEditor.extend({
getDefault: function() {
return this.schema.default || '';
},
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');
},
setValue: function(value,initial,from_template) {
var self = this;

Expand Down Expand Up @@ -287,6 +297,8 @@ JSONEditor.defaults.editors.string = JSONEditor.AbstractEditor.extend({
requestAnimationFrame(function() {
self.afterInputReady();
});

this.register();

// Compile and store the template
if(this.schema.template) {
Expand Down
4 changes: 2 additions & 2 deletions src/intro.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/*! JSON Editor v0.6.4 - JSON Schema -> HTML Editor
/*! JSON Editor v0.6.5 - JSON Schema -> HTML Editor
* By Jeremy Dorn - https://github.com/jdorn/json-editor/
* Released under the MIT license
*
* Date: 2014-04-26
* Date: 2014-04-27
*/

/**
Expand Down

0 comments on commit 31cdd3f

Please sign in to comment.