Skip to content

Instantly share code, notes, and snippets.

@enjalot

enjalot/_.md

Created May 12, 2013 06:32
Show Gist options
  • Save enjalot/5562642 to your computer and use it in GitHub Desktop.
Save enjalot/5562642 to your computer and use it in GitHub Desktop.
Download ZIP
codemirror widget test
Raw
_.md
Raw
config.json
{"description":"codemirror widget test","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/5ihJJco.png"}
Raw
inlet.js
var options = {
mode: 'javascript',
lineNumbers: true,
viewportMargin: Infinity,
theme: 'vibrant-ink'
}
var display = d3.select("#display")
var editor = display.append("div").classed("editor", true)
.classed("test-editor", true);
var cm = CodeMirror(editor.node(), options);
cm.setValue("hi\nim so\n1337")
cm.on("cursorActivity", function() {
var pos = cm.getCursor();
console.log("cm cursor", pos);
var widget = display.append("div")
.text("sup with you")
.classed("log-widget", true)
cm.addWidget(pos, widget.node());
})
editor.on("click", function() {
console.log("editor click", arguments);
//clear();
})
display.append("button")
.text("clear")
.on("click", clear);
function clear() {
display.selectAll(".log-widget").remove()
}
Raw
style.css
.test-editor {
width: 400px;
}
.log-widget {
border: 1px solid red;
background: rgba(240,240,240,0.5);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment