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

Renamed all CSS classes They now have prefixes `.jsoneditor-` to prevent name collisions with css frameworks like bootstrap.

This commit is contained in:
jos 2015-12-27 21:43:18 +01:00
parent b571707b54
commit 301e33983c
13 changed files with 294 additions and 291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
HISTORY.md
View File

@ -12,6 +12,8 @@ https://github.com/josdejong/jsoneditor
- Implemented #203: Objects and arrays in mode `form` and `view` are now - Implemented #203: Objects and arrays in mode `form` and `view` are now
expandable by clicking the field names too. expandable by clicking the field names too.
- Replaced the PNG icon images with SVG. Thanks @1j01. - Replaced the PNG icon images with SVG. Thanks @1j01.
- Renamed all CSS classes They now have prefixes `.jsoneditor-` to prevent
name collisions with css frameworks like bootstrap.
- 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.

62
examples/css/darktheme.css
View File

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

117
src/css/contextmenu.css
View File

@ -1,12 +1,12 @@
/* ContextMenu - main menu */ /* ContextMenu - main menu */
.jsoneditor-contextmenu { div.jsoneditor-contextmenu {
position: absolute; position: absolute;
z-index: 99999; z-index: 99999;
} }
.jsoneditor-contextmenu ul { div.jsoneditor-contextmenu ul {
position: relative; position: relative;
left: 0; left: 0;
top: 0; top: 0;
@ -21,7 +21,7 @@
padding: 0; padding: 0;
} }
.jsoneditor-contextmenu ul li button { div.jsoneditor-contextmenu ul li button {
padding: 0; padding: 0;
margin: 0; margin: 0;
width: 124px; width: 124px;
@ -36,30 +36,30 @@
} }
/* Fix button padding in firefox */ /* Fix button padding in firefox */
.jsoneditor-contextmenu ul li button::-moz-focus-inner { div.jsoneditor-contextmenu ul li button::-moz-focus-inner {
padding: 0; padding: 0;
border: 0; border: 0;
} }
.jsoneditor-contextmenu ul li button:hover, div.jsoneditor-contextmenu ul li button:hover,
.jsoneditor-contextmenu ul li button:focus { div.jsoneditor-contextmenu ul li button:focus {
color: #1a1a1a; color: #1a1a1a;
background-color: #f5f5f5; background-color: #f5f5f5;
outline: none; outline: none;
} }
.jsoneditor-contextmenu ul li button.default { div.jsoneditor-contextmenu ul li button.jsoneditor-default {
width: 92px; width: 92px;
} }
.jsoneditor-contextmenu ul li button.expand { div.jsoneditor-contextmenu ul li button.jsoneditor-expand {
float: right; float: right;
width: 32px; width: 32px;
height: 24px; height: 24px;
border-left: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5;
} }
.jsoneditor-contextmenu div.icon { div.jsoneditor-contextmenu div.jsoneditor-icon {
float: left; float: left;
width: 24px; width: 24px;
height: 24px; height: 24px;
@ -69,7 +69,7 @@
background-image: url('img/jsoneditor-icons.svg'); background-image: url('img/jsoneditor-icons.svg');
} }
.jsoneditor-contextmenu ul li button div.expand { div.jsoneditor-contextmenu ul li button div.jsoneditor-expand {
float: right; float: right;
width: 24px; width: 24px;
height: 24px; height: 24px;
@ -79,81 +79,82 @@
opacity: 0.4; opacity: 0.4;
} }
.jsoneditor-contextmenu ul li button:hover div.expand, div.jsoneditor-contextmenu ul li button:hover div.jsoneditor-expand,
.jsoneditor-contextmenu ul li button:focus div.expand, div.jsoneditor-contextmenu ul li button:focus div.jsoneditor-expand,
.jsoneditor-contextmenu ul li.selected div.expand, div.jsoneditor-contextmenu ul li.jsoneditor-selected div.jsoneditor-expand,
.jsoneditor-contextmenu ul li button.expand:hover div.expand, div.jsoneditor-contextmenu ul li button.jsoneditor-expand:hover div.jsoneditor-expand,
.jsoneditor-contextmenu ul li button.expand:focus div.expand { div.jsoneditor-contextmenu ul li button.jsoneditor-expand:focus div.jsoneditor-expand {
opacity: 1; opacity: 1;
} }
.jsoneditor-contextmenu .separator { div.jsoneditor-contextmenu div.jsoneditor-separator {
height: 0; height: 0;
border-top: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5;
padding-top: 5px; padding-top: 5px;
margin-top: 5px; margin-top: 5px;
} }
.jsoneditor-contextmenu button.remove > .icon { div.jsoneditor-contextmenu button.jsoneditor-remove > div.jsoneditor-icon {
background-position: -24px -24px; background-position: -24px -24px;
} }
.jsoneditor-contextmenu button.remove:hover > .icon, div.jsoneditor-contextmenu button.jsoneditor-remove:hover > div.jsoneditor-icon,
.jsoneditor-contextmenu button.remove:focus > .icon { div.jsoneditor-contextmenu button.jsoneditor-remove:focus > div.jsoneditor-icon {
background-position: -24px 0; background-position: -24px 0;
} }
.jsoneditor-contextmenu button.append > .icon { div.jsoneditor-contextmenu button.jsoneditor-append > div.jsoneditor-icon {
background-position: 0 -24px; background-position: 0 -24px;
} }
.jsoneditor-contextmenu button.append:hover > .icon, div.jsoneditor-contextmenu button.jsoneditor-append:hover > div.jsoneditor-icon,
.jsoneditor-contextmenu button.append:focus > .icon { div.jsoneditor-contextmenu button.jsoneditor-append:focus > div.jsoneditor-icon {
background-position: 0 0; background-position: 0 0;
} }
.jsoneditor-contextmenu button.insert > .icon { div.jsoneditor-contextmenu button.jsoneditor-insert > div.jsoneditor-icon {
background-position: 0 -24px; background-position: 0 -24px;
} }
.jsoneditor-contextmenu button.insert:hover > .icon, div.jsoneditor-contextmenu button.jsoneditor-insert:hover > div.jsoneditor-icon,
.jsoneditor-contextmenu button.insert:focus > .icon { div.jsoneditor-contextmenu button.jsoneditor-insert:focus > div.jsoneditor-icon {
background-position: 0 0; background-position: 0 0;
} }
.jsoneditor-contextmenu button.duplicate > .icon { div.jsoneditor-contextmenu button.jsoneditor-duplicate > div.jsoneditor-icon {
background-position: -48px -24px; background-position: -48px -24px;
} }
.jsoneditor-contextmenu button.duplicate:hover > .icon, div.jsoneditor-contextmenu button.jsoneditor-duplicate:hover > div.jsoneditor-icon,
.jsoneditor-contextmenu button.duplicate:focus > .icon { div.jsoneditor-contextmenu button.jsoneditor-duplicate:focus > div.jsoneditor-icon {
background-position: -48px 0; background-position: -48px 0;
} }
.jsoneditor-contextmenu button.sort-asc > .icon { div.jsoneditor-contextmenu button.jsoneditor-sort-asc > div.jsoneditor-icon {
background-position: -168px -24px; background-position: -168px -24px;
} }
.jsoneditor-contextmenu button.sort-asc:hover > .icon, div.jsoneditor-contextmenu button.jsoneditor-sort-asc:hover > div.jsoneditor-icon,
.jsoneditor-contextmenu button.sort-asc:focus > .icon { div.jsoneditor-contextmenu button.jsoneditor-sort-asc:focus > div.jsoneditor-icon {
background-position: -168px 0; background-position: -168px 0;
} }
.jsoneditor-contextmenu button.sort-desc > .icon { div.jsoneditor-contextmenu button.jsoneditor-sort-desc > div.jsoneditor-icon {
background-position: -192px -24px; background-position: -192px -24px;
} }
.jsoneditor-contextmenu button.sort-desc:hover > .icon, div.jsoneditor-contextmenu button.jsoneditor-sort-desc:hover > div.jsoneditor-icon,
.jsoneditor-contextmenu button.sort-desc:focus > .icon { div.jsoneditor-contextmenu button.jsoneditor-sort-desc:focus > div.jsoneditor-icon {
background-position: -192px 0; background-position: -192px 0;
} }
/* ContextMenu - sub menu */ /* ContextMenu - sub menu */
.jsoneditor-contextmenu ul li .selected { div.jsoneditor-contextmenu ul li button.jsoneditor-selected,
div.jsoneditor-contextmenu ul li button.jsoneditor-selected:hover {
color: white; color: white;
background-color: #ee422e; background-color: #ee422e;
} }
.jsoneditor-contextmenu ul li { div.jsoneditor-contextmenu ul li {
overflow: hidden; overflow: hidden;
} }
.jsoneditor-contextmenu ul li ul { div.jsoneditor-contextmenu ul li ul {
display: none; display: none;
position: relative; position: relative;
left: -10px; left: -10px;
@ -170,56 +171,56 @@
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
} }
.jsoneditor-contextmenu ul li.selected ul { div.jsoneditor-contextmenu ul li.jsoneditor-selected ul {
} }
.jsoneditor-contextmenu ul li ul li button { div.jsoneditor-contextmenu ul li ul li button {
padding-left: 24px; padding-left: 24px;
animation: all ease-in-out 1s; animation: all ease-in-out 1s;
} }
.jsoneditor-contextmenu ul li ul li button:hover, div.jsoneditor-contextmenu ul li ul li button:hover,
.jsoneditor-contextmenu ul li ul li button:focus { div.jsoneditor-contextmenu ul li ul li button:focus {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.jsoneditor-contextmenu button.type-string > .icon { div.jsoneditor-contextmenu button.jsoneditor-type-string > div.jsoneditor-icon {
background-position: -144px -24px; background-position: -144px -24px;
} }
.jsoneditor-contextmenu button.type-string:hover > .icon, div.jsoneditor-contextmenu button.jsoneditor-type-string:hover > div.jsoneditor-icon,
.jsoneditor-contextmenu button.type-string:focus > .icon, div.jsoneditor-contextmenu button.jsoneditor-type-string:focus > div.jsoneditor-icon,
.jsoneditor-contextmenu button.type-string.selected > .icon{ div.jsoneditor-contextmenu button.jsoneditor-type-string.jsoneditor-selected > div.jsoneditor-icon{
background-position: -144px 0; background-position: -144px 0;
} }
.jsoneditor-contextmenu button.type-auto > .icon { div.jsoneditor-contextmenu button.jsoneditor-type-auto > div.jsoneditor-icon {
background-position: -120px -24px; background-position: -120px -24px;
} }
.jsoneditor-contextmenu button.type-auto:hover > .icon, div.jsoneditor-contextmenu button.jsoneditor-type-auto:hover > div.jsoneditor-icon,
.jsoneditor-contextmenu button.type-auto:focus > .icon, div.jsoneditor-contextmenu button.jsoneditor-type-auto:focus > div.jsoneditor-icon,
.jsoneditor-contextmenu button.type-auto.selected > .icon { div.jsoneditor-contextmenu button.jsoneditor-type-auto.jsoneditor-selected > div.jsoneditor-icon {
background-position: -120px 0; background-position: -120px 0;
} }
.jsoneditor-contextmenu button.type-object > .icon { div.jsoneditor-contextmenu button.jsoneditor-type-object > div.jsoneditor-icon {
background-position: -72px -24px; background-position: -72px -24px;
} }
.jsoneditor-contextmenu button.type-object:hover > .icon, div.jsoneditor-contextmenu button.jsoneditor-type-object:hover > div.jsoneditor-icon,
.jsoneditor-contextmenu button.type-object:focus > .icon, div.jsoneditor-contextmenu button.jsoneditor-type-object:focus > div.jsoneditor-icon,
.jsoneditor-contextmenu button.type-object.selected > .icon{ div.jsoneditor-contextmenu button.jsoneditor-type-object.jsoneditor-selected > div.jsoneditor-icon{
background-position: -72px 0; background-position: -72px 0;
} }
.jsoneditor-contextmenu button.type-array > .icon { div.jsoneditor-contextmenu button.jsoneditor-type-array > div.jsoneditor-icon {
background-position: -96px -24px; background-position: -96px -24px;
} }
.jsoneditor-contextmenu button.type-array:hover > .icon, div.jsoneditor-contextmenu button.jsoneditor-type-array:hover > div.jsoneditor-icon,
.jsoneditor-contextmenu button.type-array:focus > .icon, div.jsoneditor-contextmenu button.jsoneditor-type-array:focus > div.jsoneditor-icon,
.jsoneditor-contextmenu button.type-array.selected > .icon{ div.jsoneditor-contextmenu button.jsoneditor-type-array.jsoneditor-selected > div.jsoneditor-icon{
background-position: -96px 0; background-position: -96px 0;
} }
.jsoneditor-contextmenu button.type-modes > .icon { div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
background-image: none; background-image: none;
width: 6px; width: 6px;
} }

132
src/css/jsoneditor.css
View File

@ -1,7 +1,7 @@
.jsoneditor .field, div.jsoneditor-field,
.jsoneditor .value, div.jsoneditor-value,
.jsoneditor .readonly { div.jsoneditor-readonly {
border: 1px solid transparent; border: 1px solid transparent;
min-height: 16px; min-height: 16px;
min-width: 32px; min-width: 32px;
@ -12,108 +12,108 @@
} }
/* adjust margin of p elements inside editable divs, needed for Opera, IE */ /* adjust margin of p elements inside editable divs, needed for Opera, IE */
.jsoneditor .field p, div.jsoneditor-field p,
.jsoneditor .value p { div.jsoneditor-value p {
margin: 0; margin: 0;
} }
.jsoneditor .value { div.jsoneditor-value {
word-break: break-word; word-break: break-word;
} }
.jsoneditor .readonly { div.jsoneditor-readonly {
min-width: 16px; min-width: 16px;
color: gray; color: gray;
} }
.jsoneditor .empty { div.jsoneditor-empty {
border-color: lightgray; border-color: lightgray;
border-style: dashed; border-style: dashed;
border-radius: 2px; border-radius: 2px;
} }
.jsoneditor .field.empty::after, div.jsoneditor-field.jsoneditor-empty::after,
.jsoneditor .value.empty::after { div.jsoneditor-value.jsoneditor-empty::after {
pointer-events: none; pointer-events: none;
color: lightgray; color: lightgray;
font-size: 8pt; font-size: 8pt;
} }
.jsoneditor .field.empty::after { div.jsoneditor-field.jsoneditor-empty::after {
content: "field"; content: "field";
} }
.jsoneditor .value.empty::after { div.jsoneditor-value.jsoneditor-empty::after {
content: "value"; content: "value";
} }
.jsoneditor .value.url { div.jsoneditor-value.jsoneditor-url {
color: green; color: green;
text-decoration: underline; text-decoration: underline;
} }
.jsoneditor a.value.url:hover, a.jsoneditor-value.jsoneditor-url:hover,
.jsoneditor a.value.url:focus { a.jsoneditor-value.jsoneditor-url:focus {
color: #ee422e; color: #ee422e;
} }
.jsoneditor .separator { div.jsoneditor div.jsoneditor-separator {
padding: 3px 0; padding: 3px 0;
vertical-align: top; vertical-align: top;
color: gray; color: gray;
} }
.jsoneditor .field[contenteditable=true]:focus, div.jsoneditor-field[contenteditable=true]:focus,
.jsoneditor .field[contenteditable=true]:hover, div.jsoneditor-field[contenteditable=true]:hover,
.jsoneditor .value[contenteditable=true]:focus, div.jsoneditor-value[contenteditable=true]:focus,
.jsoneditor .value[contenteditable=true]:hover, div.jsoneditor-value[contenteditable=true]:hover,
.jsoneditor .field.highlight, div.jsoneditor-field.jsoneditor-highlight,
.jsoneditor .value.highlight { div.jsoneditor-value.jsoneditor-highlight {
background-color: #FFFFAB; background-color: #FFFFAB;
border: 1px solid yellow; border: 1px solid yellow;
border-radius: 2px; border-radius: 2px;
} }
.jsoneditor .field.highlight-active, div.jsoneditor-field.jsoneditor-highlight-active,
.jsoneditor .field.highlight-active:focus, div.jsoneditor-field.jsoneditor-highlight-active:focus,
.jsoneditor .field.highlight-active:hover, div.jsoneditor-field.jsoneditor-highlight-active:hover,
.jsoneditor .value.highlight-active, div.jsoneditor-value.jsoneditor-highlight-active,
.jsoneditor .value.highlight-active:focus, div.jsoneditor-value.jsoneditor-highlight-active:focus,
.jsoneditor .value.highlight-active:hover { div.jsoneditor-value.jsoneditor-highlight-active:hover {
background-color: #ffee00; background-color: #ffee00;
border: 1px solid #ffc700; border: 1px solid #ffc700;
border-radius: 2px; border-radius: 2px;
} }
.jsoneditor .value.string { div.jsoneditor-value.jsoneditor-string {
color: #008000; color: #008000;
} }
.jsoneditor .value.object, div.jsoneditor-value.jsoneditor-object,
.jsoneditor .value.array { div.jsoneditor-value.jsoneditor-array {
min-width: 16px; min-width: 16px;
color: #808080; color: #808080;
} }
.jsoneditor .value.number { div.jsoneditor-value.jsoneditor-number {
color: #ee422e; color: #ee422e;
} }
.jsoneditor .value.boolean { div.jsoneditor-value.jsoneditor-boolean {
color: #ff8c00; color: #ff8c00;
} }
.jsoneditor .value.null { div.jsoneditor-value.jsoneditor-null {
color: #004ED0; color: #004ED0;
} }
.jsoneditor .value.invalid { div.jsoneditor-value.jsoneditor-invalid {
color: #000000; color: #000000;
} }
.jsoneditor div.tree button { div.jsoneditor-tree button {
width: 24px; width: 24px;
height: 24px; height: 24px;
padding: 0; padding: 0;
@ -123,34 +123,34 @@
background: transparent url('img/jsoneditor-icons.svg'); background: transparent url('img/jsoneditor-icons.svg');
} }
.jsoneditor.mode-view tr.expandable td.tree, div.jsoneditor-mode-view tr.jsoneditor-expandable td.jsoneditor-tree,
.jsoneditor.mode-form tr.expandable td.tree { div.jsoneditor-mode-form tr.jsoneditor-expandable td.jsoneditor-tree {
cursor: pointer; cursor: pointer;
} }
.jsoneditor div.tree button.collapsed { div.jsoneditor-tree button.jsoneditor-collapsed {
background-position: 0 -48px; background-position: 0 -48px;
} }
.jsoneditor div.tree button.expanded { div.jsoneditor-tree button.jsoneditor-expanded {
background-position: 0 -72px; background-position: 0 -72px;
} }
.jsoneditor div.tree button.contextmenu { div.jsoneditor-tree button.jsoneditor-contextmenu {
background-position: -48px -72px; background-position: -48px -72px;
} }
.jsoneditor div.tree button.contextmenu:hover, div.jsoneditor-tree button.jsoneditor-contextmenu:hover,
.jsoneditor div.tree button.contextmenu:focus, div.jsoneditor-tree button.jsoneditor-contextmenu:focus,
.jsoneditor div.tree button.contextmenu.selected { div.jsoneditor-tree button.jsoneditor-contextmenu.selected {
background-position: -48px -48px; background-position: -48px -48px;
} }
.jsoneditor div.tree *:focus { div.jsoneditor-tree *:focus {
outline: none; outline: none;
} }
.jsoneditor div.tree button:focus { div.jsoneditor-tree button:focus {
/* TODO: nice outline for buttons with focus /* TODO: nice outline for buttons with focus
outline: #97B0F8 solid 2px; outline: #97B0F8 solid 2px;
box-shadow: 0 0 8px #97B0F8; box-shadow: 0 0 8px #97B0F8;
@ -159,12 +159,12 @@
outline: #e5e5e5 solid 1px; outline: #e5e5e5 solid 1px;
} }
.jsoneditor div.tree button.invisible { div.jsoneditor-tree button.jsoneditor-invisible {
visibility: hidden; visibility: hidden;
background: none; background: none;
} }
.jsoneditor { div.jsoneditor {
color: #1A1A1A; color: #1A1A1A;
border: 1px solid #3883fa; border: 1px solid #3883fa;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
@ -180,14 +180,14 @@
} }
.jsoneditor div.tree table.tree { div.jsoneditor-tree table.jsoneditor-tree {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
width: 100%; width: 100%;
margin: 0; margin: 0;
} }
.jsoneditor div.outer { div.jsoneditor-outer {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: -35px 0 0 0; margin: -35px 0 0 0;
@ -200,14 +200,14 @@
overflow: hidden; overflow: hidden;
} }
.jsoneditor div.tree { div.jsoneditor-tree {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
overflow: auto; overflow: auto;
} }
.jsoneditor textarea.text { textarea.jsoneditor-text {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0; margin: 0;
@ -222,40 +222,40 @@
resize: none; resize: none;
} }
.jsoneditor tr.highlight { tr.jsoneditor-highlight {
background-color: #FFFFAB; background-color: #FFFFAB;
} }
.jsoneditor div.tree button.dragarea { div.jsoneditor-tree button.jsoneditor-dragarea {
background: url('img/jsoneditor-icons.svg') -72px -72px; background: url('img/jsoneditor-icons.svg') -72px -72px;
cursor: move; cursor: move;
} }
.jsoneditor div.tree button.dragarea:hover, div.jsoneditor-tree button.jsoneditor-dragarea:hover,
.jsoneditor div.tree button.dragarea:focus { div.jsoneditor-tree button.jsoneditor-dragarea:focus {
background-position: -72px -48px; background-position: -72px -48px;
} }
.jsoneditor tr, div.jsoneditor tr,
.jsoneditor th, div.jsoneditor th,
.jsoneditor td { div.jsoneditor td {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.jsoneditor td { div.jsoneditor td {
vertical-align: top; vertical-align: top;
} }
.jsoneditor td.tree { div.jsoneditor td.jsoneditor-tree {
vertical-align: top; vertical-align: top;
} }
.jsoneditor .field, div.jsoneditor-field,
.jsoneditor .value, div.jsoneditor-value,
.jsoneditor td, div.jsoneditor td,
.jsoneditor th, div.jsoneditor th,
.jsoneditor textarea { div.jsoneditor textarea {
font-family: droid sans mono, consolas, monospace, courier new, courier, sans-serif; font-family: droid sans mono, consolas, monospace, courier new, courier, sans-serif;
font-size: 10pt; font-size: 10pt;
color: #1A1A1A; color: #1A1A1A;

38
src/css/menu.css
View File

@ -1,5 +1,5 @@
.jsoneditor .menu { div.jsoneditor-menu {
width: 100%; width: 100%;
height: 35px; height: 35px;
padding: 2px; padding: 2px;
@ -14,7 +14,7 @@
border-bottom: 1px solid #3883fa; border-bottom: 1px solid #3883fa;
} }
.jsoneditor .menu button { div.jsoneditor-menu > button {
width: 26px; width: 26px;
height: 26px; height: 26px;
margin: 2px; margin: 2px;
@ -31,55 +31,55 @@
float: left; float: left;
} }
.jsoneditor .menu button:hover { div.jsoneditor-menu > button:hover {
background-color: rgba(255,255,255,0.2); background-color: rgba(255,255,255,0.2);
border: 1px solid rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.4);
} }
.jsoneditor .menu button:focus, div.jsoneditor-menu > button:focus,
.jsoneditor .menu button:active { div.jsoneditor-menu > button:active {
background-color: rgba(255,255,255,0.3); background-color: rgba(255,255,255,0.3);
} }
.jsoneditor .menu button:disabled { div.jsoneditor-menu > button:disabled {
opacity: 0.5; opacity: 0.5;
} }
.jsoneditor .menu button.collapse-all { div.jsoneditor-menu > button.jsoneditor-collapse-all {
background-position: 0 -96px; background-position: 0 -96px;
} }
.jsoneditor .menu button.expand-all { div.jsoneditor-menu > button.jsoneditor-expand-all {
background-position: 0 -120px; background-position: 0 -120px;
} }
.jsoneditor .menu button.undo { div.jsoneditor-menu > button.jsoneditor-undo {
background-position: -24px -96px; background-position: -24px -96px;
} }
.jsoneditor .menu button.undo:disabled { div.jsoneditor-menu > button.jsoneditor-undo:disabled {
background-position: -24px -120px; background-position: -24px -120px;
} }
.jsoneditor .menu button.redo { div.jsoneditor-menu > button.jsoneditor-redo {
background-position: -48px -96px; background-position: -48px -96px;
} }
.jsoneditor .menu button.redo:disabled { div.jsoneditor-menu > button.jsoneditor-redo:disabled {
background-position: -48px -120px; background-position: -48px -120px;
} }
.jsoneditor .menu button.compact { div.jsoneditor-menu > button.jsoneditor-compact {
background-position: -72px -96px; background-position: -72px -96px;
} }
.jsoneditor .menu button.format { div.jsoneditor-menu > button.jsoneditor-format {
background-position: -72px -120px; background-position: -72px -120px;
} }
.jsoneditor .menu button.modes { div.jsoneditor-menu > button.jsoneditor-modes {
background-image: none; background-image: none;
width: auto; width: auto;
padding-left: 6px; padding-left: 6px;
padding-right: 6px; padding-right: 6px;
} }
.jsoneditor .menu button.separator { div.jsoneditor-menu > button.jsoneditor-separator {
margin-left: 10px; margin-left: 10px;
} }
.jsoneditor .menu a { div.jsoneditor-menu a {
font-family: arial, sans-serif; font-family: arial, sans-serif;
font-size: 10pt; font-size: 10pt;
color: white; color: white;
@ -87,11 +87,11 @@
vertical-align: middle; vertical-align: middle;
} }
.jsoneditor .menu a:hover { div.jsoneditor-menu a:hover {
opacity: 1; opacity: 1;
} }
.jsoneditor .menu a.poweredBy { div.jsoneditor-menu a.jsoneditor-poweredBy {
font-size: 8pt; font-size: 8pt;
position: absolute; position: absolute;
right: 0; right: 0;

28
src/css/searchbox.css
View File

@ -1,30 +1,30 @@
.jsoneditor .search input, table.jsoneditor-search input,
.jsoneditor .search .results { table.jsoneditor-search div.jsoneditor-results {
font-family: arial, sans-serif; font-family: arial, sans-serif;
font-size: 10pt; font-size: 10pt;
color: #1A1A1A; color: #1A1A1A;
background: transparent; /* For Firefox */ background: transparent; /* For Firefox */
} }
.jsoneditor .search { table.jsoneditor-search {
position: absolute; position: absolute;
right: 2px; right: 2px;
top: 2px; top: 2px;
} }
.jsoneditor .search .frame { table.jsoneditor-search div.jsoneditor-frame {
border: 1px solid transparent; border: 1px solid transparent;
background-color: white; background-color: white;
padding: 0 2px; padding: 0 2px;
margin: 0; margin: 0;
} }
.jsoneditor .search .frame table { table.jsoneditor-search div.jsoneditor-frame table {
border-collapse: collapse; border-collapse: collapse;
} }
.jsoneditor .search input { table.jsoneditor-search input {
width: 120px; width: 120px;
border: none; border: none;
outline: none; outline: none;
@ -32,13 +32,13 @@
line-height: 20px; line-height: 20px;
} }
.jsoneditor .search .results { table.jsoneditor-search .jsoneditor-results {
color: #4d4d4d; color: #4d4d4d;
padding-right: 5px; padding-right: 5px;
line-height: 24px; line-height: 24px;
} }
.jsoneditor .search button { table.jsoneditor-search button {
width: 16px; width: 16px;
height: 24px; height: 24px;
padding: 0; padding: 0;
@ -48,28 +48,28 @@
vertical-align: top; vertical-align: top;
} }
.jsoneditor .search button:hover { table.jsoneditor-search button:hover {
background-color: transparent; background-color: transparent;
} }
.jsoneditor .search button.refresh { table.jsoneditor-search button.jsoneditor-refresh {
width: 18px; width: 18px;
background-position: -99px -73px; background-position: -99px -73px;
} }
.jsoneditor .search button.next { table.jsoneditor-search button.jsoneditor-next {
cursor: pointer; cursor: pointer;
background-position: -124px -73px; background-position: -124px -73px;
} }
.jsoneditor .search button.next:hover { table.jsoneditor-search button.jsoneditor-next:hover {
background-position: -124px -49px; background-position: -124px -49px;
} }
.jsoneditor .search button.previous { table.jsoneditor-search button.jsoneditor-previous {
cursor: pointer; cursor: pointer;
background-position: -148px -73px; background-position: -148px -73px;
margin-right: 2px; margin-right: 2px;
} }
.jsoneditor .search button.previous:hover { table.jsoneditor-search button.jsoneditor-previous:hover {
background-position: -148px -49px; background-position: -148px -49px;
} }

30
src/js/ContextMenu.js
View File

@ -28,7 +28,7 @@ function ContextMenu (items, options) {
// create a list to hold the menu items // create a list to hold the menu items
var list = document.createElement('ul'); var list = document.createElement('ul');
list.className = 'menu'; list.className = 'jsoneditor-menu';
menu.appendChild(list); menu.appendChild(list);
dom.list = list; dom.list = list;
dom.items = []; // list with all buttons dom.items = []; // list with all buttons
@ -47,7 +47,7 @@ function ContextMenu (items, options) {
if (item.type == 'separator') { if (item.type == 'separator') {
// create a separator // create a separator
var separator = document.createElement('div'); var separator = document.createElement('div');
separator.className = 'separator'; separator.className = 'jsoneditor-separator';
li = document.createElement('li'); li = document.createElement('li');
li.appendChild(separator); li.appendChild(separator);
list.appendChild(li); list.appendChild(li);
@ -78,19 +78,19 @@ function ContextMenu (items, options) {
if (item.submenu) { if (item.submenu) {
// add the icon to the button // add the icon to the button
var divIcon = document.createElement('div'); var divIcon = document.createElement('div');
divIcon.className = 'icon'; divIcon.className = 'jsoneditor-icon';
button.appendChild(divIcon); button.appendChild(divIcon);
button.appendChild(document.createTextNode(item.text)); button.appendChild(document.createTextNode(item.text));
var buttonSubmenu; var buttonSubmenu;
if (item.click) { if (item.click) {
// submenu and a button with a click handler // submenu and a button with a click handler
button.className += ' default'; button.className += ' jsoneditor-default';
var buttonExpand = document.createElement('button'); var buttonExpand = document.createElement('button');
domItem.buttonExpand = buttonExpand; domItem.buttonExpand = buttonExpand;
buttonExpand.className = 'expand'; buttonExpand.className = 'jsoneditor-expand';
buttonExpand.innerHTML = '<div class="expand"></div>'; buttonExpand.innerHTML = '<div class="jsoneditor-expand"></div>';
li.appendChild(buttonExpand); li.appendChild(buttonExpand);
if (item.submenuTitle) { if (item.submenuTitle) {
buttonExpand.title = item.submenuTitle; buttonExpand.title = item.submenuTitle;
@ -101,7 +101,7 @@ function ContextMenu (items, options) {
else { else {
// submenu and a button without a click handler // submenu and a button without a click handler
var divExpand = document.createElement('div'); var divExpand = document.createElement('div');
divExpand.className = 'expand'; divExpand.className = 'jsoneditor-expand';
button.appendChild(divExpand); button.appendChild(divExpand);
buttonSubmenu = button; buttonSubmenu = button;
@ -118,14 +118,14 @@ function ContextMenu (items, options) {
domItem.subItems = domSubItems; domItem.subItems = domSubItems;
var ul = document.createElement('ul'); var ul = document.createElement('ul');
domItem.ul = ul; domItem.ul = ul;
ul.className = 'menu'; ul.className = 'jsoneditor-menu';
ul.style.height = '0'; ul.style.height = '0';
li.appendChild(ul); li.appendChild(ul);
createMenuItems(ul, domSubItems, item.submenu); createMenuItems(ul, domSubItems, item.submenu);
} }
else { else {
// no submenu, just a button with clickhandler // no submenu, just a button with clickhandler
button.innerHTML = '<div class="icon"></div>' + item.text; button.innerHTML = '<div class="jsoneditor-icon"></div>' + item.text;
} }
domItems.push(domItem); domItems.push(domItem);
@ -292,7 +292,7 @@ ContextMenu.prototype._onExpandItem = function (domItem) {
setTimeout(function () { setTimeout(function () {
if (me.expandedItem != expandedItem) { if (me.expandedItem != expandedItem) {
expandedItem.ul.style.display = ''; expandedItem.ul.style.display = '';
util.removeClassName(expandedItem.ul.parentNode, 'selected'); util.removeClassName(expandedItem.ul.parentNode, 'jsoneditor-selected');
} }
}, 300); // timeout duration must match the css transition duration }, 300); // timeout duration must match the css transition duration
this.expandedItem = undefined; this.expandedItem = undefined;
@ -308,7 +308,7 @@ ContextMenu.prototype._onExpandItem = function (domItem) {
ul.style.padding = '5px 10px'; ul.style.padding = '5px 10px';
} }
}, 0); }, 0);
util.addClassName(ul.parentNode, 'selected'); util.addClassName(ul.parentNode, 'jsoneditor-selected');
this.expandedItem = domItem; this.expandedItem = domItem;
} }
}; };
@ -360,7 +360,7 @@ ContextMenu.prototype._onKeyDown = function (event) {
} }
} }
else if (keynum == 37) { // Arrow Left else if (keynum == 37) { // Arrow Left
if (target.className == 'expand') { if (target.className == 'jsoneditor-expand') {
buttons = this._getVisibleButtons(); buttons = this._getVisibleButtons();
targetIndex = buttons.indexOf(target); targetIndex = buttons.indexOf(target);
prevButton = buttons[targetIndex - 1]; prevButton = buttons[targetIndex - 1];
@ -374,7 +374,7 @@ ContextMenu.prototype._onKeyDown = function (event) {
buttons = this._getVisibleButtons(); buttons = this._getVisibleButtons();
targetIndex = buttons.indexOf(target); targetIndex = buttons.indexOf(target);
prevButton = buttons[targetIndex - 1]; prevButton = buttons[targetIndex - 1];
if (prevButton && prevButton.className == 'expand') { if (prevButton && prevButton.className == 'jsoneditor-expand') {
// skip expand button // skip expand button
prevButton = buttons[targetIndex - 2]; prevButton = buttons[targetIndex - 2];
} }
@ -391,7 +391,7 @@ ContextMenu.prototype._onKeyDown = function (event) {
buttons = this._getVisibleButtons(); buttons = this._getVisibleButtons();
targetIndex = buttons.indexOf(target); targetIndex = buttons.indexOf(target);
nextButton = buttons[targetIndex + 1]; nextButton = buttons[targetIndex + 1];
if (nextButton && nextButton.className == 'expand') { if (nextButton && nextButton.className == 'jsoneditor-expand') {
nextButton.focus(); nextButton.focus();
} }
handled = true; handled = true;
@ -400,7 +400,7 @@ ContextMenu.prototype._onKeyDown = function (event) {
buttons = this._getVisibleButtons(); buttons = this._getVisibleButtons();
targetIndex = buttons.indexOf(target); targetIndex = buttons.indexOf(target);
nextButton = buttons[targetIndex + 1]; nextButton = buttons[targetIndex + 1];
if (nextButton && nextButton.className == 'expand') { if (nextButton && nextButton.className == 'jsoneditor-expand') {
// skip expand button // skip expand button
nextButton = buttons[targetIndex + 2]; nextButton = buttons[targetIndex + 2];
} }

110
src/js/Node.js
View File

@ -277,7 +277,7 @@ Node.prototype.expand = function(recurse) {
// set this node expanded // set this node expanded
this.expanded = true; this.expanded = true;
if (this.dom.expand) { if (this.dom.expand) {
this.dom.expand.className = 'expanded'; this.dom.expand.className = 'jsoneditor-expanded';
} }
this.showChilds(); this.showChilds();
@ -311,7 +311,7 @@ Node.prototype.collapse = function(recurse) {
// make this node collapsed // make this node collapsed
if (this.dom.expand) { if (this.dom.expand) {
this.dom.expand.className = 'collapsed'; this.dom.expand.className = 'jsoneditor-collapsed';
} }
this.expanded = false; this.expanded = false;
}; };
@ -1023,30 +1023,30 @@ 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) {
var classNames = ['value']; var classNames = ['jsoneditor-value'];
// set text color depending on value type // set text color depending on value type
var value = this.value; var value = this.value;
var type = (this.type == 'auto') ? util.type(value) : this.type; var type = (this.type == 'auto') ? util.type(value) : this.type;
var isUrl = type == 'string' && util.isUrl(value); var isUrl = type == 'string' && util.isUrl(value);
classNames.push(type); classNames.push('jsoneditor-' + type);
if (isUrl) { if (isUrl) {
classNames.push('url'); classNames.push('jsoneditor-url');
} }
// visual styling when empty // 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) {
classNames.push('empty'); classNames.push('jsoneditor-empty');
} }
// highlight when there is a search result // highlight when there is a search result
if (this.searchValueActive) { if (this.searchValueActive) {
classNames.push('highlight-active'); classNames.push('jsoneditor-highlight-active');
} }
if (this.searchValue) { if (this.searchValue) {
classNames.push('highlight'); classNames.push('jsoneditor-highlight');
} }
domValue.className = classNames.join(' '); domValue.className = classNames.join(' ');
@ -1081,24 +1081,24 @@ Node.prototype._updateDomField = function () {
// make backgound color lightgray when empty // make backgound color lightgray when empty
var isEmpty = (String(this.field) == '' && this.parent.type != 'array'); var isEmpty = (String(this.field) == '' && this.parent.type != 'array');
if (isEmpty) { if (isEmpty) {
util.addClassName(domField, 'empty'); util.addClassName(domField, 'jsoneditor-empty');
} }
else { else {
util.removeClassName(domField, 'empty'); util.removeClassName(domField, 'jsoneditor-empty');
} }
// highlight when there is a search result // highlight when there is a search result
if (this.searchFieldActive) { if (this.searchFieldActive) {
util.addClassName(domField, 'highlight-active'); util.addClassName(domField, 'jsoneditor-highlight-active');
} }
else { else {
util.removeClassName(domField, 'highlight-active'); util.removeClassName(domField, 'jsoneditor-highlight-active');
} }
if (this.searchField) { if (this.searchField) {
util.addClassName(domField, 'highlight'); util.addClassName(domField, 'jsoneditor-highlight');
} }
else { else {
util.removeClassName(domField, 'highlight'); util.removeClassName(domField, 'jsoneditor-highlight');
} }
// strip formatting from the contents of the editable div // strip formatting from the contents of the editable div
@ -1178,7 +1178,7 @@ Node.prototype.getDom = function() {
if (this.parent) { if (this.parent) {
var domDrag = document.createElement('button'); var domDrag = document.createElement('button');
dom.drag = domDrag; dom.drag = domDrag;
domDrag.className = 'dragarea'; domDrag.className = 'jsoneditor-dragarea';
domDrag.title = 'Drag to move this field (Alt+Shift+Arrows)'; domDrag.title = 'Drag to move this field (Alt+Shift+Arrows)';
tdDrag.appendChild(domDrag); tdDrag.appendChild(domDrag);
} }
@ -1189,7 +1189,7 @@ Node.prototype.getDom = function() {
var tdMenu = document.createElement('td'); var tdMenu = document.createElement('td');
var menu = document.createElement('button'); var menu = document.createElement('button');
dom.menu = menu; dom.menu = menu;
menu.className = 'contextmenu'; menu.className = 'jsoneditor-contextmenu';
menu.title = 'Click to open the actions menu (Ctrl+M)'; menu.title = 'Click to open the actions menu (Ctrl+M)';
tdMenu.appendChild(dom.menu); tdMenu.appendChild(dom.menu);
dom.tr.appendChild(tdMenu); dom.tr.appendChild(tdMenu);
@ -1453,7 +1453,7 @@ Node.prototype._createDomField = function () {
*/ */
Node.prototype.setHighlight = function (highlight) { Node.prototype.setHighlight = function (highlight) {
if (this.dom.tr) { if (this.dom.tr) {
this.dom.tr.className = (highlight ? 'highlight' : ''); this.dom.tr.className = (highlight ? 'jsoneditor-highlight' : '');
if (this.append) { if (this.append) {
this.append.setHighlight(highlight); this.append.setHighlight(highlight);
@ -1510,11 +1510,11 @@ Node.prototype.updateDom = function (options) {
// parent is an object // parent is an object
domField.contentEditable = this.editable.field; domField.contentEditable = this.editable.field;
domField.spellcheck = false; domField.spellcheck = false;
domField.className = 'field'; domField.className = 'jsoneditor-field';
} }
else { else {
// parent is an array this is the root node // parent is an array this is the root node
domField.className = 'readonly'; domField.className = 'jsoneditor-readonly';
} }
var field; var field;
@ -1539,11 +1539,11 @@ Node.prototype.updateDom = function (options) {
var count = this.childs ? this.childs.length : 0; var count = this.childs ? this.childs.length : 0;
if (this.type == 'array') { if (this.type == 'array') {
domValue.innerHTML = '[' + count + ']'; domValue.innerHTML = '[' + count + ']';
this.dom.tr.className = 'expandable'; this.dom.tr.className = 'jsoneditor-expandable';
} }
else if (this.type == 'object') { else if (this.type == 'object') {
domValue.innerHTML = '{' + count + '}'; domValue.innerHTML = '{' + count + '}';
this.dom.tr.className = 'expandable'; this.dom.tr.className = 'jsoneditor-expandable';
} }
else { else {
domValue.innerHTML = this._escapeHTML(this.value); domValue.innerHTML = this._escapeHTML(this.value);
@ -1653,13 +1653,13 @@ Node.prototype._createDomExpandButton = function () {
// create expand button // create expand button
var expand = document.createElement('button'); var expand = document.createElement('button');
if (this._hasChilds()) { if (this._hasChilds()) {
expand.className = this.expanded ? 'expanded' : 'collapsed'; expand.className = this.expanded ? 'jsoneditor-expanded' : 'jsoneditor-collapsed';
expand.title = expand.title =
'Click to expand/collapse this field (Ctrl+E). \n' + 'Click to expand/collapse this field (Ctrl+E). \n' +
'Ctrl+Click to expand/collapse including all childs.'; 'Ctrl+Click to expand/collapse including all childs.';
} }
else { else {
expand.className = 'invisible'; expand.className = 'jsoneditor-invisible';
expand.title = ''; expand.title = '';
} }
@ -1677,14 +1677,14 @@ Node.prototype._createDomTree = function () {
var domTree = document.createElement('table'); var domTree = document.createElement('table');
var tbody = document.createElement('tbody'); var tbody = document.createElement('tbody');
domTree.style.borderCollapse = 'collapse'; // TODO: put in css domTree.style.borderCollapse = 'collapse'; // TODO: put in css
domTree.className = 'values'; domTree.className = 'jsoneditor-values';
domTree.appendChild(tbody); domTree.appendChild(tbody);
var tr = document.createElement('tr'); var tr = document.createElement('tr');
tbody.appendChild(tr); tbody.appendChild(tr);
// create expand button // create expand button
var tdExpand = document.createElement('td'); var tdExpand = document.createElement('td');
tdExpand.className = 'tree'; tdExpand.className = 'jsoneditor-tree';
tr.appendChild(tdExpand); tr.appendChild(tdExpand);
dom.expand = this._createDomExpandButton(); dom.expand = this._createDomExpandButton();
tdExpand.appendChild(dom.expand); tdExpand.appendChild(dom.expand);
@ -1692,7 +1692,7 @@ Node.prototype._createDomTree = function () {
// create the field // create the field
var tdField = document.createElement('td'); var tdField = document.createElement('td');
tdField.className = 'tree'; tdField.className = 'jsoneditor-tree';
tr.appendChild(tdField); tr.appendChild(tdField);
dom.field = this._createDomField(); dom.field = this._createDomField();
tdField.appendChild(dom.field); tdField.appendChild(dom.field);
@ -1700,17 +1700,17 @@ Node.prototype._createDomTree = function () {
// create a separator // create a separator
var tdSeparator = document.createElement('td'); var tdSeparator = document.createElement('td');
tdSeparator.className = 'tree'; tdSeparator.className = 'jsoneditor-tree';
tr.appendChild(tdSeparator); tr.appendChild(tdSeparator);
if (this.type != 'object' && this.type != 'array') { if (this.type != 'object' && this.type != 'array') {
tdSeparator.appendChild(document.createTextNode(':')); tdSeparator.appendChild(document.createTextNode(':'));
tdSeparator.className = 'separator'; tdSeparator.className = 'jsoneditor-separator';
} }
dom.tdSeparator = tdSeparator; dom.tdSeparator = tdSeparator;
// create the value // create the value
var tdValue = document.createElement('td'); var tdValue = document.createElement('td');
tdValue.className = 'tree'; tdValue.className = 'jsoneditor-tree';
tr.appendChild(tdValue); tr.appendChild(tdValue);
dom.value = this._createDomValue(); dom.value = this._createDomValue();
tdValue.appendChild(dom.value); tdValue.appendChild(dom.value);
@ -1752,9 +1752,9 @@ Node.prototype.onEvent = function (event) {
var highlighter = node.editor.highlighter; var highlighter = node.editor.highlighter;
highlighter.highlight(node); highlighter.highlight(node);
highlighter.lock(); highlighter.lock();
util.addClassName(dom.menu, 'selected'); util.addClassName(dom.menu, 'jsoneditor-selected');
this.showContextMenu(dom.menu, function () { this.showContextMenu(dom.menu, function () {
util.removeClassName(dom.menu, 'selected'); util.removeClassName(dom.menu, 'jsoneditor-selected');
highlighter.unlock(); highlighter.unlock();
highlighter.unhighlight(); highlighter.unhighlight();
}); });
@ -2565,12 +2565,12 @@ Node.prototype.showContextMenu = function (anchor, onClose) {
items.push({ items.push({
text: 'Type', text: 'Type',
title: 'Change the type of this field', title: 'Change the type of this field',
className: 'type-' + this.type, className: 'jsoneditor-type-' + this.type,
submenu: [ submenu: [
{ {
text: 'Auto', text: 'Auto',
className: 'type-auto' + className: 'jsoneditor-type-auto' +
(this.type == 'auto' ? ' selected' : ''), (this.type == 'auto' ? ' jsoneditor-selected' : ''),
title: titles.auto, title: titles.auto,
click: function () { click: function () {
node._onChangeType('auto'); node._onChangeType('auto');
@ -2578,8 +2578,8 @@ Node.prototype.showContextMenu = function (anchor, onClose) {
}, },
{ {
text: 'Array', text: 'Array',
className: 'type-array' + className: 'jsoneditor-type-array' +
(this.type == 'array' ? ' selected' : ''), (this.type == 'array' ? ' jsoneditor-selected' : ''),
title: titles.array, title: titles.array,
click: function () { click: function () {
node._onChangeType('array'); node._onChangeType('array');
@ -2587,8 +2587,8 @@ Node.prototype.showContextMenu = function (anchor, onClose) {
}, },
{ {
text: 'Object', text: 'Object',
className: 'type-object' + className: 'jsoneditor-type-object' +
(this.type == 'object' ? ' selected' : ''), (this.type == 'object' ? ' jsoneditor-selected' : ''),
title: titles.object, title: titles.object,
click: function () { click: function () {
node._onChangeType('object'); node._onChangeType('object');
@ -2596,8 +2596,8 @@ Node.prototype.showContextMenu = function (anchor, onClose) {
}, },
{ {
text: 'String', text: 'String',
className: 'type-string' + className: 'jsoneditor-type-string' +
(this.type == 'string' ? ' selected' : ''), (this.type == 'string' ? ' jsoneditor-selected' : ''),
title: titles.string, title: titles.string,
click: function () { click: function () {
node._onChangeType('string'); node._onChangeType('string');
@ -2612,14 +2612,14 @@ Node.prototype.showContextMenu = function (anchor, onClose) {
items.push({ items.push({
text: 'Sort', text: 'Sort',
title: 'Sort the childs of this ' + this.type, title: 'Sort the childs of this ' + this.type,
className: 'sort-' + direction, className: 'jsoneditor-sort-' + direction,
click: function () { click: function () {
node._onSort(direction); node._onSort(direction);
}, },
submenu: [ submenu: [
{ {
text: 'Ascending', text: 'Ascending',
className: 'sort-asc', className: 'jsoneditor-sort-asc',
title: 'Sort the childs of this ' + this.type + ' in ascending order', title: 'Sort the childs of this ' + this.type + ' in ascending order',
click: function () { click: function () {
node._onSort('asc'); node._onSort('asc');
@ -2627,7 +2627,7 @@ Node.prototype.showContextMenu = function (anchor, onClose) {
}, },
{ {
text: 'Descending', text: 'Descending',
className: 'sort-desc', className: 'jsoneditor-sort-desc',
title: 'Sort the childs of this ' + this.type +' in descending order', title: 'Sort the childs of this ' + this.type +' in descending order',
click: function () { click: function () {
node._onSort('desc'); node._onSort('desc');
@ -2652,14 +2652,14 @@ Node.prototype.showContextMenu = function (anchor, onClose) {
text: 'Append', text: 'Append',
title: 'Append a new field with type \'auto\' after this field (Ctrl+Shift+Ins)', title: 'Append a new field with type \'auto\' after this field (Ctrl+Shift+Ins)',
submenuTitle: 'Select the type of the field to be appended', submenuTitle: 'Select the type of the field to be appended',
className: 'append', className: 'jsoneditor-append',
click: function () { click: function () {
node._onAppend('', '', 'auto'); node._onAppend('', '', 'auto');
}, },
submenu: [ submenu: [
{ {
text: 'Auto', text: 'Auto',
className: 'type-auto', className: 'jsoneditor-type-auto',
title: titles.auto, title: titles.auto,
click: function () { click: function () {
node._onAppend('', '', 'auto'); node._onAppend('', '', 'auto');
@ -2667,7 +2667,7 @@ Node.prototype.showContextMenu = function (anchor, onClose) {
}, },
{ {
text: 'Array', text: 'Array',
className: 'type-array', className: 'jsoneditor-type-array',
title: titles.array, title: titles.array,
click: function () { click: function () {
node._onAppend('', []); node._onAppend('', []);
@ -2675,7 +2675,7 @@ Node.prototype.showContextMenu = function (anchor, onClose) {
}, },
{ {
text: 'Object', text: 'Object',
className: 'type-object', className: 'jsoneditor-type-object',
title: titles.object, title: titles.object,
click: function () { click: function () {
node._onAppend('', {}); node._onAppend('', {});
@ -2683,7 +2683,7 @@ Node.prototype.showContextMenu = function (anchor, onClose) {
}, },
{ {
text: 'String', text: 'String',
className: 'type-string', className: 'jsoneditor-type-string',
title: titles.string, title: titles.string,
click: function () { click: function () {
node._onAppend('', '', 'string'); node._onAppend('', '', 'string');
@ -2698,14 +2698,14 @@ Node.prototype.showContextMenu = function (anchor, onClose) {
text: 'Insert', text: 'Insert',
title: 'Insert a new field with type \'auto\' before this field (Ctrl+Ins)', title: 'Insert a new field with type \'auto\' before this field (Ctrl+Ins)',
submenuTitle: 'Select the type of the field to be inserted', submenuTitle: 'Select the type of the field to be inserted',
className: 'insert', className: 'jsoneditor-insert',
click: function () { click: function () {
node._onInsertBefore('', '', 'auto'); node._onInsertBefore('', '', 'auto');
}, },
submenu: [ submenu: [
{ {
text: 'Auto', text: 'Auto',
className: 'type-auto', className: 'jsoneditor-type-auto',
title: titles.auto, title: titles.auto,
click: function () { click: function () {
node._onInsertBefore('', '', 'auto'); node._onInsertBefore('', '', 'auto');
@ -2713,7 +2713,7 @@ Node.prototype.showContextMenu = function (anchor, onClose) {
}, },
{ {
text: 'Array', text: 'Array',
className: 'type-array', className: 'jsoneditor-type-array',
title: titles.array, title: titles.array,
click: function () { click: function () {
node._onInsertBefore('', []); node._onInsertBefore('', []);
@ -2721,7 +2721,7 @@ Node.prototype.showContextMenu = function (anchor, onClose) {
}, },
{ {
text: 'Object', text: 'Object',
className: 'type-object', className: 'jsoneditor-type-object',
title: titles.object, title: titles.object,
click: function () { click: function () {
node._onInsertBefore('', {}); node._onInsertBefore('', {});
@ -2729,7 +2729,7 @@ Node.prototype.showContextMenu = function (anchor, onClose) {
}, },
{ {
text: 'String', text: 'String',
className: 'type-string', className: 'jsoneditor-type-string',
title: titles.string, title: titles.string,
click: function () { click: function () {
node._onInsertBefore('', '', 'string'); node._onInsertBefore('', '', 'string');
@ -2743,7 +2743,7 @@ Node.prototype.showContextMenu = function (anchor, onClose) {
items.push({ items.push({
text: 'Duplicate', text: 'Duplicate',
title: 'Duplicate this field (Ctrl+D)', title: 'Duplicate this field (Ctrl+D)',
className: 'duplicate', className: 'jsoneditor-duplicate',
click: function () { click: function () {
node._onDuplicate(); node._onDuplicate();
} }
@ -2753,7 +2753,7 @@ Node.prototype.showContextMenu = function (anchor, onClose) {
items.push({ items.push({
text: 'Remove', text: 'Remove',
title: 'Remove this field (Ctrl+Del)', title: 'Remove this field (Ctrl+Del)',
className: 'remove', className: 'jsoneditor-remove',
click: function () { click: function () {
node._onRemove(); node._onRemove();
} }

12
src/js/SearchBox.js
View File

@ -18,7 +18,7 @@ function SearchBox (editor, container) {
var table = document.createElement('table'); var table = document.createElement('table');
this.dom.table = table; this.dom.table = table;
table.className = 'search'; table.className = 'jsoneditor-search';
container.appendChild(table); container.appendChild(table);
var tbody = document.createElement('tbody'); var tbody = document.createElement('tbody');
this.dom.tbody = tbody; this.dom.tbody = tbody;
@ -30,14 +30,14 @@ function SearchBox (editor, container) {
tr.appendChild(td); tr.appendChild(td);
var results = document.createElement('div'); var results = document.createElement('div');
this.dom.results = results; this.dom.results = results;
results.className = 'results'; results.className = 'jsoneditor-results';
td.appendChild(results); td.appendChild(results);
td = document.createElement('td'); td = document.createElement('td');
tr.appendChild(td); tr.appendChild(td);
var divInput = document.createElement('div'); var divInput = document.createElement('div');
this.dom.input = divInput; this.dom.input = divInput;
divInput.className = 'frame'; divInput.className = 'jsoneditor-frame';
divInput.title = 'Search fields and values'; divInput.title = 'Search fields and values';
td.appendChild(divInput); td.appendChild(divInput);
@ -50,7 +50,7 @@ function SearchBox (editor, container) {
tbodySearch.appendChild(tr); tbodySearch.appendChild(tr);
var refreshSearch = document.createElement('button'); var refreshSearch = document.createElement('button');
refreshSearch.className = 'refresh'; refreshSearch.className = 'jsoneditor-refresh';
td = document.createElement('td'); td = document.createElement('td');
td.appendChild(refreshSearch); td.appendChild(refreshSearch);
tr.appendChild(td); tr.appendChild(td);
@ -80,7 +80,7 @@ function SearchBox (editor, container) {
var searchNext = document.createElement('button'); var searchNext = document.createElement('button');
searchNext.title = 'Next result (Enter)'; searchNext.title = 'Next result (Enter)';
searchNext.className = 'next'; searchNext.className = 'jsoneditor-next';
searchNext.onclick = function () { searchNext.onclick = function () {
searchBox.next(); searchBox.next();
}; };
@ -90,7 +90,7 @@ function SearchBox (editor, container) {
var searchPrevious = document.createElement('button'); var searchPrevious = document.createElement('button');
searchPrevious.title = 'Previous result (Shift+Enter)'; searchPrevious.title = 'Previous result (Shift+Enter)';
searchPrevious.className = 'previous'; searchPrevious.className = 'jsoneditor-previous';
searchPrevious.onclick = function () { searchPrevious.onclick = function () {
searchBox.previous(); searchBox.previous();
}; };

18
src/js/appendNodeFactory.js
View File

@ -50,7 +50,7 @@ function appendNodeFactory(Node) {
var tdMenu = document.createElement('td'); var tdMenu = document.createElement('td');
dom.tdMenu = tdMenu; dom.tdMenu = tdMenu;
var menu = document.createElement('button'); var menu = document.createElement('button');
menu.className = 'contextmenu'; menu.className = 'jsoneditor-contextmenu';
menu.title = 'Click to open the actions menu (Ctrl+M)'; menu.title = 'Click to open the actions menu (Ctrl+M)';
dom.menu = menu; dom.menu = menu;
tdMenu.appendChild(dom.menu); tdMenu.appendChild(dom.menu);
@ -60,7 +60,7 @@ function appendNodeFactory(Node) {
var tdAppend = document.createElement('td'); var tdAppend = document.createElement('td');
var domText = document.createElement('div'); var domText = document.createElement('div');
domText.innerHTML = '(empty)'; domText.innerHTML = '(empty)';
domText.className = 'readonly'; domText.className = 'jsoneditor-readonly';
tdAppend.appendChild(domText); tdAppend.appendChild(domText);
dom.td = tdAppend; dom.td = tdAppend;
dom.text = domText; dom.text = domText;
@ -137,14 +137,14 @@ function appendNodeFactory(Node) {
'text': 'Append', 'text': 'Append',
'title': 'Append a new field with type \'auto\' (Ctrl+Shift+Ins)', 'title': 'Append a new field with type \'auto\' (Ctrl+Shift+Ins)',
'submenuTitle': 'Select the type of the field to be appended', 'submenuTitle': 'Select the type of the field to be appended',
'className': 'insert', 'className': 'jsoneditor-insert',
'click': function () { 'click': function () {
node._onAppend('', '', 'auto'); node._onAppend('', '', 'auto');
}, },
'submenu': [ 'submenu': [
{ {
'text': 'Auto', 'text': 'Auto',
'className': 'type-auto', 'className': 'jsoneditor-type-auto',
'title': titles.auto, 'title': titles.auto,
'click': function () { 'click': function () {
node._onAppend('', '', 'auto'); node._onAppend('', '', 'auto');
@ -152,7 +152,7 @@ function appendNodeFactory(Node) {
}, },
{ {
'text': 'Array', 'text': 'Array',
'className': 'type-array', 'className': 'jsoneditor-type-array',
'title': titles.array, 'title': titles.array,
'click': function () { 'click': function () {
node._onAppend('', []); node._onAppend('', []);
@ -160,7 +160,7 @@ function appendNodeFactory(Node) {
}, },
{ {
'text': 'Object', 'text': 'Object',
'className': 'type-object', 'className': 'jsoneditor-type-object',
'title': titles.object, 'title': titles.object,
'click': function () { 'click': function () {
node._onAppend('', {}); node._onAppend('', {});
@ -168,7 +168,7 @@ function appendNodeFactory(Node) {
}, },
{ {
'text': 'String', 'text': 'String',
'className': 'type-string', 'className': 'jsoneditor-type-string',
'title': titles.string, 'title': titles.string,
'click': function () { 'click': function () {
node._onAppend('', '', 'string'); node._onAppend('', '', 'string');
@ -207,9 +207,9 @@ function appendNodeFactory(Node) {
var highlighter = this.editor.highlighter; var highlighter = this.editor.highlighter;
highlighter.highlight(this.parent); highlighter.highlight(this.parent);
highlighter.lock(); highlighter.lock();
util.addClassName(dom.menu, 'selected'); util.addClassName(dom.menu, 'jsoneditor-selected');
this.showContextMenu(dom.menu, function () { this.showContextMenu(dom.menu, function () {
util.removeClassName(dom.menu, 'selected'); util.removeClassName(dom.menu, 'jsoneditor-selected');
highlighter.unlock(); highlighter.unlock();
highlighter.unhighlight(); highlighter.unhighlight();
}); });

4
src/js/modeswitcher.js
View File

@ -73,7 +73,7 @@ function createModeSwitcher(editor, modes, current) {
throw new Error('Unknown mode "' + mode + '"'); throw new Error('Unknown mode "' + mode + '"');
} }
item.className = 'type-modes' + ((current == mode) ? ' selected' : ''); item.className = 'jsoneditor-type-modes' + ((current == mode) ? ' jsoneditor-selected' : '');
items.push(item); items.push(item);
} }
@ -86,7 +86,7 @@ function createModeSwitcher(editor, modes, current) {
// create the html element // create the html element
var box = document.createElement('button'); var box = document.createElement('button');
box.className = 'modes separator'; box.className = 'jsoneditor-modes jsoneditor-separator';
box.innerHTML = currentTitle + ' &#x25BE;'; box.innerHTML = currentTitle + ' &#x25BE;';
box.title = 'Switch editor mode'; box.title = 'Switch editor mode';
box.onclick = function () { box.onclick = function () {

14
src/js/textmode.js
View File

@ -72,7 +72,7 @@ textmode.create = function (container, options) {
this.height = container.clientHeight; this.height = container.clientHeight;
this.frame = document.createElement('div'); this.frame = document.createElement('div');
this.frame.className = 'jsoneditor mode-' + this.options.mode; this.frame.className = 'jsoneditor jsoneditor-mode-' + this.options.mode;
this.frame.onclick = function (event) { this.frame.onclick = function (event) {
// prevent default submit action when the editor is located inside a form // prevent default submit action when the editor is located inside a form
event.preventDefault(); event.preventDefault();
@ -83,12 +83,12 @@ textmode.create = function (container, options) {
// create menu // create menu
this.menu = document.createElement('div'); this.menu = document.createElement('div');
this.menu.className = 'menu'; this.menu.className = 'jsoneditor-menu';
this.frame.appendChild(this.menu); this.frame.appendChild(this.menu);
// create format button // create format button
var buttonFormat = document.createElement('button'); var buttonFormat = document.createElement('button');
buttonFormat.className = 'format'; buttonFormat.className = 'jsoneditor-format';
buttonFormat.title = 'Format JSON data, with proper indentation and line feeds (Ctrl+\\)'; buttonFormat.title = 'Format JSON data, with proper indentation and line feeds (Ctrl+\\)';
this.menu.appendChild(buttonFormat); this.menu.appendChild(buttonFormat);
buttonFormat.onclick = function () { buttonFormat.onclick = function () {
@ -102,7 +102,7 @@ textmode.create = function (container, options) {
// create compact button // create compact button
var buttonCompact = document.createElement('button'); var buttonCompact = document.createElement('button');
buttonCompact.className = 'compact'; buttonCompact.className = 'jsoneditor-compact';
buttonCompact.title = 'Compact JSON data, remove all whitespaces (Ctrl+Shift+\\)'; buttonCompact.title = 'Compact JSON data, remove all whitespaces (Ctrl+Shift+\\)';
this.menu.appendChild(buttonCompact); this.menu.appendChild(buttonCompact);
buttonCompact.onclick = function () { buttonCompact.onclick = function () {
@ -122,7 +122,7 @@ textmode.create = function (container, options) {
} }
this.content = document.createElement('div'); this.content = document.createElement('div');
this.content.className = 'outer'; this.content.className = 'jsoneditor-outer';
this.frame.appendChild(this.content); this.frame.appendChild(this.content);
this.container.appendChild(this.frame); this.container.appendChild(this.frame);
@ -164,7 +164,7 @@ textmode.create = function (container, options) {
poweredBy.appendChild(document.createTextNode('powered by ace')); poweredBy.appendChild(document.createTextNode('powered by ace'));
poweredBy.href = 'http://ace.ajax.org'; poweredBy.href = 'http://ace.ajax.org';
poweredBy.target = '_blank'; poweredBy.target = '_blank';
poweredBy.className = 'poweredBy'; poweredBy.className = 'jsoneditor-poweredBy';
poweredBy.onclick = function () { poweredBy.onclick = function () {
// TODO: this anchor falls below the margin of the content, // TODO: this anchor falls below the margin of the content,
// therefore the normal a.href does not work. We use a click event // therefore the normal a.href does not work. We use a click event
@ -181,7 +181,7 @@ textmode.create = function (container, options) {
else { else {
// load a plain text textarea // load a plain text textarea
var textarea = document.createElement('textarea'); var textarea = document.createElement('textarea');
textarea.className = 'text'; textarea.className = 'jsoneditor-text';
textarea.spellcheck = false; textarea.spellcheck = false;
this.content.appendChild(textarea); this.content.appendChild(textarea);
this.textarea = textarea; this.textarea = textarea;

18
src/js/treemode.js
View File

@ -476,7 +476,7 @@ treemode.scrollTo = function (top, callback) {
treemode._createFrame = function () { treemode._createFrame = function () {
// create the frame // create the frame
this.frame = document.createElement('div'); this.frame = document.createElement('div');
this.frame.className = 'jsoneditor mode-' + this.options.mode; this.frame.className = 'jsoneditor jsoneditor-mode-' + this.options.mode;
this.container.appendChild(this.frame); this.container.appendChild(this.frame);
// create one global event listener to handle all events from all nodes // create one global event listener to handle all events from all nodes
@ -515,12 +515,12 @@ treemode._createFrame = function () {
// create menu // create menu
this.menu = document.createElement('div'); this.menu = document.createElement('div');
this.menu.className = 'menu'; this.menu.className = 'jsoneditor-menu';
this.frame.appendChild(this.menu); this.frame.appendChild(this.menu);
// create expand all button // create expand all button
var expandAll = document.createElement('button'); var expandAll = document.createElement('button');
expandAll.className = 'expand-all'; expandAll.className = 'jsoneditor-expand-all';
expandAll.title = 'Expand all fields'; expandAll.title = 'Expand all fields';
expandAll.onclick = function () { expandAll.onclick = function () {
editor.expandAll(); editor.expandAll();
@ -530,7 +530,7 @@ treemode._createFrame = function () {
// create expand all button // create expand all button
var collapseAll = document.createElement('button'); var collapseAll = document.createElement('button');
collapseAll.title = 'Collapse all fields'; collapseAll.title = 'Collapse all fields';
collapseAll.className = 'collapse-all'; collapseAll.className = 'jsoneditor-collapse-all';
collapseAll.onclick = function () { collapseAll.onclick = function () {
editor.collapseAll(); editor.collapseAll();
}; };
@ -540,7 +540,7 @@ treemode._createFrame = function () {
if (this.history) { if (this.history) {
// create undo button // create undo button
var undo = document.createElement('button'); var undo = document.createElement('button');
undo.className = 'undo separator'; undo.className = 'jsoneditor-undo jsoneditor-separator';
undo.title = 'Undo last action (Ctrl+Z)'; undo.title = 'Undo last action (Ctrl+Z)';
undo.onclick = function () { undo.onclick = function () {
editor._onUndo(); editor._onUndo();
@ -550,7 +550,7 @@ treemode._createFrame = function () {
// create redo button // create redo button
var redo = document.createElement('button'); var redo = document.createElement('button');
redo.className = 'redo'; redo.className = 'jsoneditor-redo';
redo.title = 'Redo (Ctrl+Shift+Z)'; redo.title = 'Redo (Ctrl+Shift+Z)';
redo.onclick = function () { redo.onclick = function () {
editor._onRedo(); editor._onRedo();
@ -697,15 +697,15 @@ treemode._onKeyDown = function (event) {
*/ */
treemode._createTable = function () { treemode._createTable = function () {
var contentOuter = document.createElement('div'); var contentOuter = document.createElement('div');
contentOuter.className = 'outer'; contentOuter.className = 'jsoneditor-outer';
this.contentOuter = contentOuter; this.contentOuter = contentOuter;
this.content = document.createElement('div'); this.content = document.createElement('div');
this.content.className = 'tree'; this.content.className = 'jsoneditor-tree';
contentOuter.appendChild(this.content); contentOuter.appendChild(this.content);
this.table = document.createElement('table'); this.table = document.createElement('table');
this.table.className = 'tree'; this.table.className = 'jsoneditor-tree';
this.content.appendChild(this.table); this.content.appendChild(this.table);
// create colgroup where the first two columns don't have a fixed // create colgroup where the first two columns don't have a fixed