web: improve user jump form

3 files changed, 34 insertions, 33 deletions

diff --git a/app/assets/javascripts/application.js.erb b/app/assets/javascripts/application.js.erb
index ee046a4..9481858 100644
--- a/app/assets/javascripts/application.js.erb
+++ b/app/assets/javascripts/application.js.erb
@@ -7,34 +7,6 @@
 //= require_tree .
 
 $(function() {
-    // Layout: User jump
-    $("#jump_to_dropdown_toggle").click(function() {
-        setTimeout(function() { $("#jump_to_textbox").focus(); }, 0);
-    });
-
-    var previous_jump_to_text;
-    $("#jump_to_textbox").on("keyup", function() {
-        if ($(this).val() != previous_jump_to_text) {
-            previous_jump_to_text = $(this).val();
-            $("#jump_to_user .jump_to_user_suggestion").remove();
-            if ($(this).val().length > 0) {
-                $.getJSON("/i/user_jump_suggest.json", { head: $(this).val() }, function(json) {
-                    json.forEach(function(s) {
-                        $("#jump_to_user").append($("<li />").addClass("jump_to_user_suggestion")
-                            .append($("<a />").attr("href", "/" + s.screen_name).attr("title", s.name + " (@" + s.screen_name + ")")
-                                .append($("<img />").addClass("twitter-icon").attr("src", s.profile_image_url).attr("alt", "@" + s.screen_name).attr("onerror", "this.src = '<%= image_path("profile_image_missing.png") %>'"))
-                                .append($("<span />").text("@" + s.screen_name))));
-                    });
-                });
-            }
-        }
-    });
-    $("#jump_to_form").on("submit", function() {
-        $(this).attr("action", "/" + $("#jump_to_textbox").val());
-    });
-});
-
-$(function() {
     var controller = $("body").data("controller");
     var action = $("body").data("action");
 
diff --git a/app/assets/javascripts/layouts.js.erb b/app/assets/javascripts/layouts.js.erb
new file mode 100644
index 0000000..fd9b044
--- /dev/null
+++ b/app/assets/javascripts/layouts.js.erb
@@ -0,0 +1,29 @@
+$(function() {
+    $("#user-jump-dropdown .dropdown-toggle").click(function() {
+        setTimeout(function() { $("#user-jump-dropdown input").focus(); }, 0);
+    });
+
+    var previousText = "";
+    $("#user-jump-dropdown input").on("keyup", function() {
+        if ($(this).val() != previousText) {
+            previousText = $(this).val();
+            $("#user-jump-dropdown .user-jump-suggestion").remove();
+
+            if (previousText.length > 0) {
+                $.getJSON("/i/user_jump_suggest.json", { head: previousText }, function(json) {
+                    json.forEach(function(s) {
+                        $("#user-jump-dropdown .dropdown-menu")
+                            .append($("<li />").addClass("user-jump-suggestion")
+                                .append($("<a />").attr("href", "/" + s.screen_name).attr("title", s.name + " (@" + s.screen_name + ")")
+                                    .append($("<img />").addClass("twitter-icon").attr("src", s.profile_image_url).attr("alt", "@" + s.screen_name).attr("onerror", "this.src = '<%= image_path("profile_image_missing.png") %>'"))
+                                    .append($("<span />").text("@" + s.screen_name))));
+                    });
+                });
+            }
+        }
+    });
+    $("#user-jump-dropdown form").on("submit", function() {
+        window.location = "/" + $("input", this).val();
+        return false;
+    });
+});
diff --git a/app/views/layouts/_base.html.haml b/app/views/layouts/_base.html.haml
index d1740a9..ff6cfa5 100644
--- a/app/views/layouts/_base.html.haml
+++ b/app/views/layouts/_base.html.haml
@@ -31,15 +31,15 @@
               %li= link_to "Best", best_path
               %li= link_to "Recent", recent_path
               %li= link_to "Timeline", timeline_path
-          %li.dropdown.omittable
-            %a.dropdown-toggle#jump_to_dropdown_toggle{href: "#", data: { toggle: "dropdown" }}<
+          %li.dropdown.omittable#user-jump-dropdown
+            %a.dropdown-toggle{href: "#", data: { toggle: "dropdown" }}<
               User
               %span.caret/
-            %ul.dropdown-menu#jump_to_user
+            %ul.dropdown-menu
               %li
-                %form#jump_to_form{autocomplete: "off"}
+                %form{autocomplete: "off"}
                   .input-group
-                    %input.form-control#jump_to_textbox{type: "text", placeholder: "Username"}
+                    %input.form-control{type: "text", placeholder: "Username"}
                     %span.input-group-btn
                       %button.btn{type: "submit"} Go
           - if logged_in?