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

Implemented option modes

This commit is contained in:
josdejong 2013-08-27 22:50:20 +02:00
parent 605b01d638
commit 5a7a76cf0b
17 changed files with 305 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
HISTORY.md
View File

@ -3,6 +3,12 @@
http://jsoneditoronline.org
## not yet released, version 2.3.0
- Implemented an option `modes`, which creates a menu in the editor
where the user can switch between the selected editor modes.
## 2013-08-01, version 2.2.2
- Fixed non working option `indentation`.

2
Jakefile.js
View File

@ -48,6 +48,7 @@ task('build', ['clear'], function () {
jsoneditorSrc + 'js/appendnode.js',
jsoneditorSrc + 'js/contextmenu.js',
jsoneditorSrc + 'js/history.js',
jsoneditorSrc + 'js/modebox.js',
jsoneditorSrc + 'js/searchbox.js',
jsoneditorSrc + 'js/highlighter.js',
jsoneditorSrc + 'js/util.js',
@ -228,6 +229,7 @@ task('webapp', ['build', 'minify'], function () {
jake.cpR(webAppSrc + 'robots.txt', webApp);
jake.cpR(webAppSrc + 'datapolicy.txt', webApp);
jake.cpR(webAppSrc + 'index.html', webApp);
jake.cpR(webAppSrc + 'chrome_app_counter.html', webApp);
jake.cpR(webAppSrc + 'favicon.ico', webApp);
jake.cpR(webAppSrc + 'fileretriever.php', webApp);
jake.cpR(webAppSrc + 'googlea47c4a0b36d11021.html', webApp);

1
app/web/test.html
View File

@ -64,6 +64,7 @@
<script type="text/javascript" src="../../jsoneditor/js/contextmenu.js"></script>
<script type="text/javascript" src="../../jsoneditor/js/history.js"></script>
<script type="text/javascript" src="../../jsoneditor/js/searchbox.js"></script>
<script type="text/javascript" src="../../jsoneditor/js/modebox.js"></script>
<script type="text/javascript" src="../../jsoneditor/js/highlighter.js"></script>
<script type="text/javascript" src="../../jsoneditor/js/util.js"></script>
<script type="text/javascript" src="../../jsoneditor/js/module.js"></script>

3
docs/api.md
View File

@ -32,6 +32,9 @@ Constructs a new JSONEditor.
In 'form' mode, only the value can be changed, the datastructure is read-only.
Mode 'code' requires the Ace editor to be loaded on the page.
Mode 'text' shows the data as plain text.
- `{String[]} modes`.
Create a box in the editor menu where the user can switch between the specified
modes. Available values: see option `mode`.
- `{String} name`.
Initial field name for the root node, is undefined by default.
Can also be set using `JSONEditor.setName(name)`.

18
examples/01_basic_usage.html
View File

@ -19,24 +19,24 @@
<script type="text/javascript" >
// create the editor
var container = document.getElementById("jsoneditor");
var container = document.getElementById('jsoneditor');
var editor = new jsoneditor.JSONEditor(container);
// set json
document.getElementById("setJSON").onclick = function () {
document.getElementById('setJSON').onclick = function () {
var json = {
"array": [1, 2, 3],
"boolean": true,
"null": null,
"number": 123,
"object": {"a": "b", "c": "d"},
"string": "Hello World"
'array': [1, 2, 3],
'boolean': true,
'null': null,
'number': 123,
'object': {'a': 'b', 'c': 'd'},
'string': 'Hello World'
};
editor.set(json);
};
// get json
document.getElementById("getJSON").onclick = function () {
document.getElementById('getJSON').onclick = function () {
var json = editor.get();
alert(JSON.stringify(json, null, 2));
};

20
examples/02_viewer.html
View File

@ -19,19 +19,21 @@
<div id="jsoneditor"></div>
<script type="text/javascript" >
// create the editor
var container = document.getElementById("jsoneditor");
var container = document.getElementById('jsoneditor');
var options = {
mode: "view"
mode: 'view'
};
var json = {
"array": [1, 2, 3],
"boolean": true,
"null": null,
"number": 123,
"object": {"a": "b", "c": "d"},
"string": "Hello World"
'array': [1, 2, 3],
'boolean': true,
'null': null,
'number': 123,
'object': {'a': 'b', 'c': 'd'},
'string': 'Hello World'
};
var editor = new jsoneditor.JSONEditor(container, options, json);
</script>
</body>

39
examples/03_switch_mode.html
View File

@ -17,12 +17,17 @@
<script type="text/javascript" src="../lib/jsonlint/jsonlint.js"></script>
<style type="text/css">
body, select {
font: 10pt arial;
font-family: arial, sans-serif;
font-size: 11pt;
body {
font: 10.5pt arial;
color: #4d4d4d;
line-height: 150%;
width: 500px;
}
code {
background-color: #f5f5f5;
}
#jsoneditor {
width: 500px;
height: 500px;
@ -32,33 +37,24 @@
<body>
<p>
<label for="mode">Switch mode:</label>
<select id="mode">
<option value="tree">tree</option>
<option value="view">view</option>
<option value="form">form</option>
<option value="code">code</option>
<option value="text">text</option>
</select>
Switch editor mode using the mode box.
Note that the mode can be changed programmatically as well using the method
<code>editor.setMode(mode)</code>, try it in the console of your browser.
</p>
<div id="jsoneditor"></div>
<script type="text/javascript" >
// create switchable mode
var mode = document.getElementById('mode');
mode.onchange = function () {
editor.setMode(mode.value);
};
var container = document.getElementById('jsoneditor');
// create the editor
var container = document.getElementById("jsoneditor");
var options = {
mode: mode.value,
mode: 'tree',
modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
error: function (err) {
alert(err.toString());
}
};
var json = {
"array": [1, 2, 3],
"boolean": true,
@ -67,6 +63,7 @@
"object": {"a": "b", "c": "d"},
"string": "Hello World"
};
var editor = new jsoneditor.JSONEditor(container, options, json);
</script>
</body>

20
examples/requirejs_demo/scripts/main.js
View File

@ -1,24 +1,24 @@
var module = "../../../jsoneditor";
var module = '../../../jsoneditor';
require([module], function (jsoneditor) {
// create the editor
var container = document.getElementById("jsoneditor");
var container = document.getElementById('jsoneditor');
var editor = new jsoneditor.JSONEditor(container);
// set json
document.getElementById("setJSON").onclick = function () {
document.getElementById('setJSON').onclick = function () {
var json = {
"array": [1, 2, 3],
"boolean": true,
"null": null,
"number": 123,
"object": {"a": "b", "c": "d"},
"string": "Hello World"
'array': [1, 2, 3],
'boolean': true,
'null': null,
'number': 123,
'object': {'a': 'b', 'c': 'd'},
'string': 'Hello World'
};
editor.set(json);
};
// get json
document.getElementById("getJSON").onclick = function () {
document.getElementById('getJSON').onclick = function () {
var json = editor.get();
alert(JSON.stringify(json, null, 2));
};

2
jsoneditor-min.css vendored
View File

File diff suppressed because one or more lines are too long

9
jsoneditor-min.js vendored
View File

File diff suppressed because one or more lines are too long

29
jsoneditor.css
View File

@ -252,7 +252,7 @@ div.jsoneditor {
color: #4d4d4d;
background: transparent;
line-height: 24px;
line-height: 26px;
text-align: left;
}
@ -365,7 +365,7 @@ div.jsoneditor {
/* ContextMenu - sub menu */
.jsoneditor-contextmenu ul li ul li .selected {
.jsoneditor-contextmenu ul li .selected {
background-color: #D5DDF6;
}
@ -439,6 +439,11 @@ div.jsoneditor {
background-position: -96px 0;
}
.jsoneditor-contextmenu button.type-modes > .icon {
background-image: none;
width: 6px;
}
.jsoneditor .menu {
width: 100%;
@ -459,10 +464,17 @@ div.jsoneditor {
width: 26px;
height: 26px;
margin: 2px;
padding: 2px;
padding: 0;
border-radius: 2px;
border: 1px solid #aec0f8;
background: #e3eaf6 url('img/jsoneditor-icons.png');
color: #4D4D4D;
opacity: 0.8;
font-family: arial, sans-serif;
font-size: 10pt;
float: left;
}
.jsoneditor .menu button:hover {
@ -500,6 +512,17 @@ div.jsoneditor {
background-position: -72px -120px;
}
.jsoneditor .menu button.modes {
background-image: none;
width: auto;
padding-left: 6px;
padding-right: 6px;
}
.jsoneditor .menu button.separator {
margin-left: 10px;
}
.jsoneditor .menu a {
font-family: arial, sans-serif;
font-size: 10pt;

107
jsoneditor.js
View File

@ -27,8 +27,8 @@
* Copyright (c) 2011-2013 Jos de Jong, http://jsoneditoronline.org
*
* @author Jos de Jong, <wjosdejong@gmail.com>
* @version 2.2.2
* @date 2013-08-01
* @version 2.3.0-SNAPSHOT
* @date 2013-08-27
*/
(function () {
@ -787,14 +787,9 @@ TreeEditor.prototype._createFrame = function () {
// create undo/redo buttons
if (this.history) {
// create separator
var separator = document.createElement('span');
separator.innerHTML = '&nbsp;';
this.menu.appendChild(separator);
// create undo button
var undo = document.createElement('button');
undo.className = 'undo';
undo.className = 'undo separator';
undo.title = 'Undo last action (Ctrl+Z)';
undo.onclick = function () {
editor._onUndo();
@ -820,6 +815,12 @@ TreeEditor.prototype._createFrame = function () {
this.history.onChange();
}
// create mode box
if (this.options && this.options.modes && this.options.modes.length) {
var modeBox = createModeBox(this, this.options.modes, this.options.mode);
this.menu.appendChild(modeBox);
}
// create search box
if (this.options.search) {
this.searchBox = new SearchBox(this, this.menu);
@ -1094,10 +1095,8 @@ TextEditor.prototype._create = function (container, options, json) {
// create format button
var buttonFormat = document.createElement('button');
//buttonFormat.innerHTML = 'Format';
buttonFormat.className = 'format';
buttonFormat.title = 'Format JSON data, with proper indentation and line feeds';
//buttonFormat.className = 'jsoneditor-button';
this.menu.appendChild(buttonFormat);
buttonFormat.onclick = function () {
try {
@ -1110,10 +1109,8 @@ TextEditor.prototype._create = function (container, options, json) {
// create compact button
var buttonCompact = document.createElement('button');
//buttonCompact.innerHTML = 'Compact';
buttonCompact.className = 'compact';
buttonCompact.title = 'Compact JSON data, remove all whitespaces';
//buttonCompact.className = 'jsoneditor-button';
this.menu.appendChild(buttonCompact);
buttonCompact.onclick = function () {
try {
@ -1124,6 +1121,12 @@ TextEditor.prototype._create = function (container, options, json) {
}
};
// create mode box
if (this.options && this.options.modes && this.options.modes.length) {
var modeBox = createModeBox(this, this.options.modes, this.options.mode);
this.menu.appendChild(modeBox);
}
this.content = document.createElement('div');
this.content.className = 'outer';
this.frame.appendChild(this.content);
@ -5061,6 +5064,86 @@ History.prototype.redo = function () {
}
};
/**
* create a mode box to be used in the editor menu's
* @param {JSONEditor} editor
* @param {String[]} modes Available modes: 'code', 'form', 'text', 'tree', 'view'
* @param {String} current Available modes: 'code', 'form', 'text', 'tree', 'view'
* @returns {HTMLElement} box
*/
function createModeBox(editor, modes, current) {
// available modes
var availableModes = {
code: {
'text': 'Code',
'title': 'Switch to code highlighter',
'click': function () {
editor.setMode('code');
}
},
form: {
'text': 'Form',
'title': 'Switch to form editor',
'click': function () {
editor.setMode('form');
}
},
text: {
'text': 'Text',
'title': 'Switch to plain text editor',
'click': function () {
editor.setMode('text');
}
},
tree: {
'text': 'Tree',
'title': 'Switch to tree editor',
'click': function () {
editor.setMode('tree');
}
},
view: {
'text': 'View',
'title': 'Switch to tree view',
'click': function () {
editor.setMode('view');
}
}
};
// list the selected modes
var items = [];
for (var i = 0; i < modes.length; i++) {
var mode = modes[i];
var item = availableModes[mode];
if (!item) {
throw new Error('Unknown mode "' + mode + '"');
}
item.className = 'type-modes' + ((current == mode) ? ' selected' : '');
items.push(item);
}
// retrieve the title of current mode
var currentMode = availableModes[current];
if (!currentMode) {
throw new Error('Unknown mode "' + current + '"');
}
var currentTitle = currentMode.text;
// create the html element
var box = document.createElement('button');
box.className = 'modes separator';
box.innerHTML = currentTitle + ' &#x25BE;';
box.title = 'Switch editor mode';
box.onclick = function () {
var menu = new ContextMenu(items);
menu.show(box);
};
return box;
}
/**
* @constructor SearchBox
* Create a search box in given HTML container

9
jsoneditor/css/contextmenu.css
View File

@ -31,7 +31,7 @@
color: #4d4d4d;
background: transparent;
line-height: 24px;
line-height: 26px;
text-align: left;
}
@ -144,7 +144,7 @@
/* ContextMenu - sub menu */
.jsoneditor-contextmenu ul li ul li .selected {
.jsoneditor-contextmenu ul li .selected {
background-color: #D5DDF6;
}
@ -217,3 +217,8 @@
.jsoneditor-contextmenu button.type-array.selected > .icon{
background-position: -96px 0;
}
.jsoneditor-contextmenu button.type-modes > .icon {
background-image: none;
width: 6px;
}

20
jsoneditor/css/menu.css
View File

@ -18,10 +18,17 @@
width: 26px;
height: 26px;
margin: 2px;
padding: 2px;
padding: 0;
border-radius: 2px;
border: 1px solid #aec0f8;
background: #e3eaf6 url('img/jsoneditor-icons.png');
color: #4D4D4D;
opacity: 0.8;
font-family: arial, sans-serif;
font-size: 10pt;
float: left;
}
.jsoneditor .menu button:hover {
@ -59,6 +66,17 @@
background-position: -72px -120px;
}
.jsoneditor .menu button.modes {
background-image: none;
width: auto;
padding-left: 6px;
padding-right: 6px;
}
.jsoneditor .menu button.separator {
margin-left: 10px;
}
.jsoneditor .menu a {
font-family: arial, sans-serif;
font-size: 10pt;

79
jsoneditor/js/modebox.js Normal file
View File

@ -0,0 +1,79 @@
/**
* create a mode box to be used in the editor menu's
* @param {JSONEditor} editor
* @param {String[]} modes Available modes: 'code', 'form', 'text', 'tree', 'view'
* @param {String} current Available modes: 'code', 'form', 'text', 'tree', 'view'
* @returns {HTMLElement} box
*/
function createModeBox(editor, modes, current) {
// available modes
var availableModes = {
code: {
'text': 'Code',
'title': 'Switch to code highlighter',
'click': function () {
editor.setMode('code');
}
},
form: {
'text': 'Form',
'title': 'Switch to form editor',
'click': function () {
editor.setMode('form');
}
},
text: {
'text': 'Text',
'title': 'Switch to plain text editor',
'click': function () {
editor.setMode('text');
}
},
tree: {
'text': 'Tree',
'title': 'Switch to tree editor',
'click': function () {
editor.setMode('tree');
}
},
view: {
'text': 'View',
'title': 'Switch to tree view',
'click': function () {
editor.setMode('view');
}
}
};
// list the selected modes
var items = [];
for (var i = 0; i < modes.length; i++) {
var mode = modes[i];
var item = availableModes[mode];
if (!item) {
throw new Error('Unknown mode "' + mode + '"');
}
item.className = 'type-modes' + ((current == mode) ? ' selected' : '');
items.push(item);
}
// retrieve the title of current mode
var currentMode = availableModes[current];
if (!currentMode) {
throw new Error('Unknown mode "' + current + '"');
}
var currentTitle = currentMode.text;
// create the html element
var box = document.createElement('button');
box.className = 'modes separator';
box.innerHTML = currentTitle + ' &#x25BE;';
box.title = 'Switch editor mode';
box.onclick = function () {
var menu = new ContextMenu(items);
menu.show(box);
};
return box;
}

10
jsoneditor/js/texteditor.js
View File

@ -82,10 +82,8 @@ TextEditor.prototype._create = function (container, options, json) {
// create format button
var buttonFormat = document.createElement('button');
//buttonFormat.innerHTML = 'Format';
buttonFormat.className = 'format';
buttonFormat.title = 'Format JSON data, with proper indentation and line feeds';
//buttonFormat.className = 'jsoneditor-button';
this.menu.appendChild(buttonFormat);
buttonFormat.onclick = function () {
try {
@ -98,10 +96,8 @@ TextEditor.prototype._create = function (container, options, json) {
// create compact button
var buttonCompact = document.createElement('button');
//buttonCompact.innerHTML = 'Compact';
buttonCompact.className = 'compact';
buttonCompact.title = 'Compact JSON data, remove all whitespaces';
//buttonCompact.className = 'jsoneditor-button';
this.menu.appendChild(buttonCompact);
buttonCompact.onclick = function () {
try {
@ -112,6 +108,12 @@ TextEditor.prototype._create = function (container, options, json) {
}
};
// create mode box
if (this.options && this.options.modes && this.options.modes.length) {
var modeBox = createModeBox(this, this.options.modes, this.options.mode);
this.menu.appendChild(modeBox);
}
this.content = document.createElement('div');
this.content.className = 'outer';
this.frame.appendChild(this.content);

13
jsoneditor/js/treeeditor.js
View File

@ -546,14 +546,9 @@ TreeEditor.prototype._createFrame = function () {
// create undo/redo buttons
if (this.history) {
// create separator
var separator = document.createElement('span');
separator.innerHTML = '&nbsp;';
this.menu.appendChild(separator);
// create undo button
var undo = document.createElement('button');
undo.className = 'undo';
undo.className = 'undo separator';
undo.title = 'Undo last action (Ctrl+Z)';
undo.onclick = function () {
editor._onUndo();
@ -579,6 +574,12 @@ TreeEditor.prototype._createFrame = function () {
this.history.onChange();
}
// create mode box
if (this.options && this.options.modes && this.options.modes.length) {
var modeBox = createModeBox(this, this.options.modes, this.options.mode);
this.menu.appendChild(modeBox);
}
// create search box
if (this.options.search) {
this.searchBox = new SearchBox(this, this.menu);