Adjust tab completion widget if too close to bottom of page.

This commit is contained in:
Brian E. Granger 2013-09-25 19:21:54 -07:00
parent 7c4c9d1c1b
commit c3d128d38a

View File

@ -199,15 +199,32 @@ var IPython = (function (IPython) {
this.complete.attr('id', 'complete');
this.sel = $('<select style="width: auto"/>').attr('multiple', 'true').attr('size', Math.min(10, this.raw_result.length));
//var pos = this.editor.cursorCoords();
var cur = this.editor.getCursor();
cur.ch = cur.ch-matched_text.length;
var pos = this.editor.cursorCoords(cur);
this.complete.css('left', pos.left-3 + 'px');
this.complete.css('top', pos.bottom+1 + 'px');
this.complete.append(this.sel);
$('body').append(this.complete);
// After everything is on the page compute the postion.
// We invert the completion list and put it above the code if it is too
// close to the bottom of the page.
var cur = this.editor.getCursor();
cur.ch = cur.ch-matched_text.length;
var pos = this.editor.cursorCoords(cur);
var invert = false;
var left = pos.left-3;
var top;
var cheight = this.complete.height();
var wheight = $(window).height();
console.log(pos.bottom, cheight, wheight)
if (pos.bottom+cheight+5 > wheight) {
invert = true;
top = pos.top-cheight-4;
} else {
invert = false;
top = pos.bottom+1;
}
this.complete.css('left', left + 'px');
this.complete.css('top', top + 'px');
//build the container
var that = this;
this.sel.dblclick(function () {
@ -218,7 +235,7 @@ var IPython = (function (IPython) {
that.keydown(event);
});
this.build_gui_list(this.raw_result);
this.build_gui_list(this.raw_result, invert);
this.sel.focus();
// Opera sometimes ignores focusing a freshly created node
@ -232,13 +249,23 @@ var IPython = (function (IPython) {
this.editor.replaceRange(completion.str, completion.from, completion.to);
}
Completer.prototype.build_gui_list = function (completions) {
// Need to clear the all list
for (var i = 0; i < completions.length; ++i) {
var opt = $('<option/>').text(completions[i].str).addClass(completions[i].type);
this.sel.append(opt);
Completer.prototype.build_gui_list = function (completions, invert) {
invert = invert || false;
if (!invert) {
for (var i = 0; i < completions.length; ++i) {
var opt = $('<option/>').text(completions[i].str).addClass(completions[i].type);
this.sel.append(opt);
}
this.sel.children().first().attr('selected', 'true');
this.sel.scrollTop(0);
} else {
for (var i = (completions.length-1); i > -1; --i) {
var opt = $('<option/>').text(completions[i].str).addClass(completions[i].type);
this.sel.append(opt);
}
this.sel.children().last().attr('selected', 'true');
this.sel.scrollTop(this.sel[0].scrollHeight);
}
this.sel.children().first().attr('selected', 'true');
}
Completer.prototype.close = function () {