fixed the focus/blur events for fields and values.

This commit is contained in:
Jos de Jong 2012-07-01 14:40:12 +02:00
parent c56ddc21c8
commit fe7be148c6
6 changed files with 27 additions and 13 deletions

View File

@ -1,6 +1,13 @@
JSON EDITOR ONLINE CHANGELOG
http://jsoneditoronline.org
2012-07-01, version 1.1.1
- fixed global event listener for the focus/blur events, causing changes in
fields and values not always being registered.
- fixed a css issue with Firefox (box-sizing of the editor).
2012-04-24, version 1.1
- fixed a bug. Dragging an object down which has been expanded and collapsed

View File

@ -29,7 +29,7 @@ the License.
Copyright (C) 2011-2012 Jos de Jong, http://jsoneditoronline.org
@author Jos de Jong, <wjosdejong@gmail.com>
@date 2012-04-24
@date 2012-07-01
-->
<html>
@ -128,7 +128,7 @@ Copyright (C) 2011-2012 Jos de Jong, http://jsoneditoronline.org
<div id="footer">
<div id="footer-inner">
<a href="http://jsoneditoronline.org" class="footer">JSON Editor Online 1.1</a>
<a href="http://jsoneditoronline.org" class="footer">JSON Editor Online 1.1.1</a>
&bull;
<a href="changelog.txt" target="_blank" class="footer">Changelog</a>
&bull;

View File

@ -29,7 +29,7 @@ the License.
Copyright (C) 2011-2012 Jos de Jong, http://jsoneditoronline.org
@author Jos de Jong, <wjosdejong@gmail.com>
@date 2012-04-24
@date 2012-07-01
-->
<html>
@ -44,8 +44,10 @@ Copyright (C) 2011-2012 Jos de Jong, http://jsoneditoronline.org
<link href="interface.css" rel="stylesheet" type="text/css">
<link href="jsoneditor.css" rel="stylesheet" type="text/css">
<!-- TODO: droid font
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
-->
<script type="text/javascript" src="jsoneditor.js"></script>
<script type="text/javascript" src="interface.js"></script>
@ -124,14 +126,14 @@ Copyright (C) 2011-2012 Jos de Jong, http://jsoneditoronline.org
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
-->
</div>
</div>
</div>
<div id="footer">
<div id="footer-inner">
<a href="http://jsoneditoronline.org" class="footer">JSON Editor Online 1.1</a>
<a href="http://jsoneditoronline.org" class="footer">JSON Editor Online 1.1.1</a>
&bull;
<a href="changelog.txt" target="_blank" class="footer">Changelog</a>
&bull;

View File

@ -146,9 +146,9 @@ main.load = function() {
var domSplitter = document.getElementById('splitter');
domSplitter.innerHTML =
'<br><br><br>' +
'<button id="toForm" onclick="main.formatterToEditor();" title="JSON to Editor" class="convert"> <img src="img/treeRightTriangleBlack.png" style="width:8px; height:8px; margin-left:2px;"></button><br>' +
'<button id="toForm" onclick="this.focus(); main.formatterToEditor();" title="JSON to Editor" class="convert"> <img src="img/treeRightTriangleBlack.png" style="width:8px; height:8px; margin-left:2px;"></button><br>' +
'<br>' +
'<button id="toJSON" onclick="main.editorToFormatter();" title="Editor to JSON" class="convert"><img src="img/treeLeftTriangleBlack.png" style="width:8px; height:8px; margin-right:2px;"></button>';
'<button id="toJSON" onclick="this.focus(); main.editorToFormatter();" title="Editor to JSON" class="convert"><img src="img/treeLeftTriangleBlack.png" style="width:8px; height:8px; margin-right:2px;"></button>';
JSONEditor.Events.addEventListener(domSplitter, "mousedown", main.onMouseDown);
// resize

6
jsoneditor-min.js vendored
View File

@ -74,9 +74,9 @@ JSONEditor.Node.prototype._stripHTML=function(a){return a.replace(/<(?:.|\n)*?>/
JSONEditor.AppendNode.prototype.getDom=function(){function a(a){var b=document.createElement("td");b.className=a||"";return b}if(this.dom.tr)return this.dom.tr;var b=document.createElement("tr");b.appendChild(a("jsoneditor-td"));b.node=this;var c=document.createElement("td");b.appendChild(c);c.className="jsoneditor-td";var d=document.createElement("button");d.className="jsoneditor-append";d.title="Append a field";this.dom.append=d;c.appendChild(d);b.appendChild(a("jsoneditor-td jsoneditor-td-edit"));
b.appendChild(a("jsoneditor-td jsoneditor-td-edit"));b.appendChild(a("jsoneditor-td jsoneditor-td-edit"));this.dom.tr=b;this.dom.td=c;this.updateDom();return b};JSONEditor.AppendNode.prototype.updateDom=function(){var a=this.dom.td;if(a)a.style.paddingLeft=this.getLevel()*24+26+"px"};
JSONEditor.AppendNode.prototype.onEvent=function(a){var b=a.type;if((a.target||a.srcElement)==this.dom.append)switch(b){case "click":a=new JSONEditor.Node({field:"field",value:"value"});this.parent.appendChild(a);this.parent.setHighlight(!1);a.focus();break;case "mouseover":this.parent.setHighlight(!0);break;case "mouseout":this.parent.setHighlight(!1)}};
JSONEditor.prototype._createFrame=function(){this.container.innerHTML="";this.frame=document.createElement("div");this.frame.className="jsoneditor-frame";this.container.appendChild(this.frame);var a=this,b=function(a){var a=a||window.event,b=JSONEditor.getNodeFromTarget(a.target||a.srcElement);if(b)b.onEvent(a)};this.frame.onclick=function(a){b(a);JSONEditor.Events.preventDefault(a)};this.frame.onchange=b;this.frame.onfocus=b;this.frame.onblur=b;this.frame.onkeyup=b;this.frame.oncut=b;this.frame.onpaste=
b;this.frame.onmousedown=b;this.frame.onmouseup=b;this.frame.onmouseover=b;this.frame.onmouseout=b;this.head=document.createElement("table");this.head.className="jsoneditor-menu";var c=document.createElement("tbody");this.head.appendChild(c);var d=document.createElement("tr");c.appendChild(d);c=document.createElement("td");c.className="jsoneditor-menu";d.appendChild(c);d=document.createElement("button");d.innerHTML="Expand All";d.onclick=function(){a.expandAll()};c.appendChild(d);d=document.createElement("button");
d.innerHTML="Collapse All";d.onclick=function(){a.collapseAll()};c.appendChild(d);this.frame.appendChild(this.head)};
JSONEditor.prototype._createFrame=function(){this.container.innerHTML="";this.frame=document.createElement("div");this.frame.className="jsoneditor-frame";this.container.appendChild(this.frame);var a=this,b=function(a){var a=a||window.event,b=JSONEditor.getNodeFromTarget(a.target||a.srcElement);if(b)b.onEvent(a)};this.frame.onclick=function(a){b(a);JSONEditor.Events.preventDefault(a)};this.frame.onchange=b;this.frame.onkeyup=b;this.frame.oncut=b;this.frame.onpaste=b;this.frame.onmousedown=b;this.frame.onmouseup=
b;this.frame.onmouseover=b;this.frame.onmouseout=b;JSONEditor.Events.addEventListener(this.frame,"focus",b,!0);JSONEditor.Events.addEventListener(this.frame,"blur",b,!0);this.frame.onfocusin=b;this.frame.onfocusout=b;this.head=document.createElement("table");this.head.className="jsoneditor-menu";var c=document.createElement("tbody");this.head.appendChild(c);var d=document.createElement("tr");c.appendChild(d);c=document.createElement("td");c.className="jsoneditor-menu";d.appendChild(c);d=document.createElement("button");
d.innerHTML="Expand All";d.onclick=function(){a.expandAll()};c.appendChild(d);d=document.createElement("button");d.innerHTML="Collapse All";d.onclick=function(){a.collapseAll()};c.appendChild(d);this.frame.appendChild(this.head)};
JSONEditor.prototype._createTable=function(){var a=document.createElement("div");a.className="jsoneditor-content-outer";this.content=document.createElement("div");this.content.className="jsoneditor-content";a.appendChild(this.content);this.table=document.createElement("table");this.table.className="jsoneditor-table";this.content.appendChild(this.table);if(JSONEditor.getInternetExplorerVersion()==8)this.content.style.overflow="scroll";var b;this.colgroupContent=document.createElement("colgroup");b=
document.createElement("col");b.width="24px";this.colgroupContent.appendChild(b);b=document.createElement("col");this.colgroupContent.appendChild(b);b=document.createElement("col");b.width="24px";this.colgroupContent.appendChild(b);b=document.createElement("col");b.width="24px";this.colgroupContent.appendChild(b);b=document.createElement("col");b.width="24px";this.colgroupContent.appendChild(b);this.table.appendChild(this.colgroupContent);this.tbody=document.createElement("tbody");this.table.appendChild(this.tbody);
this.frame.appendChild(a)};JSONEditor.getNodeFromTarget=function(a){for(;a;){if(a.node)return a.node;a=a.parentNode}};

View File

@ -1989,8 +1989,6 @@ JSONEditor.prototype._createFrame = function () {
JSONEditor.Events.preventDefault(event);
};
this.frame.onchange = onEvent;
this.frame.onfocus = onEvent;
this.frame.onblur = onEvent;
this.frame.onkeyup = onEvent;
this.frame.oncut = onEvent;
this.frame.onpaste = onEvent;
@ -1998,6 +1996,13 @@ JSONEditor.prototype._createFrame = function () {
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.Events.addEventListener(this.frame, 'focus', onEvent, true);
JSONEditor.Events.addEventListener(this.frame, 'blur', onEvent, true);
this.frame.onfocusin = onEvent; // for IE
this.frame.onfocusout = onEvent; // for IE
// create menu table
this.head = document.createElement('table');