fix popup

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,81 +61,11 @@ var Autocomplete = 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();
         }.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) {
@@ -205,10 +136,6 @@ 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;
@@ -216,8 +143,6 @@ var Autocomplete = function() {
             case "end": row = max; break
         }
       
-        if (choices[row])
-            dom.addCssClass(choices[row], "autocomplete_selected");
         this.popup.setRow(row);
     };
 
@@ -281,7 +206,36 @@ var Autocomplete = function() {
         });
     };
     
-    this.$singleLineEditor = function(el) {
+}).call(Autocomplete.prototype);
+
+Autocomplete.startCommand = {
+    name: "startAutocomplete",
+    exec: function(editor) {
+        if (!editor.Autocomplete)
+            editor.Autocomplete = new Autocomplete();
+        editor.Autocomplete.complete(editor);
+        editor.Autocomplete.activated = true;
+    },
+    bindKey: "Ctrl-Space|Shift-Space|Alt-Space"
+}
+Autocomplete.addTo = function(editor) {
+    editor.commands.addCommand(Autocomplete.startCommand);
+}
+
+var FilteredList = function(array, mutateData) {
+    this.all = array;
+    this.filtered = array.concat();
+    this.filterText = "";
+};
+(function(){
+    this.setFilter = function(str) {
+        
+    };
+    
+}).call(FilteredList.prototype);
+
+
+var $singleLineEditor = function(el) {
     var renderer = new Renderer(el);
     el.style.overflow = "hidden";
     renderer.scrollBar.element.style.top = "0";
@@ -304,20 +258,23 @@ var Autocomplete = function() {
         var config = this.layerConfig;
         var height = this.session.getScreenLength() * this.lineHeight;
         if (config.height != height) {
-                var vScroll = height > this.maxLines * this.lineHeight;
+            var maxHeight = this.maxLines * this.lineHeight
+            var vScroll = height > maxHeight;
 
-                if (vScroll != this.$vScroll) {
+            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 = config.height + "px";
+                    this.container.style.height = maxHeight + "px";                        
-                        height = config.height;
+                    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;
             }
@@ -352,17 +309,11 @@ var Autocomplete = function() {
         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);
@@ -372,33 +323,97 @@ var Autocomplete = function() {
 
     return editor;
 };
-}).call(Autocomplete.prototype);
 
-Autocomplete.startCommand = {
+var AcePopup = function(e) {
-    name: "startAutocomplete",
+    var el = dom.createElement("div");
-    exec: function(editor) {
+    var popup = new $singleLineEditor(el);
-        if (!editor.Autocomplete)
+    document.body.appendChild(el);
-            editor.Autocomplete = new Autocomplete();
+    el.style.display = "none";
-        editor.Autocomplete.complete(editor);
+    popup.renderer.content.style.cursor = "default";
-        editor.Autocomplete.activated = true;
+    popup.renderer.setStyle("ace_autocomplete");
-    },
-    bindKey: "Ctrl-Space|Shift-Space|Alt-Space"
-}
-Autocomplete.addTo = function(editor) {
-    editor.commands.addCommand(Autocomplete.startCommand);
-}
     
-var FilteredList = function(array, mutateData) {
+    var noop = function(){};
-    this.all = array;
-    this.filtered = array.concat();
-    this.filterText = "";
-};
-(function(){
-    this.setFilter = function(str) {
     
+    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;
     };
 
-}).call(FilteredList.prototype);
+    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;