fix popup
This commit is contained in:
nightwing
parent
06c10fb934
commit
7293bb142f
1 changed files with 189 additions and 174 deletions
|
|
@ -33,7 +33,8 @@ define(function(require, exports, module) {
|
||||||
|
|
||||||
var EditSession = require("./edit_session").EditSession;
|
var EditSession = require("./edit_session").EditSession;
|
||||||
var Renderer = require("./virtual_renderer").VirtualRenderer;
|
var Renderer = require("./virtual_renderer").VirtualRenderer;
|
||||||
var UndoManager = require("./undomanager").UndoManager;
|
var Range = require("./range").Range;
|
||||||
|
var event = require("./lib/event");
|
||||||
|
|
||||||
var dom = require("./lib/dom");
|
var dom = require("./lib/dom");
|
||||||
var HashHandler = require("./keyboard/hash_handler").HashHandler;
|
var HashHandler = require("./keyboard/hash_handler").HashHandler;
|
||||||
|
|
@ -60,87 +61,17 @@ var Autocomplete = function() {
|
||||||
|
|
||||||
|
|
||||||
(function() {
|
(function() {
|
||||||
|
this.$init = function() {
|
||||||
this.$init = function(e) {
|
this.popup = new AcePopup();
|
||||||
var el = dom.createElement("div");
|
this.popup.on("click", function(e) {
|
||||||
var popup = new this.$singleLineEditor(el);
|
|
||||||
document.body.appendChild(el);
|
|
||||||
el.style.width="200px"
|
|
||||||
el.style.zIndex="20000"
|
|
||||||
el.style.background="white"
|
|
||||||
el.style.border="lightgray solid"
|
|
||||||
el.style.position="fixed"
|
|
||||||
el.style.display = "none"
|
|
||||||
popup.renderer.content.style.cursor="default"
|
|
||||||
|
|
||||||
var noop = function(){};
|
|
||||||
|
|
||||||
popup.focus = noop;
|
|
||||||
popup.$isFocused = true;
|
|
||||||
|
|
||||||
popup.renderer.$cursorLayer.restartTimer = noop;
|
|
||||||
popup.renderer.$cursorLayer.update = noop;
|
|
||||||
popup.renderer.$cursorLayer.element.style.display = "none";
|
|
||||||
|
|
||||||
popup.renderer.maxLines = 6
|
|
||||||
popup.renderer.$keepTextAreaAtCursor=false
|
|
||||||
|
|
||||||
popup.setHighlightActiveLine(true);
|
|
||||||
popup.setSession(new EditSession(""));
|
|
||||||
|
|
||||||
popup.on("mousedown", function(e) {
|
|
||||||
var pos = e.getDocumentPosition();
|
|
||||||
popup.moveCursorToPosition(pos);
|
|
||||||
popup.selection.clearSelection();
|
|
||||||
e.stop();
|
|
||||||
});
|
|
||||||
|
|
||||||
/* popup.session.setMode({
|
|
||||||
$
|
|
||||||
}) */
|
|
||||||
|
|
||||||
popup.getRow = function() {
|
|
||||||
var line = this.getCursorPosition().row;
|
|
||||||
if (line == 0 && !this.getHighlightActiveLine())
|
|
||||||
line = -1;
|
|
||||||
return line;
|
|
||||||
};
|
|
||||||
|
|
||||||
popup.setRow = function(line) {
|
|
||||||
popup.setHighlightActiveLine(line != -1);
|
|
||||||
popup.gotoLine(line + 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
popup.on("click", function(e) {
|
|
||||||
this.insertMatch();
|
this.insertMatch();
|
||||||
}.bind(this));
|
}.bind(this));
|
||||||
|
|
||||||
popup.setData = function(list) {
|
|
||||||
var value = ""
|
|
||||||
if (list) {
|
|
||||||
if (typeof list[0] == "string")
|
|
||||||
value = list.join("\n");
|
|
||||||
else
|
|
||||||
value = list.map(function(x){return x.value}).join("\n");
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setValue(value, -1);
|
|
||||||
};
|
|
||||||
|
|
||||||
popup.setHighlight = function(re) {
|
|
||||||
ace.session.highlight(re);
|
|
||||||
ace.session._emit("changeFrontMarker");
|
|
||||||
// select first item
|
|
||||||
dom.addCssClass(_self.popup.container.getElementsByClassName("ace_autocomplete")[0].childNodes[0], "autocomplete_selected");
|
|
||||||
};
|
|
||||||
|
|
||||||
this.popup = popup;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
this.openPopup = function(editor) {
|
this.openPopup = function(editor) {
|
||||||
if (!this.popup)
|
if (!this.popup)
|
||||||
this.$init();
|
this.$init();
|
||||||
|
|
||||||
this.popup.setData(this.completions.filtered)
|
this.popup.setData(this.completions.filtered)
|
||||||
|
|
||||||
var renderer = editor.renderer;
|
var renderer = editor.renderer;
|
||||||
|
|
@ -205,19 +136,13 @@ var Autocomplete = function() {
|
||||||
var row = this.popup.getRow();
|
var row = this.popup.getRow();
|
||||||
var max = this.popup.session.getLength() - 1;
|
var max = this.popup.session.getLength() - 1;
|
||||||
|
|
||||||
var choices = this.popup.container.getElementsByClassName("ace_text-layer")[0].childNodes;
|
|
||||||
if (choices[row])
|
|
||||||
dom.removeCssClass(choices[row], "autocomplete_selected");
|
|
||||||
|
|
||||||
switch(where) {
|
switch(where) {
|
||||||
case "up": row = row <= 0 ? max : row - 1; break;
|
case "up": row = row <= 0 ? max : row - 1; break;
|
||||||
case "down": row = row >= max ? 0 : row + 1; break;
|
case "down": row = row >= max ? 0 : row + 1; break;
|
||||||
case "start": row = 0; break;
|
case "start": row = 0; break;
|
||||||
case "end": row = max; break
|
case "end": row = max; break
|
||||||
}
|
}
|
||||||
|
|
||||||
if (choices[row])
|
|
||||||
dom.addCssClass(choices[row], "autocomplete_selected");
|
|
||||||
this.popup.setRow(row);
|
this.popup.setRow(row);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -281,97 +206,6 @@ var Autocomplete = function() {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
this.$singleLineEditor = function(el) {
|
|
||||||
var renderer = new Renderer(el);
|
|
||||||
el.style.overflow = "hidden";
|
|
||||||
renderer.scrollBar.element.style.top = "0";
|
|
||||||
renderer.scrollBar.element.style.display = "none";
|
|
||||||
renderer.scrollBar.orginalWidth = renderer.scrollBar.width;
|
|
||||||
renderer.scrollBar.width = 0;
|
|
||||||
renderer.content.style.height = "auto";
|
|
||||||
|
|
||||||
renderer.screenToTextCoordinates = function(x, y) {
|
|
||||||
var pos = this.pixelToScreenCoordinates(x, y);
|
|
||||||
return this.session.screenToDocumentPosition(
|
|
||||||
Math.min(this.session.getScreenLength() - 1, Math.max(pos.row, 0)),
|
|
||||||
Math.max(pos.column, 0)
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
renderer.maxLines = 4;
|
|
||||||
renderer.$computeLayerConfigWithScroll = renderer.$computeLayerConfig;
|
|
||||||
renderer.$computeLayerConfig = function() {
|
|
||||||
var config = this.layerConfig;
|
|
||||||
var height = this.session.getScreenLength() * this.lineHeight;
|
|
||||||
if (config.height != height) {
|
|
||||||
var vScroll = height > this.maxLines * this.lineHeight;
|
|
||||||
|
|
||||||
if (vScroll != this.$vScroll) {
|
|
||||||
if (vScroll) {
|
|
||||||
this.scrollBar.element.style.display = "";
|
|
||||||
this.scrollBar.width = this.scrollBar.orginalWidth;
|
|
||||||
this.container.style.height = config.height + "px";
|
|
||||||
height = config.height;
|
|
||||||
this.scrollTop = height - this.maxLines * this.lineHeight;
|
|
||||||
} else {
|
|
||||||
this.scrollBar.element.style.display = "none";
|
|
||||||
this.scrollBar.width = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.onResize();
|
|
||||||
this.$vScroll = vScroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.$vScroll)
|
|
||||||
return renderer.$computeLayerConfigWithScroll();
|
|
||||||
|
|
||||||
this.container.style.height = height + "px";
|
|
||||||
this.scroller.style.height = height + "px";
|
|
||||||
this.content.style.height = height + "px";
|
|
||||||
this._emit("resize");
|
|
||||||
}
|
|
||||||
|
|
||||||
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";
|
|
||||||
};
|
|
||||||
renderer.isScrollableBy=function(){return false};
|
|
||||||
|
|
||||||
renderer.setStyle("ace_autocomplete");
|
|
||||||
|
|
||||||
var Editor = require("ace/editor").Editor;
|
|
||||||
var editor = new Editor(renderer);
|
|
||||||
|
|
||||||
//var MultiSelect = require("ace/multi_select").MultiSelect;
|
|
||||||
//new MultiSelect(editor);
|
|
||||||
//editor.session.setUndoManager(new UndoManager());
|
|
||||||
|
|
||||||
editor.setHighlightActiveLine(false);
|
|
||||||
editor.setShowPrintMargin(false);
|
|
||||||
editor.renderer.setShowGutter(false);
|
|
||||||
editor.renderer.setHighlightGutterLine(false);
|
|
||||||
|
|
||||||
editor.$mouseHandler.$focusWaitTimout = 0;
|
|
||||||
|
|
||||||
return editor;
|
|
||||||
};
|
|
||||||
}).call(Autocomplete.prototype);
|
}).call(Autocomplete.prototype);
|
||||||
|
|
||||||
Autocomplete.startCommand = {
|
Autocomplete.startCommand = {
|
||||||
|
|
@ -400,6 +234,187 @@ var FilteredList = function(array, mutateData) {
|
||||||
|
|
||||||
}).call(FilteredList.prototype);
|
}).call(FilteredList.prototype);
|
||||||
|
|
||||||
|
|
||||||
|
var $singleLineEditor = function(el) {
|
||||||
|
var renderer = new Renderer(el);
|
||||||
|
el.style.overflow = "hidden";
|
||||||
|
renderer.scrollBar.element.style.top = "0";
|
||||||
|
renderer.scrollBar.element.style.display = "none";
|
||||||
|
renderer.scrollBar.orginalWidth = renderer.scrollBar.width;
|
||||||
|
renderer.scrollBar.width = 0;
|
||||||
|
renderer.content.style.height = "auto";
|
||||||
|
|
||||||
|
renderer.screenToTextCoordinates = function(x, y) {
|
||||||
|
var pos = this.pixelToScreenCoordinates(x, y);
|
||||||
|
return this.session.screenToDocumentPosition(
|
||||||
|
Math.min(this.session.getScreenLength() - 1, Math.max(pos.row, 0)),
|
||||||
|
Math.max(pos.column, 0)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
renderer.maxLines = 4;
|
||||||
|
renderer.$computeLayerConfigWithScroll = renderer.$computeLayerConfig;
|
||||||
|
renderer.$computeLayerConfig = function() {
|
||||||
|
var config = this.layerConfig;
|
||||||
|
var height = this.session.getScreenLength() * this.lineHeight;
|
||||||
|
if (config.height != height) {
|
||||||
|
var maxHeight = this.maxLines * this.lineHeight
|
||||||
|
var vScroll = height > maxHeight;
|
||||||
|
|
||||||
|
if (vScroll != this.$vScroll || this.lineHeight != config.lineHeight) {
|
||||||
|
if (vScroll) {
|
||||||
|
this.scrollBar.element.style.display = "";
|
||||||
|
this.scrollBar.width = this.scrollBar.orginalWidth;
|
||||||
|
this.container.style.height = maxHeight + "px";
|
||||||
|
height = maxHeight;
|
||||||
|
this.scrollTop = height - this.maxLines * this.lineHeight;
|
||||||
|
} else {
|
||||||
|
this.scrollBar.element.style.display = "none";
|
||||||
|
this.scrollBar.width = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$size.height = 0;
|
||||||
|
this.$size.width = 0;
|
||||||
|
this.onResize();
|
||||||
|
this.$vScroll = vScroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.$vScroll)
|
||||||
|
return renderer.$computeLayerConfigWithScroll();
|
||||||
|
|
||||||
|
this.container.style.height = height + "px";
|
||||||
|
this.scroller.style.height = height + "px";
|
||||||
|
this.content.style.height = height + "px";
|
||||||
|
this._emit("resize");
|
||||||
|
}
|
||||||
|
|
||||||
|
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";
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
var Editor = require("ace/editor").Editor;
|
||||||
|
var editor = new Editor(renderer);
|
||||||
|
|
||||||
|
editor.setHighlightActiveLine(false);
|
||||||
|
editor.setShowPrintMargin(false);
|
||||||
|
editor.renderer.setShowGutter(false);
|
||||||
|
editor.renderer.setHighlightGutterLine(false);
|
||||||
|
|
||||||
|
editor.$mouseHandler.$focusWaitTimout = 0;
|
||||||
|
|
||||||
|
return editor;
|
||||||
|
};
|
||||||
|
|
||||||
|
var AcePopup = function(e) {
|
||||||
|
var el = dom.createElement("div");
|
||||||
|
var popup = new $singleLineEditor(el);
|
||||||
|
document.body.appendChild(el);
|
||||||
|
el.style.display = "none";
|
||||||
|
popup.renderer.content.style.cursor = "default";
|
||||||
|
popup.renderer.setStyle("ace_autocomplete");
|
||||||
|
|
||||||
|
var noop = function(){};
|
||||||
|
|
||||||
|
popup.focus = noop;
|
||||||
|
popup.$isFocused = true;
|
||||||
|
|
||||||
|
popup.renderer.$cursorLayer.restartTimer = noop;
|
||||||
|
popup.renderer.$cursorLayer.element.style.opacity = 0;
|
||||||
|
|
||||||
|
popup.renderer.maxLines = 8
|
||||||
|
popup.renderer.$keepTextAreaAtCursor = false;
|
||||||
|
|
||||||
|
popup.setHighlightActiveLine(true);
|
||||||
|
popup.setSession(new EditSession(""));
|
||||||
|
|
||||||
|
popup.on("mousedown", function(e) {
|
||||||
|
var pos = e.getDocumentPosition();
|
||||||
|
popup.moveCursorToPosition(pos);
|
||||||
|
popup.selection.clearSelection();
|
||||||
|
e.stop();
|
||||||
|
});
|
||||||
|
|
||||||
|
popup.getRow = function() {
|
||||||
|
var line = this.getCursorPosition().row;
|
||||||
|
if (line == 0 && !this.getHighlightActiveLine())
|
||||||
|
line = -1;
|
||||||
|
return line;
|
||||||
|
};
|
||||||
|
|
||||||
|
popup.setRow = function(line) {
|
||||||
|
popup.setHighlightActiveLine(line != -1);
|
||||||
|
popup.gotoLine(line + 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
var hoverMarker = new Range(0,0,0,Infinity);
|
||||||
|
hoverMarker.id = popup.session.addMarker(hoverMarker, "ace_line-hover", "fullLine");
|
||||||
|
popup.on("mousemove", function(e) {
|
||||||
|
var row = e.getDocumentPosition().row;
|
||||||
|
hoverMarker.start.row = hoverMarker.end.row = row;
|
||||||
|
popup.session._emit("changeBackMarker");
|
||||||
|
});
|
||||||
|
event.addListener(popup.container, "mouseout", function(e) {
|
||||||
|
hoverMarker.start.row = hoverMarker.end.row = -1;
|
||||||
|
popup.session._emit("changeBackMarker");
|
||||||
|
});
|
||||||
|
|
||||||
|
popup.setData = function(list) {
|
||||||
|
var value = ""
|
||||||
|
if (list) {
|
||||||
|
if (typeof list[0] == "string")
|
||||||
|
value = list.join("\n");
|
||||||
|
else
|
||||||
|
value = list.map(function(x){return x.value}).join("\n");
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setValue(value, -1);
|
||||||
|
};
|
||||||
|
|
||||||
|
popup.setHighlight = function(re) {
|
||||||
|
ace.session.highlight(re);
|
||||||
|
ace.session._emit("changeFrontMarker");
|
||||||
|
};
|
||||||
|
|
||||||
|
return popup;
|
||||||
|
};
|
||||||
|
|
||||||
|
dom.importCssString("\
|
||||||
|
.ace_autocomplete.ace-tm .ace_marker-layer .ace_active-line {\
|
||||||
|
background-color: #abbffe;\
|
||||||
|
}\
|
||||||
|
.ace_autocomplete.ace-tm .ace_line-hover {\
|
||||||
|
border: 1px solid #abbffe;\
|
||||||
|
position: absolute;\
|
||||||
|
background: rgb(233,233,232);\
|
||||||
|
z-index: 2;\
|
||||||
|
}\
|
||||||
|
.ace_autocomplete {\
|
||||||
|
width: 200px;\
|
||||||
|
z-index: 200000;\
|
||||||
|
background: #f8f8f8;\
|
||||||
|
border: 1px lightgray solid;\
|
||||||
|
position: fixed;\
|
||||||
|
}");
|
||||||
|
|
||||||
exports.Autocomplete = Autocomplete;
|
exports.Autocomplete = Autocomplete;
|
||||||
exports.FilteredList = FilteredList;
|
exports.FilteredList = FilteredList;
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue