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

Unified JSONEditor and JSONFormatter. Added method setMode. Renamed a lot of stuff.

This commit is contained in:
josdejong 2013-04-30 13:23:06 +02:00
parent 6679c88075
commit 501099056b
18 changed files with 1383 additions and 1275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/web/app.css
View File

@ -147,7 +147,7 @@ span.header-light {
overflow: hidden;
}
#jsonformatter, #jsoneditor {
#codeEditor, #treeEditor {
height: 100%;
width: 400px;
@ -156,12 +156,12 @@ span.header-light {
box-sizing: border-box;
}
#jsonformatter {
#codeEditor {
float: left;
padding: 15px 0 15px 15px;
}
#jsoneditor {
#treeEditor {
float: left;
padding: 15px 15px 15px 0;
}

121
app/web/app.js
View File

@ -26,21 +26,21 @@
* Copyright (C) 2011-2013 Jos de Jong, http://jsoneditoronline.org
*
* @author Jos de Jong, <wjosdejong@gmail.com>
* @date 2013-03-08
* @date 2013-04-30
*/
var editor = null;
var formatter = null;
var treeEditor = null;
var codeEditor = null;
var app = {};
/**
* Get the JSON from the code editor and load it in the tree editor
*/
app.CodeToEditor = function() {
app.CodeToTree = function() {
try {
editor.set(formatter.get());
treeEditor.set(codeEditor.get());
}
catch (err) {
app.notify.showError(err);
@ -50,9 +50,9 @@ app.CodeToEditor = function() {
/**
* Get the JSON from the tree editor and load it into the code editor
*/
app.editorToCode = function () {
app.treeToCode = function () {
try {
formatter.set(editor.get());
codeEditor.set(treeEditor.get());
}
catch (err) {
app.notify.showError(err);
@ -60,7 +60,7 @@ app.editorToCode = function () {
};
/**
* Load the interface (editor, formatter, splitter)
* Load the interface (tree editor, code editor, splitter)
*/
// TODO: split the method load in multiple methods, it is too large
app.load = function() {
@ -94,31 +94,32 @@ app.load = function() {
}
}
// Store whether editor or formatter is last changed
// Store whether tree editor or code editor is last changed
app.lastChanged = undefined;
// formatter
var container = document.getElementById("jsonformatter");
formatter = new jsoneditor.JSONFormatter(container, {
// code editor
var container = document.getElementById("codeEditor");
codeEditor = new jsoneditor.JSONEditor(container, {
mode: 'code',
change: function () {
app.lastChanged = formatter;
app.lastChanged = codeEditor;
}
});
formatter.set(json);
formatter.onError = function (err) {
codeEditor.set(json);
codeEditor.onError = function (err) {
app.notify.showError(err);
};
// editor
container = document.getElementById("jsoneditor");
editor = new jsoneditor.JSONEditor(container, {
// tree editor
container = document.getElementById("treeEditor");
treeEditor = new jsoneditor.JSONEditor(container, {
mode: 'tree',
change: function () {
app.lastChanged = editor;
app.lastChanged = treeEditor;
}
});
editor.set(json);
// TODO: automatically synchronize data of formatter and editor? (editor should keep its state though)
treeEditor.set(json);
// TODO: automatically synchronize data of code and tree editor? (tree editor should keep its state though)
// splitter
app.splitter = new Splitter({
@ -128,18 +129,18 @@ app.load = function() {
}
});
// button Code-to-Editor
var toEditor = document.getElementById('toEditor');
toEditor.onclick = function () {
// button Code-to-Tree
var toTree = document.getElementById('toTree');
toTree.onclick = function () {
this.focus();
app.CodeToEditor();
app.CodeToTree();
};
// button Editor-to-Dode
// button Tree-to-Code
var toCode = document.getElementById('toCode');
toCode.onclick = function () {
this.focus();
app.editorToCode();
app.treeToCode();
};
// web page resize handler
@ -186,8 +187,8 @@ app.load = function() {
var domSave = document.getElementById('save');
domSave.onclick = app.saveFile;
// set focus on the formatter
formatter.focus();
// set focus on the code editor
codeEditor.focus();
// enforce FireFox to not do spell checking on any input field
document.body.spellcheck = false;
@ -203,14 +204,14 @@ app.load = function() {
*/
app.openCallback = function (err, data) {
if (!err) {
if (data != undefined) {
formatter.setText(data);
if (data != null) {
codeEditor.setText(data);
try {
var json = jsoneditor.util.parse(data);
editor.set(json);
treeEditor.set(json);
}
catch (err) {
editor.set({});
treeEditor.set({});
app.notify.showError(err);
}
}
@ -245,20 +246,20 @@ app.openUrl = function (url) {
* Open a file explorer to save the file.
*/
app.saveFile = function () {
// first synchronize the editors and formatters contents
if (app.lastChanged == editor) {
app.editorToCode();
// first synchronize both editors contents
if (app.lastChanged == treeEditor) {
app.treeToCode();
}
/* TODO: also sync from formatter to editor? will clear the history ...
if (app.lastChanged == formatter) {
/* TODO: also sync from code to tree editor? will clear the history ...
if (app.lastChanged == codeEditor) {
app.CodeToEditor();
}
*/
app.lastChanged = undefined;
// save the text from the formatter
// save the text from the code editor
// TODO: show a 'saving...' notification
var data = formatter.getText();
var data = codeEditor.getText();
app.retriever.saveFile(data, function (err) {
if (err) {
app.notify.showError(err);
@ -271,14 +272,14 @@ app.saveFile = function () {
*/
app.clearFile = function () {
var json = {};
formatter.set(json);
editor.set(json);
codeEditor.set(json);
treeEditor.set(json);
};
app.resize = function() {
var domMenu = document.getElementById('menu');
var domEditor = document.getElementById('jsoneditor');
var domFormatter = document.getElementById('jsonformatter');
var domTreeEditor = document.getElementById('treeEditor');
var domCodeEditor = document.getElementById('codeEditor');
var domSplitter = document.getElementById('splitter');
var domSplitterButtons = document.getElementById('buttons');
var domSplitterDrag = document.getElementById('drag');
@ -297,27 +298,27 @@ app.resize = function() {
// calculate horizontal splitter position
var value = app.splitter.getValue();
var showFormatter = (value > 0);
var showEditor = (value < 1);
var showButtons = showFormatter && showEditor;
var showCodeEditor = (value > 0);
var showTreeEditor = (value < 1);
var showButtons = showCodeEditor && showTreeEditor;
domSplitterButtons.style.display = showButtons ? '' : 'none';
var splitterWidth = domSplitter.clientWidth;
var splitterLeft;
if (!showFormatter) {
// formatter not visible
if (!showCodeEditor) {
// code editor not visible
splitterLeft = 0;
domSplitterDrag.innerHTML = '&rsaquo;';
domSplitterDrag.title = 'Drag right to show the code editor';
}
else if (!showEditor) {
// editor not visible
else if (!showTreeEditor) {
// tree editor not visible
splitterLeft = width * value - splitterWidth;
domSplitterDrag.innerHTML = '&lsaquo;';
domSplitterDrag.title = 'Drag left to show the tree editor';
}
else {
// both editor and formatter visible
// both tree and code editor visible
splitterLeft = width * value - splitterWidth / 2;
// TODO: find a character with vertical dots that works on IE8 too, or use an image
@ -326,10 +327,10 @@ app.resize = function() {
domSplitterDrag.title = 'Drag left or right to change the width of the panels';
}
// resize formatter
domFormatter.style.display = (value == 0) ? 'none' : '';
domFormatter.style.width = Math.max(Math.round(splitterLeft), 0) + 'px';
formatter.resize();
// resize code editor
domCodeEditor.style.display = (value == 0) ? 'none' : '';
domCodeEditor.style.width = Math.max(Math.round(splitterLeft), 0) + 'px';
codeEditor.resize();
// resize the splitter
domSplitterDrag.style.height = (domSplitter.clientHeight -
@ -337,12 +338,12 @@ app.resize = function() {
(showButtons ? margin : 0)) + 'px';
domSplitterDrag.style.lineHeight = domSplitterDrag.style.height;
// resize editor
// resize tree editor
// the width has a -1 to prevent the width from being just half a pixel
// wider than the window, causing the content elements to wrap...
domEditor.style.display = (value == 1) ? 'none' : '';
domEditor.style.left = Math.round(splitterLeft + splitterWidth) + 'px';
domEditor.style.width = Math.max(Math.round(width - splitterLeft - splitterWidth - 2), 0) + 'px';
domTreeEditor.style.display = (value == 1) ? 'none' : '';
domTreeEditor.style.left = Math.round(splitterLeft + splitterWidth) + 'px';
domTreeEditor.style.width = Math.max(Math.round(width - splitterLeft - splitterWidth - 2), 0) + 'px';
}
// align main menu with ads

8
app/web/index.html
View File

@ -123,17 +123,17 @@
<div id="auto">
<div id="contents">
<div id="jsonformatter"></div>
<div id="codeEditor"></div>
<div id="splitter">
<div id="buttons">
<div>
<button id="toEditor" class="convert" title="Code to editor">
<button id="toTree" class="convert" title="Copy code to tree editor">
<div class="convert-right"></div>
</button>
</div>
<div>
<button id="toCode" class="convert" title="Editor to code">
<button id="toCode" class="convert" title="Copy tree to code editor">
<div class="convert-left"></div>
</button>
</div>
@ -142,7 +142,7 @@
</div>
</div>
<div id="jsoneditor"></div>
<div id="treeEditor"></div>
<script type="text/javascript">
app.load();

12
app/web/test.html
View File

@ -56,7 +56,8 @@
-->
<script type="text/javascript" src="../../jsoneditor/js/jsoneditor.js"></script>
<script type="text/javascript" src="../../jsoneditor/js/jsonformatter.js"></script>
<script type="text/javascript" src="../../jsoneditor/js/treeeditor.js"></script>
<script type="text/javascript" src="../../jsoneditor/js/texteditor.js"></script>
<script type="text/javascript" src="../../jsoneditor/js/node.js"></script>
<script type="text/javascript" src="../../jsoneditor/js/appendnode.js"></script>
<script type="text/javascript" src="../../jsoneditor/js/contextmenu.js"></script>
@ -64,6 +65,7 @@
<script type="text/javascript" src="../../jsoneditor/js/searchbox.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>
<script type="text/javascript" src="queryparams.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="fileretriever.js"></script>
@ -153,17 +155,17 @@
<div id="auto">
<div id="contents">
<div id="jsonformatter"></div>
<div id="codeEditor"></div>
<div id="splitter">
<div id="buttons">
<div>
<button id="toEditor" class="convert" title="JSON to Editor">
<button id="toTree" class="convert" title="Copy code to tree editor">
<div class="convert-right"></div>
</button>
</div>
<div>
<button id="toCode" class="convert" title="Editor to JSON">
<button id="toCode" class="convert" title="Copy tree to code editor">
<div class="convert-left"></div>
</button>
</div>
@ -172,7 +174,7 @@
</div>
</div>
<div id="jsoneditor"></div>
<div id="treeEditor"></div>
<script type="text/javascript">
app.load();

3
build.xml
View File

@ -61,7 +61,8 @@
<!-- concatenate the javascript files -->
<concat destfile="${jsoneditor}/tmp.js">
<fileset dir="${js_src}" includes="jsoneditor.js"/>
<fileset dir="${js_src}" includes="jsonformatter.js"/>
<fileset dir="${js_src}" includes="treeeditor.js"/>
<fileset dir="${js_src}" includes="texteditor.js"/>
<fileset dir="${js_src}" includes="node.js"/>
<fileset dir="${js_src}" includes="appendnode.js"/>
<fileset dir="${js_src}" includes="contextmenu.js"/>

4
changelog.txt
View File

@ -2,6 +2,10 @@
http://jsoneditoronline.org
## not yet released, version 2.2.0
- Unified JSONFormatter and JSONEditor in one editor with a switchable mode.
## 2013-03-11, version 2.1.1

2
jsoneditor/examples/02_viewer.html
View File

@ -23,7 +23,7 @@
// create the editor
var container = document.getElementById("jsoneditor");
var options = {
mode: "viewer"
mode: "view"
};
var json = {
"array": [1, 2, 3],

99
jsoneditor/js/appendnode.js
View File

@ -1,45 +1,23 @@
/**
* @license
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy
* of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*
* Copyright (c) 2011-2013 Jos de Jong, http://jsoneditoronline.org
*
* @author Jos de Jong, <wjosdejong@gmail.com>
*/
// create namespace
var jsoneditor = jsoneditor || {};
/**
* @constructor jsoneditor.AppendNode
* @extends jsoneditor.Node
* @param {jsoneditor.JSONEditor} editor
* @constructor AppendNode
* @extends Node
* @param {TreeEditor} editor
* Create a new AppendNode. This is a special node which is created at the
* end of the list with childs for an object or array
*/
jsoneditor.AppendNode = function (editor) {
function AppendNode (editor) {
/** @type {TreeEditor} */
this.editor = editor;
this.dom = {};
};
}
jsoneditor.AppendNode.prototype = new jsoneditor.Node();
AppendNode.prototype = new Node();
/**
* Return a table row with an append button.
* @return {Element} dom TR element
*/
jsoneditor.AppendNode.prototype.getDom = function () {
// TODO: do not create the DOM for the appendNode when in viewer mode
AppendNode.prototype.getDom = function () {
// TODO: implement a new solution for the append node
var dom = this.dom;
@ -52,26 +30,21 @@ jsoneditor.AppendNode.prototype.getDom = function () {
trAppend.node = this;
dom.tr = trAppend;
// when in viewer mode, don't create the contents for the append node
// but return here.
if (!this.editor.mode.editor) {
return trAppend;
}
// TODO: consistent naming
// a cell for the dragarea column
var tdDrag = document.createElement('td');
dom.tdDrag = tdDrag;
if (this.editor.mode.edit) {
// a cell for the dragarea column
dom.tdDrag = document.createElement('td');
// create context menu
var tdMenu = document.createElement('td');
var menu = document.createElement('button');
menu.className = 'contextmenu';
menu.title = 'Click to open the actions menu (Ctrl+M)';
dom.menu = menu;
dom.tdMenu = tdMenu;
tdMenu.appendChild(dom.menu);
// create context menu
var tdMenu = document.createElement('td');
dom.tdMenu = tdMenu;
var menu = document.createElement('button');
menu.className = 'contextmenu';
menu.title = 'Click to open the actions menu (Ctrl+M)';
dom.menu = menu;
tdMenu.appendChild(dom.menu);
}
// a cell for the contents (showing text 'empty')
var tdAppend = document.createElement('td');
@ -90,7 +63,7 @@ jsoneditor.AppendNode.prototype.getDom = function () {
/**
* Update the HTML dom of the Node
*/
jsoneditor.AppendNode.prototype.updateDom = function () {
AppendNode.prototype.updateDom = function () {
var dom = this.dom;
var tdAppend = dom.td;
if (tdAppend) {
@ -108,15 +81,23 @@ jsoneditor.AppendNode.prototype.updateDom = function () {
var trAppend = dom.tr;
if (!this.isVisible()) {
if (dom.tr.firstChild) {
trAppend.removeChild(dom.tdDrag);
trAppend.removeChild(dom.tdMenu);
if (dom.tdDrag) {
trAppend.removeChild(dom.tdDrag);
}
if (dom.tdMenu) {
trAppend.removeChild(dom.tdMenu);
}
trAppend.removeChild(tdAppend);
}
}
else {
if (!dom.tr.firstChild) {
trAppend.appendChild(dom.tdDrag);
trAppend.appendChild(dom.tdMenu);
if (dom.tdDrag) {
trAppend.appendChild(dom.tdDrag);
}
if (dom.tdMenu) {
trAppend.appendChild(dom.tdMenu);
}
trAppend.appendChild(tdAppend);
}
}
@ -127,7 +108,7 @@ jsoneditor.AppendNode.prototype.updateDom = function () {
* the AppendNode is visible when its parent has no childs (i.e. is empty).
* @return {boolean} isVisible
*/
jsoneditor.AppendNode.prototype.isVisible = function () {
AppendNode.prototype.isVisible = function () {
return (this.parent.childs.length == 0);
};
@ -137,9 +118,9 @@ jsoneditor.AppendNode.prototype.isVisible = function () {
* @param {function} [onClose] Callback method called when the context menu
* is being closed.
*/
jsoneditor.AppendNode.prototype.showContextMenu = function (anchor, onClose) {
AppendNode.prototype.showContextMenu = function (anchor, onClose) {
var node = this;
var titles = jsoneditor.Node.TYPE_TITLES;
var titles = Node.TYPE_TITLES;
var items = [
// create append button
{
@ -187,7 +168,7 @@ jsoneditor.AppendNode.prototype.showContextMenu = function (anchor, onClose) {
}
];
var menu = new jsoneditor.ContextMenu(items, {close: onClose});
var menu = new ContextMenu(items, {close: onClose});
menu.show(anchor);
};
@ -195,7 +176,7 @@ jsoneditor.AppendNode.prototype.showContextMenu = function (anchor, onClose) {
* Handle an event. The event is catched centrally by the editor
* @param {Event} event
*/
jsoneditor.AppendNode.prototype.onEvent = function (event) {
AppendNode.prototype.onEvent = function (event) {
var type = event.type;
var target = event.target || event.srcElement;
var dom = this.dom;
@ -216,9 +197,9 @@ jsoneditor.AppendNode.prototype.onEvent = function (event) {
var highlighter = this.editor.highlighter;
highlighter.highlight(this.parent);
highlighter.lock();
jsoneditor.util.addClassName(dom.menu, 'selected');
util.addClassName(dom.menu, 'selected');
this.showContextMenu(dom.menu, function () {
jsoneditor.util.removeClassName(dom.menu, 'selected');
util.removeClassName(dom.menu, 'selected');
highlighter.unlock();
highlighter.unhighlight();
});

84
jsoneditor/js/contextmenu.js
View File

@ -1,25 +1,3 @@
/**
* @license
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy
* of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*
* Copyright (c) 2011-2013 Jos de Jong, http://jsoneditoronline.org
*
* @author Jos de Jong, <wjosdejong@gmail.com>
*/
// create namespace
var jsoneditor = jsoneditor || {};
/**
* A context menu
* @param {Object[]} items Array containing the menu structure
@ -29,7 +7,7 @@ var jsoneditor = jsoneditor || {};
* context menu is being closed.
* @constructor
*/
jsoneditor.ContextMenu = function (items, options) {
function ContextMenu (items, options) {
this.dom = {};
var me = this;
@ -162,14 +140,14 @@ jsoneditor.ContextMenu = function (items, options) {
var height = (items.length + (item.submenu ? item.submenu.length : 0)) * 24;
me.maxHeight = Math.max(me.maxHeight, height);
});
};
}
/**
* Get the currently visible buttons
* @return {Array.<HTMLElement>} buttons
* @private
*/
jsoneditor.ContextMenu.prototype._getVisibleButtons = function () {
ContextMenu.prototype._getVisibleButtons = function () {
var buttons = [];
var me = this;
this.dom.items.forEach(function (item) {
@ -192,23 +170,23 @@ jsoneditor.ContextMenu.prototype._getVisibleButtons = function () {
};
// currently displayed context menu, a singleton. We may only have one visible context menu
jsoneditor.ContextMenu.visibleMenu = undefined;
ContextMenu.visibleMenu = undefined;
/**
* Attach the menu to an anchor
* @param {HTMLElement} anchor
*/
jsoneditor.ContextMenu.prototype.show = function (anchor) {
ContextMenu.prototype.show = function (anchor) {
this.hide();
// calculate whether the menu fits below the anchor
var windowHeight = jsoneditor.util.getWindowHeight();
var windowHeight = util.getWindowHeight();
var anchorHeight = anchor.offsetHeight;
var menuHeight = this.maxHeight;
// position the menu
var left = jsoneditor.util.getAbsoluteLeft(anchor);
var top = jsoneditor.util.getAbsoluteTop(anchor);
var left = util.getAbsoluteLeft(anchor);
var top = util.getAbsoluteTop(anchor);
if (top + anchorHeight + menuHeight < windowHeight) {
// display the menu below the anchor
this.dom.menu.style.left = left + 'px';
@ -228,45 +206,45 @@ jsoneditor.ContextMenu.prototype.show = function (anchor) {
// create and attach event listeners
var me = this;
var list = this.dom.list;
this.eventListeners.mousedown = jsoneditor.util.addEventListener(
this.eventListeners.mousedown = util.addEventListener(
document, 'mousedown', function (event) {
// hide menu on click outside of the menu
event = event || window.event;
var target = event.target || event.srcElement;
if ((target != list) && !me._isChildOf(target, list)) {
me.hide();
jsoneditor.util.stopPropagation(event);
jsoneditor.util.preventDefault(event);
util.stopPropagation(event);
util.preventDefault(event);
}
});
this.eventListeners.mousewheel = jsoneditor.util.addEventListener(
this.eventListeners.mousewheel = util.addEventListener(
document, 'mousewheel', function () {
// hide the menu on mouse scroll
jsoneditor.util.stopPropagation(event);
jsoneditor.util.preventDefault(event);
util.stopPropagation(event);
util.preventDefault(event);
});
this.eventListeners.keydown = jsoneditor.util.addEventListener(
this.eventListeners.keydown = util.addEventListener(
document, 'keydown', function (event) {
me._onKeyDown(event);
});
// move focus to the first button in the context menu
this.selection = jsoneditor.util.getSelection();
this.selection = util.getSelection();
this.anchor = anchor;
setTimeout(function () {
me.dom.focusButton.focus();
}, 0);
if (jsoneditor.ContextMenu.visibleMenu) {
jsoneditor.ContextMenu.visibleMenu.hide();
if (ContextMenu.visibleMenu) {
ContextMenu.visibleMenu.hide();
}
jsoneditor.ContextMenu.visibleMenu = this;
ContextMenu.visibleMenu = this;
};
/**
* Hide the context menu if visible
*/
jsoneditor.ContextMenu.prototype.hide = function () {
ContextMenu.prototype.hide = function () {
// remove the menu from the DOM
if (this.dom.menu.parentNode) {
this.dom.menu.parentNode.removeChild(this.dom.menu);
@ -281,14 +259,14 @@ jsoneditor.ContextMenu.prototype.hide = function () {
if (this.eventListeners.hasOwnProperty(name)) {
var fn = this.eventListeners[name];
if (fn) {
jsoneditor.util.removeEventListener(document, name, fn);
util.removeEventListener(document, name, fn);
}
delete this.eventListeners[name];
}
}
if (jsoneditor.ContextMenu.visibleMenu == this) {
jsoneditor.ContextMenu.visibleMenu = undefined;
if (ContextMenu.visibleMenu == this) {
ContextMenu.visibleMenu = undefined;
}
};
@ -298,7 +276,7 @@ jsoneditor.ContextMenu.prototype.hide = function () {
* @param {Object} domItem
* @private
*/
jsoneditor.ContextMenu.prototype._onExpandItem = function (domItem) {
ContextMenu.prototype._onExpandItem = function (domItem) {
var me = this;
var alreadyVisible = (domItem == this.expandedItem);
@ -311,7 +289,7 @@ jsoneditor.ContextMenu.prototype._onExpandItem = function (domItem) {
setTimeout(function () {
if (me.expandedItem != expandedItem) {
expandedItem.ul.style.display = '';
jsoneditor.util.removeClassName(expandedItem.ul.parentNode, 'selected');
util.removeClassName(expandedItem.ul.parentNode, 'selected');
}
}, 300); // timeout duration must match the css transition duration
this.expandedItem = undefined;
@ -327,7 +305,7 @@ jsoneditor.ContextMenu.prototype._onExpandItem = function (domItem) {
ul.style.padding = '5px 10px';
}
}, 0);
jsoneditor.util.addClassName(ul.parentNode, 'selected');
util.addClassName(ul.parentNode, 'selected');
this.expandedItem = domItem;
}
};
@ -337,7 +315,7 @@ jsoneditor.ContextMenu.prototype._onExpandItem = function (domItem) {
* @param {Event} event
* @private
*/
jsoneditor.ContextMenu.prototype._onKeyDown = function (event) {
ContextMenu.prototype._onKeyDown = function (event) {
event = event || window.event;
var target = event.target || event.srcElement;
var keynum = event.which || event.keyCode;
@ -349,7 +327,7 @@ jsoneditor.ContextMenu.prototype._onKeyDown = function (event) {
// restore previous selection and focus
if (this.selection) {
jsoneditor.util.setSelection(this.selection);
util.setSelection(this.selection);
}
if (this.anchor) {
this.anchor.focus();
@ -437,8 +415,8 @@ jsoneditor.ContextMenu.prototype._onKeyDown = function (event) {
// TODO: arrow left and right
if (handled) {
jsoneditor.util.stopPropagation(event);
jsoneditor.util.preventDefault(event);
util.stopPropagation(event);
util.preventDefault(event);
}
};
@ -448,7 +426,7 @@ jsoneditor.ContextMenu.prototype._onKeyDown = function (event) {
* @param {Element} parent
* @return {boolean} isChild
*/
jsoneditor.ContextMenu.prototype._isChildOf = function (child, parent) {
ContextMenu.prototype._isChildOf = function (child, parent) {
var e = child.parentNode;
while (e) {
if (e == parent) {

40
jsoneditor/js/highlighter.js
View File

@ -1,39 +1,17 @@
/**
* @license
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy
* of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*
* Copyright (c) 2011-2013 Jos de Jong, http://jsoneditoronline.org
*
* @author Jos de Jong, <wjosdejong@gmail.com>
*/
// create namespace
var jsoneditor = jsoneditor || {};
/**
* The highlighter can highlight/unhighlight a node, and
* animate the visibility of a context menu.
* @constructor jsoneditor.Highlighter
* @constructor Highlighter
*/
jsoneditor.Highlighter = function () {
function Highlighter () {
this.locked = false;
};
}
/**
* Hightlight given node and its childs
* @param {jsoneditor.Node} node
* @param {Node} node
*/
jsoneditor.Highlighter.prototype.highlight = function (node) {
Highlighter.prototype.highlight = function (node) {
if (this.locked) {
return;
}
@ -57,7 +35,7 @@ jsoneditor.Highlighter.prototype.highlight = function (node) {
* Unhighlight currently highlighted node.
* Will be done after a delay
*/
jsoneditor.Highlighter.prototype.unhighlight = function () {
Highlighter.prototype.unhighlight = function () {
if (this.locked) {
return;
}
@ -81,7 +59,7 @@ jsoneditor.Highlighter.prototype.unhighlight = function () {
* Cancel an unhighlight action (if before the timeout of the unhighlight action)
* @private
*/
jsoneditor.Highlighter.prototype._cancelUnhighlight = function () {
Highlighter.prototype._cancelUnhighlight = function () {
if (this.unhighlightTimer) {
clearTimeout(this.unhighlightTimer);
this.unhighlightTimer = undefined;
@ -92,13 +70,13 @@ jsoneditor.Highlighter.prototype._cancelUnhighlight = function () {
* Lock highlighting or unhighlighting nodes.
* methods highlight and unhighlight do not work while locked.
*/
jsoneditor.Highlighter.prototype.lock = function () {
Highlighter.prototype.lock = function () {
this.locked = true;
};
/**
* Unlock highlighting or unhighlighting nodes
*/
jsoneditor.Highlighter.prototype.unlock = function () {
Highlighter.prototype.unlock = function () {
this.locked = false;
};

44
jsoneditor/js/history.js
View File

@ -1,31 +1,9 @@
/**
* @license
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy
* of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*
* Copyright (c) 2011-2013 Jos de Jong, http://jsoneditoronline.org
*
* @author Jos de Jong, <wjosdejong@gmail.com>
*/
// create namespace
var jsoneditor = jsoneditor || {};
/**
* @constructor jsoneditor.History
* @constructor History
* Store action history, enables undo and redo
* @param {jsoneditor.JSONEditor} editor
* @param {JSONEditor} editor
*/
jsoneditor.History = function (editor) {
function History (editor) {
this.editor = editor;
this.clear();
@ -125,13 +103,13 @@ jsoneditor.History = function (editor) {
// TODO: restore the original caret position and selection with each undo
// TODO: implement history for actions "expand", "collapse", "scroll", "setDocument"
};
};
}
/**
* The method onChange is executed when the History is changed, and can
* be overloaded.
*/
jsoneditor.History.prototype.onChange = function () {};
History.prototype.onChange = function () {};
/**
* Add a new action to the history
@ -144,7 +122,7 @@ jsoneditor.History.prototype.onChange = function () {};
* value are provided). params contains all information
* needed to undo or redo the action.
*/
jsoneditor.History.prototype.add = function (action, params) {
History.prototype.add = function (action, params) {
this.index++;
this.history[this.index] = {
'action': action,
@ -164,7 +142,7 @@ jsoneditor.History.prototype.add = function (action, params) {
/**
* Clear history
*/
jsoneditor.History.prototype.clear = function () {
History.prototype.clear = function () {
this.history = [];
this.index = -1;
@ -176,7 +154,7 @@ jsoneditor.History.prototype.clear = function () {
* Check if there is an action available for undo
* @return {Boolean} canUndo
*/
jsoneditor.History.prototype.canUndo = function () {
History.prototype.canUndo = function () {
return (this.index >= 0);
};
@ -184,14 +162,14 @@ jsoneditor.History.prototype.canUndo = function () {
* Check if there is an action available for redo
* @return {Boolean} canRedo
*/
jsoneditor.History.prototype.canRedo = function () {
History.prototype.canRedo = function () {
return (this.index < this.history.length - 1);
};
/**
* Undo the last action
*/
jsoneditor.History.prototype.undo = function () {
History.prototype.undo = function () {
if (this.canUndo()) {
var obj = this.history[this.index];
if (obj) {
@ -216,7 +194,7 @@ jsoneditor.History.prototype.undo = function () {
/**
* Redo the last action
*/
jsoneditor.History.prototype.redo = function () {
History.prototype.redo = function () {
if (this.canRedo()) {
this.index++;

762
jsoneditor/js/jsoneditor.js
View File

@ -1,32 +1,10 @@
/**
* @license
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy
* of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*
* Copyright (c) 2011-2013 Jos de Jong, http://jsoneditoronline.org
*
* @author Jos de Jong, <wjosdejong@gmail.com>
*/
// create namespace
var jsoneditor = jsoneditor || {};
/**
* jsoneditor.JSONEditor
* @constructor JSONEditor
* @param {Element} container Container element
* @param {Object} [options] Object with options. available options:
* {String} mode Editor mode. Available values:
* 'editor' (default), 'viewer',
* and 'form'.
* 'tree' (default), 'view',
* 'form', 'text', and 'code'.
* {Boolean} search Enable search box.
* True by default
* {Boolean} history Enable history (undo/redo).
@ -34,689 +12,155 @@ var jsoneditor = jsoneditor || {};
* {function} change Callback method, triggered
* on change of contents
* {String} name Field name for the root node.
* {Number} indentation Number of indentation
* spaces. 4 by default.
* @param {Object | undefined} json JSON object
*/
jsoneditor.JSONEditor = function (container, options, json) {
if (!(this instanceof jsoneditor.JSONEditor)) {
function JSONEditor (container, options, json) {
if (!(this instanceof JSONEditor)) {
throw new Error('JSONEditor constructor called without "new".');
}
// check availability of JSON parser (not available in IE7 and older)
if (typeof(JSON) == 'undefined') {
throw new Error ('Your browser does not support JSON. \n\n' +
'Please install the newest version of your browser.\n' +
'(all modern browsers support JSON).');
if (arguments.length) {
this._create(container, options, json);
}
}
if (!container) {
throw new Error('No container element provided.');
}
/**
* Configuration for all registered modes. Example:
* {
* tree: {
* editor: TreeEditor,
* data: 'json'
* },
* text: {
* editor: TextEditor,
* data: 'text'
* }
* }
*
* @type { Object.<String, {editor: Object, data: String} > }
*/
JSONEditor.modes = {};
/**
* Create the JSONEditor
* @param {Element} container Container element
* @param {Object} [options] See description in constructor
* @param {Object | undefined} json JSON object
* @private
*/
JSONEditor.prototype._create = function (container, options, json) {
this.container = container;
this.dom = {};
this.highlighter = new jsoneditor.Highlighter();
this.selection = undefined; // will hold the last input selection
this.options = options || {};
this.json = json || {};
this._setOptions(options);
if (this.options.history && !this.mode.viewer) {
this.history = new jsoneditor.History(this);
}
this._createFrame();
this._createTable();
this.set(json || {});
var mode = this.options.mode || 'tree';
this.setMode(mode);
};
/**
* Initialize and set default options
* @param {Object} [options] Object with options. available options:
* {String} mode Editor mode. Available values:
* 'editor' (default), 'viewer',
* and 'form'.
* {Boolean} search Enable search box.
* True by default.
* {Boolean} history Enable history (undo/redo).
* True by default.
* {function} change Callback method, triggered
* on change of contents.
* {String} name Field name for the root node.
* Detach the editor from the DOM
* @private
*/
jsoneditor.JSONEditor.prototype._setOptions = function (options) {
this.options = {
search: true,
history: true,
mode: 'editor',
name: undefined // field name of root node
};
// copy all options
if (options) {
for (var prop in options) {
if (options.hasOwnProperty(prop)) {
this.options[prop] = options[prop];
}
}
// check for deprecated options
if (options['enableSearch']) {
// deprecated since version 1.6.0, 2012-11-03
this.options.search = options['enableSearch'];
console.log('WARNING: Option "enableSearch" is deprecated. Use "search" instead.');
}
if (options['enableHistory']) {
// deprecated since version 1.6.0, 2012-11-03
this.options.history = options['enableHistory'];
console.log('WARNING: Option "enableHistory" is deprecated. Use "history" instead.');
}
}
// interpret the mode options
this.mode = {
editor: (this.options.mode != 'viewer' && this.options.mode != 'form'),
viewer: (this.options.mode == 'viewer'),
form: (this.options.mode == 'form')
};
};
// node currently being edited
jsoneditor.JSONEditor.focusNode = undefined;
JSONEditor.prototype._delete = function () {};
/**
* Set JSON object in editor
* @param {Object | undefined} json JSON data
* @param {String} [name] Optional field name for the root node.
* Can also be set using setName(name).
*/
jsoneditor.JSONEditor.prototype.set = function (json, name) {
// adjust field name for root node
if (name) {
this.options.name = name;
}
// verify if json is valid JSON, ignore when a function
if (json instanceof Function || (json === undefined)) {
this.clear();
}
else {
this.content.removeChild(this.table); // Take the table offline
// replace the root node
var params = {
'field': this.options.name,
'value': json
};
var node = new jsoneditor.Node(this, params);
this._setRoot(node);
// expand
var recurse = false;
this.node.expand(recurse);
this.content.appendChild(this.table); // Put the table online again
}
// TODO: maintain history, store last state and previous document
if (this.history) {
this.history.clear();
}
JSONEditor.prototype.set = function (json) {
this.json = json;
};
/**
* Get JSON object from editor
* @return {Object | undefined} json
* Get JSON from the editor
* @returns {Object} json
*/
jsoneditor.JSONEditor.prototype.get = function () {
// remove focus from currently edited node
if (jsoneditor.JSONEditor.focusNode) {
jsoneditor.JSONEditor.focusNode.blur();
}
JSONEditor.prototype.get = function () {
return this.json;
};
if (this.node) {
return this.node.getValue();
}
else {
return undefined;
}
/**
* Set string containing JSON for the editor
* @param {String | undefined} jsonText
*/
JSONEditor.prototype.setText = function (jsonText) {
this.json = util.parse(jsonText);
};
/**
* Get stringified JSON contents from the editor
* @returns {String} jsonText
*/
JSONEditor.prototype.getText = function () {
return JSON.stringify(this.json);
};
/**
* Set a field name for the root node.
* @param {String | undefined} name
*/
jsoneditor.JSONEditor.prototype.setName = function (name) {
this.options.name = name;
if (this.node) {
this.node.updateField(this.options.name);
JSONEditor.prototype.setName = function (name) {
if (!this.options) {
this.options = {};
}
this.options.name = name;
};
/**
* Get the field name for the root node.
* @return {String | undefined} name
*/
jsoneditor.JSONEditor.prototype.getName = function () {
return this.options.name;
JSONEditor.prototype.getName = function () {
return this.options && this.options.name;
};
/**
* Remove the root node from the editor
* Change the mode of the editor
* @param {String} mode
*/
jsoneditor.JSONEditor.prototype.clear = function () {
if (this.node) {
this.node.collapse();
this.tbody.removeChild(this.node.getDom());
delete this.node;
}
};
JSONEditor.prototype.setMode = function (mode) {
var container = this.container,
options = util.extend({}, this.options),
data,
name;
/**
* Set the root node for the json editor
* @param {jsoneditor.Node} node
* @private
*/
jsoneditor.JSONEditor.prototype._setRoot = function (node) {
this.clear();
options.mode = mode;
var config = JSONEditor.modes[mode];
if (config) {
if (config.data == 'text') {
// text
name = this.getName();
data = this.getText();
this.node = node;
this._delete();
util.clear(this);
util.extend(this, config.editor.prototype);
this._create(container, options);
// append to the dom
this.tbody.appendChild(node.getDom());
};
/**
* Search text in all nodes
* The nodes will be expanded when the text is found one of its childs,
* else it will be collapsed. Searches are case insensitive.
* @param {String} text
* @return {Object[]} results Array with nodes containing the search results
* The result objects contains fields:
* - {jsoneditor.Node} node,
* - {String} elem the dom element name where
* the result is found ('field' or
* 'value')
*/
jsoneditor.JSONEditor.prototype.search = function (text) {
var results;
if (this.node) {
this.content.removeChild(this.table); // Take the table offline
results = this.node.search(text);
this.content.appendChild(this.table); // Put the table online again
}
else {
results = [];
}
return results;
};
/**
* Expand all nodes
*/
jsoneditor.JSONEditor.prototype.expandAll = function () {
if (this.node) {
this.content.removeChild(this.table); // Take the table offline
this.node.expand();
this.content.appendChild(this.table); // Put the table online again
}
};
/**
* Collapse all nodes
*/
jsoneditor.JSONEditor.prototype.collapseAll = function () {
if (this.node) {
this.content.removeChild(this.table); // Take the table offline
this.node.collapse();
this.content.appendChild(this.table); // Put the table online again
}
};
/**
* The method onChange is called whenever a field or value is changed, created,
* deleted, duplicated, etc.
* @param {String} action Change action. Available values: "editField",
* "editValue", "changeType", "appendNode",
* "removeNode", "duplicateNode", "moveNode", "expand",
* "collapse".
* @param {Object} params Object containing parameters describing the change.
* The parameters in params depend on the action (for
* example for "editValue" the Node, old value, and new
* value are provided). params contains all information
* needed to undo or redo the action.
* @private
*/
jsoneditor.JSONEditor.prototype._onAction = function (action, params) {
// add an action to the history
if (this.history) {
this.history.add(action, params);
}
// trigger the onChange callback
if (this.options.change) {
try {
this.options.change();
this.setName(name);
this.setText(data);
}
catch (err) {
console.log('Error in change callback: ', err);
else {
// json
name = this.getName();
data = this.get();
this._delete();
util.clear(this);
util.extend(this, config.editor.prototype);
this._create(container, options);
this.setName(name);
this.set(data);
}
}
};
/**
* Start autoscrolling when given mouse position is above the top of the
* editor contents, or below the bottom.
* @param {Number} mouseY Absolute mouse position in pixels
*/
jsoneditor.JSONEditor.prototype.startAutoScroll = function (mouseY) {
var me = this;
var content = this.content;
var top = jsoneditor.util.getAbsoluteTop(content);
var height = content.clientHeight;
var bottom = top + height;
var margin = 24;
var interval = 50; // ms
if ((mouseY < top + margin) && content.scrollTop > 0) {
this.autoScrollStep = ((top + margin) - mouseY) / 3;
}
else if (mouseY > bottom - margin &&
height + content.scrollTop < content.scrollHeight) {
this.autoScrollStep = ((bottom - margin) - mouseY) / 3;
}
else {
this.autoScrollStep = undefined;
}
if (this.autoScrollStep) {
if (!this.autoScrollTimer) {
this.autoScrollTimer = setInterval(function () {
if (me.autoScrollStep) {
content.scrollTop -= me.autoScrollStep;
}
else {
me.stopAutoScroll();
}
}, interval);
if (typeof config.load === 'function') {
config.load.call(this);
}
}
else {
this.stopAutoScroll();
throw new Error('Unknown mode "' + options.mode + '"');
}
};
/**
* Stop auto scrolling. Only applicable when scrolling
*/
jsoneditor.JSONEditor.prototype.stopAutoScroll = function () {
if (this.autoScrollTimer) {
clearTimeout(this.autoScrollTimer);
delete this.autoScrollTimer;
}
if (this.autoScrollStep) {
delete this.autoScrollStep;
}
};
/**
* Set the focus to an element in the JSONEditor, set text selection, and
* set scroll position.
* @param {Object} selection An object containing fields:
* {Element | undefined} dom The dom element
* which has focus
* {Range | TextRange} range A text selection
* {Number} scrollTop Scroll position
*/
jsoneditor.JSONEditor.prototype.setSelection = function (selection) {
if (!selection) {
return;
}
if ('scrollTop' in selection && this.content) {
// TODO: animated scroll
this.content.scrollTop = selection.scrollTop;
}
if (selection.range) {
jsoneditor.util.setSelectionOffset(selection.range);
}
if (selection.dom) {
selection.dom.focus();
}
};
/**
* Get the current focus
* @return {Object} selection An object containing fields:
* {Element | undefined} dom The dom element
* which has focus
* {Range | TextRange} range A text selection
* {Number} scrollTop Scroll position
*/
jsoneditor.JSONEditor.prototype.getSelection = function () {
return {
dom: jsoneditor.JSONEditor.domFocus,
scrollTop: this.content ? this.content.scrollTop : 0,
range: jsoneditor.util.getSelectionOffset()
};
};
/**
* Adjust the scroll position such that given top position is shown at 1/4
* of the window height.
* @param {Number} top
* @param {function(boolean)} [callback] Callback, executed when animation is
* finished. The callback returns true
* when animation is finished, or false
* when not.
*/
jsoneditor.JSONEditor.prototype.scrollTo = function (top, callback) {
var content = this.content;
if (content) {
var editor = this;
// cancel any running animation
if (editor.animateTimeout) {
clearTimeout(editor.animateTimeout);
delete editor.animateTimeout;
}
if (editor.animateCallback) {
editor.animateCallback(false);
delete editor.animateCallback;
}
// calculate final scroll position
var height = content.clientHeight;
var bottom = content.scrollHeight - height;
var finalScrollTop = Math.min(Math.max(top - height / 4, 0), bottom);
// animate towards the new scroll position
var animate = function () {
var scrollTop = content.scrollTop;
var diff = (finalScrollTop - scrollTop);
if (Math.abs(diff) > 3) {
content.scrollTop += diff / 3;
editor.animateCallback = callback;
editor.animateTimeout = setTimeout(animate, 50);
}
else {
// finished
if (callback) {
callback(true);
}
content.scrollTop = finalScrollTop;
delete editor.animateTimeout;
delete editor.animateCallback;
}
};
animate();
}
else {
if (callback) {
callback(false);
}
}
};
/**
* Create main frame
* @private
*/
jsoneditor.JSONEditor.prototype._createFrame = function () {
// create the frame
this.container.innerHTML = '';
this.frame = document.createElement('div');
this.frame.className = 'jsoneditor';
this.container.appendChild(this.frame);
// create one global event listener to handle all events from all nodes
var editor = this;
var onEvent = function (event) {
editor._onEvent(event);
};
this.frame.onclick = function (event) {
onEvent(event);
// prevent default submit action when JSONEditor is located inside a form
jsoneditor.util.preventDefault(event);
};
this.frame.oninput = onEvent;
this.frame.onchange = onEvent;
this.frame.onkeydown = onEvent;
this.frame.onkeyup = onEvent;
this.frame.oncut = onEvent;
this.frame.onpaste = onEvent;
this.frame.onmousedown = onEvent;
this.frame.onmouseup = onEvent;
this.frame.onmouseover = onEvent;
this.frame.onmouseout = onEvent;
// Note: focus and blur events do not propagate, therefore they defined
// using an eventListener with useCapture=true
// see http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html
jsoneditor.util.addEventListener(this.frame, 'focus', onEvent, true);
jsoneditor.util.addEventListener(this.frame, 'blur', onEvent, true);
this.frame.onfocusin = onEvent; // for IE
this.frame.onfocusout = onEvent; // for IE
// create menu
this.menu = document.createElement('div');
this.menu.className = 'menu';
this.frame.appendChild(this.menu);
// create expand all button
var expandAll = document.createElement('button');
expandAll.className = 'expand-all';
expandAll.title = 'Expand all fields';
expandAll.onclick = function () {
editor.expandAll();
};
this.menu.appendChild(expandAll);
// create expand all button
var collapseAll = document.createElement('button');
collapseAll.title = 'Collapse all fields';
collapseAll.className = 'collapse-all';
collapseAll.onclick = function () {
editor.collapseAll();
};
this.menu.appendChild(collapseAll);
// 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.title = 'Undo last action (Ctrl+Z)';
undo.onclick = function () {
editor._onUndo();
};
this.menu.appendChild(undo);
this.dom.undo = undo;
// create redo button
var redo = document.createElement('button');
redo.className = 'redo';
redo.title = 'Redo (Ctrl+Shift+Z)';
redo.onclick = function () {
editor._onRedo();
};
this.menu.appendChild(redo);
this.dom.redo = redo;
// register handler for onchange of history
this.history.onChange = function () {
undo.disabled = !editor.history.canUndo();
redo.disabled = !editor.history.canRedo();
};
this.history.onChange();
}
// create search box
if (this.options.search) {
this.searchBox = new jsoneditor.SearchBox(this, this.menu);
}
};
/**
* Perform an undo action
* @private
*/
jsoneditor.JSONEditor.prototype._onUndo = function () {
if (this.history) {
// undo last action
this.history.undo();
// trigger change callback
if (this.options.change) {
this.options.change();
}
}
};
/**
* Perform a redo action
* @private
*/
jsoneditor.JSONEditor.prototype._onRedo = function () {
if (this.history) {
// redo last action
this.history.redo();
// trigger change callback
if (this.options.change) {
this.options.change();
}
}
};
/**
* Event handler
* @param event
* @private
*/
jsoneditor.JSONEditor.prototype._onEvent = function (event) {
event = event || window.event;
var target = event.target || event.srcElement;
if (event.type == 'keydown') {
this._onKeyDown(event);
}
if (event.type == 'focus') {
jsoneditor.JSONEditor.domFocus = target;
}
var node = jsoneditor.Node.getNodeFromTarget(target);
if (node) {
node.onEvent(event);
}
};
/**
* Event handler for keydown. Handles shortcut keys
* @param {Event} event
* @private
*/
jsoneditor.JSONEditor.prototype._onKeyDown = function (event) {
var keynum = event.which || event.keyCode;
var ctrlKey = event.ctrlKey;
var shiftKey = event.shiftKey;
var handled = false;
if (keynum == 9) { // Tab or Shift+Tab
// FIXME: selecting all text on tab key does not work on IE8 (-> put selectContentEditable() in keyup too?)
//jsoneditor.Node.select(jsoneditor.JSONEditor.domFocus);
setTimeout(function () {
// select all text when moving focus to an editable div
jsoneditor.util.selectContentEditable(jsoneditor.JSONEditor.domFocus);
}, 0);
}
if (this.searchBox) {
if (ctrlKey && keynum == 70) { // Ctrl+F
this.searchBox.dom.search.focus();
this.searchBox.dom.search.select();
handled = true;
}
else if (keynum == 114 || (ctrlKey && keynum == 71)) { // F3 or Ctrl+G
var focus = true;
if (!shiftKey) {
// select next search result (F3 or Ctrl+G)
this.searchBox.next(focus);
}
else {
// select previous search result (Shift+F3 or Ctrl+Shift+G)
this.searchBox.previous(focus);
}
handled = true;
}
}
if (this.history) {
if (ctrlKey && !shiftKey && keynum == 90) { // Ctrl+Z
// undo
this._onUndo();
handled = true;
}
else if (ctrlKey && shiftKey && keynum == 90) { // Ctrl+Shift+Z
// redo
this._onRedo();
handled = true;
}
}
if (handled) {
jsoneditor.util.preventDefault(event);
jsoneditor.util.stopPropagation(event);
}
};
/**
* Create main table
* @private
*/
jsoneditor.JSONEditor.prototype._createTable = function () {
var contentOuter = document.createElement('div');
contentOuter.className = 'outer';
this.contentOuter = contentOuter;
this.content = document.createElement('div');
this.content.className = 'content';
contentOuter.appendChild(this.content);
this.table = document.createElement('table');
this.table.className = 'content';
this.content.appendChild(this.table);
// IE8 does not handle overflow='auto' correctly.
// Therefore, set overflow to 'scroll'
var ieVersion = jsoneditor.util.getInternetExplorerVersion();
if (ieVersion == 8) {
this.content.style.overflow = 'scroll';
}
// create colgroup where the first two columns don't have a fixed
// width, and the edit columns do have a fixed width
var col;
this.colgroupContent = document.createElement('colgroup');
col = document.createElement('col');
col.width = "24px";
this.colgroupContent.appendChild(col);
col = document.createElement('col');
col.width = "24px";
this.colgroupContent.appendChild(col);
col = document.createElement('col');
this.colgroupContent.appendChild(col);
this.table.appendChild(this.colgroupContent);
this.tbody = document.createElement('tbody');
this.table.appendChild(this.tbody);
this.frame.appendChild(contentOuter);
};

23
jsoneditor/js/module.js
View File

@ -27,7 +27,7 @@
* Copyright (c) 2011-2013 Jos de Jong, http://jsoneditoronline.org
*
* @author Jos de Jong, <wjosdejong@gmail.com>
* @date 2013-02-21
* @date 2013-04-29
*/
(function () {
@ -36,10 +36,13 @@
/***code_placeholder***/
// module exports
var jsoneditorExports = {
'JSONEditor': jsoneditor.JSONEditor,
'JSONFormatter': jsoneditor.JSONFormatter,
'util': jsoneditor.util
var jsoneditor = {
'JSONEditor': JSONEditor,
'JSONFormatter': function () {
throw new Error('JSONFormatter is deprecated. ' +
'Use JSONEditor with mode "text" or "code" instead');
},
'util': util
};
/**
@ -65,7 +68,7 @@ var loadCss = function () {
*/
if (typeof(module) != 'undefined' && typeof(exports) != 'undefined') {
loadCss();
module.exports = exports = jsoneditorExports;
module.exports = exports = jsoneditor;
}
/**
@ -74,12 +77,12 @@ if (typeof(module) != 'undefined' && typeof(exports) != 'undefined') {
if (typeof(require) != 'undefined' && typeof(define) != 'undefined') {
define(function () {
loadCss();
return jsoneditorExports;
return jsoneditor;
});
}
else {
// create attach the module to window, load as a regular javascript file
window['jsoneditor'] = jsoneditorExports;
// attach the module to the window, load as a regular javascript file
window['jsoneditor'] = jsoneditor;
}
})();
})();

415
jsoneditor/js/node.js
View File

File diff suppressed because it is too large Load Diff

55
jsoneditor/js/searchbox.js
View File

@ -1,33 +1,11 @@
/**
* @license
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy
* of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*
* Copyright (c) 2011-2013 Jos de Jong, http://jsoneditoronline.org
*
* @author Jos de Jong, <wjosdejong@gmail.com>
*/
// create namespace
var jsoneditor = jsoneditor || {};
/**
* @constructor jsoneditor.SearchBox
* @constructor SearchBox
* Create a search box in given HTML container
* @param {jsoneditor.JSONEditor} editor The JSON Editor to attach to
* @param {JSONEditor} editor The JSON Editor to attach to
* @param {Element} container HTML container element of where to
* create the search box
*/
jsoneditor.SearchBox = function(editor, container) {
function SearchBox (editor, container) {
var searchBox = this;
this.editor = editor;
@ -119,15 +97,14 @@ jsoneditor.SearchBox = function(editor, container) {
td = document.createElement('td');
td.appendChild(searchPrevious);
tr.appendChild(td);
};
}
/**
* Go to the next search result
* @param {boolean} [focus] If true, focus will be set to the next result
* focus is false by default.
*/
jsoneditor.SearchBox.prototype.next = function(focus) {
SearchBox.prototype.next = function(focus) {
if (this.results != undefined) {
var index = (this.resultIndex != undefined) ? this.resultIndex + 1 : 0;
if (index > this.results.length - 1) {
@ -142,7 +119,7 @@ jsoneditor.SearchBox.prototype.next = function(focus) {
* @param {boolean} [focus] If true, focus will be set to the next result
* focus is false by default.
*/
jsoneditor.SearchBox.prototype.previous = function(focus) {
SearchBox.prototype.previous = function(focus) {
if (this.results != undefined) {
var max = this.results.length - 1;
var index = (this.resultIndex != undefined) ? this.resultIndex - 1 : max;
@ -160,7 +137,7 @@ jsoneditor.SearchBox.prototype.previous = function(focus) {
* focus is false by default.
* @private
*/
jsoneditor.SearchBox.prototype._setActiveResult = function(index, focus) {
SearchBox.prototype._setActiveResult = function(index, focus) {
// de-activate current active result
if (this.activeResult) {
var prevNode = this.activeResult.node;
@ -207,7 +184,7 @@ jsoneditor.SearchBox.prototype._setActiveResult = function(index, focus) {
* Cancel any running onDelayedSearch.
* @private
*/
jsoneditor.SearchBox.prototype._clearDelay = function() {
SearchBox.prototype._clearDelay = function() {
if (this.timeout != undefined) {
clearTimeout(this.timeout);
delete this.timeout;
@ -220,7 +197,7 @@ jsoneditor.SearchBox.prototype._clearDelay = function() {
* @param {Event} event
* @private
*/
jsoneditor.SearchBox.prototype._onDelayedSearch = function (event) {
SearchBox.prototype._onDelayedSearch = function (event) {
// execute the search after a short delay (reduces the number of
// search actions while typing in the search text box)
this._clearDelay();
@ -239,7 +216,7 @@ jsoneditor.SearchBox.prototype._onDelayedSearch = function (event) {
* Default is false.
* @private
*/
jsoneditor.SearchBox.prototype._onSearch = function (event, forceSearch) {
SearchBox.prototype._onSearch = function (event, forceSearch) {
this._clearDelay();
var value = this.dom.search.value;
@ -270,14 +247,14 @@ jsoneditor.SearchBox.prototype._onSearch = function (event, forceSearch) {
* @param {Event} event
* @private
*/
jsoneditor.SearchBox.prototype._onKeyDown = function (event) {
SearchBox.prototype._onKeyDown = function (event) {
event = event || window.event;
var keynum = event.which || event.keyCode;
if (keynum == 27) { // ESC
this.dom.search.value = ''; // clear search
this._onSearch(event);
jsoneditor.util.preventDefault(event);
jsoneditor.util.stopPropagation(event);
util.preventDefault(event);
util.stopPropagation(event);
}
else if (keynum == 13) { // Enter
if (event.ctrlKey) {
@ -292,8 +269,8 @@ jsoneditor.SearchBox.prototype._onKeyDown = function (event) {
// move to the next search result
this.next();
}
jsoneditor.util.preventDefault(event);
jsoneditor.util.stopPropagation(event);
util.preventDefault(event);
util.stopPropagation(event);
}
};
@ -302,7 +279,7 @@ jsoneditor.SearchBox.prototype._onKeyDown = function (event) {
* @param {Event} event
* @private
*/
jsoneditor.SearchBox.prototype._onKeyUp = function (event) {
SearchBox.prototype._onKeyUp = function (event) {
event = event || window.event;
var keynum = event.which || event.keyCode;
if (keynum != 27 && keynum != 13) { // !show and !Enter

110
jsoneditor/js/jsonformatter.js → jsoneditor/js/texteditor.js
View File

@ -1,28 +1,6 @@
/**
* @license
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy
* of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*
* Copyright (c) 2011-2013 Jos de Jong, http://jsoneditoronline.org
*
* @author Jos de Jong, <wjosdejong@gmail.com>
*/
// create namespace
var jsoneditor = jsoneditor || {};
/**
* Create a JSONFormatter and attach it to given container
* @constructor jsoneditor.JSONFormatter
* Create a TextEditor and attach it to given container
* @constructor TextEditor
* @param {Element} container
* @param {Object} [options] Object with options. available options:
* {String} mode Available values:
@ -34,11 +12,23 @@ var jsoneditor = jsoneditor || {};
* triggered on change
* @param {JSON | String} [json] initial contents of the formatter
*/
jsoneditor.JSONFormatter = function (container, options, json) {
if (!(this instanceof jsoneditor.JSONFormatter)) {
throw new Error('JSONFormatter constructor called without "new".');
function TextEditor(container, options, json) {
if (!(this instanceof TextEditor)) {
throw new Error('TextEditor constructor called without "new".');
}
this._create(container, options, json);
}
/**
* Create a TextEditor and attach it to given container
* @constructor TextEditor
* @param {Element} container
* @param {Object} [options] See description in constructor
* @param {JSON | String} [json] initial contents of the formatter
* @private
*/
TextEditor.prototype._create = function (container, options, json) {
// check availability of JSON parser (not available in IE7 and older)
if (typeof(JSON) == 'undefined') {
throw new Error('Your browser does not support JSON. \n\n' +
@ -59,7 +49,7 @@ jsoneditor.JSONFormatter = function (container, options, json) {
console.log('WARNING: Cannot load code editor, Ace library not loaded. ' +
'Falling back to plain text editor');
}
if (jsoneditor.util.getInternetExplorerVersion() == 8) {
if (util.getInternetExplorerVersion() == 8) {
this.mode = 'text';
console.log('WARNING: Cannot load code editor, Ace is not supported on IE8. ' +
'Falling back to plain text editor');
@ -78,8 +68,8 @@ jsoneditor.JSONFormatter = function (container, options, json) {
this.frame = document.createElement('div');
this.frame.className = 'jsoneditor';
this.frame.onclick = function (event) {
// prevent default submit action when JSONFormatter is located inside a form
jsoneditor.util.preventDefault(event);
// prevent default submit action when TextEditor is located inside a form
util.preventDefault(event);
};
// create menu
@ -183,21 +173,31 @@ jsoneditor.JSONFormatter = function (container, options, json) {
}
};
/**
* Detach the editor from the DOM
* @private
*/
TextEditor.prototype._delete = function () {
if (this.frame && this.container && this.frame.parentNode == this.container) {
this.container.removeChild(this.frame);
}
};
/**
* This method is executed on error.
* It can be overwritten for each instance of the JSONFormatter
* It can be overwritten for each instance of the TextEditor
* @param {String} err
*/
jsoneditor.JSONFormatter.prototype.onError = function(err) {
TextEditor.prototype.onError = function(err) {
// action should be implemented for the instance
};
/**
* Compact the code in the formatter
*/
jsoneditor.JSONFormatter.prototype.compact = function () {
TextEditor.prototype.compact = function () {
try {
var json = jsoneditor.util.parse(this.getText());
var json = util.parse(this.getText());
this.setText(JSON.stringify(json));
}
catch (err) {
@ -208,9 +208,9 @@ jsoneditor.JSONFormatter.prototype.compact = function () {
/**
* Format the code in the formatter
*/
jsoneditor.JSONFormatter.prototype.format = function () {
TextEditor.prototype.format = function () {
try {
var json = jsoneditor.util.parse(this.getText());
var json = util.parse(this.getText());
this.setText(JSON.stringify(json, null, this.indentation));
}
catch (err) {
@ -221,7 +221,7 @@ jsoneditor.JSONFormatter.prototype.format = function () {
/**
* Set focus to the formatter
*/
jsoneditor.JSONFormatter.prototype.focus = function () {
TextEditor.prototype.focus = function () {
if (this.textarea) {
this.textarea.focus();
}
@ -233,7 +233,7 @@ jsoneditor.JSONFormatter.prototype.focus = function () {
/**
* Resize the formatter
*/
jsoneditor.JSONFormatter.prototype.resize = function () {
TextEditor.prototype.resize = function () {
if (this.editor) {
var force = false;
this.editor.resize(force);
@ -244,7 +244,7 @@ jsoneditor.JSONFormatter.prototype.resize = function () {
* Set json data in the formatter
* @param {Object} json
*/
jsoneditor.JSONFormatter.prototype.set = function(json) {
TextEditor.prototype.set = function(json) {
this.setText(JSON.stringify(json, null, this.indentation));
};
@ -252,15 +252,15 @@ jsoneditor.JSONFormatter.prototype.set = function(json) {
* Get json data from the formatter
* @return {Object} json
*/
jsoneditor.JSONFormatter.prototype.get = function() {
return jsoneditor.util.parse(this.getText());
TextEditor.prototype.get = function() {
return util.parse(this.getText());
};
/**
* Get the text contents of the JSONFormatter
* @return {String} text
* Get the text contents of the TextEditor
* @return {String} jsonText
*/
jsoneditor.JSONFormatter.prototype.getText = function() {
TextEditor.prototype.getText = function() {
if (this.textarea) {
return this.textarea.value;
}
@ -271,14 +271,26 @@ jsoneditor.JSONFormatter.prototype.getText = function() {
};
/**
* Set the text contents of the JSONFormatter
* @param {String} text
* Set the text contents of the TextEditor
* @param {String} jsonText
*/
jsoneditor.JSONFormatter.prototype.setText = function(text) {
TextEditor.prototype.setText = function(jsonText) {
if (this.textarea) {
this.textarea.value = text;
this.textarea.value = jsonText;
}
if (this.editor) {
return this.editor.setValue(text, -1);
this.editor.setValue(jsonText, -1);
}
};
// register modes at the JSONEditor
JSONEditor.modes.text = {
editor: TextEditor,
data: 'text',
load: TextEditor.prototype.format
};
JSONEditor.modes.code = {
editor: TextEditor,
data: 'text',
load: TextEditor.prototype.format
};

761
jsoneditor/js/treeeditor.js Normal file
View File

@ -0,0 +1,761 @@
/**
* @constructor TreeEditor
* @param {Element} container Container element
* @param {Object} [options] Object with options. available options:
* {String} mode Editor mode. Available values:
* 'tree' (default), 'view',
* and 'form'.
* {Boolean} search Enable search box.
* True by default
* {Boolean} history Enable history (undo/redo).
* True by default
* {function} change Callback method, triggered
* on change of contents
* {String} name Field name for the root node.
* @param {Object | undefined} json JSON object
*/
function TreeEditor(container, options, json) {
if (!(this instanceof TreeEditor)) {
throw new Error('TreeEditor constructor called without "new".');
}
this._create(container, options, json);
}
/**
* Create the TreeEditor
* @param {Element} container Container element
* @param {Object} [options] See description in constructor
* @param {Object | undefined} json JSON object
* @private
*/
TreeEditor.prototype._create = function (container, options, json) {
// check availability of JSON parser (not available in IE7 and older)
if (typeof(JSON) == 'undefined') {
throw new Error ('Your browser does not support JSON. \n\n' +
'Please install the newest version of your browser.\n' +
'(all modern browsers support JSON).');
}
if (!container) {
throw new Error('No container element provided.');
}
this.container = container;
this.dom = {};
this.highlighter = new Highlighter();
this.selection = undefined; // will hold the last input selection
this._setOptions(options);
if (this.options.history && !this.mode.view) {
this.history = new History(this);
}
this._createFrame();
this._createTable();
this.set(json || {});
};
/**
* Detach the editor from the DOM
* @private
*/
TreeEditor.prototype._delete = function () {
if (this.frame && this.container && this.frame.parentNode == this.container) {
this.container.removeChild(this.frame);
}
};
/**
* Initialize and set default options
* @param {Object} [options] See description in constructor
* @private
*/
TreeEditor.prototype._setOptions = function (options) {
this.options = {
search: true,
history: true,
mode: 'tree',
name: undefined // field name of root node
};
// copy all options
if (options) {
for (var prop in options) {
if (options.hasOwnProperty(prop)) {
this.options[prop] = options[prop];
}
}
// check for deprecated options
if (options['enableSearch']) {
// deprecated since version 1.6.0, 2012-11-03
this.options.search = options['enableSearch'];
console.log('WARNING: Option "enableSearch" is deprecated. Use "search" instead.');
}
if (options['enableHistory']) {
// deprecated since version 1.6.0, 2012-11-03
this.options.history = options['enableHistory'];
console.log('WARNING: Option "enableHistory" is deprecated. Use "history" instead.');
}
if (options['mode'] == 'editor') {
// deprecated since version 2.2.0, 2013-04-30
this.options.mode = 'tree';
console.log('WARNING: Mode "editor" is deprecated. Use "tree" instead.');
}
if (options['mode'] == 'viewer') {
// deprecated since version 2.2.0, 2013-04-30
this.options.mode = 'view';
console.log('WARNING: Mode "viewer" is deprecated. Use "view" instead.');
}
}
// interpret the mode options
this.mode = {
edit: (this.options.mode != 'view' && this.options.mode != 'form'),
view: (this.options.mode == 'view'),
form: (this.options.mode == 'form')
};
};
// node currently being edited
TreeEditor.focusNode = undefined;
/**
* Set JSON object in editor
* @param {Object | undefined} json JSON data
* @param {String} [name] Optional field name for the root node.
* Can also be set using setName(name).
*/
TreeEditor.prototype.set = function (json, name) {
// adjust field name for root node
if (name) {
this.options.name = name;
}
// verify if json is valid JSON, ignore when a function
if (json instanceof Function || (json === undefined)) {
this.clear();
}
else {
this.content.removeChild(this.table); // Take the table offline
// replace the root node
var params = {
'field': this.options.name,
'value': json
};
var node = new Node(this, params);
this._setRoot(node);
// expand
var recurse = false;
this.node.expand(recurse);
this.content.appendChild(this.table); // Put the table online again
}
// TODO: maintain history, store last state and previous document
if (this.history) {
this.history.clear();
}
};
/**
* Get JSON object from editor
* @return {Object | undefined} json
*/
TreeEditor.prototype.get = function () {
// remove focus from currently edited node
if (TreeEditor.focusNode) {
TreeEditor.focusNode.blur();
}
if (this.node) {
return this.node.getValue();
}
else {
return undefined;
}
};
/**
* Get the text contents of the TreeEditor
* @return {String} jsonText
*/
TreeEditor.prototype.getText = function() {
return JSON.stringify(this.get());
};
/**
* Set the text contents of the TreeEditor
* @param {String} jsonText
*/
TreeEditor.prototype.setText = function(jsonText) {
this.set(util.parse(jsonText));
};
/**
* Set a field name for the root node.
* @param {String | undefined} name
*/
TreeEditor.prototype.setName = function (name) {
this.options.name = name;
if (this.node) {
this.node.updateField(this.options.name);
}
};
/**
* Get the field name for the root node.
* @return {String | undefined} name
*/
TreeEditor.prototype.getName = function () {
return this.options.name;
};
/**
* Remove the root node from the editor
*/
TreeEditor.prototype.clear = function () {
if (this.node) {
this.node.collapse();
this.tbody.removeChild(this.node.getDom());
delete this.node;
}
};
/**
* Set the root node for the json editor
* @param {Node} node
* @private
*/
TreeEditor.prototype._setRoot = function (node) {
this.clear();
this.node = node;
// append to the dom
this.tbody.appendChild(node.getDom());
};
/**
* Search text in all nodes
* The nodes will be expanded when the text is found one of its childs,
* else it will be collapsed. Searches are case insensitive.
* @param {String} text
* @return {Object[]} results Array with nodes containing the search results
* The result objects contains fields:
* - {Node} node,
* - {String} elem the dom element name where
* the result is found ('field' or
* 'value')
*/
TreeEditor.prototype.search = function (text) {
var results;
if (this.node) {
this.content.removeChild(this.table); // Take the table offline
results = this.node.search(text);
this.content.appendChild(this.table); // Put the table online again
}
else {
results = [];
}
return results;
};
/**
* Expand all nodes
*/
TreeEditor.prototype.expandAll = function () {
if (this.node) {
this.content.removeChild(this.table); // Take the table offline
this.node.expand();
this.content.appendChild(this.table); // Put the table online again
}
};
/**
* Collapse all nodes
*/
TreeEditor.prototype.collapseAll = function () {
if (this.node) {
this.content.removeChild(this.table); // Take the table offline
this.node.collapse();
this.content.appendChild(this.table); // Put the table online again
}
};
/**
* The method onChange is called whenever a field or value is changed, created,
* deleted, duplicated, etc.
* @param {String} action Change action. Available values: "editField",
* "editValue", "changeType", "appendNode",
* "removeNode", "duplicateNode", "moveNode", "expand",
* "collapse".
* @param {Object} params Object containing parameters describing the change.
* The parameters in params depend on the action (for
* example for "editValue" the Node, old value, and new
* value are provided). params contains all information
* needed to undo or redo the action.
* @private
*/
TreeEditor.prototype._onAction = function (action, params) {
// add an action to the history
if (this.history) {
this.history.add(action, params);
}
// trigger the onChange callback
if (this.options.change) {
try {
this.options.change();
}
catch (err) {
console.log('Error in change callback: ', err);
}
}
};
/**
* Start autoscrolling when given mouse position is above the top of the
* editor contents, or below the bottom.
* @param {Number} mouseY Absolute mouse position in pixels
*/
TreeEditor.prototype.startAutoScroll = function (mouseY) {
var me = this;
var content = this.content;
var top = util.getAbsoluteTop(content);
var height = content.clientHeight;
var bottom = top + height;
var margin = 24;
var interval = 50; // ms
if ((mouseY < top + margin) && content.scrollTop > 0) {
this.autoScrollStep = ((top + margin) - mouseY) / 3;
}
else if (mouseY > bottom - margin &&
height + content.scrollTop < content.scrollHeight) {
this.autoScrollStep = ((bottom - margin) - mouseY) / 3;
}
else {
this.autoScrollStep = undefined;
}
if (this.autoScrollStep) {
if (!this.autoScrollTimer) {
this.autoScrollTimer = setInterval(function () {
if (me.autoScrollStep) {
content.scrollTop -= me.autoScrollStep;
}
else {
me.stopAutoScroll();
}
}, interval);
}
}
else {
this.stopAutoScroll();
}
};
/**
* Stop auto scrolling. Only applicable when scrolling
*/
TreeEditor.prototype.stopAutoScroll = function () {
if (this.autoScrollTimer) {
clearTimeout(this.autoScrollTimer);
delete this.autoScrollTimer;
}
if (this.autoScrollStep) {
delete this.autoScrollStep;
}
};
/**
* Set the focus to an element in the TreeEditor, set text selection, and
* set scroll position.
* @param {Object} selection An object containing fields:
* {Element | undefined} dom The dom element
* which has focus
* {Range | TextRange} range A text selection
* {Number} scrollTop Scroll position
*/
TreeEditor.prototype.setSelection = function (selection) {
if (!selection) {
return;
}
if ('scrollTop' in selection && this.content) {
// TODO: animated scroll
this.content.scrollTop = selection.scrollTop;
}
if (selection.range) {
util.setSelectionOffset(selection.range);
}
if (selection.dom) {
selection.dom.focus();
}
};
/**
* Get the current focus
* @return {Object} selection An object containing fields:
* {Element | undefined} dom The dom element
* which has focus
* {Range | TextRange} range A text selection
* {Number} scrollTop Scroll position
*/
TreeEditor.prototype.getSelection = function () {
return {
dom: TreeEditor.domFocus,
scrollTop: this.content ? this.content.scrollTop : 0,
range: util.getSelectionOffset()
};
};
/**
* Adjust the scroll position such that given top position is shown at 1/4
* of the window height.
* @param {Number} top
* @param {function(boolean)} [callback] Callback, executed when animation is
* finished. The callback returns true
* when animation is finished, or false
* when not.
*/
TreeEditor.prototype.scrollTo = function (top, callback) {
var content = this.content;
if (content) {
var editor = this;
// cancel any running animation
if (editor.animateTimeout) {
clearTimeout(editor.animateTimeout);
delete editor.animateTimeout;
}
if (editor.animateCallback) {
editor.animateCallback(false);
delete editor.animateCallback;
}
// calculate final scroll position
var height = content.clientHeight;
var bottom = content.scrollHeight - height;
var finalScrollTop = Math.min(Math.max(top - height / 4, 0), bottom);
// animate towards the new scroll position
var animate = function () {
var scrollTop = content.scrollTop;
var diff = (finalScrollTop - scrollTop);
if (Math.abs(diff) > 3) {
content.scrollTop += diff / 3;
editor.animateCallback = callback;
editor.animateTimeout = setTimeout(animate, 50);
}
else {
// finished
if (callback) {
callback(true);
}
content.scrollTop = finalScrollTop;
delete editor.animateTimeout;
delete editor.animateCallback;
}
};
animate();
}
else {
if (callback) {
callback(false);
}
}
};
/**
* Create main frame
* @private
*/
TreeEditor.prototype._createFrame = function () {
// create the frame
this.frame = document.createElement('div');
this.frame.className = 'jsoneditor';
this.container.appendChild(this.frame);
// create one global event listener to handle all events from all nodes
var editor = this;
var onEvent = function (event) {
editor._onEvent(event);
};
this.frame.onclick = function (event) {
onEvent(event);
// prevent default submit action when TreeEditor is located inside a form
util.preventDefault(event);
};
this.frame.oninput = onEvent;
this.frame.onchange = onEvent;
this.frame.onkeydown = onEvent;
this.frame.onkeyup = onEvent;
this.frame.oncut = onEvent;
this.frame.onpaste = onEvent;
this.frame.onmousedown = onEvent;
this.frame.onmouseup = onEvent;
this.frame.onmouseover = onEvent;
this.frame.onmouseout = onEvent;
// Note: focus and blur events do not propagate, therefore they defined
// using an eventListener with useCapture=true
// see http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html
util.addEventListener(this.frame, 'focus', onEvent, true);
util.addEventListener(this.frame, 'blur', onEvent, true);
this.frame.onfocusin = onEvent; // for IE
this.frame.onfocusout = onEvent; // for IE
// create menu
this.menu = document.createElement('div');
this.menu.className = 'menu';
this.frame.appendChild(this.menu);
// create expand all button
var expandAll = document.createElement('button');
expandAll.className = 'expand-all';
expandAll.title = 'Expand all fields';
expandAll.onclick = function () {
editor.expandAll();
};
this.menu.appendChild(expandAll);
// create expand all button
var collapseAll = document.createElement('button');
collapseAll.title = 'Collapse all fields';
collapseAll.className = 'collapse-all';
collapseAll.onclick = function () {
editor.collapseAll();
};
this.menu.appendChild(collapseAll);
// 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.title = 'Undo last action (Ctrl+Z)';
undo.onclick = function () {
editor._onUndo();
};
this.menu.appendChild(undo);
this.dom.undo = undo;
// create redo button
var redo = document.createElement('button');
redo.className = 'redo';
redo.title = 'Redo (Ctrl+Shift+Z)';
redo.onclick = function () {
editor._onRedo();
};
this.menu.appendChild(redo);
this.dom.redo = redo;
// register handler for onchange of history
this.history.onChange = function () {
undo.disabled = !editor.history.canUndo();
redo.disabled = !editor.history.canRedo();
};
this.history.onChange();
}
// create search box
if (this.options.search) {
this.searchBox = new SearchBox(this, this.menu);
}
};
/**
* Perform an undo action
* @private
*/
TreeEditor.prototype._onUndo = function () {
if (this.history) {
// undo last action
this.history.undo();
// trigger change callback
if (this.options.change) {
this.options.change();
}
}
};
/**
* Perform a redo action
* @private
*/
TreeEditor.prototype._onRedo = function () {
if (this.history) {
// redo last action
this.history.redo();
// trigger change callback
if (this.options.change) {
this.options.change();
}
}
};
/**
* Event handler
* @param event
* @private
*/
TreeEditor.prototype._onEvent = function (event) {
event = event || window.event;
var target = event.target || event.srcElement;
if (event.type == 'keydown') {
this._onKeyDown(event);
}
if (event.type == 'focus') {
TreeEditor.domFocus = target;
}
var node = Node.getNodeFromTarget(target);
if (node) {
node.onEvent(event);
}
};
/**
* Event handler for keydown. Handles shortcut keys
* @param {Event} event
* @private
*/
TreeEditor.prototype._onKeyDown = function (event) {
var keynum = event.which || event.keyCode;
var ctrlKey = event.ctrlKey;
var shiftKey = event.shiftKey;
var handled = false;
if (keynum == 9) { // Tab or Shift+Tab
// FIXME: selecting all text on tab key does not work on IE8 (-> put selectContentEditable() in keyup too?)
//Node.select(TreeEditor.domFocus);
setTimeout(function () {
// select all text when moving focus to an editable div
util.selectContentEditable(TreeEditor.domFocus);
}, 0);
}
if (this.searchBox) {
if (ctrlKey && keynum == 70) { // Ctrl+F
this.searchBox.dom.search.focus();
this.searchBox.dom.search.select();
handled = true;
}
else if (keynum == 114 || (ctrlKey && keynum == 71)) { // F3 or Ctrl+G
var focus = true;
if (!shiftKey) {
// select next search result (F3 or Ctrl+G)
this.searchBox.next(focus);
}
else {
// select previous search result (Shift+F3 or Ctrl+Shift+G)
this.searchBox.previous(focus);
}
handled = true;
}
}
if (this.history) {
if (ctrlKey && !shiftKey && keynum == 90) { // Ctrl+Z
// undo
this._onUndo();
handled = true;
}
else if (ctrlKey && shiftKey && keynum == 90) { // Ctrl+Shift+Z
// redo
this._onRedo();
handled = true;
}
}
if (handled) {
util.preventDefault(event);
util.stopPropagation(event);
}
};
/**
* Create main table
* @private
*/
TreeEditor.prototype._createTable = function () {
var contentOuter = document.createElement('div');
contentOuter.className = 'outer';
this.contentOuter = contentOuter;
this.content = document.createElement('div');
this.content.className = 'content';
contentOuter.appendChild(this.content);
this.table = document.createElement('table');
this.table.className = 'content';
this.content.appendChild(this.table);
// IE8 does not handle overflow='auto' correctly.
// Therefore, set overflow to 'scroll'
var ieVersion = util.getInternetExplorerVersion();
if (ieVersion == 8) {
this.content.style.overflow = 'scroll';
}
// create colgroup where the first two columns don't have a fixed
// width, and the edit columns do have a fixed width
var col;
this.colgroupContent = document.createElement('colgroup');
if (this.mode.edit) {
col = document.createElement('col');
col.width = "24px";
this.colgroupContent.appendChild(col);
}
col = document.createElement('col');
col.width = "24px";
this.colgroupContent.appendChild(col);
col = document.createElement('col');
this.colgroupContent.appendChild(col);
this.table.appendChild(this.colgroupContent);
this.tbody = document.createElement('tbody');
this.table.appendChild(this.tbody);
this.frame.appendChild(contentOuter);
};
// register modes at the JSONEditor
JSONEditor.modes.tree = {
editor: TreeEditor,
data: 'json'
};
JSONEditor.modes.view = {
editor: TreeEditor,
data: 'json'
};
JSONEditor.modes.form = {
editor: TreeEditor,
data: 'json'
};
// Deprecated modes (deprecated since version 2.2.0)
JSONEditor.modes.editor = {
editor: TreeEditor,
data: 'json'
};
JSONEditor.modes.viewer = {
editor: TreeEditor,
data: 'json'
};

109
jsoneditor/js/util.js
View File

@ -1,25 +1,5 @@
/**
* @license
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy
* of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*
* Copyright (c) 2011-2013 Jos de Jong, http://jsoneditoronline.org
*
* @author Jos de Jong, <wjosdejong@gmail.com>
*/
// create namespace
var jsoneditor = jsoneditor || {};
jsoneditor.util = {};
util = {};
// Internet Explorer 8 and older does not support Array.indexOf,
// so we define it here in that case
@ -58,13 +38,13 @@ if (typeof console === 'undefined') {
* On exception, the jsonString is validated and a detailed error is thrown.
* @param {String} jsonString
*/
jsoneditor.util.parse = function (jsonString) {
util.parse = function (jsonString) {
try {
return JSON.parse(jsonString);
}
catch (err) {
// get a detailed error message using validate
var message = jsoneditor.util.validate(jsonString) || err;
var message = util.validate(jsonString) || err;
throw new Error(message);
}
};
@ -79,7 +59,7 @@ jsoneditor.util.parse = function (jsonString) {
* the data is invalid. This message is HTML
* formatted.
*/
jsoneditor.util.validate = function (jsonString) {
util.validate = function (jsonString) {
var message = undefined;
try {
@ -103,13 +83,42 @@ jsoneditor.util.validate = function (jsonString) {
return message;
};
/**
* Extend object a with the properties of object b
* @param {Object} a
* @param {Object} b
* @return {Object} a
*/
util.extend = function (a, b) {
for (var prop in b) {
if (b.hasOwnProperty(prop)) {
a[prop] = b[prop];
}
}
return a;
};
/**
* Remove all properties from object a
* @param {Object} a
* @return {Object} a
*/
util.clear = function (a) {
for (var prop in a) {
if (a.hasOwnProperty(prop)) {
delete a[prop];
}
}
return a;
};
/**
* Retrieve the absolute left value of a DOM element
* @param {Element} elem A dom element, for example a div
* @return {Number} left The absolute left position of this element
* in the browser page.
*/
jsoneditor.util.getAbsoluteLeft = function (elem) {
util.getAbsoluteLeft = function (elem) {
var left = elem.offsetLeft;
var body = document.body;
var e = elem.offsetParent;
@ -127,7 +136,7 @@ jsoneditor.util.getAbsoluteLeft = function (elem) {
* @return {Number} top The absolute top position of this element
* in the browser page.
*/
jsoneditor.util.getAbsoluteTop = function (elem) {
util.getAbsoluteTop = function (elem) {
var top = elem.offsetTop;
var body = document.body;
var e = elem.offsetParent;
@ -144,7 +153,7 @@ jsoneditor.util.getAbsoluteTop = function (elem) {
* @param {Event} event
* @return {Number} mouseY
*/
jsoneditor.util.getMouseY = function (event) {
util.getMouseY = function (event) {
var mouseY;
if ('pageY' in event) {
mouseY = event.pageY;
@ -162,7 +171,7 @@ jsoneditor.util.getMouseY = function (event) {
* @param {Event} event
* @return {Number} mouseX
*/
jsoneditor.util.getMouseX = function (event) {
util.getMouseX = function (event) {
var mouseX;
if ('pageX' in event) {
mouseX = event.pageX;
@ -179,7 +188,7 @@ jsoneditor.util.getMouseX = function (event) {
* Get the window height
* @return {Number} windowHeight
*/
jsoneditor.util.getWindowHeight = function () {
util.getWindowHeight = function () {
if ('innerHeight' in window) {
return window.innerHeight;
}
@ -195,7 +204,7 @@ jsoneditor.util.getWindowHeight = function () {
* @param {Element} elem
* @param {String} className
*/
jsoneditor.util.addClassName = function(elem, className) {
util.addClassName = function(elem, className) {
var classes = elem.className.split(' ');
if (classes.indexOf(className) == -1) {
classes.push(className); // add the class to the array
@ -208,7 +217,7 @@ jsoneditor.util.addClassName = function(elem, className) {
* @param {Element} elem
* @param {String} className
*/
jsoneditor.util.removeClassName = function(elem, className) {
util.removeClassName = function(elem, className) {
var classes = elem.className.split(' ');
var index = classes.indexOf(className);
if (index != -1) {
@ -222,7 +231,7 @@ jsoneditor.util.removeClassName = function(elem, className) {
* the formatting from the div itself is not stripped, only from its childs.
* @param {Element} divElement
*/
jsoneditor.util.stripFormatting = function (divElement) {
util.stripFormatting = function (divElement) {
var childs = divElement.childNodes;
for (var i = 0, iMax = childs.length; i < iMax; i++) {
var child = childs[i];
@ -245,7 +254,7 @@ jsoneditor.util.stripFormatting = function (divElement) {
}
// recursively strip childs
jsoneditor.util.stripFormatting(child);
util.stripFormatting(child);
}
};
@ -256,7 +265,7 @@ jsoneditor.util.stripFormatting = function (divElement) {
* http://stackoverflow.com/questions/1125292/how-to-move-cursor-to-end-of-contenteditable-entity
* @param {Element} contentEditableElement A content editable div
*/
jsoneditor.util.setEndOfContentEditable = function (contentEditableElement) {
util.setEndOfContentEditable = function (contentEditableElement) {
var range, selection;
if(document.createRange) {//Firefox, Chrome, Opera, Safari, IE 9+
range = document.createRange();//Create a range (a range is a like the selection but invisible)
@ -279,7 +288,7 @@ jsoneditor.util.setEndOfContentEditable = function (contentEditableElement) {
* http://stackoverflow.com/a/3806004/1262753
* @param {Element} contentEditableElement A content editable div
*/
jsoneditor.util.selectContentEditable = function (contentEditableElement) {
util.selectContentEditable = function (contentEditableElement) {
if (!contentEditableElement || contentEditableElement.nodeName != 'DIV') {
return;
}
@ -303,7 +312,7 @@ jsoneditor.util.selectContentEditable = function (contentEditableElement) {
* http://stackoverflow.com/questions/4687808/contenteditable-selected-text-save-and-restore
* @return {Range | TextRange | null} range
*/
jsoneditor.util.getSelection = function () {
util.getSelection = function () {
if (window.getSelection) {
var sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
@ -320,7 +329,7 @@ jsoneditor.util.getSelection = function () {
* http://stackoverflow.com/questions/4687808/contenteditable-selected-text-save-and-restore
* @param {Range | TextRange | null} range
*/
jsoneditor.util.setSelection = function (range) {
util.setSelection = function (range) {
if (range) {
if (window.getSelection) {
var sel = window.getSelection();
@ -341,8 +350,8 @@ jsoneditor.util.setSelection = function (range) {
* selected text element
* Returns null if no text selection is found
*/
jsoneditor.util.getSelectionOffset = function () {
var range = jsoneditor.util.getSelection();
util.getSelectionOffset = function () {
var range = util.getSelection();
if (range && 'startOffset' in range && 'endOffset' in range &&
range.startContainer && (range.startContainer == range.endContainer)) {
@ -366,7 +375,7 @@ jsoneditor.util.getSelectionOffset = function () {
* {Number} startOffset
* {Number} endOffset
*/
jsoneditor.util.setSelectionOffset = function (params) {
util.setSelectionOffset = function (params) {
if (document.createRange && window.getSelection) {
var selection = window.getSelection();
if(selection) {
@ -376,7 +385,7 @@ jsoneditor.util.setSelectionOffset = function (params) {
range.setStart(params.container.firstChild, params.startOffset);
range.setEnd(params.container.firstChild, params.endOffset);
jsoneditor.util.setSelection(range);
util.setSelection(range);
}
}
else {
@ -390,7 +399,7 @@ jsoneditor.util.setSelectionOffset = function (params) {
* @param {Object} [buffer]
* @return {String} innerText
*/
jsoneditor.util.getInnerText = function (element, buffer) {
util.getInnerText = function (element, buffer) {
var first = (buffer == undefined);
if (first) {
buffer = {
@ -426,7 +435,7 @@ jsoneditor.util.getInnerText = function (element, buffer) {
innerText += '\n';
buffer.flush();
}
innerText += jsoneditor.util.getInnerText(child, buffer);
innerText += util.getInnerText(child, buffer);
buffer.set('\n');
}
else if (child.nodeName == 'BR') {
@ -434,14 +443,14 @@ jsoneditor.util.getInnerText = function (element, buffer) {
buffer.set('\n');
}
else {
innerText += jsoneditor.util.getInnerText(child, buffer);
innerText += util.getInnerText(child, buffer);
}
}
return innerText;
}
else {
if (element.nodeName == 'P' && jsoneditor.util.getInternetExplorerVersion() != -1) {
if (element.nodeName == 'P' && util.getInternetExplorerVersion() != -1) {
// On Internet Explorer, a <p> with hasChildNodes()==false is
// rendered with a new line. Note that a <p> with
// hasChildNodes()==true is rendered without a new line
@ -461,7 +470,7 @@ jsoneditor.util.getInnerText = function (element, buffer) {
* Source: http://msdn.microsoft.com/en-us/library/ms537509(v=vs.85).aspx
* @return {Number} Internet Explorer version, or -1 in case of an other browser
*/
jsoneditor.util.getInternetExplorerVersion = function() {
util.getInternetExplorerVersion = function() {
if (_ieVersion == -1) {
var rv = -1; // Return value assumes failure.
if (navigator.appName == 'Microsoft Internet Explorer')
@ -495,7 +504,7 @@ var _ieVersion = -1;
* @param {boolean} [useCapture] false by default
* @return {function} the created event listener
*/
jsoneditor.util.addEventListener = function (element, action, listener, useCapture) {
util.addEventListener = function (element, action, listener, useCapture) {
if (element.addEventListener) {
if (useCapture === undefined)
useCapture = false;
@ -523,7 +532,7 @@ jsoneditor.util.addEventListener = function (element, action, listener, useCaptu
* @param {function} listener The listener function
* @param {boolean} [useCapture] false by default
*/
jsoneditor.util.removeEventListener = function(element, action, listener, useCapture) {
util.removeEventListener = function(element, action, listener, useCapture) {
if (element.removeEventListener) {
// non-IE browsers
if (useCapture === undefined)
@ -545,7 +554,7 @@ jsoneditor.util.removeEventListener = function(element, action, listener, useCap
* Stop event propagation
* @param {Event} event
*/
jsoneditor.util.stopPropagation = function (event) {
util.stopPropagation = function (event) {
if (!event) {
event = window.event;
}
@ -563,7 +572,7 @@ jsoneditor.util.stopPropagation = function (event) {
* Cancels the event if it is cancelable, without stopping further propagation of the event.
* @param {Event} event
*/
jsoneditor.util.preventDefault = function (event) {
util.preventDefault = function (event) {
if (!event) {
event = window.event;
}