Merge remote-tracking branch 'remotes/origin/statusbar'
This commit is contained in:
commit
41e1f08dfe
6 changed files with 116 additions and 49 deletions
3
demo/demo_helper.js
Normal file
3
demo/demo_helper.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
ace.require("ace/lib/net").get(document.baseURI, function(t){
|
||||
editor.setValue(t, 1);
|
||||
})
|
||||
|
|
@ -458,7 +458,7 @@ event.addListener(container, "drop", function(e) {
|
|||
|
||||
|
||||
|
||||
var StatusBar = require("./statusbar").StatusBar;
|
||||
var StatusBar = require("ace/ext/statusbar").StatusBar;
|
||||
new StatusBar(env.editor, cmdLine.container);
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,48 +0,0 @@
|
|||
define(function(require, exports, module) {
|
||||
"use strict";
|
||||
/** simple statusbar **/
|
||||
var dom = require("ace/lib/dom");
|
||||
var lang = require("ace/lib/lang");
|
||||
|
||||
var StatusBar = function(editor, parentNode) {
|
||||
this.element = dom.createElement("div");
|
||||
this.element.style.cssText = "color: gray; position:absolute; right:0; border-left:1px solid";
|
||||
parentNode.appendChild(this.element);
|
||||
|
||||
var statusUpdate = lang.delayedCall(function(){
|
||||
this.updateStatus(editor)
|
||||
}.bind(this));
|
||||
editor.on("changeStatus", function() {
|
||||
statusUpdate.schedule(100);
|
||||
});
|
||||
editor.on("changeSelection", function() {
|
||||
statusUpdate.schedule(100);
|
||||
});
|
||||
};
|
||||
|
||||
(function(){
|
||||
this.updateStatus = function(editor) {
|
||||
var status = [];
|
||||
function add(str, separator) {
|
||||
str && status.push(str, separator || "|");
|
||||
}
|
||||
|
||||
if (editor.$vimModeHandler)
|
||||
add(editor.$vimModeHandler.getStatusText());
|
||||
else if (editor.commands.recording)
|
||||
add("REC");
|
||||
|
||||
var c = editor.selection.lead;
|
||||
add(c.row + ":" + c.column, " ");
|
||||
if (!editor.selection.isEmpty()) {
|
||||
var r = editor.getSelectionRange();
|
||||
add("(" + (r.end.row - r.start.row) + ":" +(r.end.column - r.start.column) + ")");
|
||||
}
|
||||
status.pop();
|
||||
this.element.textContent = status.join("");
|
||||
};
|
||||
}).call(StatusBar.prototype);
|
||||
|
||||
exports.StatusBar = StatusBar;
|
||||
|
||||
});
|
||||
|
|
@ -41,4 +41,10 @@ body {
|
|||
|
||||
#controls td + td {
|
||||
text-align: left;
|
||||
}
|
||||
.ace_status-indicator {
|
||||
color: gray;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
border-left: 1px solid;
|
||||
}
|
||||
57
demo/statusbar.html
Normal file
57
demo/statusbar.html
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>ACE Editor StatusBar Demo</title>
|
||||
<style type="text/css" media="screen">
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#editor {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 20px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
#statusBar {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 20px;
|
||||
background-color: rgb(245, 245, 245);
|
||||
color: gray;
|
||||
}
|
||||
.ace_status-indicator {
|
||||
color: gray;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
border-left: 1px solid;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<pre id="editor"></pre>
|
||||
<div id="statusBar">ace rocks!</div>
|
||||
|
||||
<script src="../build/src-noconflict/ace.js"></script>
|
||||
<script src="../build/src-noconflict/ext-statusbar.js"></script>
|
||||
<script>
|
||||
var editor = ace.edit("editor");
|
||||
var StatusBar = ace.require('ace/ext/statusbar').StatusBar;
|
||||
// create a simple selection status indicator
|
||||
var statusBar = new StatusBar(editor, document.getElementById('statusBar'));
|
||||
editor.setTheme("ace/theme/dawn");
|
||||
editor.session.setMode("ace/mode/html");
|
||||
</script>
|
||||
|
||||
<script src="./demo_helper.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
49
lib/ace/ext/statusbar.js
Normal file
49
lib/ace/ext/statusbar.js
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
define(function(require, exports, module) {
|
||||
"use strict";
|
||||
/** simple statusbar **/
|
||||
var dom = require("ace/lib/dom");
|
||||
var lang = require("ace/lib/lang");
|
||||
|
||||
var StatusBar = function(editor, parentNode) {
|
||||
this.element = dom.createElement("div");
|
||||
this.element.className = "ace_status-indicator";
|
||||
this.element.style.cssText = "display: inline-block;";
|
||||
parentNode.appendChild(this.element);
|
||||
|
||||
var statusUpdate = lang.delayedCall(function(){
|
||||
this.updateStatus(editor)
|
||||
}.bind(this));
|
||||
editor.on("changeStatus", function() {
|
||||
statusUpdate.schedule(100);
|
||||
});
|
||||
editor.on("changeSelection", function() {
|
||||
statusUpdate.schedule(100);
|
||||
});
|
||||
};
|
||||
|
||||
(function(){
|
||||
this.updateStatus = function(editor) {
|
||||
var status = [];
|
||||
function add(str, separator) {
|
||||
str && status.push(str, separator || "|");
|
||||
}
|
||||
|
||||
if (editor.$vimModeHandler)
|
||||
add(editor.$vimModeHandler.getStatusText());
|
||||
else if (editor.commands.recording)
|
||||
add("REC");
|
||||
|
||||
var c = editor.selection.lead;
|
||||
add(c.row + ":" + c.column, " ");
|
||||
if (!editor.selection.isEmpty()) {
|
||||
var r = editor.getSelectionRange();
|
||||
add("(" + (r.end.row - r.start.row) + ":" +(r.end.column - r.start.column) + ")");
|
||||
}
|
||||
status.pop();
|
||||
this.element.textContent = status.join("");
|
||||
};
|
||||
}).call(StatusBar.prototype);
|
||||
|
||||
exports.StatusBar = StatusBar;
|
||||
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue