Skip to content

Commit a32749e

Browse files
author
q2apro
committed
Fix for dismissible option breaking with multiple popovers open
sandywalker#250 Samuel Brodkey on Sep 6, 2017
1 parent a763cc5 commit a32749e

File tree

2 files changed

+94
-11
lines changed

2 files changed

+94
-11
lines changed

‎demo/test-issue248.html

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2+
3+
<html>
4+
<head>
5+
<title>Issue (#248) - Dismissible option not working with multiple popovers</title>
6+
7+
<link rel="stylesheet" href="../src/jquery.webui-popover.css" />
8+
<script src="jquery.js" ></script>
9+
<script src="bootstrap.js" ></script>
10+
<script src="../src/jquery.webui-popover.js" ></script>
11+
12+
<style type="text/css">
13+
#popover1, #popover3 {
14+
margin-left: 50px;
15+
margin-right: 100px;
16+
}
17+
.pop {
18+
display: inline-block;
19+
border: 1px solid silver;
20+
padding: 2px;
21+
}
22+
.popContainer {
23+
margin-bottom: 60px;
24+
}
25+
.desc {
26+
margin-bottom: 20px;
27+
}
28+
</style>
29+
<script type="text/javascript">
30+
$(document).ready(function() {
31+
$("#popover1").webuiPopover({
32+
dismissible: false,
33+
placement: "bottom",
34+
content: "I'm not dismissible"
35+
});
36+
$("#popover2").webuiPopover({
37+
dismissible: true,
38+
placement: "bottom",
39+
content: "I'm dismissible"
40+
});
41+
42+
$("#popover3").webuiPopover({
43+
multi: true,
44+
dismissible: true,
45+
placement: "bottom",
46+
content: "I'm popover 3"
47+
});
48+
$("#popover4").webuiPopover({
49+
multi: true,
50+
dismissible: true,
51+
placement: "bottom",
52+
content: "I'm popover 4"
53+
});
54+
});
55+
</script>
56+
</head>
57+
<body>
58+
<div class="desc">
59+
<b>Problem of issue#248</b>: Opening a dismissible popover causes non-dismissible popovers to become dismissible.<br /><br />
60+
61+
<b>Initial conditions</b>: Popover 1 is not dismissible. Popover 2 is dismissible.<br /><br />
62+
63+
Step 1) Click popover 1. Observe that it is not dismissible. Close it.<br />
64+
Step 2) Click popover 2. Observe that it is dismissible. Close it.<br />
65+
Step 3) Click popover 1. Observe that it is now dismissible!<br />
66+
</div>
67+
<div class="popContainer">
68+
<div id="popover1" class="pop">Popover 1</div>
69+
<div id="popover2" class="pop">Popover 2</div>
70+
</div>
71+
72+
<div class="desc">
73+
<b>With issue#248 solution in place, ensure that</b>: When an outside click is done for two open popovers,
74+
both should dismiss themselves through their own bodyClickHandler individually.<br /><br />
75+
76+
<b>Initial conditions</b>: Both popovers are dismissible and have multi:true.<br /><br />
77+
78+
Step 1) Open Popover 3 and Popover 4 so that they're both open at the same time.<br />
79+
Step 2) Click outside of both of them. Make sure both close.<br />
80+
</div>
81+
<div>
82+
<div id="popover3" class="pop">Popover 3</div>
83+
<div id="popover4" class="pop">Popover 4</div>
84+
</div>
85+
</body>
86+
</html>

‎src/jquery.webui-popover.js

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,6 @@
7878
var _srcElements = [];
7979
var backdrop = $('<div class="webui-popover-backdrop"></div>');
8080
var _globalIdSeed = 0;
81-
var _isBodyEventHandled = false;
8281
var _offsetOut = -2000; // the value offset out of the screen
8382
var $document = $(document);
8483

@@ -739,19 +738,18 @@
739738
},
740739

741740
bindBodyEvents: function() {
742-
if (_isBodyEventHandled) {
743-
return;
744-
}
745741
if (this.options.dismissible && this.getTrigger() === 'click') {
746742
if (isMobile) {
747743
$document.off('touchstart.webui-popover').on('touchstart.webui-popover', $.proxy(this.bodyTouchStartHandler, this));
748744
} else {
749-
$document.off('keyup.webui-popover').on('keyup.webui-popover', $.proxy(this.escapeHandler, this));
750-
$document.off('click.webui-popover').on('click.webui-popover', $.proxy(this.bodyClickHandler, this));
745+
$document.off('keyup.webui-popover' + this._idSeed)
746+
.on('keyup.webui-popover' + this._idSeed, $.proxy(this.escapeHandler, this));
747+
$document.off('click.webui-popover' + this._idSeed)
748+
.on('click.webui-popover' + this._idSeed, $.proxy(this.bodyClickHandler, this));
751749
}
752750
} else if (this.getTrigger() === 'hover') {
753-
$document.off('touchend.webui-popover')
754-
.on('touchend.webui-popover', $.proxy(this.bodyClickHandler, this));
751+
$document.off('touchend.webui-popover' + this._idSeed)
752+
.on('touchend.webui-popover' + this._idSeed, $.proxy(this.bodyClickHandler, this));
755753
}
756754
},
757755

@@ -782,7 +780,7 @@
782780
},
783781
escapeHandler: function(e) {
784782
if (e.keyCode === 27) {
785-
this.hideAll();
783+
this.hide();
786784
}
787785
},
788786
bodyTouchStartHandler: function(e) {
@@ -797,7 +795,6 @@
797795
});
798796
},
799797
bodyClickHandler: function(e) {
800-
_isBodyEventHandled = true;
801798
var canHide = true;
802799
for (var i = 0; i < _srcElements.length; i++) {
803800
var pop = getPopFromElement(_srcElements[i]);
@@ -816,7 +813,7 @@
816813
}
817814
}
818815
if (canHide) {
819-
hideAllPop();
816+
this.hide();
820817
}
821818
},
822819

0 commit comments

Comments
 (0)