Repeated click on header icons should close popped out dropdowns

This commit is contained in:
Régis Hanol 2013-03-05 02:44:34 +01:00
parent f544e1d4f7
commit c72f65879f
1 changed files with 23 additions and 17 deletions

View File

@ -17,31 +17,37 @@ Discourse.HeaderView = Discourse.View.extend({
topicBinding: 'Discourse.router.topicController.content', topicBinding: 'Discourse.router.topicController.content',
showDropdown: function($target) { showDropdown: function($target) {
var $dropdown, $html, $li, $ul, elementId, hideDropdown, var elementId = $target.data('dropdown') || $target.data('notifications'),
_this = this; $dropdown = $("#" + elementId),
elementId = $target.data('dropdown') || $target.data('notifications'); $li = $target.closest('li'),
$dropdown = $("#" + elementId); $ul = $target.closest('ul'),
$li = $target.closest('li');
$ul = $target.closest('ul');
$li.addClass('active');
$('li', $ul).not($li).removeClass('active');
$('.d-dropdown').not($dropdown).fadeOut('fast');
$dropdown.fadeIn('fast');
$dropdown.find('input[type=text]').focus().select();
$html = $('html'); $html = $('html');
hideDropdown = function() {
var hideDropdown = function() {
$dropdown.fadeOut('fast'); $dropdown.fadeOut('fast');
$li.removeClass('active'); $li.removeClass('active');
$html.data('hide-dropdown', null); $html.data('hide-dropdown', null);
return $html.off('click.d-dropdown'); return $html.off('click.d-dropdown');
}; };
// if a dropdown is active and the user clics on it, close it
if($li.hasClass('active')) { return hideDropdown(); }
// otherwhise, mark it as active
$li.addClass('active');
// hide the other dropdowns
$('li', $ul).not($li).removeClass('active');
$('.d-dropdown').not($dropdown).fadeOut('fast');
// fade it fast
$dropdown.fadeIn('fast');
// autofocus any text input field
$dropdown.find('input[type=text]').focus().select();
$html.on('click.d-dropdown', function(e) { $html.on('click.d-dropdown', function(e) {
if ($(e.target).closest('.d-dropdown').length > 0) { return $(e.target).closest('.d-dropdown').length > 0 ? true : hideDropdown();
return true;
}
return hideDropdown();
}); });
$html.data('hide-dropdown', hideDropdown); $html.data('hide-dropdown', hideDropdown);
return false; return false;
}, },