diff options
Diffstat (limited to 'pages')
| -rw-r--r-- | pages/hud.coffee | 87 | ||||
| -rw-r--r-- | pages/hud.html | 3 |
2 files changed, 90 insertions, 0 deletions
diff --git a/pages/hud.coffee b/pages/hud.coffee index 68283451..37debc4e 100644 --- a/pages/hud.coffee +++ b/pages/hud.coffee @@ -1,3 +1,49 @@ +findMode = null + +# Set the input element's text, and move the cursor to the end. +setTextInInputElement = (inputElement, text) -> + inputElement.textContent = text + # Move the cursor to the end. Based on one of the solutions here: + # http://stackoverflow.com/questions/1125292/how-to-move-cursor-to-end-of-contenteditable-entity + range = document.createRange() + range.selectNodeContents inputElement + range.collapse false + selection = window.getSelection() + selection.removeAllRanges() + selection.addRange range + +document.addEventListener "keydown", (event) -> + inputElement = document.getElementById "hud-find-input" + return unless inputElement? # Don't do anything if we're not in find mode. + transferrableEvent = {} + for key, value of event + transferrableEvent[key] = value if typeof value in ["number", "string"] + + if (event.keyCode in [keyCodes.backspace, keyCodes.deleteKey] and inputElement.textContent.length == 0) or + event.keyCode == keyCodes.enter or KeyboardUtils.isEscape event + + UIComponentServer.postMessage + name: "hideFindMode" + event: transferrableEvent + query: findMode.rawQuery + + else if event.keyCode == keyCodes.upArrow + if rawQuery = FindModeHistory.getQuery findMode.historyIndex + 1 + findMode.historyIndex += 1 + findMode.partialQuery = findMode.rawQuery if findMode.historyIndex == 0 + setTextInInputElement inputElement, rawQuery + findMode.executeQuery() + else if event.keyCode == keyCodes.downArrow + findMode.historyIndex = Math.max -1, findMode.historyIndex - 1 + rawQuery = if 0 <= findMode.historyIndex then FindModeHistory.getQuery findMode.historyIndex else findMode.partialQuery + setTextInInputElement inputElement, rawQuery + findMode.executeQuery() + else + return + + DomUtils.suppressEvent event + false + handlers = show: (data) -> document.getElementById("hud").innerText = data.text @@ -10,6 +56,47 @@ handlers = document.getElementById("hud").classList.add "vimiumUIComponentHidden" document.getElementById("hud").classList.remove "vimiumUIComponentVisible" + showFindMode: (data) -> + hud = document.getElementById "hud" + hud.innerText = "/\u200A" # \u200A is a "hair space", to leave enough space before the caret/first char. + + inputElement = document.createElement "span" + inputElement.contentEditable = "plaintext-only" + setTextInInputElement inputElement, data.text ? "" + inputElement.id = "hud-find-input" + hud.appendChild inputElement + + inputElement.addEventListener "input", executeQuery = (event) -> + # Replace \u00A0 ( ) with a normal space. + findMode.rawQuery = inputElement.textContent.replace "\u00A0", " " + UIComponentServer.postMessage {name: "search", query: findMode.rawQuery} + + countElement = document.createElement "span" + countElement.id = "hud-match-count" + hud.appendChild countElement + inputElement.focus() + + # Replace \u00A0 ( ) with a normal space. + UIComponentServer.postMessage {name: "search", query: inputElement.textContent.replace "\u00A0", " "} + + findMode = + historyIndex: -1 + partialQuery: "" + rawQuery: "" + executeQuery: executeQuery + + updateMatchesCount: ({matchCount, showMatchText}) -> + countElement = document.getElementById "hud-match-count" + return unless countElement? # Don't do anything if we're not in find mode. + + countText = if matchCount > 0 + " (#{matchCount} Match#{if matchCount == 1 then "" else "es"})" + else + " (No matches)" + countElement.textContent = if showMatchText then countText else "" + UIComponentServer.registerHandler (event) -> {data} = event handlers[data.name]? data + +FindModeHistory.init() diff --git a/pages/hud.html b/pages/hud.html index bcb38e04..60d737e1 100644 --- a/pages/hud.html +++ b/pages/hud.html @@ -2,6 +2,9 @@ <head> <title>HUD</title> <link rel="stylesheet" type="text/css" href="../content_scripts/vimium.css" /> + <script type="text/javascript" src="../lib/dom_utils.js"></script> + <script type="text/javascript" src="../lib/keyboard_utils.js"></script> + <script type="text/javascript" src="../lib/find_mode_history.js"></script> <script type="text/javascript" src="ui_component_server.js"></script> <script type="text/javascript" src="hud.js"></script> </head> |