1 files changed, 178 insertions, 0 deletions
diff --git a/completionDialog.js b/completionDialog.js
new file mode 100644
index 00000000..c96ce92c
--- /dev/null
+++ b/completionDialog.js
@@ -0,0 +1,178 @@
+(function(window, document) {
+
+  var CompletionDialog = function(options) {
+    this.options = options
+  }
+
+  CompletionDialog.prototype = {
+    show: function() {
+      if(!this.isShown) {
+        this.isShown=true;
+        this.query = [];
+        if(!this.initialized) {
+          initialize.call(this);
+          this.initialized=true;
+        }
+        this.keyPressListener.enable();
+        render.call(this)
+        clearInterval(this._tweenId);
+        this._tweenId = Tween.fade(this.container, 1.0, 150);
+      }
+    },
+    hide: function() {
+      if(this.isShown) {
+        this.keyPressListener.disable();
+        this.isShown=false;
+        this.currentSelection=0;
+        clearInterval(this._tweenId);
+        this._tweenId = Tween.fade(this.container, 0, 150);
+      }
+    },
+    getDisplayElement: function() {
+      if(!this.container) {
+        this.container = createDivInside(document.body)
+      }
+      return this.container
+    },
+    getQueryString: function() {
+      return this.query.join("")
+    }
+  }
+
+  var initialize = function() {
+    var self = this
+    addCssToPage(completionCSS)
+    
+    self.currentSelection=0;
+
+    self.keyPressListener = new KeyPressListener({
+      keyDown: function(event) {
+        var keyChar = getKeyChar(event);
+        if(keyChar==="up") {
+          if(self.currentSelection>0) {
+            self.currentSelection-=1;
+          }
+          render.call(self,self.getQueryString(), self.completions) 
+        }
+        else if(keyChar==="down") {
+          if(self.currentSelection<self.completions.length-1) {
+            self.currentSelection+=1;
+          }
+          render.call(self,self.getQueryString(), self.completions) 
+        }
+        else if(event.keyCode == keyCodes.enter) {
+          self.options.onSelect(self.completions[self.currentSelection])
+        }
+        else if (event.keyCode == keyCodes.backspace || event.keyCode == keyCodes.deleteKey) {
+          if (self.query.length > 0) {
+            self.query.pop();
+            self.options.source(self.getQueryString(), function(completions) {
+              render.call(self, self.getQueryString(), completions)
+            })
+          }
+        } 
+        else if(keyChar!=="left" && keyChar!="right") {
+          self.query.push(keyChar);
+          self.options.source(self.getQueryString(), function(completions) {
+            render.call(self, self.getQueryString(), completions)
+          })
+        } 
+        
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    })
+  }
+
+  var render = function(searchString, completions) {
+    if(this.isShown) {
+      this.searchString = searchString;
+      this.completions = completions;
+      var container = this.getDisplayElement()
+      clearChildren(container);
+
+      if(searchString===undefined) {
+        this.container.className = "vimium-dialog";
+        createDivInside(container).innerHTML=this.options.initialSearchText || "Begin typing"
+      }
+      else {
+        this.container.className = "vimium-dialog vimium-completions";
+        var searchBar = createDivInside(container)
+        searchBar.innerHTML=searchString
+        searchBar.className="vimium-searchBar"
+
+        searchResults = createDivInside(container)
+        searchResults.className="vimium-searchResults"
+        if(completions.length<=0) {
+          var resultDiv = createDivInside(searchResults)
+          resultDiv.className="vimium-noResults"
+          resultDiv.innerHTML="No results found"
+        }
+        else {
+          for(var i=0;i<completions.length;i++) {
+            var resultDiv = createDivInside(searchResults)
+            if(i===this.currentSelection) {
+              resultDiv.className="vimium-selected"
+            }
+            resultDiv.innerHTML=this.options.renderOption(searchString, completions[i])
+          }
+        }
+      }
+
+      container.style.top=(window.innerHeight/2-container.clientHeight/2) + "px";
+      container.style.left=(window.innerWidth/2-container.clientWidth/2) + "px";
+    }
+  };
+  var createDivInside = function(parent) {
+    var element = document.createElement("div");
+    parent.appendChild(element);
+    return element
+  }
+  
+  var clearChildren = function(elem) {
+    if (elem.hasChildNodes()) {
+      while (elem.childNodes.length >= 1) {
+        elem.removeChild(elem.firstChild);       
+      } 
+    }
+  }
+  
+  var completionCSS = ".vimium-dialog {"+
+    "position:fixed;"+
+    "background-color: #ebebeb;" +
+    "z-index: 99999998;" +
+    "border: 1px solid #b3b3b3;" +
+    "font-size: 12px;" +
+    "text-align:left;"+
+    "color: black;" +
+    "padding:10px;"+
+    "border-radius: 4px;" +
+    "font-family: Lucida Grande, Arial, Sans;" +
+    "}"+
+    ".vimium-completions {"+
+    "width:400px;"+
+    "}"+
+    ".vimium-completions .vimium-searchBar {"+
+    "height: 15px;"+
+    "border-bottom: 1px solid #b3b3b3;"+
+    "}"+
+    ".vimium-completions .vimium-searchResults {"+
+    "}"+
+    ".vimium-completions .vimium-searchResults .vimium-selected{"+
+    "background-color:#aaa;"+
+    "border-radius: 4px;" +
+    "}"+
+    ".vimium-completions div{"+
+    "padding:4px;"+
+    "}"+
+    ".vimium-completions div strong{"+
+    "color: black;" +
+    "font-weight:bold;"+
+    "}"+
+    ".vimium-completions .vimium-noResults{"+
+    "color:#555;"+
+    "}";
+
+  window.CompletionDialog = CompletionDialog;
+
+}(window, document))