diff --git a/app/web/app.css b/app/web/app.css index f365a74..bd779a4 100644 --- a/app/web/app.css +++ b/app/web/app.css @@ -144,28 +144,65 @@ span.header-light { #contents { width: 100%; height: 100%; - overflow: hidden; } #jsonformatter, #jsoneditor { - float: left; height: 100%; width: 400px; - padding: 15px; - -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } +#jsonformatter { + float: left; + padding: 15px 0 15px 15px; +} + +#jsoneditor { + float: left; + padding: 15px 15px 15px 0; +} + #splitter { + text-align: center; float: left; height: 100%; + padding: 15px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#splitter #buttons { + margin: 0 0 15px 0; +} + +#splitter #toEditor { + margin: 40px 0 0 0 ; +} + +#splitter #toJSON { + margin: 20px 0 0 0 ; +} + +#splitter #drag { + font-size: 32px; + color: lightgray; + border-radius: 3px; + min-width: 24px; cursor: col-resize; } +#splitter #drag:hover, +#splitter #drag.active { + color: gray; + background-color: #f5f5f5; + +} + #footer { width: 100%; height: 23px; @@ -195,7 +232,8 @@ a.footer:hover { } #ad { - float: left; + float: right; + right: 15px; padding: 15px 0 15px 0; position: relative; } diff --git a/app/web/app.js b/app/web/app.js index 0f2be4c..e57ed60 100644 --- a/app/web/app.js +++ b/app/web/app.js @@ -38,7 +38,7 @@ var app = {}; /** * Get the JSON from the formatter and load it in the editor */ -app.formatterToEditor = function() { +app.JSONToEditor = function() { try { editor.set(formatter.get()); } @@ -50,7 +50,7 @@ app.formatterToEditor = function() { /** * Get the JSON from the editor and load it into the formatter */ -app.editorToFormatter = function () { +app.editorToJSON = function () { try { formatter.set(editor.get()); } @@ -121,42 +121,26 @@ app.load = function() { // TODO: automatically synchronize data of formatter and editor? (editor should keep its state though) // splitter - var domSplitter = document.getElementById('splitter'); app.splitter = new Splitter({ - container: domSplitter, + container: document.getElementById('drag'), change: function () { app.resize(); } }); - // button Formatter-to-Editor - domSplitter.appendChild(document.createElement('br')); - domSplitter.appendChild(document.createElement('br')); - domSplitter.appendChild(document.createElement('br')); - var toForm = document.createElement('button'); - toForm.id = 'toForm'; - toForm.title = 'JSON to Editor'; - toForm.className = 'convert'; - toForm.innerHTML = '
'; - toForm.onclick = function () { + // button JSON-to-Editor + var toEditor = document.getElementById('toEditor'); + toEditor.onclick = function () { this.focus(); - app.formatterToEditor(); + app.JSONToEditor(); }; - domSplitter.appendChild(toForm); - // button Editor-to-Formatter - domSplitter.appendChild(document.createElement('br')); - domSplitter.appendChild(document.createElement('br')); - var toJSON = document.createElement('button'); - toJSON.id = 'toJSON'; - toJSON.title = 'Editor to JSON'; - toJSON.className = 'convert'; - toJSON.innerHTML = '
'; + // button Editor-to-Editor + var toJSON = document.getElementById('toJSON'); toJSON.onclick = function () { this.focus(); - app.editorToFormatter(); + app.editorToJSON(); }; - domSplitter.appendChild(toJSON); // web page resize handler jsoneditor.util.addEventListener(window, 'resize', app.resize); @@ -263,11 +247,11 @@ app.openUrl = function (url) { app.saveFile = function () { // first synchronize the editors and formatters contents if (app.lastChanged == editor) { - app.editorToFormatter(); + app.editorToJSON(); } /* TODO: also sync from formatter to editor? will clear the history ... if (app.lastChanged == formatter) { - app.formatterToEditor(); + app.JSONToEditor(); } */ app.lastChanged = undefined; @@ -296,37 +280,75 @@ app.resize = function() { var domEditor = document.getElementById('jsoneditor'); var domFormatter = document.getElementById('jsonformatter'); var domSplitter = document.getElementById('splitter'); + var domSplitterButtons = document.getElementById('buttons'); + var domSplitterDrag = document.getElementById('drag'); var domAd = document.getElementById('ad'); - var width = window.innerWidth || document.body.offsetWidth || document.documentElement.offsetWidth; - var height = window.innerHeight || document.body.offsetHeight || document.documentElement.offsetHeight; + var margin = 15; + var width = (window.innerWidth || document.body.offsetWidth || + document.documentElement.offsetWidth); var adWidth = domAd ? domAd.clientWidth : 0; - var splitterWidth = domSplitter.clientWidth; if (adWidth) { - width -= (adWidth + 15); // Not so nice, +15 here for the margin + width -= (adWidth + margin); } if (app.splitter) { - var splitterLeft = width * app.splitter.getValue(); + app.splitter.setWidth(width); + + // calculate horizontal splitter position + var value = app.splitter.getValue(); + var showFormatter = (value > 0); + var showEditor = (value < 1); + var showButtons = showFormatter && showEditor; + domSplitterButtons.style.display = showButtons ? '' : 'none'; + + var splitterWidth = domSplitter.clientWidth; + var splitterLeft; + if (!showFormatter) { + // formatter not visible + splitterLeft = 0; + domSplitterDrag.innerHTML = '›'; + domSplitterDrag.title = 'Drag right to show the code editor'; + } + else if (!showEditor) { + // editor not visible + splitterLeft = width * value - splitterWidth; + domSplitterDrag.innerHTML = '‹'; + domSplitterDrag.title = 'Drag left to show the tree editor'; + } + else { + // both editor and formatter visible + splitterLeft = width * value - splitterWidth / 2; + domSplitterDrag.innerHTML = '⋮'; + domSplitterDrag.title = 'Drag left or right to change the width of the panels'; + } // resize formatter - domFormatter.style.width = Math.round(splitterLeft) + 'px'; + domFormatter.style.display = (value == 0) ? 'none' : ''; + domFormatter.style.width = Math.max(Math.round(splitterLeft), 0) + 'px'; formatter.resize(); + // resize the splitter + domSplitterDrag.style.height = (domSplitter.clientHeight - + domSplitterButtons.clientHeight - 2 * margin - + (showButtons ? margin : 0)) + 'px'; + domSplitterDrag.style.lineHeight = domSplitterDrag.style.height; + // resize 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.round(width - splitterLeft - splitterWidth - 1) + 'px'; + domEditor.style.width = Math.max(Math.round(width - splitterLeft - splitterWidth - 2), 0) + 'px'; } // align main menu with ads if (domMenu) { if (adWidth) { - domMenu.style.right = (15 + (adWidth + 15)) + 'px'; + domMenu.style.right = (margin + (adWidth + margin)) + 'px'; } else { - domMenu.style.right = 15 + 'px'; + domMenu.style.right = margin + 'px'; } } }; diff --git a/app/web/index.html b/app/web/index.html index 709c7f0..5a4530e 100644 --- a/app/web/index.html +++ b/app/web/index.html @@ -1,4 +1,4 @@ - + @@ -37,7 +37,7 @@ Copyright (C) 2011-2013 Jos de Jong, http://jsoneditoronline.org @author Jos de Jong, - @date 2013-03-04 + @date 2013-03-07 --> @@ -125,7 +125,22 @@
-
+
+
+
+ +
+
+ +
+
+
+
+
diff --git a/app/web/lib/ace/theme-jso.js b/app/web/lib/ace/theme-jso.js index dc816e1..0587487 100644 --- a/app/web/lib/ace/theme-jso.js +++ b/app/web/lib/ace/theme-jso.js @@ -108,7 +108,8 @@ color: red\ color: #BF78CC\ }\ .ace-jso .ace_invalid {\ -background-color: #FF002A\ +color: #FFFFFF;\ +background-color: #FF002A;\ }\ .ace-jso .ace_fold {\ background-color: #AF956F;\ diff --git a/app/web/notify.js b/app/web/notify.js index c8e2f5d..5bb8c09 100644 --- a/app/web/notify.js +++ b/app/web/notify.js @@ -59,6 +59,7 @@ Notify.prototype.showMessage = function (params) { frame.style.left = (windowWidth - width) / 2 + 'px'; frame.style.width = width + 'px'; frame.style.top = top + 'px'; + frame.style.zIndex = '999'; document.body.appendChild(frame); this.dom.frame = frame; } diff --git a/app/web/splitter.js b/app/web/splitter.js index 820133d..919ac66 100644 --- a/app/web/splitter.js +++ b/app/web/splitter.js @@ -21,6 +21,8 @@ function Splitter (params) { }); this.container = params.container; + this.width = 1; + this.value = 0.5; this.onChange = (params.change) ? params.change : function () {}; this.params = {}; } @@ -36,6 +38,7 @@ Splitter.prototype.onMouseDown = function (event) { if (!leftButtonDown) { return; } + jsoneditor.util.addClassName(this.container, 'active'); if (!this.params.mousedown) { this.params.mousedown = true; @@ -59,12 +62,10 @@ Splitter.prototype.onMouseDown = function (event) { * @private */ Splitter.prototype.onMouseMove = function (event) { - var width = (window.innerWidth || document.body.offsetWidth || - document.documentElement.offsetWidth); - var diff = event.screenX - this.params.screenX; - var value = this.params.value + diff / width; + // TODO: width does not work correct when ad is visible + var value = this.params.value + diff / this.width; value = this.setValue(value); this.onChange(value); @@ -78,16 +79,39 @@ Splitter.prototype.onMouseMove = function (event) { * @private */ Splitter.prototype.onMouseUp = function (event) { + jsoneditor.util.removeClassName(this.container, 'active'); + if (this.params.mousedown) { jsoneditor.util.removeEventListener(document, 'mousemove', this.params.mousemove); jsoneditor.util.removeEventListener(document, 'mouseup', this.params.mouseup); this.params.mousemove = undefined; this.params.mouseup = undefined; this.params.mousedown = false; + + var value = this.getValue(); + if (value == this.params.value) { + // value is unchanged + if (value == 0) { + value = this.setValue(0.2); + this.onChange(value); + } + if (value == 1) { + value = this.setValue(0.8); + this.onChange(value); + } + } } jsoneditor.util.preventDefault(event); }; +/** + * Set the window width for the splitter + * @param {Number} width + */ +Splitter.prototype.setWidth = function (width) { + this.width = width; +}; + /** * Set a value for the splitter (UI is not adjusted) * @param {Number} value A number between 0.1 and 0.9 @@ -96,10 +120,10 @@ Splitter.prototype.onMouseUp = function (event) { Splitter.prototype.setValue = function (value) { value = Number(value); if (value < 0.1) { - value = 0.1; + value = 0; } if (value > 0.9) { - value = 0.9; + value = 1; } this.value = value; diff --git a/app/web/test.html b/app/web/test.html index 2e4ad2a..0252ee8 100644 --- a/app/web/test.html +++ b/app/web/test.html @@ -1,4 +1,4 @@ - + @@ -36,7 +36,7 @@ Copyright (C) 2011-2013 Jos de Jong, http://jsoneditoronline.org @author Jos de Jong, - @date 2013-03-04 + @date 2013-03-07 --> @@ -155,7 +155,22 @@
-
+
+
+
+ +
+
+ +
+
+
+
+
diff --git a/changelog.txt b/changelog.txt index bd30e4c..6aa86ba 100644 --- a/changelog.txt +++ b/changelog.txt @@ -5,8 +5,9 @@ http://jsoneditoronline.org ## , version 2.1.0 -- Implemented code editor Ace instead of the plain text JSON editor. Ace - provides syntax highlighting and code inspection. +- Replaced the plain text editor with code editor Ace, which brings in syntax + highlighting and code inspection. +- Improved the splitter between the two panels. Panels can be hided. ## 2013-02-26, version 2.0.2 diff --git a/test/test_ace.html b/test/test_ace.html new file mode 100644 index 0000000..052c5ae --- /dev/null +++ b/test/test_ace.html @@ -0,0 +1,60 @@ + + + + Test Ace + + + + + + + + + + +

Test Ace

+ +
+ + + +