initial code for bookmark mode completion dialog

1 files changed, 155 insertions, 0 deletions

diff --git a/completionDialog.js b/completionDialog.js
new file mode 100644
index 00000000..f7ebefa5
--- /dev/null
+++ b/completionDialog.js
@@ -0,0 +1,155 @@
+(function(window, document) {
+
+  var CompletionDialog = function(options) {
+    this.options = options
+  }
+
+  CompletionDialog.prototype = {
+    show: function() {
+      this.showCompletions()
+    },
+    showCompletions: function(searchString, completions) {
+      this.searchString = searchString;
+      this.completions = completions;
+      if(!this.initialized) {
+        initialize.call(this);
+        this.initialized=true;
+      }
+      var container = this.getDisplayElement()
+      clearChildren(container);
+
+      if(searchString===undefined) {
+        this.container.className = "dialog";
+        createDivInside(container).innerHTML=this.options.initialSearchText || "Begin typing"
+      }
+      else {
+        this.container.className = "dialog completions";
+        var searchBar = createDivInside(container)
+        searchBar.innerHTML=searchString
+        searchBar.className="searchBar"
+
+        searchResults = createDivInside(container)
+        searchResults.className="searchResults"
+        if(completions.length<=0) {
+          var resultDiv = createDivInside(searchResults)
+          resultDiv.className="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="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";
+      if(!this.isShown) {
+        this.keyPressListener.enable();
+        clearInterval(this._tweenId);
+        this._tweenId = Tween.fade(container, 1.0, 150);
+        this.isShown=true;
+      }
+    },
+    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
+    }
+  }
+
+  var initialize = function() {
+    addCssToPage(completionCSS)
+    
+    this.currentSelection=0;
+    var self = this;
+    this.keyPressListener = new KeyPressListener({
+      keyDown: function(event) {
+        var keyChar = getKeyChar(event);
+        if(keyChar==="up") {
+          if(self.currentSelection>0) {
+            self.currentSelection-=1;
+          }
+          self.showCompletions(self.searchString, self.completions) 
+        }
+        else if(keyChar==="down") {
+          if(self.currentSelection<self.completions.length-1) {
+            self.currentSelection+=1;
+          }
+          self.showCompletions(self.searchString, self.completions) 
+        }
+        else if(event.keyCode == keyCodes.enter) {
+          self.options.onSelect(self.completions[self.currentSelection])
+        }
+        
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    })
+  }
+
+  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 = ".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;" +
+    "}"+
+    ".completions {"+
+    "width:400px;"+
+    "}"+
+    ".completions .searchBar {"+
+    "border-bottom: 1px solid #b3b3b3;"+
+    "}"+
+    ".completions .searchResults {"+
+    "}"+
+    ".completions .searchResults .selected{"+
+    "background-color:#aaa;"+
+    "border-radius: 4px;" +
+    "}"+
+    ".completions div{"+
+    "padding:4px;"+
+    "}"+
+    ".completions div strong{"+
+    "font-weight:bold;"+
+    "}"+
+    ".completions .noResults{"+
+    "color:#555;"+
+    "}";
+
+  window.CompletionDialog = CompletionDialog;
+
+}(window, document))