[Bigdata-commit] SF.net SVN: bigdata:[8136] branches/RDR/bigdata-war/src/html

[<tob...@us...>]

Revision: 8136
          http://sourceforge.net/p/bigdata/code/8136
Author:   tobycraig
Date:     2014-04-21 23:18:59 +0000 (Mon, 21 Apr 2014)
Log Message:
-----------
Added error highlighting for SPARQL update in load pane

Modified Paths:
--------------
    branches/RDR/bigdata-war/src/html/css/style.css
    branches/RDR/bigdata-war/src/html/index.html
    branches/RDR/bigdata-war/src/html/js/workbench.js

Modified: branches/RDR/bigdata-war/src/html/css/style.css
===================================================================
--- branches/RDR/bigdata-war/src/html/css/style.css	2014-04-21 22:08:01 UTC (rev 8135)
+++ branches/RDR/bigdata-war/src/html/css/style.css	2014-04-21 23:18:59 UTC (rev 8136)
@@ -228,20 +228,20 @@
    float: right;
 }
 
-#query-box {
+#load-box, #query-box {
    background-color: transparent;
    padding: 2px;
    border-width: 1px;
 }
 
 /* these should have the same typography so the error highlighting matches up with the query text */
-#query-box, #query-errors {
+#load-box, #load-errors, #query-box, #query-errors {
    font-family: sans-serif;
    font-size: 90%;
    line-height: normal;
 }
 
-#query-errors {
+#load-errors, #query-errors {
    position: absolute;
    z-index: -1;
    padding: 8px 3px;
@@ -249,11 +249,11 @@
    white-space: pre;
 }
 
-#error-line {
+.error-line {
    background-color: lightgreen;
 }
 
-#error-character {
+.error-character {
    background-color: red;
 }
 

Modified: branches/RDR/bigdata-war/src/html/index.html
===================================================================
--- branches/RDR/bigdata-war/src/html/index.html	2014-04-21 22:08:01 UTC (rev 8135)
+++ branches/RDR/bigdata-war/src/html/index.html	2014-04-21 23:18:59 UTC (rev 8136)
@@ -36,7 +36,10 @@
           <div class="namespace-shortcuts">
           </div>
 
-          <textarea id="load-box" placeholder="(Type in or drag a file containing RDF data, a SPARQL update or a file path or URL)"></textarea>
+          <div>
+            <div id="load-errors"></div>
+            <textarea id="load-box" placeholder="(Type in or drag a file containing RDF data, a SPARQL update or a file path or URL)"></textarea>
+          </div>
           <p id="large-file-message">Your file <span id="filename"></span> is too large to display here, but will be uploaded as normal. <a href="#" id="clear-file">Remove file</a></p>
           <p>
             <input type="file" id="load-file"><br>

Modified: branches/RDR/bigdata-war/src/html/js/workbench.js
===================================================================
--- branches/RDR/bigdata-war/src/html/js/workbench.js	2014-04-21 22:08:01 UTC (rev 8135)
+++ branches/RDR/bigdata-war/src/html/js/workbench.js	2014-04-21 23:18:59 UTC (rev 8136)
@@ -367,6 +367,7 @@
 $('#load-box').on('dragover', handleDragOver)
    .on('drop', handleFile)
    .on('paste', handlePaste)
+   .on('input propertychange', function() { $('#load-errors').hide(); })
    .bind('keydown', 'ctrl+return', submitLoad);
 $('#clear-file').click(clearFile);
 
@@ -436,6 +437,7 @@
 function updateResponseError(jqXHR, textStatus, errorThrown) {
    $('#load-response, #load-clear').show();
    $('#load-response pre').text('Error! ' + textStatus + ' ' + jqXHR.statusText);
+   highlightError(jqXHR.statusText, 'load');
 }
 
 
@@ -700,24 +702,29 @@
 function queryResultsError(jqXHR, textStatus, errorThrown) {
    $('#query-response, #query-tab .bottom *').show();
    $('#query-response').text('Error! ' + textStatus + ' ' + jqXHR.statusText);
-   var match = errorThrown.match(/line (\d+), column (\d+)/);
+   highlightError(jqXHR.statusText, 'query');
+}
+
+function highlightError(description, pane) {
+   var match = description.match(/line (\d+), column (\d+)/);
    if(match) {
       // highlight character at error position
       var line = match[1] - 1;
       var column = match[2] - 1;
-      var query = $('#query-box').val();
-      var lines = query.split('\n');
-      $('#query-errors').html('');
+      var input = $('#' + pane + '-box').val();
+      var lines = input.split('\n');
+      var container = '#' + pane + '-errors';
+      $(container).html('');
       for(var i=0; i<line; i++) {
          var p = $('<p>').text(lines[i]);
-         $('#query-errors').append(p);
+         $(container).append(p);
       }
-      $('#query-errors').append('<p id="error-line">');
-      $('#error-line').append(document.createTextNode(lines[line].substr(0, column)));
-      $('#error-line').append($('<span id="error-character">').text(lines[line].charAt(column) || ' '));
-      $('#error-line').append(document.createTextNode(lines[line].substr(column + 1)));
-      $('#query-errors').show();
-      $('#query-box').scrollTop(0);
+      $(container).append('<p class="error-line">');
+      $(container + ' .error-line').append(document.createTextNode(lines[line].substr(0, column)));
+      $(container + ' .error-line').append($('<span class="error-character">').text(lines[line].charAt(column) || ' '));
+      $(container + ' .error-line').append(document.createTextNode(lines[line].substr(column + 1)));
+      $(container).show();
+      $('#' + pane + '-box').scrollTop(0);
    }
 }
 

This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.