summaryrefslogtreecommitdiffstats
path: root/bitbake/lib/toaster
diff options
context:
space:
mode:
authorBelen Barros Pena <belen.barros.pena@intel.com>2014-02-06 00:24:58 +0000
committerRichard Purdie <richard.purdie@linuxfoundation.org>2014-02-17 15:38:53 +0000
commit994236e180ef7f05298efb9a0c58a39e9998f40f (patch)
treed9a49f94e26ca303c8a7bf1f47a322d905d8e0bd /bitbake/lib/toaster
parent49a81f064a2fade6b2ce74b1862419ce3e27d09b (diff)
downloadpoky-994236e180ef7f05298efb9a0c58a39e9998f40f.tar.gz
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>
Diffstat (limited to 'bitbake/lib/toaster')
-rw-r--r--bitbake/lib/toaster/toastergui/static/js/main.js55
1 files 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() {
21 }); 21 });
22 22
23 // enable popovers in any table cells that contain an anchor with the 23 // enable popovers in any table cells that contain an anchor with the
24 // .btn class applied 24 // .btn class applied, and make sure popovers work on click, are mutually
25 $('td > a.btn').popover({html:true, container:'body', placement:'left'}); 25 // exclusive and they close when your click outside their area
26
27 $('html').click(function(e){
28 $('td > a.btn').popover('hide');
29 });
30
31 $('td > a.btn').popover({
32 html:true,
33 placement:'left',
34 container:'body',
35 trigger:'manual'
36 }).click(function(e){
37 $('td > a.btn').not(this).popover('hide');
38 // ideally we would use 'toggle' here
39 // but it seems buggy in our Bootstrap version
40 $(this).popover('show');
41 e.stopPropagation();
42 });
26 43
27 // enable tooltips for applied filters 44 // enable tooltips for applied filters
28 $('th a.btn-primary').tooltip({container:'body', html:true, placement:'bottom', delay:{hide:1500}}); 45 $('th a.btn-primary').tooltip({container:'body', html:true, placement:'bottom', delay:{hide:1500}});
@@ -53,38 +70,4 @@ $(document).ready(function() {
53 }); 70 });
54 }); 71 });
55 72
56 /* Make help tooltip and popovers work on click, mutually exclusive and dismiss them when clicking outside their area
57 from http://fuzzytolerance.info/blog/quick-hack-one-bootstarp-popover-at-a-time/ */
58
59 // Global variables - cringe
60 var visibleTooltip;
61 var visiblePopover;
62
63 //only allow 1 popover at a time
64 $('.depends > a , .brought_in_by > a, .layer_commit > a').on('click', function(e) {
65 // don't fall through
66 e.stopPropagation();
67 var $this = $(this);
68 // check if the one hovered over is now shown
69 if ($this.data('popover').tip().hasClass('in')) {
70 // if another was showing, hide it
71 visiblePopover && visiblePopover.popover('hide');
72 // then store the current popover
73 visiblePopover = $this;
74 } else {
75 // if it was hidden, then nothing must be showing
76 visiblePopover = '';
77 }
78 // dismiss popovers when you click outside them
79 $('body').on("click", function (e) {
80 var $target = $(e.target),
81 inPopover = $(e.target).closest('.popover').length > 0
82 //hide only if clicked on button or inside popover
83 if (!inPopover) {
84 visiblePopover.popover('hide');
85 visiblePopover = '';
86 }
87 });
88 });
89
90}); 73});