Permalink
Browse files

first integration of CodeMirror2

  • Loading branch information...
1 parent 0b2b9fc commit 620291f4860aa93fabf077a8827def8dae96952e @mzero committed Feb 17, 2011
View
@@ -178,7 +178,8 @@ emptyModule filename =
scriptSrcs :: [String]
scriptSrcs =
[ "/static/jquery.js"
- , "/static/codemirror_min.js"
+ , "/static/codemirror.js"
+ , "/static/codemirror_parse_haskell.js"
, "Source.js"
]
View
@@ -38,17 +38,13 @@ $('.btn-cancel').click(mkReadOnly);
mkReadOnly();
-var buildColumnMarker = function () {
- $('<div class="editor-column-marker"></div>')
- .appendTo($('.CodeMirror-wrapping'));
-};
var adjustColumnMarker = function () {
var m = $('.editor-column-marker');
var x = "0123456789";
x = x + x + x + x + x + x + x + x;
m.text(x);
- var w = m.innerWidth() + $('.CodeMirror-line-numbers').outerWidth();
+ var w = m.innerWidth();
m.text('');
m.css('width', '10em');
var v = m.width();
@@ -72,17 +68,31 @@ var showHide = function(pShow, pHide, iIn, iOut) {
toggle(iIn, iOut);
}
-var mkRun = function () { showHide(preview, editor, runImage, editImage); }
-var mkEdit = function() { showHide(editor, preview, editImage, runImage);
- setTimeout(adjustColumnMarker, 500); }
-
+var mkRun = function () {
+ preview.slideDown('fast');
+ editor.slideUp('fast');
+ toggle(runImage, editImage);
+}
+var mkEdit = function() {
+ preview.slideUp('fast');
+ editor.slideDown('fast', function() {
+ cmEditor.refresh();
+ adjustColumnMarker();
+ });
+ toggle(editImage, runImage);
+ }
+
+var submit = function() {
+ $('#editor form').submit();
+}
+
var run = function() {
toggle(runImage, editImage);
- if (editable) $('#editor form').submit();
+ if (editable) submit();
else mkRun();
}
var recompile = function() {
- $('#editor form').submit();
+ submit();
return false;
}
@@ -94,47 +104,71 @@ $('.panel h1').click(function () { $('.panel-content').slideToggle('fast'); });
-var cmEditor = CodeMirror.fromTextArea("txt-src", {
- basefiles: ["/static/codemirror_base_min.js"],
- parserfile: ["/static/codemirror_parse_haskell.js"],
- stylesheet: "/static/codemirror.css",
- autoMatchParens: true,
- textWrapping: false,
- lineNumbers: true,
+var cmEditor = CodeMirror.fromTextArea($("#txt-src")[0], {
indentUnit: 4,
- tabMode: "shift",
enterMode: "keep",
- minHeight: 160,
- height: "dynamic",
- markParen: ["paren-match", "paren-error"],
- onCursorActivity: function(node) {
- var sel = cmEditor.selection();
- if (!sel) { sel = node.innerText || node.textContent; }
+ lineNumbers: true,
+ matchBrackets: true,
+ mode: 'hs',
+
+ onChange: mkEditable,
+ onCursorActivity: function() {
+ var sel = cmEditor.getSelection();
+ if (!sel) return;
var mat = sel.match(/\S(.*\S)?/);
if (mat) { $('.research-query').val(mat[0]); }
- },
- onChange: mkEditable,
- saveFunction: run,
- onLoad: function() { buildColumnMarker(); }
+ },
});
-
+$('<div class="editor-column-marker"></div>')
+ .appendTo($('.CodeMirror-lines > div:first'));
var previewUrl = $('#preview-url').text();
-var setErrorDetailAdjust = function(ln, lnp) {
- ln.hover(function () {
- var w = ln.offset();
- w.top += ln.height();
- w.left += ln.width() * 1.3;
- lnp.css(w);
- lnp.show('fast');
- },
- function () {
- lnp.hide('fast');
+var setUpErrors = function (data) {
+ var errorDetails = [];
+ var currDetail;
+
+ var r = /\.hs:(\d+):(\d+):$/;
+ var dataLines = data.split("\n")
+ for (var i in dataLines) {
+ var e = dataLines[i].match(r);
+ if (e) {
+ var n = parseInt(e[1]);
+ if (errorDetails[n]) {
+ currDetail = errorDetails[n]
+ }
+ else {
+ cmEditor.setMarker(n-1,'','error-line');
+ currDetail = $('<pre class="error-details"></pre>')
+ currDetail.appendTo($('body'));
+ errorDetails[n] = currDetail;
+ }
+ }
+ else if (currDetail) {
+ var l = dataLines[i];
+ if (l.slice(0,4) == ' ') { l = l.slice(4); }
+ currDetail.text(currDetail.text() + l + "\n");
+ }
+ }
+
+ $('.error-line').live('mouseenter', function (ev) {
+ var lineNumber = $(ev.target);
+ var detail = errorDetails[parseInt(lineNumber.text())];
+ if (detail) {
+ var w = lineNumber.offset();
+ w.top += lineNumber.height();
+ w.left += lineNumber.width() * 1.3;
+ detail.css(w);
+ detail.show('fast');
+ }
+ });
+ $('.error-line').live('mouseleave', function () {
+ $('.error-details').hide('fast');
});
}
+
var compileResult = function(data, status, xhr) {
if (data == "OK") {
if ($('#preview').length > 0) {
@@ -148,36 +182,7 @@ var compileResult = function(data, status, xhr) {
}
}
else {
- setTimeout(function () {
- var lns = $('.CodeMirror-line-numbers div');
- var ln, lnp, lnps = [];
-
- var r = /\.hs:(\d+):(\d+):$/;
- var dataLines = data.split("\n")
- for (var i in dataLines) {
- var e = dataLines[i].match(r);
- if (e) {
- var n = e[1];
- if (lnps[n]) {
- lnp = lnps[n]
- }
- else {
- ln = lns.eq(n-1);
- ln.addClass('error-line');
- lnp = $('<pre class="error-details"></pre>')
- lnp.appendTo($('body'));
- setErrorDetailAdjust(ln, lnp);
- lnps[n] = lnp;
- }
- }
- else if (lnp) {
- var l = dataLines[i];
- if (l.slice(0,4) == ' ') { l = l.slice(4); }
- lnp.text(lnp.text() + l + "\n");
- }
- }
-
- }, 300);
+ setTimeout(function () { setUpErrors(data); }, 500);
$('#errors .panel-content').text(data);
$('#errors .panel-content').hide();
$('#errors').show('fast');
View
@@ -47,6 +47,8 @@ devpage pageTitle contents modules scriptSrcs =
header << [
thelink ! [href "/static/barley.css", rel "stylesheet",
thetype "text/css"] << noHtml,
+ thelink ! [href "/static/codemirror.css", rel "stylesheet",
+ thetype "text/css"] << noHtml,
thetitle << fullTitle
] +++
body ! [theclass "with-topbar"] << [
View
@@ -306,7 +306,7 @@ body.with-topbar {
font-size: 93%; /* 12pt */
line-height: 124%;
margin: 1em 0;
- overflow: auto;
+ overflow: hidden;
background: #ffffe5;
border: 1px solid #b1b18e;
padding-left: 0.75em;
@@ -316,19 +316,7 @@ body.with-topbar {
background: #ff0 url(stripe.png);
}
-#editor-box textarea,
-#editor-box .CodeMirror-wrapping {
- padding-left: 3.72em;
-}
-
-#editor-box .CodeMirror-line-numbers {
- text-align: right;
- padding: 1em 1em 1em 0;
- width: 3em;
- color: #a9a9a9;
-}
-
-#editor-box .CodeMirror-line-numbers div.error-line {
+#editor-box .error-line {
color: #ff4d4d;
font-weight: bold;
background: url(silk/exclamation.png) no-repeat -1px -1px;
@@ -347,23 +335,15 @@ body.with-topbar {
border: 1px solid #b1b18e;
}
-#editor-box textarea.src {
- width: 100%;
-}
-
-#editor-box .CodeMirror-wrapping div,
-#editor-box .CodeMirror-wrapping iframe {
- background: #ffffe5;
-}
-
-#editor-box .CodeMirror-wrapping .editor-column-marker {
+#editor-box .editor-column-marker {
position: absolute;
top: 0;
height: 100%;
left: 4em;
background-color: transparent;
border-left: 1px dashed #e0e0b4;
}
+
.panel {
background-color: #eee7b9;
width: 99%;
View
@@ -1,23 +1,61 @@
-/* @override http://localhost:8080/static/codemirror.css */
+.CodeMirror {
+ position: relative;
+ line-height: 1em;
+ font-family: monospace;
+ x-background: #fff !important;
+ background: #ffffe5;
+}
+
+.CodeMirror-gutter {
+ position: absolute; left: 0; top: 0;
+ background-color: #f7f7f7;
+ border-right: 1px solid #eee;
+ color: #aaa;
+ text-align: right;
+ min-width: 3em;
+ padding: .5em .25em .5em .5em;
+}
+.CodeMirror-lines {
+ padding: .5em;
+}
+
+.CodeMirror-lines > div {
+ position: relative;
+}
+.CodeMirror pre {
+ margin: 0; padding: 0;
+ font-family: inherit;
+ overflow: hidden;
+}
-* {
- margin: 0;
- padding: 0;
+.CodeMirror-cursor {
+ z-index: 10;
+ position: absolute;
+ visibility: hidden;
+ border-left: 1px solid black !important;
+}
+.CodeMirror-focused .CodeMirror-cursor {
+ visibility: visible;
}
-body {
- font:12px/14px monospace;
- overflow: auto;
- padding: 1em 0;
+span.CodeMirror-selected {
+ background: #ccc !important;
+ color: HighlightText !important;
+}
+.CodeMirror-focused span.CodeMirror-selected {
+ background: Highlight !important;
}
-.paren-match { background-color: #9cc2fd; }
-.paren-error {
+
+.CodeMirror-matchingbracket { background-color: #9cc2fd; }
+.CodeMirror-nonmatchingbracket {
background-color: #ff4d4d;
color: #fff;
font-weight: bold;
}
+
+
.hs-char,
.hs-float,
.hs-integer,
@@ -36,7 +74,7 @@ body {
.hs-consym { color: #cc2900; }
.hs-reservedid,
-.hs-reservedop { color: #7f3500; font-weight: bold; }
+.hs-reservedop { color: #7f3500; }
.hs-qualifier { color: #5e5e5e;}
.hs-error { background-color: #ffe5e5; }
@@ -45,3 +83,5 @@ body {
.hs-prelude-varsym,
.hs-prelude-conid { color: #250087; }
+
+
Oops, something went wrong.

0 comments on commit 620291f

Please sign in to comment.