jyapayne/ace
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tweak the popup some more

Browse source
This commit is contained in:
nightwing 2013-04-12 00:29:24 +04:00
commit 5c1db2dbcc
3 changed files with 134 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

2
demo/kitchen-sink/demo.js
View file

@ -559,7 +559,7 @@ ace.commands.bindKey("Tab", function(editor) {
editor.execCommand("indent"); editor.execCommand("indent");
}) })
var Autocompleter = require("./autocompleter").Autocompleter; var Autocompleter = require("ace/autocomplete").Autocomplete;
Autocompleter.addTo(env.editor) Autocompleter.addTo(env.editor)
}); });

194
lib/ace/autocomplete.js
View file

@ -35,6 +35,7 @@ var EditSession = require("./edit_session").EditSession;
var Renderer = require("./virtual_renderer").VirtualRenderer; var Renderer = require("./virtual_renderer").VirtualRenderer;
var Range = require("./range").Range; var Range = require("./range").Range;
var event = require("./lib/event"); var event = require("./lib/event");
var lang = require("./lib/lang");
var dom = require("./lib/dom"); var dom = require("./lib/dom");
var HashHandler = require("./keyboard/hash_handler").HashHandler; var HashHandler = require("./keyboard/hash_handler").HashHandler;
@ -59,7 +60,6 @@ var Autocomplete = function() {
this.$mousedownListener = this.mousedownListener.bind(this); this.$mousedownListener = this.mousedownListener.bind(this);
}; };
(function() { (function() {
this.$init = function() { this.$init = function() {
this.popup = new AcePopup(); this.popup = new AcePopup();
@ -82,18 +82,7 @@ var Autocomplete = function() {
pos.left += rect.left; pos.left += rect.left;
pos.left += renderer.$gutterLayer.gutterWidth; pos.left += renderer.$gutterLayer.gutterWidth;
var el = this.popup.container; this.popup.show(pos, lineHeight);
if (pos.top > window.innerHeight / 2 + lineHeight) {
el.style.top = ""
el.style.bottom = window.innerHeight - pos.top + "px";
} else {
pos.top += lineHeight;
el.style.top = pos.top + "px";
el.style.bottom = ""
}
el.style.left = pos.left + "px";
el.style.display = "";
renderer.updateText(); renderer.updateText();
}; };
@ -105,13 +94,13 @@ var Autocomplete = function() {
this.editor.removeEventListener("mousedown", this.changeListener); this.editor.removeEventListener("mousedown", this.changeListener);
if (this.popup) if (this.popup)
this.popup.container.style.display = "none"; this.popup.hide();
this.editor.Autocomplete.activated = false; this.editor.completer.activated = false;
}; };
this.changeListener = function(e) { this.changeListener = function(e) {
if (this.editor.Autocomplete.activated) if (this.editor.completer.activated)
Autocomplete.startCommand.exec(this.editor); Autocomplete.startCommand.exec(this.editor);
else else
this.detach(); this.detach();
@ -161,16 +150,16 @@ var Autocomplete = function() {
}; };
this.commands = { this.commands = {
"up": function(editor) { editor.Autocomplete.goTo("up"); }, "up": function(editor) { editor.completer.goTo("up"); },
"down": function(editor) { editor.Autocomplete.goTo("down"); }, "down": function(editor) { editor.completer.goTo("down"); },
"ctrl-up": function(editor) { editor.Autocomplete.goTo("start"); }, "ctrl-up": function(editor) { editor.completer.goTo("start"); },
"ctrl-down": function(editor) { editor.Autocomplete.goTo("end"); }, "ctrl-down": function(editor) { editor.completer.goTo("end"); },
"esc": function(editor) { editor.Autocomplete.detach(); }, "esc": function(editor) { editor.completer.detach(); },
"space": function(editor) { editor.Autocomplete.detach(); editor.insert(" ");}, "space": function(editor) { editor.completer.detach(); editor.insert(" ");},
"Return": function(editor) { editor.Autocomplete.insertMatch(); }, "Return": function(editor) { editor.completer.insertMatch(); },
"Shift-Return": function(editor) { editor.Autocomplete.insertMatch(true); }, "Shift-Return": function(editor) { editor.completer.insertMatch(true); },
"Tab": function(editor) { editor.Autocomplete.insertMatch(); } "Tab": function(editor) { editor.completer.insertMatch(); }
}; };
this.complete = function(editor) { this.complete = function(editor) {
@ -179,10 +168,10 @@ var Autocomplete = function() {
var _self = this; var _self = this;
this.editor = editor; this.editor = editor;
if (editor.Autocomplete != this) { if (editor.completer != this) {
if (editor.Autocomplete) if (editor.completer)
editor.Autocomplete.detach(); editor.completer.detach();
editor.Autocomplete = this; editor.completer = this;
} }
editor.keyBinding.addKeyboardHandler(this.keyboardHandler); editor.keyBinding.addKeyboardHandler(this.keyboardHandler);
@ -211,10 +200,10 @@ var Autocomplete = function() {
Autocomplete.startCommand = { Autocomplete.startCommand = {
name: "startAutocomplete", name: "startAutocomplete",
exec: function(editor) { exec: function(editor) {
if (!editor.Autocomplete) if (!editor.completer)
editor.Autocomplete = new Autocomplete(); editor.completer = new Autocomplete();
editor.Autocomplete.complete(editor); editor.completer.complete(editor);
editor.Autocomplete.activated = true; editor.completer.activated = true;
}, },
bindKey: "Ctrl-Space|Shift-Space|Alt-Space" bindKey: "Ctrl-Space|Shift-Space|Alt-Space"
} }
@ -257,15 +246,15 @@ var $singleLineEditor = function(el) {
renderer.$computeLayerConfig = function() { renderer.$computeLayerConfig = function() {
var config = this.layerConfig; var config = this.layerConfig;
var height = this.session.getScreenLength() * this.lineHeight; var height = this.session.getScreenLength() * this.lineHeight;
if (config.height != height) {
var maxHeight = this.maxLines * this.lineHeight var maxHeight = this.maxLines * this.lineHeight
var desiredHeight = Math.max(this.lineHeight, Math.min(maxHeight, height))
var vScroll = height > maxHeight; var vScroll = height > maxHeight;
if (desiredHeight != this.desiredHeight || vScroll != this.$vScroll) {
if (vScroll != this.$vScroll || this.lineHeight != config.lineHeight) { if (vScroll != this.$vScroll) {
if (vScroll) { if (vScroll) {
this.scrollBar.element.style.display = ""; this.scrollBar.element.style.display = "";
this.scrollBar.width = this.scrollBar.orginalWidth; this.scrollBar.width = this.scrollBar.orginalWidth;
this.container.style.height = maxHeight + "px";
height = maxHeight; height = maxHeight;
this.scrollTop = height - this.maxLines * this.lineHeight; this.scrollTop = height - this.maxLines * this.lineHeight;
} else { } else {
@ -275,39 +264,17 @@ var $singleLineEditor = function(el) {
this.$size.height = 0; this.$size.height = 0;
this.$size.width = 0; this.$size.width = 0;
this.onResize();
this.$vScroll = vScroll; this.$vScroll = vScroll;
} }
if (this.$vScroll) this.container.style.height = desiredHeight + "px";
return renderer.$computeLayerConfigWithScroll(); this.onResize();
this.$loop.changes = 0
this.container.style.height = height + "px"; this.desiredHeight = desiredHeight;
this.scroller.style.height = height + "px"; this.scroller.style.overflowX="hidden"
this.content.style.height = height + "px";
this._emit("resize");
} }
return renderer.$computeLayerConfigWithScroll();
var longestLine = this.$getLongestLine();
var firstRow = 0;
var lastRow = this.session.getLength();
this.scrollTop = 0;
config.width = longestLine;
config.padding = this.$padding;
config.firstRow = 0;
config.firstRowScreen = 0;
config.lastRow = lastRow;
config.lineHeight = this.lineHeight;
config.characterWidth = this.characterWidth;
config.minHeight = height;
config.maxHeight = height;
config.offset = 0;
config.height = height;
this.$gutterLayer.element.style.marginTop = 0 + "px";
this.content.style.marginTop = 0 + "px";
this.content.style.width = longestLine + 2 * this.$padding + "px";
}; };
@ -362,38 +329,92 @@ var AcePopup = function(e) {
popup.setRow = function(line) { popup.setRow = function(line) {
popup.setHighlightActiveLine(line != -1); popup.setHighlightActiveLine(line != -1);
popup.gotoLine(line + 1); popup.selection.clearSelection();
popup.moveCursorTo(line, 0 || 0);
}; };
var hoverMarker = new Range(0,0,0,Infinity); var hoverMarker = new Range(-1,0,-1,Infinity);
hoverMarker.id = popup.session.addMarker(hoverMarker, "ace_line-hover", "fullLine"); hoverMarker.id = popup.session.addMarker(hoverMarker, "ace_line-hover", "fullLine");
popup.on("mousemove", function(e) { popup.on("mousemove", function(e) {
//if (popup.lastOpened)
var row = e.getDocumentPosition().row; var row = e.getDocumentPosition().row;
hoverMarker.start.row = hoverMarker.end.row = row; hoverMarker.start.row = hoverMarker.end.row = row;
popup.session._emit("changeBackMarker"); popup.session._emit("changeBackMarker");
}); });
event.addListener(popup.container, "mouseout", function(e) { var hideHoverMarker = function() {
hoverMarker.start.row = hoverMarker.end.row = -1; hoverMarker.start.row = hoverMarker.end.row = -1;
popup.session._emit("changeBackMarker"); popup.session._emit("changeBackMarker");
};
event.addListener(popup.container, "mouseout", hideHoverMarker);
popup.on("hide", hideHoverMarker);
popup.on("changeSelection", hideHoverMarker);
popup.on("mousewheel", function(e) {
setTimeout(function() {
popup._signal("mousemove", e);
})
}); });
popup.data = []
popup.setData = function(list) { popup.setData = function(list) {
var value = "" popup.data = list || [];
if (list) { popup.setValue(lang.stringRepeat("\n", list.length), -1);
if (typeof list[0] == "string") };
value = list.join("\n"); popup.session.doc.getLength = function() {
else return popup.data.length;
value = list.map(function(x){return x.value}).join("\n"); };
popup.session.doc.getLine = function(i) {
var data = popup.data[i];
if (typeof data == "string")
return data;
return (data && data.value) || "";
};
var bgTokenizer = popup.session.bgTokenizer
bgTokenizer.$tokenizeRow = function(i) {
var data = popup.data[i];
var tokens = [];
if (!data)
return tokens;
if (typeof data == "string")
data = {type: data, value: data}//return [{type: "", value: data}];
tokens.push({type: "", value: data.value});
if (data.type) {
var maxW = popup.renderer.$size.scrollerWidth / popup.renderer.layerConfig.characterWidth;
if (data.type.length + data.value.length < maxW - 2)
tokens.push({type: "rightAlignedText", value: data.type});
}
return tokens;
};
bgTokenizer.$updateOnChange = noop
// highlight
popup.setHighlight = function(re) {
popup.session.highlight(re);
popup.session._emit("changeFrontMarker");
};
popup.hide = function() {
this.container.style.display = "none";
this._signal("hide");
} }
this.setValue(value, -1); popup.show = function(pos, lineHeight) {
}; var el = this.container;
if (pos.top > window.innerHeight / 2 + lineHeight) {
el.style.top = ""
el.style.bottom = window.innerHeight - pos.top + "px";
} else {
pos.top += lineHeight;
el.style.top = pos.top + "px";
el.style.bottom = ""
}
popup.setHighlight = function(re) { el.style.left = pos.left + "px";
ace.session.highlight(re); el.style.display = "";
ace.session._emit("changeFrontMarker");
};
this._signal("show");
}
return popup; return popup;
}; };
@ -404,8 +425,17 @@ dom.importCssString("\
.ace_autocomplete.ace-tm .ace_line-hover {\ .ace_autocomplete.ace-tm .ace_line-hover {\
border: 1px solid #abbffe;\ border: 1px solid #abbffe;\
position: absolute;\ position: absolute;\
background: rgb(233,233,232);\ background: rgba(233,233,253,0.4);\
z-index: 2;\ z-index: 2;\
margin-top: -1px;\
}\
.ace_rightAlignedText {\
color: gray;\
display: inline-block;\
position: absolute;\
right: 4px;\
text-align: right;\
z-index: -1;\
}\ }\
.ace_autocomplete {\ .ace_autocomplete {\
width: 200px;\ width: 200px;\

2
lib/ace/mouse/default_gutter_handler.js
View file

@ -38,7 +38,7 @@ function GutterHandler(mouseHandler) {
var gutter = editor.renderer.$gutterLayer; var gutter = editor.renderer.$gutterLayer;
mouseHandler.editor.setDefaultHandler("guttermousedown", function(e) { mouseHandler.editor.setDefaultHandler("guttermousedown", function(e) {
if (!editor.isFocused()) if (!editor.isFocused() || e.getButton() != 0)
return; return;
var gutterRegion = gutter.getRegion(e); var gutterRegion = gutter.getRegion(e);