Permalink
Browse files

Dynamic editor height

  • Loading branch information...
1 parent 95f9acb commit b77585e4a663cd185e23130a4f472c29717a3b33 @weavejester committed Mar 9, 2012
Showing with 32 additions and 4 deletions.
  1. +28 −4 resources/wepl/public/index.html
  2. +4 −0 resources/wepl/public/js/jquery.min.js
@@ -2,23 +2,47 @@
<html>
<head>
<title>Wepl</title>
+ <script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/ace.js" type="text/javascript"></script>
<script src="/js/ace/theme-monokai.js" type="text/javascript"></script>
<script src="/js/ace/mode-clojure.js" type="text/javascript"></script>
<script>
var editor = null
+
+ var fixHeight = function(editor) {
+ var prevLineCount = null
+ var container = $('#editor')
+
+ return function() {
+ var lineCount = editor.getSession().getValue().split("\n").length
+
+ if (lineCount == prevLineCount) return
+ prevLineCount = lineCount
+
+ var height = container.find(".ace_line").height() * lineCount
+ container.height(height)
+ container.find(":first-child").height(height)
+ editor.renderer.onResize(true)
+ }
+ }
+
window.onload = function() {
editor = ace.edit("editor")
+
+ editor.setHighlightActiveLine(false)
editor.renderer.setShowGutter(false)
- editor.setHighlightActiveLine(false);
editor.renderer.setHScrollBarAlwaysVisible(false)
+
editor.setTheme("ace/theme/monokai")
- var ClojureMode = require("ace/mode/clojure").Mode;
- editor.getSession().setMode(new ClojureMode());
+
+ var ClojureMode = require("ace/mode/clojure").Mode
+ editor.getSession().setMode(new ClojureMode())
+
+ editor.getSession().on('change', fixHeight(editor));
};
</script>
</head>
<body>
- <div id="editor" style="height: 50px; width: 500px"></div>
+ <div id="editor" style="height: 16px; width: 500px"></div>
</body>
</html>
Oops, something went wrong.

0 comments on commit b77585e

Please sign in to comment.