| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| // CodeMirror, copyright (c) by Marijn Haverbeke and others | ||
| // Distributed under an MIT license: http://codemirror.net/LICENSE | ||
|
|
||
| (function(mod) { | ||
| if (typeof exports == "object" && typeof module == "object") // CommonJS | ||
| mod(require("../../lib/codemirror")); | ||
| else if (typeof define == "function" && define.amd) // AMD | ||
| define(["../../lib/codemirror"], mod); | ||
| else // Plain browser env | ||
| mod(CodeMirror); | ||
| })(function(CodeMirror) { | ||
| "use strict"; | ||
|
|
||
| CodeMirror.defineExtension("annotateScrollbar", function(className) { | ||
| return new Annotation(this, className); | ||
| }); | ||
|
|
||
| function Annotation(cm, className) { | ||
| this.cm = cm; | ||
| this.className = className; | ||
| this.annotations = []; | ||
| this.div = cm.getWrapperElement().appendChild(document.createElement("div")); | ||
| this.div.style.cssText = "position: absolute; right: 0; top: 0; z-index: 7; pointer-events: none"; | ||
| this.computeScale(); | ||
|
|
||
| var self = this; | ||
| cm.on("refresh", this.resizeHandler = function(){ | ||
| if (self.computeScale()) self.redraw(); | ||
| }); | ||
| } | ||
|
|
||
| Annotation.prototype.computeScale = function() { | ||
| var cm = this.cm; | ||
| var hScale = (cm.getWrapperElement().clientHeight - cm.display.barHeight) / | ||
| cm.heightAtLine(cm.lastLine() + 1, "local"); | ||
| if (hScale != this.hScale) { | ||
| this.hScale = hScale; | ||
| return true; | ||
| } | ||
| }; | ||
|
|
||
| Annotation.prototype.update = function(annotations) { | ||
| this.annotations = annotations; | ||
| this.redraw(); | ||
| }; | ||
|
|
||
| Annotation.prototype.redraw = function() { | ||
| var cm = this.cm, hScale = this.hScale; | ||
| if (!cm.display.barWidth) return; | ||
|
|
||
| var frag = document.createDocumentFragment(), anns = this.annotations; | ||
| for (var i = 0, nextTop; i < anns.length; i++) { | ||
| var ann = anns[i]; | ||
| var top = nextTop || cm.charCoords(ann.from, "local").top * hScale; | ||
| var bottom = cm.charCoords(ann.to, "local").bottom * hScale; | ||
| while (i < anns.length - 1) { | ||
| nextTop = cm.charCoords(anns[i + 1].from, "local").top * hScale; | ||
| if (nextTop > bottom + .9) break; | ||
| ann = anns[++i]; | ||
| bottom = cm.charCoords(ann.to, "local").bottom * hScale; | ||
| } | ||
| var height = Math.max(bottom - top, 3); | ||
|
|
||
| var elt = frag.appendChild(document.createElement("div")); | ||
| elt.style.cssText = "position: absolute; right: 0px; width: " + Math.max(cm.display.barWidth - 1, 2) + "px; top: " + top + "px; height: " + height + "px"; | ||
| elt.className = this.className; | ||
| } | ||
| this.div.textContent = ""; | ||
| this.div.appendChild(frag); | ||
| }; | ||
|
|
||
| Annotation.prototype.clear = function() { | ||
| this.cm.off("refresh", this.resizeHandler); | ||
| this.div.parentNode.removeChild(this.div); | ||
| }; | ||
| }); |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| .CodeMirror-simplescroll-horizontal div, .CodeMirror-simplescroll-vertical div { | ||
| position: absolute; | ||
| background: #ccc; | ||
| -moz-box-sizing: border-box; | ||
| box-sizing: border-box; | ||
| border: 1px solid #bbb; | ||
| border-radius: 2px; | ||
| } | ||
|
|
||
| .CodeMirror-simplescroll-horizontal, .CodeMirror-simplescroll-vertical { | ||
| position: absolute; | ||
| z-index: 6; | ||
| background: #eee; | ||
| } | ||
|
|
||
| .CodeMirror-simplescroll-horizontal { | ||
| bottom: 0; left: 0; | ||
| height: 8px; | ||
| } | ||
| .CodeMirror-simplescroll-horizontal div { | ||
| bottom: 0; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .CodeMirror-simplescroll-vertical { | ||
| right: 0; top: 0; | ||
| width: 8px; | ||
| } | ||
| .CodeMirror-simplescroll-vertical div { | ||
| right: 0; | ||
| width: 100%; | ||
| } | ||
|
|
||
|
|
||
| .CodeMirror-overlayscroll .CodeMirror-scrollbar-filler, .CodeMirror-overlayscroll .CodeMirror-gutter-filler { | ||
| display: none; | ||
| } | ||
|
|
||
| .CodeMirror-overlayscroll-horizontal div, .CodeMirror-overlayscroll-vertical div { | ||
| position: absolute; | ||
| background: #bcd; | ||
| border-radius: 3px; | ||
| } | ||
|
|
||
| .CodeMirror-overlayscroll-horizontal, .CodeMirror-overlayscroll-vertical { | ||
| position: absolute; | ||
| z-index: 6; | ||
| } | ||
|
|
||
| .CodeMirror-overlayscroll-horizontal { | ||
| bottom: 0; left: 0; | ||
| height: 6px; | ||
| } | ||
| .CodeMirror-overlayscroll-horizontal div { | ||
| bottom: 0; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .CodeMirror-overlayscroll-vertical { | ||
| right: 0; top: 0; | ||
| width: 6px; | ||
| } | ||
| .CodeMirror-overlayscroll-vertical div { | ||
| right: 0; | ||
| width: 100%; | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,139 @@ | ||
| // CodeMirror, copyright (c) by Marijn Haverbeke and others | ||
| // Distributed under an MIT license: http://codemirror.net/LICENSE | ||
|
|
||
| (function(mod) { | ||
| if (typeof exports == "object" && typeof module == "object") // CommonJS | ||
| mod(require("../../lib/codemirror")); | ||
| else if (typeof define == "function" && define.amd) // AMD | ||
| define(["../../lib/codemirror"], mod); | ||
| else // Plain browser env | ||
| mod(CodeMirror); | ||
| })(function(CodeMirror) { | ||
| "use strict"; | ||
|
|
||
| function Bar(cls, orientation, scroll) { | ||
| this.orientation = orientation; | ||
| this.scroll = scroll; | ||
| this.screen = this.total = this.size = 1; | ||
| this.pos = 0; | ||
|
|
||
| this.node = document.createElement("div"); | ||
| this.node.className = cls + "-" + orientation; | ||
| this.inner = this.node.appendChild(document.createElement("div")); | ||
|
|
||
| var self = this; | ||
| CodeMirror.on(this.inner, "mousedown", function(e) { | ||
| if (e.which != 1) return; | ||
| CodeMirror.e_preventDefault(e); | ||
| var axis = self.orientation == "horizontal" ? "pageX" : "pageY"; | ||
| var start = e[axis], startpos = self.pos; | ||
| function move(e) { | ||
| if (e.which != 1) { | ||
| CodeMirror.off(document, "mousemove", move); | ||
| return; | ||
| } | ||
| self.moveTo(startpos + (e[axis] - start) * (self.total / self.size)); | ||
| } | ||
| CodeMirror.on(document, "mousemove", move); | ||
| }); | ||
|
|
||
| CodeMirror.on(this.node, "click", function(e) { | ||
| CodeMirror.e_preventDefault(e); | ||
| var innerBox = self.inner.getBoundingClientRect(), where; | ||
| if (self.orientation == "horizontal") | ||
| where = e.clientX < innerBox.left ? -1 : e.clientX > innerBox.right ? 1 : 0; | ||
| else | ||
| where = e.clientY < innerBox.top ? -1 : e.clientY > innerBox.bottom ? 1 : 0; | ||
| self.moveTo(self.pos + where * self.screen); | ||
| }); | ||
|
|
||
| function onWheel(e) { | ||
| var moved = CodeMirror.wheelEventPixels(e)[self.orientation == "horizontal" ? "x" : "y"]; | ||
| var oldPos = self.pos; | ||
| self.moveTo(self.pos + moved); | ||
| if (self.pos != oldPos) CodeMirror.e_preventDefault(e); | ||
| } | ||
| CodeMirror.on(this.node, "mousewheel", onWheel); | ||
| CodeMirror.on(this.node, "DOMMouseScroll", onWheel); | ||
| } | ||
|
|
||
| Bar.prototype.moveTo = function(pos, update) { | ||
| if (pos < 0) pos = 0; | ||
| if (pos > this.total - this.screen) pos = this.total - this.screen; | ||
| if (pos == this.pos) return; | ||
| this.pos = pos; | ||
| this.inner.style[this.orientation == "horizontal" ? "left" : "top"] = | ||
| (pos * (this.size / this.total)) + "px"; | ||
| if (update !== false) this.scroll(pos, this.orientation); | ||
| }; | ||
|
|
||
| Bar.prototype.update = function(scrollSize, clientSize, barSize) { | ||
| this.screen = clientSize; | ||
| this.total = scrollSize; | ||
| this.size = barSize; | ||
|
|
||
| // FIXME clip to min size? | ||
| this.inner.style[this.orientation == "horizontal" ? "width" : "height"] = | ||
| this.screen * (this.size / this.total) + "px"; | ||
| this.inner.style[this.orientation == "horizontal" ? "left" : "top"] = | ||
| this.pos * (this.size / this.total) + "px"; | ||
| }; | ||
|
|
||
| function SimpleScrollbars(cls, place, scroll) { | ||
| this.addClass = cls; | ||
| this.horiz = new Bar(cls, "horizontal", scroll); | ||
| place(this.horiz.node); | ||
| this.vert = new Bar(cls, "vertical", scroll); | ||
| place(this.vert.node); | ||
| this.width = null; | ||
| } | ||
|
|
||
| SimpleScrollbars.prototype.update = function(measure) { | ||
| if (this.width == null) { | ||
| var style = window.getComputedStyle ? window.getComputedStyle(this.horiz.node) : this.horiz.node.currentStyle; | ||
| if (style) this.width = parseInt(style.height); | ||
| } | ||
| var width = this.width || 0; | ||
|
|
||
| var needsH = measure.scrollWidth > measure.clientWidth + 1; | ||
| var needsV = measure.scrollHeight > measure.clientHeight + 1; | ||
| this.vert.node.style.display = needsV ? "block" : "none"; | ||
| this.horiz.node.style.display = needsH ? "block" : "none"; | ||
|
|
||
| if (needsV) { | ||
| this.vert.update(measure.scrollHeight, measure.clientHeight, | ||
| measure.viewHeight - (needsH ? width : 0)); | ||
| this.vert.node.style.display = "block"; | ||
| this.vert.node.style.bottom = needsH ? width + "px" : "0"; | ||
| } | ||
| if (needsH) { | ||
| this.horiz.update(measure.scrollWidth, measure.clientWidth, | ||
| measure.viewWidth - (needsV ? width : 0) - measure.barLeft); | ||
| this.horiz.node.style.right = needsV ? width + "px" : "0"; | ||
| this.horiz.node.style.left = measure.barLeft + "px"; | ||
| } | ||
|
|
||
| return {right: needsV ? width : 0, bottom: needsH ? width : 0}; | ||
| }; | ||
|
|
||
| SimpleScrollbars.prototype.setScrollTop = function(pos) { | ||
| this.vert.moveTo(pos, false); | ||
| }; | ||
|
|
||
| SimpleScrollbars.prototype.setScrollLeft = function(pos) { | ||
| this.horiz.moveTo(pos, false); | ||
| }; | ||
|
|
||
| SimpleScrollbars.prototype.clear = function() { | ||
| var parent = this.horiz.node.parentNode; | ||
| parent.removeChild(this.horiz.node); | ||
| parent.removeChild(this.vert.node); | ||
| }; | ||
|
|
||
| CodeMirror.scrollbarModel.simple = function(place, scroll) { | ||
| return new SimpleScrollbars("CodeMirror-simplescroll", place, scroll); | ||
| }; | ||
| CodeMirror.scrollbarModel.overlay = function(place, scroll) { | ||
| return new SimpleScrollbars("CodeMirror-overlayscroll", place, scroll); | ||
| }; | ||
| }); |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| .CodeMirror-search-match { | ||
| background: gold; | ||
| border-top: 1px solid orange; | ||
| border-bottom: 1px solid orange; | ||
| -moz-box-sizing: border-box; | ||
| box-sizing: border-box; | ||
| opacity: .5; | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| // CodeMirror, copyright (c) by Marijn Haverbeke and others | ||
| // Distributed under an MIT license: http://codemirror.net/LICENSE | ||
|
|
||
| (function(mod) { | ||
| if (typeof exports == "object" && typeof module == "object") // CommonJS | ||
| mod(require("../../lib/codemirror"), require("./searchcursor"), require("../scroll/annotatescrollbar")); | ||
| else if (typeof define == "function" && define.amd) // AMD | ||
| define(["../../lib/codemirror", "./searchcursor", "../scroll/annotatescrollbar"], mod); | ||
| else // Plain browser env | ||
| mod(CodeMirror); | ||
| })(function(CodeMirror) { | ||
| "use strict"; | ||
|
|
||
| CodeMirror.defineExtension("showMatchesOnScrollbar", function(query, caseFold, className) { | ||
| return new SearchAnnotation(this, query, caseFold, className); | ||
| }); | ||
|
|
||
| function SearchAnnotation(cm, query, caseFold, className) { | ||
| this.cm = cm; | ||
| this.annotation = cm.annotateScrollbar(className || "CodeMirror-search-match"); | ||
| this.query = query; | ||
| this.caseFold = caseFold; | ||
| this.gap = {from: cm.firstLine(), to: cm.lastLine() + 1}; | ||
| this.matches = []; | ||
| this.update = null; | ||
|
|
||
| this.findMatches(); | ||
| this.annotation.update(this.matches); | ||
|
|
||
| var self = this; | ||
| cm.on("change", this.changeHandler = function(_cm, change) { self.onChange(change); }); | ||
| } | ||
|
|
||
| var MAX_MATCHES = 1000; | ||
|
|
||
| SearchAnnotation.prototype.findMatches = function() { | ||
| if (!this.gap) return; | ||
| for (var i = 0; i < this.matches.length; i++) { | ||
| var match = this.matches[i]; | ||
| if (match.from.line >= this.gap.to) break; | ||
| if (match.to.line >= this.gap.from) this.matches.splice(i--, 1); | ||
| } | ||
| var cursor = this.cm.getSearchCursor(this.query, CodeMirror.Pos(this.gap.from, 0), this.caseFold); | ||
| while (cursor.findNext()) { | ||
| var match = {from: cursor.from(), to: cursor.to()}; | ||
| if (match.from.line >= this.gap.to) break; | ||
| this.matches.splice(i++, 0, match); | ||
| if (this.matches.length > MAX_MATCHES) break; | ||
| } | ||
| this.gap = null; | ||
| }; | ||
|
|
||
| function offsetLine(line, changeStart, sizeChange) { | ||
| if (line <= changeStart) return line; | ||
| return Math.max(changeStart, line + sizeChange); | ||
| } | ||
|
|
||
| SearchAnnotation.prototype.onChange = function(change) { | ||
| var startLine = change.from.line; | ||
| var endLine = CodeMirror.changeEnd(change).line; | ||
| var sizeChange = endLine - change.to.line; | ||
| if (this.gap) { | ||
| this.gap.from = Math.min(offsetLine(this.gap.from, startLine, sizeChange), change.from.line); | ||
| this.gap.to = Math.max(offsetLine(this.gap.to, startLine, sizeChange), change.from.line); | ||
| } else { | ||
| this.gap = {from: change.from.line, to: endLine + 1}; | ||
| } | ||
|
|
||
| if (sizeChange) for (var i = 0; i < this.matches.length; i++) { | ||
| var match = this.matches[i]; | ||
| var newFrom = offsetLine(match.from.line, startLine, sizeChange); | ||
| if (newFrom != match.from.line) match.from = CodeMirror.Pos(newFrom, match.from.ch); | ||
| var newTo = offsetLine(match.to.line, startLine, sizeChange); | ||
| if (newTo != match.to.line) match.to = CodeMirror.Pos(newTo, match.to.ch); | ||
| } | ||
| clearTimeout(this.update); | ||
| var self = this; | ||
| this.update = setTimeout(function() { self.updateAfterChange(); }, 250); | ||
| }; | ||
|
|
||
| SearchAnnotation.prototype.updateAfterChange = function() { | ||
| this.findMatches(); | ||
| this.annotation.update(this.matches); | ||
| }; | ||
|
|
||
| SearchAnnotation.prototype.clear = function() { | ||
| this.cm.off("change", this.changeHandler); | ||
| this.annotation.clear(); | ||
| }; | ||
| }); |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| <!doctype html> | ||
|
|
||
| <title>CodeMirror: Panel Demo</title> | ||
| <meta charset="utf-8"/> | ||
| <link rel=stylesheet href="../doc/docs.css"> | ||
|
|
||
| <link rel="stylesheet" href="../lib/codemirror.css"> | ||
| <script src="../lib/codemirror.js"></script> | ||
| <script src="../mode/javascript/javascript.js"></script> | ||
| <script src="../addon/display/panel.js"></script> | ||
| <style type="text/css"> | ||
| .border {border: 1px solid black; border-bottom: 1px solid black;} | ||
| .add { background: orange; padding: 1px 3px; color: white !important; border-radius: 4px; } | ||
| .panel { | ||
| background-image: linear-gradient(to bottom, #ffffaa, #ffffdd); | ||
| padding: 3px 7px; | ||
| } | ||
| .panel.top { border-bottom: 1px solid #dd6; } | ||
| .panel.bottom { border-top: 1px solid #dd6; } | ||
| .panel span { cursor: pointer; } | ||
| </style> | ||
|
|
||
| <div id=nav> | ||
| <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> | ||
|
|
||
| <ul> | ||
| <li><a href="../index.html">Home</a> | ||
| <li><a href="../doc/manual.html">Manual</a> | ||
| <li><a href="https://github.com/codemirror/codemirror">Code</a> | ||
| </ul> | ||
| <ul> | ||
| <li><a class=active href="#">Panel</a> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <article> | ||
| <h2>Panel Demo</h2> | ||
| <form><div class="border"><textarea id="code" name="code"></textarea></div></form> | ||
|
|
||
| <script id="localscript">var textarea = document.getElementById("code"); | ||
| var script = document.getElementById("localscript"); | ||
| textarea.value = (script.textContent || | ||
| script.innerText || | ||
| script.innerHTML); | ||
| editor = CodeMirror.fromTextArea(textarea, { | ||
| lineNumbers: true | ||
| }); | ||
|
|
||
| function addPanel(where) { | ||
| var node = document.createElement("div"); | ||
| node.className = "panel " + where; | ||
| var close = node.appendChild(document.createElement("span")); | ||
| close.textContent = "âś– Remove this panel"; | ||
| var widget = editor.addPanel(node, {position: where}); | ||
| CodeMirror.on(close, "click", function() { widget.clear(); }); | ||
| }</script> | ||
|
|
||
| <p>The <a href="../doc/manual.html#addon_panel"><code>panel</code></a> | ||
| addon allows you to display panels <a class=add | ||
| href="javascript:addPanel('top')">above</a> or <a class=add | ||
| href="javascript:addPanel('bottom')">below</a> an editor. Click the | ||
| links in the previous paragraph to add panels to the editor.</p> | ||
|
|
||
| </article> |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| <!doctype html> | ||
|
|
||
| <title>CodeMirror: Simple Scrollbar Demo</title> | ||
| <meta charset="utf-8"/> | ||
| <link rel=stylesheet href="../doc/docs.css"> | ||
|
|
||
| <link rel="stylesheet" href="../lib/codemirror.css"> | ||
| <link rel="stylesheet" href="../addon/scroll/simplescrollbars.css"> | ||
| <script src="../lib/codemirror.js"></script> | ||
| <script src="../mode/markdown/markdown.js"></script> | ||
| <script src="../mode/xml/xml.js"></script> | ||
| <script src="../addon/scroll/simplescrollbars.js"></script> | ||
|
|
||
| <div id=nav> | ||
| <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> | ||
|
|
||
| <ul> | ||
| <li><a href="../index.html">Home</a> | ||
| <li><a href="../doc/manual.html">Manual</a> | ||
| <li><a href="https://github.com/codemirror/codemirror">Code</a> | ||
| </ul> | ||
| <ul> | ||
| <li><a class=active href="#">Simple Scrollbar</a> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <article> | ||
| <h2>Simple Scrollbar Demo</h2> | ||
| <form><textarea id="code" name="code"># Custom Scrollbars | ||
|
|
||
| This is a piece of text that creates scrollbars | ||
|
|
||
| Lorem ipsum dolor sit amet, turpis nec facilisis neque vestibulum adipiscing, magna nunc est luctus orci a, | ||
| aliquam duis ad volutpat nostra. Vestibulum ultricies suspendisse commodo volutpat pede sed. Bibendum odio | ||
| dignissim, ad vitae mollis ac sed nibh quis, suspendisse diam, risus quas blandit phasellus luctus nec, | ||
| integer nunc vitae posuere scelerisque. Lobortis quam porta conubia nulla. Et nisl ac, imperdiet vitae ac. | ||
| Parturient sit. Et vestibulum euismod, rutrum nunc libero mauris purus convallis. Cum id adipiscing et eget | ||
| pretium rutrum, ultrices sapien magnis fringilla sit lorem, eu vitae scelerisque ipsum aliquet, magna sed | ||
| fusce vel. | ||
|
|
||
| Lectus ultricies libero dolor convallis, sed etiam vel hendrerit egestas viverra, at urna mauris, eget | ||
| vulputate dolor voluptatem, nulla eget sollicitudin. Sed tincidunt, elit sociis. Mattis mi tortor dui id | ||
| sodales mi, maecenas nam fringilla risus turpis mauris praesent, imperdiet maecenas ultrices nonummy tellus | ||
| quis est. Scelerisque nec pharetra quis varius fringilla. Varius vestibulum non dictum pharetra, tincidunt in | ||
| vestibulum iaculis molestie, id condimentum blandit elit urna magna pulvinar, quam suspendisse pellentesque | ||
| donec. Vel amet ad ac. Nec aut viverra, morbi mi neque massa, turpis enim proin. Tellus eu, fermentum velit | ||
| est convallis aliquam velit, rutrum in diam lacus, praesent tempor pellentesque dictum semper augue. Felis | ||
| explicabo massa amet lectus phasellus dolor. Ut lorem quis arcu neque felis ultricies, senectus vitae | ||
| curabitur sed pellentesque et, id sed risus in sed ac accumsan, blandit arcu quam duis nunc. | ||
|
|
||
| Sed leo sollicitudin odio vitae, purus sit egestas, justo eros inceptos auctor fermentum lectus. Ligula luctus | ||
| turpis, quod massa vitae elementum orci, nullam fringilla elit tortor. Justo ante tempor amet quam posuere | ||
| volutpat. Facilisis pede erat ut hac ultrices ipsum, wisi duis sit metus. Dolor vitae est sed sed vitae. Sed | ||
| eu ligula, morbi vestibulum nunc nibh velit ut taciti, ligula elit semper sagittis in, auctor arcu vel eget. | ||
| Mauris at vitae nec suspendisse et, aenean proin blandit suscipit. Morbi quam, dolor ultricies. Viverra | ||
| tempus. Suspendisse sit dapibus, ac fuga aenean, magna nisl nonummy augue posuere, dictum ut fuga velit | ||
| parturient augue interdum, mattis sit tellus. | ||
|
|
||
| Vehicula commodo tempus curabitur eros, lacinia erat vulputate lorem vel fermentum donec, lectus sed conubia | ||
| id pellentesque. Vel senectus donec pede aliquet dolor sit, nec vivamus justo placerat interdum maecenas, | ||
| sodales euismod. Quis netus sapien amet, vestibulum quam nec amet lacinia, quis aliquet, tempor vivamus tellus | ||
| enim, suscipit quis eleifend. Amet class phasellus orci pretium, risus in nulla. Neque sit ullamcorper, | ||
| ultricies platea id nec suspendisse ac. Et elementum. Dictum nam, ut dui fermentum egestas facilisis elit | ||
| augue, adipiscing donec ipsum erat nam pellentesque convallis, vestibulum vestibulum risus id nulla ut mauris, | ||
| curabitur aute aptent. Ultrices orci wisi dui ipsum praesent, pharetra felis eu quis. Est fringilla etiam, | ||
| maxime sem dapibus et eget, mi enim dignissim nec pretium, augue vehicula, volutpat proin. Et occaecati | ||
| lobortis viverra, cum in sed, vivamus tellus. Libero at malesuada est vivamus leo tortor. | ||
| </textarea></form> | ||
|
|
||
| <p>The <a href="../doc/manual.html#addon_simplescrollbars"><code>simplescrollbars</code></a> addon defines two | ||
| styles of non-native scrollbars: <a href="javascript:editor.setOption('scrollbarStyle', 'simple')"><code>"simple"</code></a> and <a href="javascript:editor.setOption('scrollbarStyle', 'overlay')"><code>"overlay"</code></a> (click to try), which can be passed to | ||
| the <a href="../doc/manual.html#option_scrollbarStyle"><code>scrollbarStyle</code></a> option. These implement | ||
| the scrollbar using DOM elements, allowing more control over | ||
| its <a href="../addon/scroll/simplescrollbars.css">appearance</a>.</p> | ||
|
|
||
| <script> | ||
| var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | ||
| lineNumbers: true, | ||
| scrollbarStyle: "simple" | ||
| }); | ||
| </script> | ||
| </article> |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| // CodeMirror, copyright (c) by Marijn Haverbeke and others | ||
| // Distributed under an MIT license: http://codemirror.net/LICENSE | ||
|
|
||
| (function(mod) { | ||
| if (typeof exports == "object" && typeof module == "object") // CommonJS | ||
| mod(require("../../lib/codemirror"), require("../clike/clike")); | ||
| else if (typeof define == "function" && define.amd) // AMD | ||
| define(["../../lib/codemirror", "../clike/clike"], mod); | ||
| else // Plain browser env | ||
| mod(CodeMirror); | ||
| })(function(CodeMirror) { | ||
| "use strict"; | ||
|
|
||
| var keywords = ("this super static final const abstract class extends external factory " + | ||
| "implements get native operator set typedef with enum throw rethrow " + | ||
| "assert break case continue default in return new deferred async await " + | ||
| "try catch finally do else for if switch while import library export " + | ||
| "part of show hide is").split(" "); | ||
| var blockKeywords = "try catch finally do else for if switch while".split(" "); | ||
| var atoms = "true false null".split(" "); | ||
| var builtins = "void bool num int double dynamic var String".split(" "); | ||
|
|
||
| function set(words) { | ||
| var obj = {}; | ||
| for (var i = 0; i < words.length; ++i) obj[words[i]] = true; | ||
| return obj; | ||
| } | ||
|
|
||
| CodeMirror.defineMIME("application/dart", { | ||
| name: "clike", | ||
| keywords: set(keywords), | ||
| multiLineStrings: true, | ||
| blockKeywords: set(blockKeywords), | ||
| builtin: set(builtins), | ||
| atoms: set(atoms), | ||
| hooks: { | ||
| "@": function(stream) { | ||
| stream.eatWhile(/[\w\$_]/); | ||
| return "meta"; | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| CodeMirror.registerHelper("hintWords", "application/dart", keywords.concat(atoms).concat(builtins)); | ||
|
|
||
| // This is needed to make loading through meta.js work. | ||
| CodeMirror.defineMode("dart", function(conf) { | ||
| return CodeMirror.getMode(conf, "application/dart"); | ||
| }, "clike"); | ||
| }); |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| <!doctype html> | ||
|
|
||
| <title>CodeMirror: Dart mode</title> | ||
| <meta charset="utf-8"/> | ||
| <link rel=stylesheet href="../../doc/docs.css"> | ||
| <link rel="stylesheet" href="../../lib/codemirror.css"> | ||
| <script src="../../lib/codemirror.js"></script> | ||
| <script src="../clike/clike.js"></script> | ||
| <script src="dart.js"></script> | ||
| <style>.CodeMirror {border: 1px solid #dee;}</style> | ||
| <div id=nav> | ||
| <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png"></a> | ||
|
|
||
| <ul> | ||
| <li><a href="../../index.html">Home</a> | ||
| <li><a href="../../doc/manual.html">Manual</a> | ||
| <li><a href="https://github.com/codemirror/codemirror">Code</a> | ||
| </ul> | ||
| <ul> | ||
| <li><a href="../index.html">Language modes</a> | ||
| <li><a class=active href="#">Dart</a> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <article> | ||
| <h2>Dart mode</h2> | ||
| <form> | ||
| <textarea id="code" name="code"> | ||
| import 'dart:math' show Random; | ||
|
|
||
| void main() { | ||
| print(new Die(n: 12).roll()); | ||
| } | ||
|
|
||
| // Define a class. | ||
| class Die { | ||
| // Define a class variable. | ||
| static Random shaker = new Random(); | ||
|
|
||
| // Define instance variables. | ||
| int sides, value; | ||
|
|
||
| // Define a method using shorthand syntax. | ||
| String toString() => '$value'; | ||
|
|
||
| // Define a constructor. | ||
| Die({int n: 6}) { | ||
| if (4 <= n && n <= 20) { | ||
| sides = n; | ||
| } else { | ||
| // Support for errors and exceptions. | ||
| throw new ArgumentError(/* */); | ||
| } | ||
| } | ||
|
|
||
| // Define an instance method. | ||
| int roll() { | ||
| return value = shaker.nextInt(sides) + 1; | ||
| } | ||
| } | ||
| </textarea> | ||
| </form> | ||
|
|
||
| <script> | ||
| var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | ||
| lineNumbers: true, | ||
| mode: "application/dart" | ||
| }); | ||
| </script> | ||
|
|
||
| </article> |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,195 @@ | ||
| // CodeMirror, copyright (c) by Marijn Haverbeke and others | ||
| // Distributed under an MIT license: http://codemirror.net/LICENSE | ||
|
|
||
| (function(mod) { | ||
| if (typeof exports == "object" && typeof module == "object") // CommonJS | ||
| mod(require("../../lib/codemirror")); | ||
| else if (typeof define == "function" && define.amd) // AMD | ||
| define(["../../lib/codemirror"], mod); | ||
| else // Plain browser env | ||
| mod(CodeMirror); | ||
| })(function(CodeMirror) { | ||
| "use strict"; | ||
|
|
||
| CodeMirror.defineMode("ebnf", function (config) { | ||
| var commentType = {slash: 0, parenthesis: 1}; | ||
| var stateType = {comment: 0, _string: 1, characterClass: 2}; | ||
| var bracesMode = null; | ||
|
|
||
| if (config.bracesMode) | ||
| bracesMode = CodeMirror.getMode(config, config.bracesMode); | ||
|
|
||
| return { | ||
| startState: function () { | ||
| return { | ||
| stringType: null, | ||
| commentType: null, | ||
| braced: 0, | ||
| lhs: true, | ||
| localState: null, | ||
| stack: [], | ||
| inDefinition: false | ||
| }; | ||
| }, | ||
| token: function (stream, state) { | ||
| if (!stream) return; | ||
|
|
||
| //check for state changes | ||
| if (state.stack.length === 0) { | ||
| //strings | ||
| if ((stream.peek() == '"') || (stream.peek() == "'")) { | ||
| state.stringType = stream.peek(); | ||
| stream.next(); // Skip quote | ||
| state.stack.unshift(stateType._string); | ||
| } else if (stream.match(/^\/\*/)) { //comments starting with /* | ||
| state.stack.unshift(stateType.comment); | ||
| state.commentType = commentType.slash; | ||
| } else if (stream.match(/^\(\*/)) { //comments starting with (* | ||
| state.stack.unshift(stateType.comment); | ||
| state.commentType = commentType.parenthesis; | ||
| } | ||
| } | ||
|
|
||
| //return state | ||
| //stack has | ||
| switch (state.stack[0]) { | ||
| case stateType._string: | ||
| while (state.stack[0] === stateType._string && !stream.eol()) { | ||
| if (stream.peek() === state.stringType) { | ||
| stream.next(); // Skip quote | ||
| state.stack.shift(); // Clear flag | ||
| } else if (stream.peek() === "\\") { | ||
| stream.next(); | ||
| stream.next(); | ||
| } else { | ||
| stream.match(/^.[^\\\"\']*/); | ||
| } | ||
| } | ||
| return state.lhs ? "property string" : "string"; // Token style | ||
|
|
||
| case stateType.comment: | ||
| while (state.stack[0] === stateType.comment && !stream.eol()) { | ||
| if (state.commentType === commentType.slash && stream.match(/\*\//)) { | ||
| state.stack.shift(); // Clear flag | ||
| state.commentType = null; | ||
| } else if (state.commentType === commentType.parenthesis && stream.match(/\*\)/)) { | ||
| state.stack.shift(); // Clear flag | ||
| state.commentType = null; | ||
| } else { | ||
| stream.match(/^.[^\*]*/); | ||
| } | ||
| } | ||
| return "comment"; | ||
|
|
||
| case stateType.characterClass: | ||
| while (state.stack[0] === stateType.characterClass && !stream.eol()) { | ||
| if (!(stream.match(/^[^\]\\]+/) || stream.match(/^\\./))) { | ||
| state.stack.shift(); | ||
| } | ||
| } | ||
| return "operator"; | ||
| } | ||
|
|
||
| var peek = stream.peek(); | ||
|
|
||
| if (bracesMode !== null && (state.braced || peek === "{")) { | ||
| if (state.localState === null) | ||
| state.localState = bracesMode.startState(); | ||
|
|
||
| var token = bracesMode.token(stream, state.localState), | ||
| text = stream.current(); | ||
|
|
||
| if (!token) { | ||
| for (var i = 0; i < text.length; i++) { | ||
| if (text[i] === "{") { | ||
| if (state.braced === 0) { | ||
| token = "matchingbracket"; | ||
| } | ||
| state.braced++; | ||
| } else if (text[i] === "}") { | ||
| state.braced--; | ||
| if (state.braced === 0) { | ||
| token = "matchingbracket"; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| return token; | ||
| } | ||
|
|
||
| //no stack | ||
| switch (peek) { | ||
| case "[": | ||
| stream.next(); | ||
| state.stack.unshift(stateType.characterClass); | ||
| return "bracket"; | ||
| case ":": | ||
| case "|": | ||
| case ";": | ||
| stream.next(); | ||
| return "operator"; | ||
| case "%": | ||
| if (stream.match("%%")) { | ||
| return "header"; | ||
| } else if (stream.match(/[%][A-Za-z]+/)) { | ||
| return "keyword"; | ||
| } else if (stream.match(/[%][}]/)) { | ||
| return "matchingbracket"; | ||
| } | ||
| break; | ||
| case "/": | ||
| if (stream.match(/[\/][A-Za-z]+/)) { | ||
| return "keyword"; | ||
| } | ||
| case "\\": | ||
| if (stream.match(/[\][a-z]+/)) { | ||
| return "string-2"; | ||
| } | ||
| case ".": | ||
| if (stream.match(".")) { | ||
| return "atom"; | ||
| } | ||
| case "*": | ||
| case "-": | ||
| case "+": | ||
| case "^": | ||
| if (stream.match(peek)) { | ||
| return "atom"; | ||
| } | ||
| case "$": | ||
| if (stream.match("$$")) { | ||
| return "builtin"; | ||
| } else if (stream.match(/[$][0-9]+/)) { | ||
| return "variable-3"; | ||
| } | ||
| case "<": | ||
| if (stream.match(/<<[a-zA-Z_]+>>/)) { | ||
| return "builtin"; | ||
| } | ||
| } | ||
|
|
||
| if (stream.match(/^\/\//)) { | ||
| stream.skipToEnd(); | ||
| return "comment"; | ||
| } else if (stream.match(/return/)) { | ||
| return "operator"; | ||
| } else if (stream.match(/^[a-zA-Z_][a-zA-Z0-9_]*/)) { | ||
| if (stream.match(/(?=[\(.])/)) { | ||
| return "variable"; | ||
| } else if (stream.match(/(?=[\s\n]*[:=])/)) { | ||
| return "def"; | ||
| } | ||
| return "variable-2"; | ||
| } else if (["[", "]", "(", ")"].indexOf(stream.peek()) != -1) { | ||
| stream.next(); | ||
| return "bracket"; | ||
| } else if (!stream.eatSpace()) { | ||
| stream.next(); | ||
| } | ||
| return null; | ||
| } | ||
| }; | ||
| }); | ||
|
|
||
| CodeMirror.defineMIME("text/x-ebnf", "ebnf"); | ||
| }); |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| <!doctype html> | ||
| <html> | ||
| <head> | ||
| <title>CodeMirror: EBNF Mode</title> | ||
| <meta charset="utf-8"/> | ||
| <link rel=stylesheet href="../../doc/docs.css"> | ||
|
|
||
| <link rel="stylesheet" href="../../lib/codemirror.css"> | ||
| <script src="../../lib/codemirror.js"></script> | ||
| <script src="../javascript/javascript.js"></script> | ||
| <script src="ebnf.js"></script> | ||
| <style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style> | ||
| </head> | ||
| <body> | ||
| <div id=nav> | ||
| <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png"></a> | ||
|
|
||
| <ul> | ||
| <li><a href="../../index.html">Home</a> | ||
| <li><a href="../../doc/manual.html">Manual</a> | ||
| <li><a href="https://github.com/codemirror/codemirror">Code</a> | ||
| </ul> | ||
| <ul> | ||
| <li><a href="../index.html">Language modes</a> | ||
| <li><a class=active href="#">EBNF Mode</a> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <article> | ||
| <h2>EBNF Mode (bracesMode setting = "javascript")</h2> | ||
| <form><textarea id="code" name="code"> | ||
| /* description: Parses end executes mathematical expressions. */ | ||
|
|
||
| /* lexical grammar */ | ||
| %lex | ||
|
|
||
| %% | ||
| \s+ /* skip whitespace */ | ||
| [0-9]+("."[0-9]+)?\b return 'NUMBER'; | ||
| "*" return '*'; | ||
| "/" return '/'; | ||
| "-" return '-'; | ||
| "+" return '+'; | ||
| "^" return '^'; | ||
| "(" return '('; | ||
| ")" return ')'; | ||
| "PI" return 'PI'; | ||
| "E" return 'E'; | ||
| <<EOF>> return 'EOF'; | ||
|
|
||
| /lex | ||
|
|
||
| /* operator associations and precedence */ | ||
|
|
||
| %left '+' '-' | ||
| %left '*' '/' | ||
| %left '^' | ||
| %left UMINUS | ||
|
|
||
| %start expressions | ||
|
|
||
| %% /* language grammar */ | ||
|
|
||
| expressions | ||
| : e EOF | ||
| {print($1); return $1;} | ||
| ; | ||
|
|
||
| e | ||
| : e '+' e | ||
| {$$ = $1+$3;} | ||
| | e '-' e | ||
| {$$ = $1-$3;} | ||
| | e '*' e | ||
| {$$ = $1*$3;} | ||
| | e '/' e | ||
| {$$ = $1/$3;} | ||
| | e '^' e | ||
| {$$ = Math.pow($1, $3);} | ||
| | '-' e %prec UMINUS | ||
| {$$ = -$2;} | ||
| | '(' e ')' | ||
| {$$ = $2;} | ||
| | NUMBER | ||
| {$$ = Number(yytext);} | ||
| | E | ||
| {$$ = Math.E;} | ||
| | PI | ||
| {$$ = Math.PI;} | ||
| ;</textarea></form> | ||
| <script> | ||
| var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | ||
| mode: {name: "ebnf"}, | ||
| lineNumbers: true, | ||
| bracesMode: 'javascript' | ||
| }); | ||
| </script> | ||
| <h3>The EBNF Mode</h3> | ||
| <p> Created by <a href="https://github.com/robertleeplummerjr">Robert Plummer</a></p> | ||
| </article> | ||
| </body> | ||
| </html> |