Permalink
Browse files

First prototypey stab at an error widget.

I'm just using the widget facility that codemirror provides, which makes it
super easy to add a widget right below a particular character in the editor,
but hard to put the widget at the end of a line like in jess' mockups.
  • Loading branch information...
1 parent 40f8abc commit 81ce512d7523891dd9c1c91075d07bf4bf5f342a @toolness toolness committed Jun 7, 2012
Showing with 33 additions and 1 deletion.
  1. +18 −0 css/editor.css
  2. +15 −1 js/fc/ui/error-help.js
View
18 css/editor.css
@@ -561,3 +561,21 @@ html .tipsy {
/* Make tipsy tooltips slightly larger than the default. */
font-size: 12px;
}
+
+.error-widget {
+ position: absolute;
+ background: red;
+ color: white;
+ padding: 5px;
+ border-radius: 3px;
+ font-size: 18px !important;
+ cursor: pointer;
+}
+
+.error-widget:before {
+ content: '?';
+}
+
+.error-widget:hover {
+ background: firebrick;
+}
View
16 js/fc/ui/error-help.js
@@ -12,7 +12,8 @@ define(["./mark-tracker"], function(MarkTracker) {
// Keep track of error highlighting.
var errorHelpMarks = MarkTracker(codeMirror, relocator);
-
+ var widget = null;
+
// Report the given Slowparse error.
function reportError(error) {
var startMark = 999999999;
@@ -24,11 +25,24 @@ define(["./mark-tracker"], function(MarkTracker) {
errorHelpMarks.mark(start, end, "highlight-" + (i+1), this);
});
errorArea.html(template({error: errorHTML.html()})).show();
+ errorArea.hide();
+ widget = $('<div class="error-widget"></div>');
+ widget.click(function() {
+ errorArea.fadeToggle();
+ codeMirror.focus();
+ return false;
+ });
+ codeMirror.addWidget(codeMirror.posFromIndex(startMark), widget[0], false);
+ window.widget = widget[0];
relocator.relocate(errorArea, startMark);
}
codeMirror.on("reparse", function(event) {
errorHelpMarks.clear();
+ if (widget) {
+ widget.remove();
+ widget = null;
+ }
if (event.error) {
reportError(event.error);
} else {

0 comments on commit 81ce512

Please sign in to comment.