improved error messages by integrating jsonlint.

MaxGfeller · Oct 19, 2012 · d94677b · d94677b
1 parent 38f7ce6
commit d94677b
Show file tree

Hide file tree

Showing 8 changed files with 607 additions and 31 deletions.
diff --git a/build.xml b/build.xml
@@ -3,7 +3,7 @@
 <project name="jsoneditor-builder" default="main">
     <!-- the version number of must be updated here (according to changelog.txt) -->
     <property name="package" value="jsoneditor"/>
-    <property name="version" value="1.5.1"/>
+    <property name="version" value="1.6.0"/>
 
     <property name="root" location="" />
     <property name="lib" location="build/lib" />
@@ -68,6 +68,7 @@
         <copy file="favicon.ico" todir="${web}" />
         <copy file="interface/interface.js" todir="${web}/interface" />
         <copy file="interface/interface.css" todir="${web}/interface" />
+        <copy file="interface/lib/jsonlint/jsonlint.js" todir="${web}/interface/lib/jsonlint" />
         <copy file="interface/img/logo.png" todir="${web}/interface/img" />
         <copy file="interface/img/header_background.png" todir="${web}/interface/img" />
         <copy file="jsoneditor/jsoneditor-min.js" todir="${web}/jsoneditor" />

diff --git a/changelog.txt b/changelog.txt
@@ -2,6 +2,12 @@ JSON EDITOR ONLINE CHANGELOG
 http://jsoneditoronline.org
 
 
+<not yet released>, version 1.6.0
+
+- Improved error messages, using JSONLint.
+- Made the web application pass the W3C markup validation service.
+
+
 2012-10-08, version 1.5.1
 
 - Replaced the paid Chrome App with a free, hosted Chrome App (with ads).

diff --git a/index.html b/index.html
@@ -37,7 +37,7 @@
     Copyright (C) 2011-2012 Jos de Jong, http://jsoneditoronline.org
 
     @author   Jos de Jong, <[email protected]>
-    @date     2012-10-08
+    @date     2012-10-19
     -->
 
     <meta name="description" content="JSON Editor Online is a web-based tool to view, edit, and format JSON. It shows your data side by side in a clear, editable treeview and in formatted plain text.">
@@ -56,11 +56,11 @@
     <script type="text/javascript" src="interface/interface.js"></script>
 </head>
 
-<body spellcheck="false" >
+<body>
 
 <div id="header">
     <a href="http://jsoneditoronline.org" class="header">
-        <img alt="JSON Editor Online" src="interface/img/logo.png" id="logo">
+        <img alt="JSON Editor Online" title="JSON Editor Online" src="interface/img/logo.png" id="logo">
     </a>
 
     <!-- TODO: info, links, faq -->
@@ -130,7 +130,7 @@
 
 <div id="footer">
     <div id="footer-inner">
-        <a href="http://jsoneditoronline.org" class="footer">JSON Editor Online 1.5.1</a>
+        <a href="http://jsoneditoronline.org" class="footer">JSON Editor Online 1.6.0</a>
         &bull;
         <a href="changelog.txt" target="_blank" class="footer">Changelog</a>
         &bull;
@@ -144,5 +144,7 @@
     main.resize();
 </script>
 
+<script type="text/javascript" src="interface/lib/jsonlint/jsonlint.js"></script>
+
 </body>
 </html>
diff --git a/interface/interface.css b/interface/interface.css
@@ -138,6 +138,17 @@ div.error {
     border-radius: 3px;
     padding: 5px;
     margin: 5px;
+    box-shadow: 0 0 15px rgba(128, 128, 128, 0.5);
+}
+pre.error {
+    margin: 0 0 10px 0;
+    white-space: pre-wrap;
+    font-family: droid sans mono, monospace, courier new, courier, sans-serif;
+    font-size: 10pt;
+}
+a.error {
+    color: red;
+    font-size: 8pt;
 }
 
 button.convert {

diff --git a/interface/interface.js b/interface/interface.js
@@ -26,7 +26,7 @@
  * Copyright (C) 2011-2012 Jos de Jong, http://jsoneditoronline.org
  *
  * @author  Jos de Jong, <[email protected]>
- * @date    2012-10-08
+ * @date    2012-10-19
  */
 
 
@@ -35,15 +35,21 @@ var formatter = null;
 
 var main = {};
 
+/**
+ * Get the JSON from the formatter and load it in the editor
+ */
 main.formatterToEditor = function() {
     try {
         editor.set(formatter.get());
     }
     catch (err) {
-        main.showError(err);
+         main.showError(err);
     }
 };
 
+/**
+ * Get the JSON from the editor and load it into the formatter
+ */
 main.editorToFormatter = function () {
     try {
         formatter.set(editor.get());
@@ -54,6 +60,24 @@ main.editorToFormatter = function () {
 };
 
 main.eventParams = {};
+
+/**
+ * Handle key down event.
+ * @param {Event} event
+ */
+main.onKeyDown = function (event) {
+    event = event || window.event;
+    var keynum = event.which || event.keyCode;
+    if (keynum == 27) { // ESC
+        // remove the oldest open error message
+        main.removeError();
+    }
+};
+
+/**
+ * Handle mouse down event. Start dragging the splitter.
+ * @param {Event} event
+ */
 main.onMouseDown = function (event) {
     var leftButtonDown = event.which ? (event.which == 1) : (event.button == 1);
     if (!leftButtonDown) {
@@ -72,6 +96,10 @@ main.onMouseDown = function (event) {
     JSONEditor.Events.preventDefault(event);
 };
 
+/**
+ * Handle on mouse move event. Used to drag the spitter
+ * @param {Event} event
+ */
 main.onMouseMove = function (event) {
     var width = (window.innerWidth || document.body.offsetWidth ||
         document.documentElement.offsetWidth);
@@ -86,6 +114,10 @@ main.onMouseMove = function (event) {
     JSONEditor.Events.preventDefault(event);
 };
 
+/**
+ * Handle on mouse up event
+ * @param {Event} event
+ */
 main.onMouseUp = function (event) {
     if (main.eventParams.mousedown) {
         JSONEditor.Events.removeEventListener(document, 'mousemove', main.eventParams.mousemove);
@@ -149,6 +181,9 @@ main.getSplitterValue = function () {
     return value;
 };
 
+/**
+ * Load the interface (editor, formatter, splitter)
+ */
 main.load = function() {
     var json = {
         "Name": "John Smith",
@@ -219,10 +254,12 @@ main.load = function() {
         domSplitter.appendChild(toJSON);
 
         JSONEditor.Events.addEventListener(domSplitter, "mousedown", main.onMouseDown);
+        JSONEditor.Events.addEventListener(window, 'keydown', main.onKeyDown);
 
         // resize
         JSONEditor.Events.addEventListener(window, 'resize', main.resize);
 
+
         // TODO: implement a focus method
         formatter.textarea.focus();
 
@@ -259,9 +296,11 @@ main.load = function() {
         /* TODO: use checkChange
          checkChange();
          */
+
+        // enforce FireFox to not do spell checking on any input field
+        document.body.spellcheck = false;
     } catch (err) {
-        var msg = err.message || err;
-        main.showError('Error: ' + msg);
+        main.showError(err);
     }
 };
 
@@ -301,7 +340,15 @@ main.resize = function() {
 
 main.errorFrame = undefined;
 
-main.showError = function (message) {
+/**
+ * Show an error message top center of the interface
+ * @param {Error} error
+ */
+main.showError = function (error) {
+    if (!error) {
+        return;
+    }
+
     if (!main.errorFrame) {
         var width = 500;
         var top = 5;
@@ -314,21 +361,21 @@ main.showError = function (message) {
         document.body.appendChild(main.errorFrame);
     }
 
-    var error = document.createElement('div');
-    error.className = 'error';
-    error.style.position = 'relative';
-    main.errorFrame.appendChild(error);
+    var divError = document.createElement('div');
+    divError.className = 'error';
+    divError.style.position = 'relative';
+    main.errorFrame.appendChild(divError);
 
     var table = document.createElement('table');
     table.style.width = '100%';
-    error.appendChild(table);
+    divError.appendChild(table);
     var tbody = document.createElement('tbody');
     table.appendChild(tbody);
     var tr = document.createElement('tr');
     tbody.appendChild(tr);
 
     var tdMessage = document.createElement('td');
-    tdMessage.innerHTML = message;
+    tdMessage.innerHTML = error.message || error.toString();
     tr.appendChild(tdMessage);
 
     var tdClose = document.createElement('td');
@@ -341,17 +388,32 @@ main.showError = function (message) {
     closeDiv.title = 'Close error message';
     tdClose.appendChild(closeDiv);
     closeDiv.onclick = function () {
-        if (error.parentNode) {
-            error.parentNode.removeChild(error);
-        }
+        main.removeError(divError);
+    }
+};
 
-        if (main.errorFrame.childNodes.length == 0) {
-            main.errorFrame.parentNode.removeChild(main.errorFrame);
-            main.errorFrame = undefined;
-        }
+/**
+ * Remove an error from the list with errors
+ * @param {Element} [error]   The HTML DOM of an error message
+ *                            If undefined, the first error message will be
+ *                            removed.
+ */
+main.removeError = function (error) {
+    if (!error && main.errorFrame) {
+        error = main.errorFrame.firstChild;
+    }
+
+    if (error && error.parentNode == main.errorFrame) {
+        error.parentNode.removeChild(error);
+    }
+
+    if (main.errorFrame.childNodes.length == 0) {
+        main.errorFrame.parentNode.removeChild(main.errorFrame);
+        main.errorFrame = undefined;
     }
 };
 
+
 main.hideAds = function() {
     var domAd = document.getElementById("ad");
     if (domAd) {