[extensions-web: 30/30] fsui: Improve the FSUI more, add a "Compatible with" combobox

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

commit 02c5b50b9eb8611b614be054ba93ed8eff87ffb3
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Thu Jan 26 05:38:27 2012 -0500

    fsui: Improve the FSUI more, add a "Compatible with" combobox

 sweettooth/static/css/sweettooth.css   |   15 +++--
 sweettooth/static/js/fsui.js           |  102 ++++++++++++++++++++++++--------
 sweettooth/static/js/hashparamutils.js |    5 +-
 3 files changed, 89 insertions(+), 33 deletions(-)
---
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index 3107990..89ec124 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -157,7 +157,7 @@ hr.bottom_shadow {
 /* Filtering and Sorting UI */
 /* ==================================================================== */
 
-div.fsui {
+.fsui {
     float: right;
     font-size: 0.8em;
     line-height: 2.2em;
@@ -167,7 +167,8 @@ div.fsui {
 
 .fsui-dropdown-link {
     border-radius: 4px;
-    padding: 0.2em 1em;
+    padding: 0.2em 0.4em;
+    margin: 0 0.6em;
     cursor: pointer;
 
     text-decoration: none;
@@ -199,24 +200,24 @@ div.fsui {
 .fsui-dropdown {
     background-color: #fff;
     position: absolute;
-    right: 4px;
-
     margin-top: -4px;
-
     border-radius: 0 0 4px 4px;
-
     box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
     z-index: 999;
 }
 
+.fsui-dropdown ul {
+    margin: 0;
+}
+
 .fsui-dropdown-item {
     text-decoration: none;
     color: #444;
     list-style-position: inside;
     list-style-type: none;
-    padding: .5em 1em;
     cursor: pointer;
     margin-left: 0;
+    padding: .2em;
     padding-left: 2em;
 }
 
diff --git a/sweettooth/static/js/fsui.js b/sweettooth/static/js/fsui.js
index 66b5f42..fe2b3c0 100644
--- a/sweettooth/static/js/fsui.js
+++ b/sweettooth/static/js/fsui.js
@@ -3,7 +3,28 @@
 // FSUI is short for "Filtering and Sorting UI", which contains
 // controls for filtering and sorting the extensions list
 
-require(['jquery', 'hashparamutils', 'modal'], function($, hashparamutils, modal) {
+require(['jquery', 'dbus!_',
+         'hashparamutils', 'modal'],
+function($, dbusProxy, hashparamutils, modal) {
+
+    function makeDropdownLink(text) {
+        return $('<a>', {'class': 'fsui-dropdown-link'}).
+            append($('<span>').text(text)).
+            append($('<span>', {'class': 'fsui-dropdown-link-arrow'}).text('\u2304'));
+    }
+
+    function calculateRight($fsui, $link) {
+        return $fsui.innerWidth() - $link.position().left - $link.outerWidth() - parseFloat($link.css('marginLeft'));
+    }
+
+    function makeLink(key, value, text, closeUI) {
+        return $('<li>', {'class': 'fsui-dropdown-item'}).
+            text(text).
+            click(function() {
+                hashparamutils.setHashParam(key, value);
+                closeUI();
+            });
+    }
 
     var sortCriteria = {
         'name': "Name",
@@ -17,15 +38,17 @@ require(['jquery', 'hashparamutils', 'modal'], function($, hashparamutils, modal
         return this.each(function() {
             var $elem = $(this);
 
-            function closeUI() {
-                if ($link.hasClass('selected')) {
-                    $('.fsui-dropdown').fadeOut('fast', function() {
-                        $(this).detach();
-                    });
-                    $link.removeClass('selected');
-                    return true;
-                }
-                return false;
+            function makeCloseUI($link, $dropdown) {
+                return function() {
+                    if ($link.hasClass('selected')) {
+                        $dropdown.fadeOut('fast', function() {
+                            $(this).detach();
+                        });
+                        $link.removeClass('selected');
+                        return true;
+                    }
+                    return false;
+                };
             }
 
             var hp = hashparamutils.getHashParams();
@@ -36,35 +59,64 @@ require(['jquery', 'hashparamutils', 'modal'], function($, hashparamutils, modal
 
             $fsui.append('<span>Sort by</span>');
 
-            var $link = $('<a>', {'class': 'fsui-dropdown-link'}).
-                append($('<span>').text(sortCriteria[hp.sort])).
-                append($('<span>', {'class': 'fsui-dropdown-link-arrow'}).text('\u2304')).
+            var $link;
+
+            $link = makeDropdownLink(sortCriteria[hp.sort]).
                 click(function() {
-                    $(this).addClass('selected');
                     var $dropdown = $('<div>', {'class': 'fsui-dropdown'}).
-                        appendTo($elem).
+                        appendTo($fsui).
+                        css('right', calculateRight($fsui, $(this))).
                         hide().
                         fadeIn('fast');
-                    modal.activateModal($dropdown, closeUI);
 
-                    var $sortUI = $('<div>').appendTo($dropdown);
+                    $(this).addClass('selected');
+                    var closeUI = makeCloseUI($(this), $dropdown);
+                    modal.activateModal($dropdown, closeUI);
 
-                    var $sortUL = $('<ul>').appendTo($sortUI);
+                    var $sortUL = $('<ul>').appendTo($dropdown);
                     var sortLinks = {};
                     $.each(sortCriteria, function(key) {
-                        sortLinks[key] = $('<li>', {'class': 'fsui-dropdown-item'}).
-                            text(this).
-                            appendTo($sortUL).
-                            click(function() {
-                                hashparamutils.setHashParam('sort', key);
-                                closeUI();
-                            });
+                        sortLinks[key] = makeLink('sort', key, this, closeUI).appendTo($sortUL);
                     });
 
                     sortLinks[hp.sort].addClass('selected');
 
                     return false;
                 }).appendTo($fsui);
+
+            $fsui.append('<span>Compatible with</span>');
+
+            function textForFilterValue(value) {
+                if (value === undefined)
+                    return "All versions";
+                else if (value === dbusProxy.ShellVersion)
+                    return "Current version";
+                return "GNOME Shell version " + hp.shell_version;
+            }
+
+            $link = makeDropdownLink(textForFilterValue(hp.shell_version)).
+                click(function() {
+                    var $dropdown = $('<div>', {'class': 'fsui-dropdown'}).
+                        appendTo($fsui).
+                        css('right', calculateRight($fsui, $(this))).
+                        hide().
+                        fadeIn('fast');
+
+                    $(this).addClass('selected');
+                    var closeUI = makeCloseUI($(this), $dropdown);
+                    modal.activateModal($dropdown, closeUI);
+
+                    var $filterUL = $('<ul>').appendTo($dropdown);
+
+                    $.each([undefined, dbusProxy.ShellVersion], function() {
+                        var $filterItem = makeLink('shell_version', this, textForFilterValue(this), closeUI).appendTo($filterUL);
+                        if (hp.shell_version === this)
+                            $filterItem.addClass('selected');
+                    });
+
+                    return false;
+                }).appendTo($fsui);
+
         });
     };
 });
diff --git a/sweettooth/static/js/hashparamutils.js b/sweettooth/static/js/hashparamutils.js
index 5c8e2f5..49eaf0c 100644
--- a/sweettooth/static/js/hashparamutils.js
+++ b/sweettooth/static/js/hashparamutils.js
@@ -28,7 +28,10 @@ define(["jquery"], function($) {
 
     function setHashParam(name, value) {
         var hp = getHashParams();
-        hp[name] = value;
+        if (value === undefined)
+            delete hp[name];
+        else
+            hp[name] = value;
         setHashParams(hp);
     }