Merge branch 'mojo-poc'

3 files changed, 98 insertions, 14 deletions

diff --git a/js/dropdown.js b/js/dropdown.js
index fd71d0b6e..03345206b 100644
--- a/js/dropdown.js
+++ b/js/dropdown.js
@@ -16,7 +16,7 @@ $(function() {
         // clicking dropdown button opens or closes the dropdown content
         if (!$(e.target).hasClass('dropdown-button')) {
             $('.dropdown-button').each(function() {
-                toggleDropDown(e, $(this), $('#' + $(this).attr('aria-controls')), 1);
+                toggleDropDown(e, $(this), $('#' + $(this).attr('aria-controls')), false, true);
             });
         }
     }).keydown(function(e) {
@@ -25,7 +25,7 @@ $(function() {
             $('.dropdown-button').each(function() {
                 var $button = $(this);
                 if ($button.siblings('.dropdown-content').is(':visible')) {
-                    toggleDropDown(e, $button, $('#' + $button.attr('aria-controls')), 1);
+                    toggleDropDown(e, $button, $('#' + $button.attr('aria-controls')), false, true);
                     $button.focus();
                 }
             });
@@ -83,7 +83,7 @@ $(function() {
         // navigate to an active link or click on it
         // note that `trigger('click')` doesn't always work
         if (e.keyCode == 13) {
-            var $link = $('.dropdown-content:visible a.active');
+            var $link = $('.dropdown-content:visible .active');
             if ($link.length) {
                 if ($link.attr('href')) {
                     location.href = $link.attr('href');
@@ -105,7 +105,7 @@ $(function() {
         var $content = $div.find('.dropdown-content');
         $button.click(function(e) {
             // Do not handle non-primary click.
-            if (e.button != 0) {
+            if (e.button != 0 || $content.hasClass('hover-display')) {
                 return;
             }
             toggleDropDown(e, $button, $content);
@@ -115,9 +115,13 @@ $(function() {
                     // prevent the form being submitted if the search bar is empty
                     e.preventDefault();
                     // navigate to an active link if any
-                    var $link = $content.find('a.active');
+                    var $link = $content.find('.active');
                     if ($link.length) {
-                        location.href = $link.attr('href');
+                        if ($link.attr('href')) {
+                            location.href = $link.attr('href');
+                        } else {
+                            $link.trigger('click');
+                        }
                     }
                 }
 
@@ -125,9 +129,49 @@ $(function() {
                 toggleDropDown(e, $button, $content);
             }
         });
+
+        if ($content.hasClass('hover-display')) {
+            const $_button = $button.get(0);
+            const $_content = $content.get(0);
+            let timer;
+
+            const button_handler = event => {
+                event.preventDefault();
+                event.stopPropagation();
+                window.clearTimeout(timer);
+
+                if (event.type === 'mouseleave' && $_content.matches('.hovered')) {
+                    return;
+                }
+
+                timer = window.setTimeout(() => {
+                    toggleDropDown(event, $button, $content, event.type === 'mouseenter', event.type === 'mouseleave');
+                }, 250);
+            };
+
+            const content_handler = event => {
+                event.preventDefault();
+                event.stopPropagation();
+                window.clearTimeout(timer);
+
+                $_content.classList.toggle('hovered', event.type === 'mouseenter');
+
+                if (event.type === 'mouseleave') {
+                    timer = window.setTimeout(() => {
+                        toggleDropDown(event, $button, $content, false, true);
+                    }, 250);
+                }
+            };
+
+            // Use raw `addEventListener` as jQuery actually listens `mouseover` and `mouseout`
+            $_button.addEventListener('mouseenter', event => button_handler(event));
+            $_button.addEventListener('mouseleave', event => button_handler(event));
+            $_content.addEventListener('mouseenter', event => content_handler(event));
+            $_content.addEventListener('mouseleave', event => content_handler(event));
+        }
     });
 
-    function toggleDropDown(e, $button, $content, hide_only) {
+    function toggleDropDown(e, $button, $content, show_only, hide_only) {
         // hide other expanded dropdown menu if any
         var $expanded = $('.dropdown-button[aria-expanded="true"]');
         if ($expanded.length && !$expanded.is($button)) {
@@ -148,13 +192,12 @@ $(function() {
             $('[aria-controls="' + content_id + '"]').removeAttr('aria-activedescendant');
             $content.find('#' + content_id + '-active-item').removeAttr('id');
         }
-        if ($content.is(':visible')) {
-            $content.hide();
-            $button.attr('aria-expanded', false);
-        }
         // if not using Escape or clicking outside the dropdown div, then we are hiding
-        else if (!hide_only) {
-            $content.show();
+        if ($content.is(':visible') || hide_only) {
+            $content.fadeOut('fast');
+            $button.attr('aria-expanded', false);
+        } else if (!$content.is(':visible') || show_only) {
+            $content.fadeIn('fast');
             $button.attr('aria-expanded', true);
         }
     }
diff --git a/js/field.js b/js/field.js
index a5e204f8d..ddf6b8b1c 100644
--- a/js/field.js
+++ b/js/field.js
@@ -715,7 +715,7 @@ $(function() {
     var options_user = {
         appendTo: $('#main-inner'),
         forceFixPosition: true,
-        serviceUrl: 'rest/elastic/suggest_users',
+        serviceUrl: 'rest/user/suggest',
         params: {
             Bugzilla_api_token: BUGZILLA.api_token,
         },
diff --git a/js/global.js b/js/global.js
index d0396d6a8..37567e3de 100644
--- a/js/global.js
+++ b/js/global.js
@@ -155,6 +155,47 @@ function display_value(field, value) {
     return value;
 }
 
+// ajax wrapper, to simplify error handling and auth
+// TODO: Rewrite this method using Promise (Bug 1380437)
+function bugzilla_ajax(request, done_fn, error_fn) {
+    $('#xhr-error').hide('');
+    $('#xhr-error').html('');
+    request.url += (request.url.match('\\?') ? '&' : '?') +
+        'Bugzilla_api_token=' + encodeURIComponent(BUGZILLA.api_token);
+    if (request.type != 'GET') {
+        request.contentType = 'application/json';
+        request.processData = false;
+        if (request.data && request.data.constructor === Object) {
+            request.data = JSON.stringify(request.data);
+        }
+    }
+    return $.ajax(request)
+        .done(function(data) {
+            if (data.error) {
+                if (!request.hideError) {
+                    $('#xhr-error').html(data.message);
+                    $('#xhr-error').show('fast');
+                }
+                if (error_fn)
+                    error_fn(data.message);
+            }
+            else if (done_fn) {
+                done_fn(data);
+            }
+        })
+        .fail(function(data) {
+            if (data.statusText === 'abort')
+                return;
+            var message = data.responseJSON ? data.responseJSON.message : 'Unexpected Error'; // all errors are unexpected :)
+            if (!request.hideError) {
+                $('#xhr-error').html(message);
+                $('#xhr-error').show('fast');
+            }
+            if (error_fn)
+                error_fn(message);
+        });
+}
+
 // polyfill .trim
 if (!String.prototype.trim) {
     (function() {