Hide show error table (#620)

* allow to hide adn show the error table

* code mode: scroll to line on text selection

* validation icon - pointer cursor

* (1) toggle validation errors table by clicking validation count
(2) preserve show/hide state after fixing parse errors

* remove arrow function (no ES6 support)
This commit is contained in:
Meir Rotstein 2019-01-04 21:57:19 +02:00 committed by Jos de Jong
parent bc5c133b52
commit 78194051b0
2 changed files with 26 additions and 4 deletions

View File

@ -29,10 +29,12 @@ div.jsoneditor-statusbar > .jsoneditor-validation-error-icon {
padding: 0; padding: 0;
margin-top: 1px; margin-top: 1px;
background: url("img/jsoneditor-icons.svg") -168px -48px; background: url("img/jsoneditor-icons.svg") -168px -48px;
cursor: pointer;
} }
div.jsoneditor-statusbar > .jsoneditor-validation-error-count { div.jsoneditor-statusbar > .jsoneditor-validation-error-count {
float: right; float: right;
margin: 0 4px 0 0; margin: 0 4px 0 0;
cursor: pointer;
} }
div.jsoneditor-statusbar > .jsoneditor-parse-error-icon { div.jsoneditor-statusbar > .jsoneditor-parse-error-icon {
float: right; float: right;

View File

@ -95,6 +95,11 @@ textmode.create = function (container, options) {
this.validateSchema = null; this.validateSchema = null;
this.validationSequence = 0; this.validationSequence = 0;
this.annotations = []; this.annotations = [];
/**
* Visibility of validation error table
* @type {Boolean|undefined} undefined means default behavior for mode
*/
this.errorTableVisible = undefined;
// create a debounced validate function // create a debounced validate function
this._debouncedValidate = util.debounce(this.validate.bind(this), this.DEBOUNCE_INTERVAL); this._debouncedValidate = util.debounce(this.validate.bind(this), this.DEBOUNCE_INTERVAL);
@ -794,7 +799,7 @@ textmode.validate = function () {
} }
} }
else { else {
this._renderErrors(parseErrors || []); this._renderErrors(parseErrors || [], true);
} }
}; };
@ -847,11 +852,13 @@ textmode._validateCustom = function (json) {
return Promise.resolve(null); return Promise.resolve(null);
}; };
textmode._renderErrors = function(errors) { textmode._renderErrors = function(errors, noValidation) {
// clear all current errors // clear all current errors
var me = this; var me = this;
var validationErrorsCount = 0; var validationErrorsCount = 0;
this.errorTableVisible = (typeof this.errorTableVisible === 'undefined') ? !this.aceEditor : this.errorTableVisible;
if (this.dom.validationErrors) { if (this.dom.validationErrors) {
this.dom.validationErrors.parentNode.removeChild(this.dom.validationErrors); this.dom.validationErrors.parentNode.removeChild(this.dom.validationErrors);
this.dom.validationErrors = null; this.dom.validationErrors = null;
@ -891,8 +898,11 @@ textmode._renderErrors = function(errors) {
}); });
this._refreshAnnotations(); this._refreshAnnotations();
} else { }
var validationErrors = document.createElement('div');
// keep default behavior for parse errors
if (noValidation ? !this.aceEditor : this.errorTableVisible) {
var validationErrors = document.createElement('div');
validationErrors.innerHTML = '<table class="jsoneditor-text-errors"><tbody></tbody></table>'; validationErrors.innerHTML = '<table class="jsoneditor-text-errors"><tbody></tbody></table>';
var tbody = validationErrors.getElementsByTagName('tbody')[0]; var tbody = validationErrors.getElementsByTagName('tbody')[0];
@ -955,7 +965,10 @@ textmode._renderErrors = function(errors) {
var height = this.dom.validationErrorsContainer.clientHeight + (this.dom.statusBar ? this.dom.statusBar.clientHeight : 0); var height = this.dom.validationErrorsContainer.clientHeight + (this.dom.statusBar ? this.dom.statusBar.clientHeight : 0);
this.content.style.marginBottom = (-height) + 'px'; this.content.style.marginBottom = (-height) + 'px';
this.content.style.paddingBottom = height + 'px'; this.content.style.paddingBottom = height + 'px';
} else {
validationErrorsCount = errors.reduce(function (acc, curr) {return (curr.type === 'validation' ? ++acc: acc)}, 0);
} }
} else { } else {
if (this.aceEditor) { if (this.aceEditor) {
this.annotations = []; this.annotations = [];
@ -971,6 +984,7 @@ textmode._renderErrors = function(errors) {
if (showIndication) { if (showIndication) {
this.validationErrorIndication.validationErrorCount.innerText = validationErrorsCount; this.validationErrorIndication.validationErrorCount.innerText = validationErrorsCount;
this.validationErrorIndication.validationErrorIcon.title = validationErrorsCount + ' schema validation error(s) found'; this.validationErrorIndication.validationErrorIcon.title = validationErrorsCount + ' schema validation error(s) found';
this.validationErrorIndication.validationErrorCount.onclick = this.validationErrorIndication.validationErrorIcon.onclick = this._toggleErrorTableVisibility.bind(this);
} }
} }
@ -981,6 +995,11 @@ textmode._renderErrors = function(errors) {
} }
}; };
textmode._toggleErrorTableVisibility = function () {
this.errorTableVisible = !this.errorTableVisible;
this.validate();
};
/** /**
* Get the selection details * Get the selection details
* @returns {{start:{row:Number, column:Number},end:{row:Number, column:Number},text:String}} * @returns {{start:{row:Number, column:Number},end:{row:Number, column:Number},text:String}}
@ -1085,6 +1104,7 @@ textmode.setTextSelection = function (startPos, endPos) {
} }
}; };
this.aceEditor.selection.setRange(range); this.aceEditor.selection.setRange(range);
this.aceEditor.scrollToLine(startPos.row - 1, true);
} }
}; };