[extensions-web] Show the search bar

[Jasper St. Pierre <jstpierre src gnome org>]

commit 34828ff6d671cd3031fcfe6694d23f3778ec9615
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Mon Mar 5 15:32:54 2012 -0500

    Show the search bar
    
    With the new search bar, we're a bit cramped for space, too, so let's
    just rename the site to "Extensions", which should hopefully be enough.

 sweettooth/static/js/main.js      |   17 ++++++++++++++---
 sweettooth/static/js/paginator.js |   12 ++++++++++--
 sweettooth/templates/base.html    |    8 ++++----
 3 files changed, 28 insertions(+), 9 deletions(-)
---
diff --git a/sweettooth/static/js/main.js b/sweettooth/static/js/main.js
index 3137373..ceb82ef 100644
--- a/sweettooth/static/js/main.js
+++ b/sweettooth/static/js/main.js
@@ -117,16 +117,27 @@ require(['jquery', 'messages', 'modal',
 
         $('#extension_shell_versions_info').buildShellVersionsInfo();
 
-        $('#extensions-list').
-            paginatorify('/ajax/extensions-list/').
+        function injectSearch() {
+            return { search: $('#search_input').val() };
+        }
+
+        var $extensionsList = $('#extensions-list').
+            paginatorify('/ajax/extensions-list/', injectSearch).
             bind('page-loaded', function() {
                 $('li.extension').grayOutIfOutOfDate();
-                $('#extensions-list .before-paginator').fsUIify();
+
+                // If we're searching, don't add FSUI for now.
+                if (!injectSearch().search)
+                    $('#extensions-list .before-paginator').fsUIify();
 
                 // Scroll the page back up to the top.
                 document.documentElement.scrollTop = 0;
             });
 
+        $('#search_input').bind('keyup', function() {
+            $extensionsList.trigger('load-page');
+        });
+
         $('#error_report').fillInErrors();
 
         $('.extension_status_toggle a').click(function() {
diff --git a/sweettooth/static/js/paginator.js b/sweettooth/static/js/paginator.js
index 6adb22a..ef920db 100644
--- a/sweettooth/static/js/paginator.js
+++ b/sweettooth/static/js/paginator.js
@@ -3,7 +3,7 @@
 define(['jquery', 'hashparamutils',
         'dbus!_', 'jquery.hashchange'], function($, hashparamutils, dbusProxy) {
 
-    $.fn.paginatorify = function(url, context) {
+    $.fn.paginatorify = function(url, additionalHashParams, context) {
         if (!this.length)
             return this;
 
@@ -24,10 +24,16 @@ define(['jquery', 'hashparamutils',
             $elem.addClass('loading');
             $loadingPageContent.prependTo($elem);
 
+            var hashCopy;
+            if (additionalHashParams)
+                hashCopy = $.extend(additionalHashParams(), hashParams);
+            else
+                hashCopy = hashParams;
+
             $.ajax({
                 url: url,
                 dataType: 'json',
-                data: hashParams,
+                data: hashCopy,
                 type: 'GET'
             }).done(function(result) {
                 if ($beforePaginator)
@@ -113,6 +119,8 @@ define(['jquery', 'hashparamutils',
 
         $(window).hashchange();
 
+        this.bind('load-page', loadPage);
+
         return this;
     };
 
diff --git a/sweettooth/templates/base.html b/sweettooth/templates/base.html
index d057f60..5738a67 100644
--- a/sweettooth/templates/base.html
+++ b/sweettooth/templates/base.html
@@ -46,7 +46,7 @@
     <!-- header -->
     <div id="gnome_header">
       <div class="maxwidth">
-        <h1><a href="/"><img src="/static/images/foot.png" alt="GNOME" />Shell Extensions</a><span class="alpha-banner">Alpha!</span></h1>
+        <h1><a href="/"><img src="/static/images/foot.png" alt="GNOME" />Extensions</a><span class="alpha-banner">Alpha!</span></h1>
         
         <ul id="globalnav" class="{% block navclass %}{% endblock %}">
           <li class="main"><a href="{% url extensions-index %}">Extensions</a></li>
@@ -55,9 +55,9 @@
           <li class="about"><a href="{% url extensions-about %}">About</a></li>
         </ul>
         
-        <!-- <div class="right"> -->
-        <!--   <input id="search_input" type="text" placeholder="Search..." /> -->
-        <!-- </div> -->
+        <div class="right">
+          <input id="search_input" type="text" placeholder="Search..." />
+        </div>
         
         <div class="clear"></div>
       </div>