From e6ea87469ee7d399e4de02f6210ec5a604f5f79e Mon Sep 17 00:00:00 2001 From: Oli Frebourg Date: Tue, 1 Aug 2017 17:07:19 +0100 Subject: [PATCH 1/2] Added an option 'valueDisplayMode' to choose what the node value of a tree should indicate. If set to 'value' (default) it displays the node value, as it used to do. If set to 'schema' and a schema has been defined in the options, it displays the schema type of the node. If set to 'schema-if-null', it only displays the schema type if the value of the node is null. --- examples/14_json_value_display_mode.html | 132 +++++++++++++++++++++++ src/css/jsoneditor.css | 14 +++ src/js/JSONEditor.js | 62 ++++++++++- src/js/Node.js | 43 +++++++- 4 files changed, 248 insertions(+), 3 deletions(-) create mode 100644 examples/14_json_value_display_mode.html diff --git a/examples/14_json_value_display_mode.html b/examples/14_json_value_display_mode.html new file mode 100644 index 000000000..ec08a40af --- /dev/null +++ b/examples/14_json_value_display_mode.html @@ -0,0 +1,132 @@ + + + + JSONEditor | JSON schema validation + + + + + + + +

Value display mode

+

+ This example demonstrates the different value display modes: + + + + + + + + + + + + + +
valuedisplays the value of a node
schemadisplays the schema type of a node
schema-if-nulldisplays the schema type of a node if its value is null
+

+ +

Value

+
+

Schema

+
+

Schema if null

+
+ + + + diff --git a/src/css/jsoneditor.css b/src/css/jsoneditor.css index 5d5f89888..b68f651d7 100644 --- a/src/css/jsoneditor.css +++ b/src/css/jsoneditor.css @@ -118,6 +118,20 @@ div.jsoneditor-value.jsoneditor-null { color: #004ED0; } +div.jsoneditor-value.jsoneditor-null.jsoneditor-expected-number, +div.jsoneditor-value.jsoneditor-null.jsoneditor-expected-string, +div.jsoneditor-value.jsoneditor-null.jsoneditor-expected-integer { + color: #ee422e; + font-style: italic; +} + +div.jsoneditor-value.jsoneditor-expected-number, +div.jsoneditor-value.jsoneditor-expected-string, +div.jsoneditor-value.jsoneditor-expected-integer { + color: #008000; + font-style: italic; +} + div.jsoneditor-value.jsoneditor-invalid { color: #000000; } diff --git a/src/js/JSONEditor.js b/src/js/JSONEditor.js index 9b0a33156..3820b94d3 100644 --- a/src/js/JSONEditor.js +++ b/src/js/JSONEditor.js @@ -44,6 +44,9 @@ var util = require('./util'); * {boolean} sortObjectKeys If true, object keys are * sorted before display. * false by default. + * {string} valueDisplayMode Value display type. Available values: + * 'value' (default), 'schema', + * 'schema-if-null' * @param {Object | undefined} json JSON object */ function JSONEditor (container, options, json) { @@ -81,8 +84,9 @@ function JSONEditor (container, options, json) { var VALID_OPTIONS = [ 'ajv', 'schema', 'schemaRefs','templates', 'ace', 'theme','autocomplete', - 'onChange', 'onEditable', 'onError', 'onModeChange', - 'escapeUnicode', 'history', 'search', 'mode', 'modes', 'name', 'indentation', 'sortObjectKeys' + 'onChange', 'onEditable', 'onError', 'onModeChange', 'onValueDisplayModeChange', + 'escapeUnicode', 'history', 'search', 'mode', 'modes', 'name', 'indentation', 'sortObjectKeys', + 'valueDisplayMode' ]; Object.keys(options).forEach(function (option) { @@ -132,6 +136,9 @@ JSONEditor.prototype._create = function (container, options, json) { var mode = this.options.mode || (this.options.modes && this.options.modes[0]) || 'tree'; this.setMode(mode); + + var valueDisplayMode = this.options.valueDisplayMode || 'value'; + this.setValueDisplayMode(valueDisplayMode); }; /** @@ -254,6 +261,57 @@ JSONEditor.prototype.getMode = function () { return this.options.mode; }; +/** + * Change the value display mode of the editor. + * JSONEditor will be extended with all methods needed for the chosen mode. + * @param {String} mode Available modes: 'value' (default), 'schema', 'schema-if-null'. + */ +JSONEditor.prototype.setValueDisplayMode = function (valueDisplayMode) { + var container = this.container; + var options = util.extend({}, this.options); + var oldMode = options.valueDisplayMode; + var data; + var name; + + options.valueDisplayMode = valueDisplayMode; + var config = JSONEditor.modes[this.options.mode]; + if (config) { + try { + if (typeof config.load === 'function') { + try { + config.load.call(this); + } + catch (err) { + console.error(err); + } + } + + if (typeof options.onValueDisplayModeChange === 'function' && valueDisplayMode !== oldMode) { + try { + options.onValueDisplayModeChange(valueDisplayMode, oldMode); + } + catch (err) { + console.error(err); + } + } + } + catch (err) { + this._onError(err); + } + } + else { + throw new Error('Unknown value display mode "' + options.valueDisplayMode + '"'); + } +}; + +/** + * Get the current value display mode + * @return {string} + */ +JSONEditor.prototype.getValueDisplayMode = function () { + return this.options.valueDisplayMode; +}; + /** * Throw an error. If an error callback is configured in options.error, this * callback will be invoked. Else, a regular error is thrown. diff --git a/src/js/Node.js b/src/js/Node.js index f7a077ac6..18d0144fb 100644 --- a/src/js/Node.js +++ b/src/js/Node.js @@ -1205,6 +1205,36 @@ Node.prototype._onChangeField = function () { this.previousField = this.field; }; +/** + * Find schema reference in the editor options (recursively if necessary) + * @private + * @param {string} [reference] schema ref for which we're looking for the type + * @return {string} Returns the schema type for the schema ref + */ +Node.prototype._findSchemaRef = function (reference) { + var ref = this.editor.options.schemaRefs[reference]; + if (ref) { + if (!ref.type && ref.$ref) { + return this._findSchemaRef(ref.$ref); + } + if (ref.type === 'object') { + if (ref.properties && ref.properties[this.field]) { + if (ref.properties[this.field].type) { + return ref.properties[this.field].type; + } + if (ref.properties[this.field].$ref) { + return this._findSchemaRef(ref.properties[this.field].$ref); + } + } + // console.warn("Could not find schema ref", reference); + return undefined; + } + return ref.type; + } + console.warn("Schema ref %s undefined", reference); + return undefined; +}; + /** * Update dom value: * - the text color of the value, depending on the type of the value @@ -1217,12 +1247,23 @@ Node.prototype._updateDomValue = function () { if (domValue) { var classNames = ['jsoneditor-value']; - // set text color depending on value type var value = this.value; var type = (this.type == 'auto') ? util.type(value) : this.type; var isUrl = type == 'string' && util.isUrl(value); classNames.push('jsoneditor-' + type); + if (this.schema && (this.editor.options.valueDisplayMode === 'schema' || this.editor.options.valueDisplayMode === 'schema-if-null')) { + if (type === 'null' || this.editor.options.valueDisplayMode === 'schema') { + var schemaType = this.schema.type; + if (!schemaType && this.schema.$ref) { + schemaType = this._findSchemaRef(this.schema.$ref); + } + if (schemaType) { + classNames.push('jsoneditor-expected-' + schemaType); + domValue.textContent = schemaType; + } + } + } if (isUrl) { classNames.push('jsoneditor-url'); } From 7cf6266a2e30264ed945f8fa7a927d6f1cc951af Mon Sep 17 00:00:00 2001 From: Oli Frebourg Date: Tue, 1 Aug 2017 17:16:09 +0100 Subject: [PATCH 2/2] minor code style fixes --- examples/14_json_value_display_mode.html | 17 +++++++---------- src/js/Node.js | 4 ++-- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/examples/14_json_value_display_mode.html b/examples/14_json_value_display_mode.html index ec08a40af..1d68c1da9 100644 --- a/examples/14_json_value_display_mode.html +++ b/examples/14_json_value_display_mode.html @@ -42,11 +42,11 @@

Value display mode

Value

-
+

Schema

-
+

Schema if null

-
+
diff --git a/src/js/Node.js b/src/js/Node.js index 18d0144fb..af8845ae4 100644 --- a/src/js/Node.js +++ b/src/js/Node.js @@ -1226,12 +1226,12 @@ Node.prototype._findSchemaRef = function (reference) { return this._findSchemaRef(ref.properties[this.field].$ref); } } - // console.warn("Could not find schema ref", reference); + // console.warn('Could not find schema ref', reference); return undefined; } return ref.type; } - console.warn("Schema ref %s undefined", reference); + console.warn('Schema ref %s undefined', reference); return undefined; };