comparison rhodecode/public/js/mode/diff/index.html @ 4026:a60a0e9092c6

added codemirror edit mode with autodetection
author Marcin Kuzminski <marcin@python-works.com>
date Thu, 20 Jun 2013 23:53:18 +0200
parents
children c9bcfe2d2ade
comparison
equal deleted inserted replaced
4025:cd23cc2c9961 4026:a60a0e9092c6
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>CodeMirror: Diff mode</title>
6 <link rel="stylesheet" href="../../lib/codemirror.css">
7 <script src="../../lib/codemirror.js"></script>
8 <script src="diff.js"></script>
9 <style>
10 .CodeMirror {border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
11 span.cm-meta {color: #a0b !important;}
12 span.cm-error { background-color: black; opacity: 0.4;}
13 span.cm-error.cm-string { background-color: red; }
14 span.cm-error.cm-tag { background-color: #2b2; }
15 </style>
16 <link rel="stylesheet" href="../../doc/docs.css">
17 </head>
18 <body>
19 <h1>CodeMirror: Diff mode</h1>
20 <form><textarea id="code" name="code">
21 diff --git a/index.html b/index.html
22 index c1d9156..7764744 100644
23 --- a/index.html
24 +++ b/index.html
25 @@ -95,7 +95,8 @@ StringStream.prototype = {
26 <script>
27 var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
28 lineNumbers: true,
29 - autoMatchBrackets: true
30 + autoMatchBrackets: true,
31 + onGutterClick: function(x){console.log(x);}
32 });
33 </script>
34 </body>
35 diff --git a/lib/codemirror.js b/lib/codemirror.js
36 index 04646a9..9a39cc7 100644
37 --- a/lib/codemirror.js
38 +++ b/lib/codemirror.js
39 @@ -399,10 +399,16 @@ var CodeMirror = (function() {
40 }
41
42 function onMouseDown(e) {
43 - var start = posFromMouse(e), last = start;
44 + var start = posFromMouse(e), last = start, target = e.target();
45 if (!start) return;
46 setCursor(start.line, start.ch, false);
47 if (e.button() != 1) return;
48 + if (target.parentNode == gutter) {
49 + if (options.onGutterClick)
50 + options.onGutterClick(indexOf(gutter.childNodes, target) + showingFrom);
51 + return;
52 + }
53 +
54 if (!focused) onFocus();
55
56 e.stop();
57 @@ -808,7 +814,7 @@ var CodeMirror = (function() {
58 for (var i = showingFrom; i < showingTo; ++i) {
59 var marker = lines[i].gutterMarker;
60 if (marker) html.push('<div class="' + marker.style + '">' + htmlEscape(marker.text) + '</div>');
61 - else html.push("<div>" + (options.lineNumbers ? i + 1 : "\u00a0") + "</div>");
62 + else html.push("<div>" + (options.lineNumbers ? i + options.firstLineNumber : "\u00a0") + "</div>");
63 }
64 gutter.style.display = "none"; // TODO test whether this actually helps
65 gutter.innerHTML = html.join("");
66 @@ -1371,10 +1377,8 @@ var CodeMirror = (function() {
67 if (option == "parser") setParser(value);
68 else if (option === "lineNumbers") setLineNumbers(value);
69 else if (option === "gutter") setGutter(value);
70 - else if (option === "readOnly") options.readOnly = value;
71 - else if (option === "indentUnit") {options.indentUnit = indentUnit = value; setParser(options.parser);}
72 - else if (/^(?:enterMode|tabMode|indentWithTabs|readOnly|autoMatchBrackets|undoDepth)$/.test(option)) options[option] = value;
73 - else throw new Error("Can't set option " + option);
74 + else if (option === "indentUnit") {options.indentUnit = value; setParser(options.parser);}
75 + else options[option] = value;
76 },
77 cursorCoords: cursorCoords,
78 undo: operation(undo),
79 @@ -1402,7 +1406,8 @@ var CodeMirror = (function() {
80 replaceRange: operation(replaceRange),
81
82 operation: function(f){return operation(f)();},
83 - refresh: function(){updateDisplay([{from: 0, to: lines.length}]);}
84 + refresh: function(){updateDisplay([{from: 0, to: lines.length}]);},
85 + getInputField: function(){return input;}
86 };
87 return instance;
88 }
89 @@ -1420,6 +1425,7 @@ var CodeMirror = (function() {
90 readOnly: false,
91 onChange: null,
92 onCursorActivity: null,
93 + onGutterClick: null,
94 autoMatchBrackets: false,
95 workTime: 200,
96 workDelay: 300,
97 </textarea></form>
98 <script>
99 var editor = CodeMirror.fromTextArea(document.getElementById("code"), {});
100 </script>
101
102 <p><strong>MIME types defined:</strong> <code>text/x-diff</code>.</p>
103
104 </body>
105 </html>