bitbake: toaster: Make popovers mutually exclusive

Table popovers should be mutually exclusive (only one
of them should be open at any given time), and should
close when you click outside their area. But this is not
the default popover behaviour in Bootstrap, so some
additional javascript is needed.

The code in main.js taking care of this in the design
prototype was quite ugly and didn't get on well with
certain browsers. I have replaced it with a better
solution (although still not ideal).

(Bitbake rev: d56633c00f6730c053f355570211eba1bdc41b62)

Signed-off-by: Belen Barros Pena <belen.barros.pena@intel.com>
Signed-off-by: Alexandru DAMIAN <alexandru.damian@intel.com>
Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>
This commit is contained in:
Belen Barros Pena 2014-02-06 00:24:58 +00:00 committed by Richard Purdie
parent 49a81f064a
commit 994236e180
1 changed files with 19 additions and 36 deletions

View File

@ -21,8 +21,25 @@ $(document).ready(function() {
});
// enable popovers in any table cells that contain an anchor with the
// .btn class applied
$('td > a.btn').popover({html:true, container:'body', placement:'left'});
// .btn class applied, and make sure popovers work on click, are mutually
// exclusive and they close when your click outside their area
$('html').click(function(e){
$('td > a.btn').popover('hide');
});
$('td > a.btn').popover({
html:true,
placement:'left',
container:'body',
trigger:'manual'
}).click(function(e){
$('td > a.btn').not(this).popover('hide');
// ideally we would use 'toggle' here
// but it seems buggy in our Bootstrap version
$(this).popover('show');
e.stopPropagation();
});
// enable tooltips for applied filters
$('th a.btn-primary').tooltip({container:'body', html:true, placement:'bottom', delay:{hide:1500}});
@ -53,38 +70,4 @@ $(document).ready(function() {
});
});
/* Make help tooltip and popovers work on click, mutually exclusive and dismiss them when clicking outside their area
from http://fuzzytolerance.info/blog/quick-hack-one-bootstarp-popover-at-a-time/ */
// Global variables - cringe
var visibleTooltip;
var visiblePopover;
//only allow 1 popover at a time
$('.depends > a , .brought_in_by > a, .layer_commit > a').on('click', function(e) {
// don't fall through
e.stopPropagation();
var $this = $(this);
// check if the one hovered over is now shown
if ($this.data('popover').tip().hasClass('in')) {
// if another was showing, hide it
visiblePopover && visiblePopover.popover('hide');
// then store the current popover
visiblePopover = $this;
} else {
// if it was hidden, then nothing must be showing
visiblePopover = '';
}
// dismiss popovers when you click outside them
$('body').on("click", function (e) {
var $target = $(e.target),
inPopover = $(e.target).closest('.popover').length > 0
//hide only if clicked on button or inside popover
if (!inPopover) {
visiblePopover.popover('hide');
visiblePopover = '';
}
});
});
});