From 994236e180ef7f05298efb9a0c58a39e9998f40f Mon Sep 17 00:00:00 2001 From: Belen Barros Pena Date: Thu, 6 Feb 2014 00:24:58 +0000 Subject: 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 Signed-off-by: Alexandru DAMIAN Signed-off-by: Richard Purdie --- bitbake/lib/toaster/toastergui/static/js/main.js | 55 ++++++++---------------- 1 file changed, 19 insertions(+), 36 deletions(-) diff --git a/bitbake/lib/toaster/toastergui/static/js/main.js b/bitbake/lib/toaster/toastergui/static/js/main.js index 3710e59e92..dc96564b17 100644 --- a/bitbake/lib/toaster/toastergui/static/js/main.js +++ b/bitbake/lib/toaster/toastergui/static/js/main.js @@ -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 = ''; - } - }); - }); - }); -- cgit v1.2.3-54-g00ecf