[extensions-web: 23/30] js: Rename 'filter' to 'fsui' for clarity

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

commit e7e57c007089b2f5061c1092c2f49904912a139a
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Thu Jan 5 20:34:32 2012 -0500

    js: Rename 'filter' to 'fsui' for clarity
    
    The 'filter UI' manages both filtering and sorting. I don't want to try
    to comprehend CSS class names like 'filter-sort-ui-filter-ui', so let's
    just quit while we're ahead and rename the entire thing to be something
    called a 'fsUI'. Sounds fancy, doesn't it?

 sweettooth/static/css/sweettooth.css        |   16 +++++++++-------
 sweettooth/static/js/{filter.js => fsui.js} |   19 +++++++++++--------
 sweettooth/static/js/main.js                |    4 ++--
 3 files changed, 22 insertions(+), 17 deletions(-)
---
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index 4ca24d0..043ce9c 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -157,7 +157,7 @@ hr.bottom_shadow {
 /* Filtering and Sorting UI */
 /* ==================================================================== */
 
-a.filter-ui-link {
+a.fsui-link {
     float: right;
     border-radius: 4px;
     font-size: 0.8em;
@@ -176,13 +176,13 @@ a.filter-ui-link {
     transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 
-.filter-ui-link.selected {
+.fsui-link.selected {
     background-color: #fff;
     text-decoration: none;
     color: #222;
 }
 
-.filter-ui {
+.fsui {
     background-color: #fff;
     position: absolute;
 
@@ -198,11 +198,11 @@ a.filter-ui-link {
     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
 }
 
-.filter-ui h4 {
+.fsui h4 {
     margin: 0;
 }
 
-.filter-sort-ui-sort-link {
+.fsui-selection-link {
     text-decoration: none;
     color: #444;
     list-style-position: inside;
@@ -213,12 +213,12 @@ a.filter-ui-link {
     padding-left: 2em;
 }
 
-.filter-sort-ui-sort-link.selected {
+.fsui-selection-link.selected {
     list-style-type: disc;
     padding-left: 1em;
 }
 
-.filter-sort-ui-sort-link:hover {
+.fsui-selection-link:hover {
     background-color: #e5e5e0;
 }
 
@@ -245,6 +245,8 @@ a.filter-ui-link {
     left: 50%;
     width: 300px;
     margin-left: -150px;
+
+    z-index: 999;
 }
 
 ul.extensions {
diff --git a/sweettooth/static/js/filter.js b/sweettooth/static/js/fsui.js
similarity index 79%
rename from sweettooth/static/js/filter.js
rename to sweettooth/static/js/fsui.js
index 65dda13..8e57699 100644
--- a/sweettooth/static/js/filter.js
+++ b/sweettooth/static/js/fsui.js
@@ -1,9 +1,12 @@
 "use strict";
 
+// 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) {
 
     function makeLink(name, value, text) {
-        return $('<li>', {'class': 'filter-sort-ui-sort-link'}).
+        return $('<li>', {'class': 'fsui-selection-link'}).
             text(text).
             click(function() {
                 var hp = hashparamutils.getHashParams();
@@ -19,14 +22,14 @@ require(['jquery', 'hashparamutils', 'modal'], function($, hashparamutils, modal
         'popularity': "Popularity"
     };
 
-    $.fn.filterUIify = function() {
+    $.fn.fsUIify = function() {
 
         return this.each(function() {
             var $elem = $(this);
 
             function closeUI() {
                 if ($link.hasClass('selected')) {
-                    $('.filter-ui').slideUp('fast', function() {
+                    $('.fsui').slideUp('fast', function() {
                         $(this).detach();
                     });
                     $link.removeClass('selected');
@@ -35,22 +38,22 @@ require(['jquery', 'hashparamutils', 'modal'], function($, hashparamutils, modal
                 return false;
             }
 
-            var $link = $('<a>', {'class': 'filter-ui-link'}).
+            var $link = $('<a>', {'class': 'fsui-link'}).
                 text("Filtering and Sorting").
                 click(function() {
                     $(this).addClass('selected');
                     var pos = $elem.offset();
-                    var $filterUI = $('<div>', {'class': 'filter-ui'}).
+                    var $fsui = $('<div>', {'class': 'fsui'}).
                         css({'top': pos.top + $elem.outerHeight(),
                              'left': pos.left,
                              'width': $elem.outerWidth()}).
                         appendTo(document.body).
                         hide().
                         slideDown('fast');
-                    modal.activateModal($filterUI, closeUI);
+                    modal.activateModal($fsui, closeUI);
 
-                    var $sortUI = $('<div>', {'class': 'filter-sort-ui'}).
-                        appendTo($filterUI).
+                    var $sortUI = $('<div>', {'class': 'fsui-sort-ui'}).
+                        appendTo($fsui).
                         append('<h4>Sort by</h4>');
 
                     var $sortUL = $('<ul>').appendTo($sortUI);
diff --git a/sweettooth/static/js/main.js b/sweettooth/static/js/main.js
index b95eaed..8289262 100644
--- a/sweettooth/static/js/main.js
+++ b/sweettooth/static/js/main.js
@@ -1,7 +1,7 @@
 "use strict";
 
 require(['jquery', 'messages', 'modal',
-         'extensions', 'uploader', 'filter',
+         'extensions', 'uploader', 'fsui',
          'jquery.cookie', 'jquery.jeditable',
          'jquery.timeago', 'jquery.rating'], function($, messages, modal) {
     if (!$.ajaxSettings.headers)
@@ -94,7 +94,7 @@ require(['jquery', 'messages', 'modal',
             paginatorify('/ajax/extensions-list/').
             bind('page-loaded', function() {
                 $('li.extension').addOutOfDateIndicator();
-                $('#extensions-list .before-paginator').filterUIify();
+                $('#extensions-list .before-paginator').fsUIify();
             });
 
         $('#error_report').fillInErrors();