new search suggestions (bug 790066)

2012-09-25 15:54:22 -07:00 · 2012-09-25 15:54:22 -07:00 · 9e303c5cec
--- a/media/css/mkt/search.less
+++ b/media/css/mkt/search.less
@ -5,7 +5,6 @@
    width: 235px;
    max-width: 235px;
    margin: 0 12px 0 0;
-    top: 10px;
    float: right;
 }

@ -34,6 +33,7 @@
    padding: 0 5px 0 30px;
    z-index: 2;
    width: 235px;
+    margin-top: 10px;
    &:focus {
        .box-shadow(0 1px 1px rgba(0, 0, 0, 0.06) inset,
                    0 0 8px rgba(80, 160, 220, 0.6));
--- a/media/css/mkt/suggestions.less
+++ b/media/css/mkt/suggestions.less
@ -4,44 +4,27 @@
    .transition-property(~'bottom, opacity, visibility');
    .transition-duration(.3s);
    font: 13px/26px @open-stack;
-    height: 0;
+    height: 100%;
    opacity: 0;
-    position: absolute;
+    position: fixed;
    right: -10px;
    bottom: 0px;
    left: 0;
    visibility: hidden;
    z-index: 4;
-    .width(3);
+    width: 100%;
    &.visible {
        opacity: 1;
-        bottom: -6px;
+        bottom: 5px;
        visibility: visible;
    }
    .wrap {
-        .border-radius(4px);
-        .box-shadow(0 0 4px rgba(0,0,0,.2),
-                    0 -2px 0 @faint-gray inset);
-        background: @white;
+        background: @bg @grain-src;
        position: absolute;
-        top: 0;
+        top: 55px;
        right: 0;
        left: 0;
-        &:before {
-            .box-shadow(1px 1px 0 rgba(255,255,255,.1) inset,
-                        -1px -1px 0 @faint-gray);
-            .transform(~'rotate(45deg)');
-            content: "";
-            height: 12px;
-            position: absolute;
-            top: -5px;
-            left: 9px;
-            z-index: 5;
-            width: 12px;
-        }
-    }
-    .wrap:before, p a {
-        background: @faint-gray;
+        height: 100%;
    }
    ul {
        list-style: none;
@ -49,12 +32,16 @@
        padding: 0;
    }
    a {
-        border-top: 1px solid @faint-gray;
-        border-bottom: 1px solid transparent;
+        border-top: 1px solid @white;
+        border-bottom: 1px solid #cbd0d3;
        display: block;
        position: relative;
        text-decoration: none;
        z-index: 6;
+        color: @text;
+        font-size: 19px;
+        background: @bg @grain-src;
+        line-height: 44px;
        &:after {
            clear: both;
            content: ".";
@ -63,24 +50,12 @@
            visibility: hidden;
        }
        span {
-            .max-width(3);
-            background: no-repeat 5px 50%;
-            .background-size(20px auto);
            display: block;
            float: left;
            overflow: hidden;
-            padding: 0 5px 0 32px;
+            padding: 0 15px;
            text-overflow: ellipsis;
            white-space: nowrap;
-            &.cat {
-                background-image: url(../../img/icons/search-cat.png);
-            }
-        }
-        .subtitle {
-            color: @note-gray;
-            float: left;
-            font-size: 12px;
-            font-style: normal;
        }
    }
    li a:hover,
@ -95,27 +70,19 @@
        border-color: @faint-gray transparent transparent transparent;
        color: @link;
    }
-    p {
-        font-size: 11px;
-        margin: 0;
-        a {
-            .border-radius(3px 3px 0 0);
-            border-top-width: 0;
-            background: @faint-gray;
-            border-bottom: 0;
+}
+
+// Market header suggestions mode. (Searchatron Terrorize!)
+#site-header.suggestions {
+    nav {
+        .home, .expand, .filter {
+            display: none;
+        }
+        .cancel {
+            display: block;
        }
    }
-    &.sel p a {
-        color: @note-gray;
-    }
-    p a,
-    p a.sel,
-    &.sel p a:hover {
-        color: @dark-gray;
-    }
-    li {
-        &:last-child a {
-            .border-radius(0 0 3px 3px);
-        }
+    #search, #search-q {
+        width: 235px;
    }
 }
--- a/media/js/impala/site_suggestions.js
+++ b/media/js/impala/site_suggestions.js
@ -1,7 +1,8 @@
 // Init site search suggestions and populate the suggestions container.
 (function() {
+    // AMO search init.
    $('#search #search-q').searchSuggestions($('#site-search-suggestions'),
-                                             processResults, true);
+                                             processResults, 'AMO');

    function processResults(settings) {
        if (!settings || !settings.category) {
@ -28,7 +29,7 @@
                            url: escape_(item.url) || '#',
                            icon: '',
                            cls: '',
-                            subtitle: '',
+                            subtitle: ''
                        };
                        if (item.icon) {
                            d.icon = format(
--- a/media/js/impala/suggestions.js
+++ b/media/js/impala/suggestions.js
@ -20,10 +20,9 @@ $.fn.highlightTerm = function(val) {
 * processCallback - callback function that deals with the XHR call & populates
                   - the $results element.
 * Optional:
- * siteSearch - boolean of whether this is a site-search suggestions box which
-              - deals with multiple types of search results (apps/personas/etc)
+ * searchType - possible values are 'AMO', 'MKT'
 */
-$.fn.searchSuggestions = function($results, processCallback, siteSearch) {
+$.fn.searchSuggestions = function($results, processCallback, searchType) {
    var $self = this,
        $form = $self.closest('form');

@ -31,10 +30,11 @@ $.fn.searchSuggestions = function($results, processCallback, siteSearch) {
        return;
    }

-    if (siteSearch) {
+    var cat = $results.attr('data-cat');
+
+    if (searchType == 'AMO') {
        // Some base elements that we don't want to keep creating on the fly.
-        var cat = $results.attr('data-cat'),
-            msg;
+        var msg;
        if (cat == 'personas') {
            msg = gettext('Search personas for <b>{0}</b>');
        } else if (cat == 'apps') {
@ -46,6 +46,8 @@ $.fn.searchSuggestions = function($results, processCallback, siteSearch) {
                            '<p><a class="sel" href="#"><span>{msg}</span></a></p><ul></ul>' +
                            '</div>');
        $results.html(base({'msg': msg}));
+    } else if (searchType == 'MKT') {
+        $results.html('<div class="wrap"><ul></ul></div>');
    }

    // Control keys that shouldn't trigger new requests.
@ -56,7 +58,7 @@ $.fn.searchSuggestions = function($results, processCallback, siteSearch) {
        z.keys.LEFT, z.keys.UP, z.keys.RIGHT, z.keys.DOWN,
        z.keys.HOME, z.keys.END,
        z.keys.COMMAND, z.keys.WINDOWS_RIGHT, z.keys.COMMAND_RIGHT,
-        z.keys.WINDOWS_LEFT_OPERA, z.keys.WINDOWS_RIGHT_OPERA, z.keys.APPLE,
+        z.keys.WINDOWS_LEFT_OPERA, z.keys.WINDOWS_RIGHT_OPERA, z.keys.APPLE
    ];

    var gestureKeys = [z.keys.ESCAPE, z.keys.UP, z.keys.DOWN];
@ -80,6 +82,10 @@ $.fn.searchSuggestions = function($results, processCallback, siteSearch) {
        }
        $results.removeClass('visible sel');
        $results.find('.sel').removeClass('sel');
+        if (searchType == 'MKT') {
+            $('#site-header').removeClass('suggestions');
+            $('#search-q').val('');
+        }
    }

    function gestureHandler(e) {
@ -128,11 +134,11 @@ $.fn.searchSuggestions = function($results, processCallback, siteSearch) {
        var settings = {
            '$results': $results,
            '$form': $form,
-            'searchTerm': val,
+            'searchTerm': val
        };

        // Optional data for callback.
-        if (siteSearch) {
+        if (searchType == 'AMO' || searchType == 'MKT') {
            settings['category'] = cat;
        }

@ -182,6 +188,8 @@ $.fn.searchSuggestions = function($results, processCallback, siteSearch) {
        }
    });

+    $results.bind('dismiss', dismissHandler);
+
    $form.submit(function(e) {
        var $sel = $results.find('.sel');
        if ($sel.length && $sel.eq(0).attr('href') != '#') {
--- a/media/js/mkt/mkt_suggestions.js
+++ b/media/js/mkt/mkt_suggestions.js
@ -0,0 +1,41 @@
+// Init site search suggestions and populate the suggestions container.
+(function() {
+    // MKT search init.
+    $('#search #search-q').searchSuggestions($('#site-search-suggestions'),
+                                             processResults, 'MKT');
+
+    function processResults(settings) {
+        if (!settings) {
+            return;
+        }
+
+        var li_item = template(
+            '<li><a href="{url}"><span>{name}</span></a></li>'
+        );
+
+        $.ajaxCache({
+            url: settings['$results'].attr('data-src'),
+            data: settings['$form'].serialize() + '&cat=' + settings.category,
+            newItems: function(formdata, items) {
+                var eventName;
+                if (items !== undefined) {
+                    var ul = '';
+                    $.each(items, function(i, item) {
+                        var d = {
+                            url: escape_(item.url) || '#'
+                        };
+                        if (item.name) {
+                            d.name = escape_(item.name);
+                            // Append the item only if it has a name.
+                            ul += li_item(d);
+                        }
+                    });
+                    settings['$results'].find('ul').html(ul);
+                }
+                settings['$results'].addClass('visible')
+                                    .trigger('resultsUpdated', [items]);
+                $('#site-header').addClass('suggestions');
+            }
+        });
+    }
+})();
--- a/media/js/mkt/search.js
+++ b/media/js/mkt/search.js
@ -21,6 +21,10 @@
        return false;
    });

+    // Clear search field on 'cancel' search suggestions.
+    $('#site-header').on('click', '.header-button.cancel', _pd(function() {
+        $('#site-search-suggestions').trigger('dismiss');
+    }));

    function selectMe($elm) {
        var $myUL = $elm.closest('ul'),
--- a/mkt/asset_bundles.py
+++ b/mkt/asset_bundles.py
@ -244,7 +244,7 @@ JS = {
        # Search suggestions.
        'js/impala/ajaxcache.js',
        'js/impala/suggestions.js',
-        'js/impala/site_suggestions.js',
+        'js/mkt/mkt_suggestions.js',

        # Account settings.
        'js/mkt/account.js',
--- a/mkt/templates/mkt/header.html
+++ b/mkt/templates/mkt/header.html
@ -21,12 +21,12 @@
          {% if search_form.cat.value() %}
            {{ search_form.cat }}
          {% endif %}
-          <div id="site-search-suggestions"
-               data-cat="apps" data-src="{{ url('search.suggestions') }}"></div>
        </form>
      {% endblock %}
    </nav>
    {% endif %}
  </section>
 </header>
+<div id="site-search-suggestions"
+               data-cat="apps" data-src="{{ url('search.suggestions') }}"></div>
 <div class="overlay nav-overlay"></div>