SONAR-5052 Rework top search

Use WS API

diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb
index 8173688c52ca39e514b2892a58f77d734c4de679..9a8ffb17f8088eaf9d8b679c6dee75ee9193314e 100644 (file)
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb
@@ -58,7 +58,7 @@
     <%= javascript_include_tag 'widgets/histogram' %>
 
     <%= javascript_include_tag 'select-list' %>
-    <%= javascript_include_tag 'jquery.autocomplete' %>
+    <%= javascript_include_tag 'top-search' %>
     <%= javascript_include_tag 'sortable' %>
 
     <%= javascript_include_tag 'navigator/handlebars-extensions' %>

diff --git a/sonar-server/src/main/webapp/javascripts/application.js b/sonar-server/src/main/webapp/javascripts/application.js
index 7e175d28a45319d8d1718bfaf61913cddc3d4f0e..318b8216d733b500ba09649eb627548598c428d4 100644 (file)
--- a/sonar-server/src/main/webapp/javascripts/application.js
+++ b/sonar-server/src/main/webapp/javascripts/application.js
@@ -533,12 +533,8 @@ function openPopup(url, popupId) {
 
 
 jQuery(function() {
-  jQuery('#searchInput').autocomplete({
+  jQuery('#searchInput').topSearch({
     minLength: 2,
-
-    searchUrl: baseUrl + '/search',
-    searchTerm: 's',
-
     results: '#searchResourcesResults',
     spinner: '#searchingResources'
   });

diff --git a/sonar-server/src/main/webapp/javascripts/jquery.autocomplete.js b/sonar-server/src/main/webapp/javascripts/jquery.autocomplete.js
deleted file mode 100644 (file)
index c5883cc..0000000
--- a/sonar-server/src/main/webapp/javascripts/jquery.autocomplete.js
+++ /dev/null
@@ -1,138 +0,0 @@
-(function($) {
-
-  var autocomplete = function(options) {
-
-    var el = $(this),
-        resultsEl = $(options.results),
-        spinnerEl = $(options.spinner);
-
-    var index, total, selected, items, symbol = false;
-
-
-    var select = function() {
-          if (selected) {
-            selected.removeClass('selected');
-          }
-
-          selected = items.eq(index);
-          selected.addClass('selected');
-        },
-
-        selectPrev = function() {
-          if (index > 0) {
-            index--;
-          }
-          select();
-        },
-
-        selectNext = function() {
-           if (index < total - 1) {
-             index++;
-           }
-          select();
-        },
-
-        choose = function() {
-          if (selected) {
-            var id = selected.prop('id');
-            window.location = baseUrl + '/dashboard/index/' + id;
-          }
-        },
-
-        show = function(content) {
-          resultsEl.html(content).show();
-          items = resultsEl.find('li');
-          index = -1;
-          total = items.length;
-          selectNext();
-
-          items
-              .on('mouseover', function() {
-                index = items.index($(this));
-                select();
-              })
-              .on('click', function() {
-                index = items.index($(this));
-                select();
-                choose();
-              });
-        },
-
-        hide = function() {
-          resultsEl.fadeOut();
-        };
-
-
-    el
-        .on('keydown', function(e) {
-          function prevent(e) {
-            e.preventDefault();
-            symbol = false;
-          }
-
-
-          switch (e.keyCode) {
-            case 13: // return
-              prevent(e);
-              choose();
-              return;
-            case 38: // up
-              prevent(e);
-              selectPrev();
-              return;
-            case 40: // down
-              prevent(e);
-              selectNext();
-              return;
-            case 37: // left
-            case 39: // right
-              symbol = false;
-              return;
-            default:
-              symbol = true;
-          }
-        })
-        .on('keyup', function() {
-          if (symbol) {
-            if (el.val().length >= options.minLength) {
-              var data = {};
-              data[options.searchTerm] = el.val();
-
-              spinnerEl.show();
-              $.ajax({
-                    url: options.searchUrl,
-                    data: data
-                  })
-                  .done(function(r) {
-                    show(r);
-                  })
-                  .fail(hide)
-                  .always(function() {
-                    spinnerEl.hide();
-                  });
-            } else {
-              hide();
-            }
-          }
-        })
-        .on('focus', function() {
-          el.data('placeholder', el.val());
-          el.val('');
-        })
-        .on('focusout', function() {
-          if (el.val().length === 0) {
-            el.val(el.data('placeholder') || '');
-          }
-          hide();
-        });
-
-    $('body').on('mousedown', function() {
-      hide();
-    });
-  };
-
-  $.extend($.fn, {
-    autocomplete: autocomplete
-  });
-
-})(jQuery);

diff --git a/sonar-server/src/main/webapp/javascripts/top-search.js b/sonar-server/src/main/webapp/javascripts/top-search.js
new file mode 100644 (file)
index 0000000..4b1691a
--- /dev/null
+++ b/sonar-server/src/main/webapp/javascripts/top-search.js
@@ -0,0 +1,170 @@
+(function($) {
+
+  $.fn.topSearch = function(options) {
+
+    var el = $(this),
+        resultsEl = $(options.results),
+        spinnerEl = $(options.spinner);
+
+    var index, total, selected, items, term, symbol = false;
+
+
+    var select = function() {
+          if (selected) {
+            selected.removeClass('selected');
+          }
+
+          selected = items.eq(index);
+          selected.addClass('selected');
+        },
+
+        selectPrev = function() {
+          if (index > 0) {
+            index--;
+          }
+          select();
+        },
+
+        selectNext = function() {
+           if (index < total - 1) {
+             index++;
+           }
+          select();
+        },
+
+        choose = function() {
+          if (selected) {
+            var key = selected.data('key');
+            window.location = baseUrl + '/dashboard/index/' + key;
+          }
+        },
+
+        show = function(r) {
+          resultsEl.empty();
+
+          var ul = $('<ul></ul>').appendTo(resultsEl);
+
+          r.results.forEach(function(qualifier) {
+            qualifier.items.forEach(function(item, index) {
+              var el = $('<li></li>')
+                  .data('key', item.id),
+
+                  q = $('<div></div>')
+                      .addClass('q')
+                      .appendTo(el),
+
+                  highlightRegexp = new RegExp(term, 'gi'),
+                  highlightedName = item.name.replace(highlightRegexp, '<strong>$&</strong>'),
+
+                  label = $('<span></span>')
+                      .html(' ' + highlightedName)
+                      .appendTo(el);
+
+              $('<img>')
+                  .prop('src', baseUrl + qualifier.icon)
+                  .prop('width', 16)
+                  .prop('height', 16)
+                  .prependTo(label);
+
+              if (index === 0) {
+                q.text(qualifier.name);
+              }
+
+              el.appendTo(ul);
+            });
+          });
+
+          resultsEl.show();
+          items = resultsEl.find('li');
+          index = -1;
+          total = items.length;
+          selectNext();
+
+          items
+              .on('mouseover', function() {
+                index = items.index($(this));
+                select();
+              })
+              .on('click', function() {
+                index = items.index($(this));
+                select();
+                choose();
+              });
+        },
+
+        hide = function() {
+          resultsEl.fadeOut();
+        },
+
+        onKeyup = function() {
+          if (symbol) {
+            if (el.val().length >= options.minLength) {
+              term = el.val();
+
+              spinnerEl.show();
+              $.ajax({
+                url: baseUrl + '/api/components/suggestions',
+                data: { s: term }
+              })
+                  .done(function(r) {
+                    show(r);
+                  })
+                  .fail(hide)
+                  .always(function() {
+                    spinnerEl.hide();
+                  });
+            } else {
+              hide();
+            }
+          }
+        },
+
+        debouncedKeyup = _.debounce(onKeyup, 250);
+
+
+    el
+        .on('keydown', function(e) {
+          function prevent(e) {
+            e.preventDefault();
+            symbol = false;
+          }
+
+          switch (e.keyCode) {
+            case 13: // return
+              prevent(e);
+              choose();
+              return;
+            case 38: // up
+              prevent(e);
+              selectPrev();
+              return;
+            case 40: // down
+              prevent(e);
+              selectNext();
+              return;
+            case 37: // left
+            case 39: // right
+              symbol = false;
+              return;
+            default:
+              symbol = true;
+          }
+        })
+        .on('keyup', debouncedKeyup)
+        .on('focus', function() {
+          el.data('placeholder', el.val());
+          el.val('');
+        })
+        .on('focusout', function() {
+          if (el.val().length === 0) {
+            el.val(el.data('placeholder') || '');
+          }
+          hide();
+        });
+
+    $('body').on('mousedown', function() {
+      hide();
+    });
+  };
+
+})(jQuery);

diff --git a/sonar-server/wro.xml b/sonar-server/wro.xml
index 53a2564b5b2a1a72bb41258d0fa725de2e63206c..ee181e082ca7ca654d7704f2a19106de52b47b45 100644 (file)
--- a/sonar-server/wro.xml
+++ b/sonar-server/wro.xml
@@ -38,7 +38,7 @@
     <js>/javascripts/widgets/histogram.js</js>
     
     <js>/javascripts/select-list.js</js>
-    <js>/javascripts/jquery.autocomplete.js</js>
+    <js>/javascripts/top-search.js</js>
     <js>/javascripts/sortable.js</js>
 
     <js>/javascripts/navigator/handlebars-extensions.js</js>