StardewValley
/
jsoneditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Styling of values in tree mode now customizable. Added a custom styling example

This commit is contained in:
jos 2015-12-27 17:36:59 +01:00
parent 2afe73a43a
commit db0345c668
7 changed files with 187 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
HISTORY.md
View File

@ -15,6 +15,7 @@ https://github.com/josdejong/jsoneditor
- Renamed options `change`, `editable`, `error` to respectively `onChange`, - Renamed options `change`, `editable`, `error` to respectively `onChange`,
`onEditable`, and `onError`. Old options are still working and give a `onEditable`, and `onError`. Old options are still working and give a
deprecation warning. deprecation warning.
- Colors of values are now customizable using CSS.
- JSONEditor new throws a warning in the console in case of unknown options. - JSONEditor new throws a warning in the console in case of unknown options.
- Fixed #93 and #227: html codes like `&` not escaped. - Fixed #93 and #227: html codes like `&` not escaped.
- Fixed #149: Memory leak when switching mode from/to `code` mode, web worker - Fixed #149: Memory leak when switching mode from/to `code` mode, web worker

51
examples/06_custom_styling.html Normal file
View File

@ -0,0 +1,51 @@
<!DOCTYPE HTML>
<html>
<head>
<title>JSONEditor | Custom styling</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
#jsoneditor {
width: 500px;
height: 500px;
}
p {
width: 500px;
font-family: "DejaVu Sans", sans-serif;
}
</style>
<link href="./css/darktheme.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>
This example demonstrates how to customize the look of JSONEditor,
the editor below has a dark theme. Note that the example isn't worked
out for the mode <code>code</code>. To do that, you can load and configure
a custom theme for the Ace editor.
</p>
<div id="jsoneditor"></div>
<script>
// create the editor
var container = document.getElementById('jsoneditor');
var options = {
modes: ['text', 'tree']
};
var json = {
'array': [1, 2, 3],
'boolean': true,
'null': null,
'number': 123,
'object': {'a': 'b', 'c': 'd'},
'string': 'Hello World'
};
var editor = new JSONEditor(container, options, json);
</script>
</body>
</html>

75
examples/css/darktheme.css Normal file
View File

@ -0,0 +1,75 @@
/* dark styling of the editor */
.jsoneditor,
.jsoneditor div.menu {
border-color: #4b4b4b;
}
.jsoneditor div.menu {
background-color: #4b4b4b;
}
.jsoneditor div.tree,
.jsoneditor textarea.text {
background-color: #666666;
color: #ffffff;
}
.jsoneditor .field,
.jsoneditor .value {
color: #ffffff;
}
.jsoneditor .search .frame {
background: #808080;
}
.jsoneditor tr.highlight {
background-color: #808080;
}
.jsoneditor .field[contenteditable=true]:focus,
.jsoneditor .field[contenteditable=true]:hover,
.jsoneditor .value[contenteditable=true]:focus,
.jsoneditor .value[contenteditable=true]:hover,
.jsoneditor .field.highlight,
.jsoneditor .value.highlight {
background-color: #808080;
border-color: #808080;
}
.jsoneditor .field.highlight-active,
.jsoneditor .field.highlight-active:focus,
.jsoneditor .field.highlight-active:hover,
.jsoneditor .value.highlight-active,
.jsoneditor .value.highlight-active:focus,
.jsoneditor .value.highlight-active:hover {
background-color: #b1b1b1;
border-color: #b1b1b1;
}
.jsoneditor div.tree button:focus {
background-color: #868686;
}
/* coloring of JSON in tree mode */
.jsoneditor .readonly {
color: #acacac;
}
.jsoneditor .separator {
color: #acacac;
}
.jsoneditor .value.string {
color: #00ff88;
}
.jsoneditor .value.object,
.jsoneditor .value.array {
color: #bababa;
}
.jsoneditor .value.number {
color: #ff4040;
}
.jsoneditor .value.boolean {
color: #ff8048;
}
.jsoneditor .value.null {
color: #49a7fc;
}
.jsoneditor .value.invalid {
color: white;
}

31
src/css/jsoneditor.css
View File

@ -54,7 +54,7 @@
.jsoneditor a.value.url:hover, .jsoneditor a.value.url:hover,
.jsoneditor a.value.url:focus { .jsoneditor a.value.url:focus {
color: red; color: #ee422e;
} }
.jsoneditor .separator { .jsoneditor .separator {
@ -85,6 +85,34 @@
border-radius: 2px; border-radius: 2px;
} }
.jsoneditor .value.string {
color: #008000;
}
.jsoneditor .value.object,
.jsoneditor .value.array {
min-width: 16px;
color: #808080;
}
.jsoneditor .value.number {
color: #ee422e;
}
.jsoneditor .value.boolean {
color: #ff8c00;
}
.jsoneditor .value.null {
color: #004ED0;
}
.jsoneditor .value.invalid {
color: #000000;
}
.jsoneditor div.tree button { .jsoneditor div.tree button {
width: 24px; width: 24px;
height: 24px; height: 24px;
@ -188,6 +216,7 @@
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
outline-width: 0;
border: none; border: none;
background-color: white; background-color: white;
resize: none; resize: none;

1
src/css/searchbox.css
View File

@ -29,6 +29,7 @@
border: none; border: none;
outline: none; outline: none;
margin: 1px; margin: 1px;
line-height: 20px;
} }
.jsoneditor .search .results { .jsoneditor .search .results {

93
src/js/Node.js
View File

@ -1023,79 +1023,44 @@ Node.prototype._getDomValue = function(silent) {
Node.prototype._updateDomValue = function () { Node.prototype._updateDomValue = function () {
var domValue = this.dom.value; var domValue = this.dom.value;
if (domValue) { if (domValue) {
// set text color depending on value type var classNames = ['value'];
// TODO: put colors in css
var v = this.value;
var t = (this.type == 'auto') ? util.type(v) : this.type;
var isUrl = (t == 'string' && util.isUrl(v));
var color = '';
if (isUrl && !this.editable.value) { // TODO: when to apply this?
color = '';
}
else if (t == 'string') {
color = 'green';
}
else if (t == 'number') {
color = 'red';
}
else if (t == 'boolean') {
color = 'darkorange';
}
else if (this._hasChilds()) {
color = '';
}
else if (v === null) {
color = '#004ED0'; // blue
}
else {
// invalid value
color = 'black';
}
domValue.style.color = color;
// make background color light-gray when empty
// 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(type);
if (isUrl) {
classNames.push('url');
}
// visual styling when empty
var isEmpty = (String(this.value) == '' && this.type != 'array' && this.type != 'object'); var isEmpty = (String(this.value) == '' && this.type != 'array' && this.type != 'object');
if (isEmpty) { if (isEmpty) {
util.addClassName(domValue, 'empty'); classNames.push('empty');
}
else {
util.removeClassName(domValue, 'empty');
}
// underline url
if (isUrl) {
util.addClassName(domValue, 'url');
}
else {
util.removeClassName(domValue, 'url');
}
// update title
if (t == 'array' || t == 'object') {
var count = this.childs ? this.childs.length : 0;
domValue.title = this.type + ' containing ' + count + ' items';
}
else if (t == 'string' && util.isUrl(v)) {
if (this.editable.value) {
domValue.title = 'Ctrl+Click or Ctrl+Enter to open url in new window';
}
}
else {
domValue.title = '';
} }
// highlight when there is a search result // highlight when there is a search result
if (this.searchValueActive) { if (this.searchValueActive) {
util.addClassName(domValue, 'highlight-active'); classNames.push('highlight-active');
}
else {
util.removeClassName(domValue, 'highlight-active');
} }
if (this.searchValue) { if (this.searchValue) {
util.addClassName(domValue, 'highlight'); classNames.push('highlight');
}
domValue.className = classNames.join(' ');
// update title
if (type == 'array' || type == 'object') {
var count = this.childs ? this.childs.length : 0;
domValue.title = this.type + ' containing ' + count + ' items';
}
else if (isUrl && this.editable.value) {
domValue.title = 'Ctrl+Click or Ctrl+Enter to open url in new window';
} }
else { else {
util.removeClassName(domValue, 'highlight'); domValue.title = '';
} }
// strip formatting from the contents of the editable div // strip formatting from the contents of the editable div
@ -1653,19 +1618,16 @@ Node.prototype._createDomValue = function () {
if (this.type == 'array') { if (this.type == 'array') {
domValue = document.createElement('div'); domValue = document.createElement('div');
domValue.className = 'readonly';
domValue.innerHTML = '[...]'; domValue.innerHTML = '[...]';
} }
else if (this.type == 'object') { else if (this.type == 'object') {
domValue = document.createElement('div'); domValue = document.createElement('div');
domValue.className = 'readonly';
domValue.innerHTML = '{...}'; domValue.innerHTML = '{...}';
} }
else { else {
if (!this.editable.value && util.isUrl(this.value)) { if (!this.editable.value && util.isUrl(this.value)) {
// create a link in case of read-only editor and value containing an url // create a link in case of read-only editor and value containing an url
domValue = document.createElement('a'); domValue = document.createElement('a');
domValue.className = 'value';
domValue.href = this.value; domValue.href = this.value;
domValue.target = '_blank'; domValue.target = '_blank';
domValue.innerHTML = this._escapeHTML(this.value); domValue.innerHTML = this._escapeHTML(this.value);
@ -1675,7 +1637,6 @@ Node.prototype._createDomValue = function () {
domValue = document.createElement('div'); domValue = document.createElement('div');
domValue.contentEditable = this.editable.value; domValue.contentEditable = this.editable.value;
domValue.spellcheck = false; domValue.spellcheck = false;
domValue.className = 'value';
domValue.innerHTML = this._escapeHTML(this.value); domValue.innerHTML = this._escapeHTML(this.value);
} }
} }

3
test/test_build.html
View File

@ -59,7 +59,8 @@
"null": null, "null": null,
"number": 123, "number": 123,
"object": {"a": "b", "c": "d"}, "object": {"a": "b", "c": "d"},
"string": "Hello World" "string": "Hello World",
"url": "http://jsoneditoronline.org"
}; };
editor = new JSONEditor(container, options, json); editor = new JSONEditor(container, options, json);