From 7293bb142f25bfffdacea43e09c54332b0f69632 Mon Sep 17 00:00:00 2001 From: nightwing Date: Mon, 7 Jan 2013 17:57:43 +0400 Subject: [PATCH] fix popup --- lib/ace/autocomplete.js | 363 +++++++++++++++++++++------------------- 1 file changed, 189 insertions(+), 174 deletions(-) diff --git a/lib/ace/autocomplete.js b/lib/ace/autocomplete.js index c5a4b7fc..432fd4e9 100644 --- a/lib/ace/autocomplete.js +++ b/lib/ace/autocomplete.js @@ -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;