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 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 HashHandler = require("./keyboard/hash_handler").HashHandler;
|
||||
|
|
@ -60,87 +61,17 @@ var Autocomplete = function() {
|
|||
|
||||
|
||||
(function() {
|
||||
|
||||
this.$init = function(e) {
|
||||
var el = dom.createElement("div");
|
||||
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.$init = function() {
|
||||
this.popup = new AcePopup();
|
||||
this.popup.on("click", function(e) {
|
||||
this.insertMatch();
|
||||
}.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) {
|
||||
if (!this.popup)
|
||||
this.$init();
|
||||
|
||||
|
||||
this.popup.setData(this.completions.filtered)
|
||||
|
||||
var renderer = editor.renderer;
|
||||
|
|
@ -205,19 +136,13 @@ var Autocomplete = function() {
|
|||
var row = this.popup.getRow();
|
||||
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) {
|
||||
case "up": row = row <= 0 ? max : row - 1; break;
|
||||
case "down": row = row >= max ? 0 : row + 1; break;
|
||||
case "start": row = 0; break;
|
||||
case "end": row = max; break
|
||||
}
|
||||
|
||||
if (choices[row])
|
||||
dom.addCssClass(choices[row], "autocomplete_selected");
|
||||
|
||||
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);
|
||||
|
||||
Autocomplete.startCommand = {
|
||||
|
|
@ -400,6 +234,187 @@ var FilteredList = function(array, mutateData) {
|
|||
|
||||
}).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.FilteredList = FilteredList;
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue