Skip to content

Commit e5df79f

Browse files
ablancoablanco
committed
Support for Bootstrap 5
1 parent 3679d62 commit e5df79f

File tree

7 files changed

+204
-16
lines changed

7 files changed

+204
-16
lines changed

‎CHANGES.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
# CHANGELOG
22

3-
## 3.0.11dev
3+
## 3.1.0dev
44

55
- Allow chaining after setter methods.
6+
- Bootstrap 5 support.
67

78
## 3.0.10
89

‎OPTIONS.md‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -208,15 +208,15 @@ Let's see the options of each section.
208208

209209
Set it to `true` to activate support for Bootstrap 2. Incompatible with `bootstrap3` option.
210210

211-
Bootstrap 4 is the default supported version of Bootstrap.
211+
Bootstrap 4 and 5 are the default supported version of Bootstrap.
212212

213213
* __bootstrap3__:
214214

215215
Default: `false` (Boolean)
216216

217217
Set it to `true` to activate support for Bootstrap 3. Incompatible with `bootstrap2` option.
218218

219-
Bootstrap 4 is the default supported version of Bootstrap.
219+
Bootstrap 4 and 5 are the default supported version of Bootstrap.
220220

221221
* __colorClasses__:
222222

@@ -226,7 +226,7 @@ Let's see the options of each section.
226226
depending on the strength of the password.
227227

228228
Keep in mind that for Boostrap 2 a `bar-` prefix will be added, that for
229-
Boostrap 3 the prefix will be `progress-bar-`, and that for Bootstrap 4 it
229+
Boostrap 3 the prefix will be `progress-bar-`, and that for Bootstrap 4 and 5 it
230230
will be `progress-`. This is the case for the progress bar, not the verdicts.
231231
For the verdicts there is no prefix whatsoever.
232232

@@ -236,14 +236,14 @@ Let's see the options of each section.
236236

237237
Displays the password strength in a progress bar.
238238

239-
* __progressExtraCssClasses__: (Bootstrap 3 & 4 only)
239+
* __progressExtraCssClasses__: (Bootstrap 3, 4 & 5 only)
240240

241241
Default: `""` (String)
242242

243-
CSS classes to be added to the generated progress wrapper of the progress-bar. It is meant to make
244-
use of the extra classes provided by Bootstrap. The classes will be added to
245-
the proper DOM element depending of which version of Bootstrap is being
246-
used.
243+
CSS classes to be added to the generated progress wrapper of the progress-bar.
244+
It is meant to make use of the extra classes provided by Bootstrap. The classes
245+
will be added to the proper DOM element depending of which version of Bootstrap
246+
is being used.
247247

248248
E.g.
249249
```css
@@ -301,8 +301,9 @@ Let's see the options of each section.
301301
If the `showVerdictsInsideProgressBar` option is active, then the verdicts
302302
won't appear on the popover.
303303

304-
_Note: In Bootstrap 4, the popper.js library is required. More details in
305-
[the Bootstrap documentation](https://getbootstrap.com/docs/4.1/components/popovers/).
304+
_Note: In Bootstrap 4 & 5, the popper.js library is required. More details in
305+
[the Bootstrap 4 documentation](https://getbootstrap.com/docs/4.1/components/popovers/)
306+
or [the Bootstrap 5 documentation](https://getbootstrap.com/docs/5.0/components/popovers/).
306307
In previous versions tooltip.js and popover.js must be included._
307308

308309
* __popoverPlacement__:

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ suits your purposes better.
1818
## Requirements
1919

2020
* jQuery 1.7 or higher
21-
* Bootstrap 2, 3 or 4
21+
* Bootstrap 2, 3, 4 or 5
2222

2323
### Not using Bootstrap?
2424

‎examples/bootstrap5/index.html‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
8+
<title>Bootstrap 5 Password Strength Meter Example</title>
9+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
10+
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
11+
</head>
12+
13+
<body>
14+
<div class="container mt-2">
15+
<h1>Bootstrap 5 Password Strength Meter Example</h1>
16+
<form role="form" class="my-5">
17+
<div class="row" id="pwd-container">
18+
<div class="col-sm">
19+
<label for="password" class="form-label">Password</label>
20+
<input type="password" class="form-control" id="password" placeholder="Password">
21+
</div>
22+
<div class="col-sm pt-5">
23+
<div class="pwstrength_viewport_progress"></div>
24+
</div>
25+
</div>
26+
<div class="row">
27+
<div id="messages" class="col small text-muted"></div>
28+
</div>
29+
</form>
30+
<pre>jQuery(document).ready(function () {
31+
"use strict";
32+
var options = {};
33+
options.ui = {
34+
container: "#pwd-container",
35+
viewports: {
36+
progress: ".pwstrength_viewport_progress"
37+
},
38+
showVerdictsInsideProgressBar: true
39+
};
40+
options.common = {
41+
debug: true,
42+
onLoad: function () {
43+
$('#messages').text('Start typing password');
44+
}
45+
};
46+
$(':password').pwstrength(options);
47+
});</pre>
48+
<p><a href="..">Go back</a></p>
49+
</div>
50+
51+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
52+
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
53+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
54+
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
55+
crossorigin="anonymous"></script>
56+
<script type="text/javascript" src="../pwstrength.js"></script>
57+
<script type="text/javascript">
58+
jQuery(document).ready(function () {
59+
"use strict";
60+
var options = {};
61+
options.ui = {
62+
container: "#pwd-container",
63+
viewports: {
64+
progress: ".pwstrength_viewport_progress"
65+
},
66+
showVerdictsInsideProgressBar: true
67+
};
68+
options.common = {
69+
debug: true,
70+
onLoad: function () {
71+
$('#messages').text('Start typing password');
72+
}
73+
};
74+
$(':password').pwstrength(options);
75+
});
76+
</script>
77+
</body>
78+
79+
</html>

‎examples/bootstrap5/popover.html‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
8+
<title>Bootstrap 5 Password Strength Meter Example - Popover</title>
9+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
10+
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
11+
</head>
12+
13+
<body>
14+
<div class="container mt-2">
15+
<h1>Bootstrap 5 Password Strength Meter Example - Popover</h1>
16+
<form role="form" class="my-5">
17+
<div class="row" id="pwd-container">
18+
<div class="col-sm">
19+
<label for="name" class="form-label">Name:</label>
20+
<input type="text" class="form-control" id="username" placeholder="Name">
21+
<label for="password" class="form-label">Password</label>
22+
<input type="password" class="form-control" id="password" placeholder="Password">
23+
</div>
24+
<div class="col-sm pt-5">
25+
<div class="pwstrength_viewport_progress"></div>
26+
</div>
27+
</div>
28+
<div class="row">
29+
<div id="messages" class="col small text-muted"></div>
30+
</div>
31+
</form>
32+
<pre>jQuery(document).ready(function () {
33+
"use strict";
34+
var options = {};
35+
options.ui = {
36+
container: "#pwd-container",
37+
viewports: {
38+
progress: ".pwstrength_viewport_progress"
39+
},
40+
showPopover: true,
41+
showErrors: true
42+
};
43+
options.common = {
44+
debug: true,
45+
onLoad: function () {
46+
$('#messages').text('Start typing password');
47+
}
48+
};
49+
$(':password').pwstrength(options);
50+
});</pre>
51+
<p><a href="..">Go back</a></p>
52+
</div>
53+
54+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
55+
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
56+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
57+
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
58+
crossorigin="anonymous"></script>
59+
<script type="text/javascript" src="../pwstrength.js"></script>
60+
<script type="text/javascript">
61+
jQuery(document).ready(function () {
62+
"use strict";
63+
var options = {};
64+
options.ui = {
65+
container: "#pwd-container",
66+
viewports: {
67+
progress: ".pwstrength_viewport_progress"
68+
},
69+
showPopover: true,
70+
showErrors: true
71+
};
72+
options.common = {
73+
debug: true,
74+
onLoad: function () {
75+
$('#messages').text('Start typing password');
76+
}
77+
};
78+
$(':password').pwstrength(options);
79+
});
80+
</script>
81+
</body>
82+
83+
</html>

‎examples/index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,12 @@ <h2>Examples</h2>
1313
<p>This examples expect the example directory to be serverd as
1414
root, all the path are written based on that assumption.</p>
1515

16+
<h3>Bootstrap 5</h3>
17+
<ol>
18+
<li><a href="bootstrap5/index.html">Basic usage</a></li>
19+
<li><a href="bootstrap5/popover.html">Show verdict and errors in a popover</a></li>
20+
</ol>
21+
1622
<h3>Bootstrap 4</h3>
1723
<ol>
1824
<li><a href="bootstrap4/index.html">Basic usage</a></li>

‎src/ui.popover.js‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* Dual licensed under the MIT and GPL licenses.
77
*/
88

9-
/* global ui */
9+
/* global ui, bootstrap, $ */
1010

1111
(function() {
1212
'use strict';
@@ -29,7 +29,9 @@
2929
ui.updatePopover = function(options, $el, verdictText, remove) {
3030
var popover = $el.data('bs.popover'),
3131
html = '',
32-
hide = true;
32+
hide = true,
33+
bootstrap5 = false,
34+
itsVisible = false;
3335

3436
if (
3537
options.ui.showVerdicts &&
@@ -56,14 +58,30 @@
5658

5759
if (options.ui.bootstrap2) {
5860
popover = $el.data('popover');
61+
} else if (!popover) {
62+
// Bootstrap 5
63+
popover = bootstrap.Popover.getInstance($el[0]);
64+
bootstrap5 = true;
5965
}
6066

61-
if (popover.$arrow && popover.$arrow.parents('body').length > 0) {
62-
$el.find('+ .popover .popover-content').html(html);
67+
if (bootstrap5) {
68+
itsVisible = $(popover.tip).is(':visible');
69+
} else {
70+
itsVisible = popover.$arrow && popover.$arrow.parents('body').length > 0;
71+
}
72+
73+
if (itsVisible) {
74+
if (bootstrap5) {
75+
$(popover.tip).find('.popover-body').html(html);
76+
} else {
77+
$el.find('+ .popover .popover-content').html(html);
78+
}
6379
} else {
6480
// It's hidden
6581
if (options.ui.bootstrap2 || options.ui.bootstrap3) {
6682
popover.options.content = html;
83+
} else if (bootstrap5) {
84+
popover._config.content = html;
6785
} else {
6886
popover.config.content = html;
6987
}

0 commit comments

Comments
 (0)