This commit is contained in:
nightwing 2013-04-13 20:37:47 +04:00
commit 3c46895f8c
4 changed files with 64 additions and 62 deletions

3
demo/demo_helper.js Normal file
View file

@ -0,0 +1,3 @@
ace.require("ace/lib/net").get(document.baseURI, function(t){
editor.setValue(t, 1);
})

View file

@ -42,7 +42,7 @@ body {
#controls td + td { #controls td + td {
text-align: left; text-align: left;
} }
#lineColIndicator { .ace_status-indicator {
color: gray; color: gray;
position: absolute; position: absolute;
right: 0; right: 0;

View file

@ -28,31 +28,30 @@
background-color: rgb(245, 245, 245); background-color: rgb(245, 245, 245);
color: gray; color: gray;
} }
#statusbar#lineColIndicator { .ace_status-indicator {
border-left:1px solid; color: gray;
position: absolute;
right: 0;
border-left: 1px solid;
} }
</style> </style>
</head> </head>
<body> <body>
<pre id="editor"> <pre id="editor"></pre>
var editor = ace.edit("editor");
var StatusBar = ace.require('ace/ext/statusbar').StatusBar;
var statusBar = new StatusBar(editor, document.getElementById('statusBar'));
editor.setTheme("ace/theme/twilight");
editor.getSession().setMode("ace/mode/javascript");
</pre>
<div id="statusBar">ace rocks!</div> <div id="statusBar">ace rocks!</div>
<script src="../build/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script> <script src="../build/src-noconflict/ace.js"></script>
<script src="../build/src-noconflict/ext-statusbar.js" type="text/javascript" charset="utf-8"></script> <script src="../build/src-noconflict/ext-statusbar.js"></script>
<script> <script>
var editor = ace.edit("editor"); var editor = ace.edit("editor");
var StatusBar = ace.require('ace/ext/statusbar').StatusBar; var StatusBar = ace.require('ace/ext/statusbar').StatusBar;
// create a simple selection status indicator
var statusBar = new StatusBar(editor, document.getElementById('statusBar')); var statusBar = new StatusBar(editor, document.getElementById('statusBar'));
editor.setTheme("ace/theme/twilight"); editor.setTheme("ace/theme/dawn");
editor.getSession().setMode("ace/mode/javascript"); editor.session.setMode("ace/mode/html");
</script> </script>
<script src="./demo_helper.js"></script>
</body> </body>
</html> </html>

View file

@ -1,49 +1,49 @@
define(function(require, exports, module) { define(function(require, exports, module) {
"use strict"; "use strict";
/** simple statusbar **/ /** simple statusbar **/
var dom = require("ace/lib/dom"); var dom = require("ace/lib/dom");
var lang = require("ace/lib/lang"); var lang = require("ace/lib/lang");
var StatusBar = function(editor, parentNode) { var StatusBar = function(editor, parentNode) {
this.element = dom.createElement("div"); this.element = dom.createElement("div");
this.element.id = 'lineColIndicator'; this.element.className = "ace_status-indicator";
this.element.style.cssText = "display: inline-block;"; this.element.style.cssText = "display: inline-block;";
parentNode.appendChild(this.element); parentNode.appendChild(this.element);
var statusUpdate = lang.delayedCall(function(){ var statusUpdate = lang.delayedCall(function(){
this.updateStatus(editor) this.updateStatus(editor)
}.bind(this)); }.bind(this));
editor.on("changeStatus", function() { editor.on("changeStatus", function() {
statusUpdate.schedule(100); statusUpdate.schedule(100);
}); });
editor.on("changeSelection", function() { editor.on("changeSelection", function() {
statusUpdate.schedule(100); statusUpdate.schedule(100);
}); });
}; };
(function(){ (function(){
this.updateStatus = function(editor) { this.updateStatus = function(editor) {
var status = []; var status = [];
function add(str, separator) { function add(str, separator) {
str && status.push(str, separator || "|"); str && status.push(str, separator || "|");
} }
if (editor.$vimModeHandler) if (editor.$vimModeHandler)
add(editor.$vimModeHandler.getStatusText()); add(editor.$vimModeHandler.getStatusText());
else if (editor.commands.recording) else if (editor.commands.recording)
add("REC"); add("REC");
var c = editor.selection.lead; var c = editor.selection.lead;
add(c.row + ":" + c.column, " "); add(c.row + ":" + c.column, " ");
if (!editor.selection.isEmpty()) { if (!editor.selection.isEmpty()) {
var r = editor.getSelectionRange(); var r = editor.getSelectionRange();
add("(" + (r.end.row - r.start.row) + ":" +(r.end.column - r.start.column) + ")"); add("(" + (r.end.row - r.start.row) + ":" +(r.end.column - r.start.column) + ")");
} }
status.pop(); status.pop();
this.element.textContent = status.join(""); this.element.textContent = status.join("");
}; };
}).call(StatusBar.prototype); }).call(StatusBar.prototype);
exports.StatusBar = StatusBar; exports.StatusBar = StatusBar;
}); });