Skip to content

Commit 32576c8

Browse files
fontenelefontenele
committed
transform into jquery plugin
1 parent c79893d commit 32576c8

File tree

6 files changed

+2139
-41
lines changed

6 files changed

+2139
-41
lines changed

‎dist/js/bootstrap-navbar-dropdowns.js‎

Lines changed: 71 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,75 @@
1-
$(document).ready(function () {
2-
$('.navbar .dropdown-item.dropdown').on('click', function (e) {
3-
var $el = $(this).children('.dropdown-toggle');
4-
5-
if ($el.length > 0 && $(e.target).hasClass('dropdown-toggle')) {
6-
var $parent = $el.offsetParent(".dropdown-menu");
7-
$(this).parent("li").toggleClass('open');
8-
9-
if (!$parent.parent().hasClass('navbar-nav')) {
10-
if ($parent.hasClass('show')) {
11-
$parent.removeClass('show');
12-
$el.next().removeClass('show');
13-
$el.next().css({
14-
"top": -999,
15-
"left": -999
16-
});
17-
} else {
18-
$parent.parent().find('.show').removeClass('show');
19-
$parent.addClass('show');
20-
$el.next().addClass('show');
21-
$el.next().css({
22-
"top": $el[0].offsetTop,
23-
"left": $parent.outerWidth() - 4
24-
});
1+
(function ($) {
2+
$.fn.navbarDropdown = function () {
3+
$(this).find('.dropdown-item.dropdown').on('click', function (e) {
4+
var $el = $(this).children('.dropdown-toggle');
5+
6+
if ($el.length > 0 && $(e.target).hasClass('dropdown-toggle')) {
7+
var $parent = $el.offsetParent(".dropdown-menu");
8+
$(this).parent("li").toggleClass('open');
9+
10+
if (!$parent.parent().hasClass('navbar-nav')) {
11+
if ($parent.hasClass('show')) {
12+
$parent.removeClass('show');
13+
$el.next().removeClass('show');
14+
$el.next().css({
15+
"top": -999,
16+
"left": -999
17+
});
18+
} else {
19+
$parent.parent().find('.show').removeClass('show');
20+
$parent.addClass('show');
21+
$el.next().addClass('show');
22+
$el.next().css({
23+
"top": $el[0].offsetTop,
24+
"left": $parent.outerWidth() - 4
25+
});
26+
}
27+
28+
e.preventDefault();
29+
e.stopPropagation();
2530
}
2631

27-
e.preventDefault();
28-
e.stopPropagation();
32+
return this;
2933
}
34+
});
35+
$(this).find('.dropdown').on('hidden.bs.dropdown', function () {
36+
$(this).find('li.dropdown').removeClass('show open');
37+
$(this).find('ul.dropdown-menu').removeClass('show open');
38+
});
39+
return this;
40+
};
41+
})(jQuery);
42+
/*
43+
$(document).ready(function () {
44+
45+
$('.navbar .dropdown-item.dropdown').on('click', function (e) {
46+
var $el = $(this).children('.dropdown-toggle');
47+
if ($el.length > 0 && $(e.target).hasClass('dropdown-toggle')) {
48+
var $parent = $el.offsetParent(".dropdown-menu");
49+
$(this).parent("li").toggleClass('open');
50+
51+
if (!$parent.parent().hasClass('navbar-nav')) {
52+
if ($parent.hasClass('show')) {
53+
$parent.removeClass('show');
54+
$el.next().removeClass('show');
55+
$el.next().css({"top": -999, "left": -999});
56+
} else {
57+
$parent.parent().find('.show').removeClass('show');
58+
$parent.addClass('show');
59+
$el.next().addClass('show');
60+
$el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4});
61+
}
62+
e.preventDefault();
63+
e.stopPropagation();
64+
}
65+
return;
66+
}
67+
});
68+
69+
$('.navbar .dropdown').on('hidden.bs.dropdown', function () {
70+
$(this).find('li.dropdown').removeClass('show open');
71+
$(this).find('ul.dropdown-menu').removeClass('show open');
72+
});
3073
31-
return;
32-
}
33-
});
34-
$('.navbar .dropdown').on('hidden.bs.dropdown', function () {
35-
$(this).find('li.dropdown').removeClass('show open');
36-
$(this).find('ul.dropdown-menu').removeClass('show open');
37-
});
38-
});
74+
});
75+
*/

‎dist/js/bootstrap-navbar-dropdowns.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
<!-- Bootstrap -->
1010
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
11-
<link href="css/navbar.css" rel="stylesheet">
11+
<link href="dist/css/bootstrap-navbar-dropdowns.min.css" rel="stylesheet">
1212

1313
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
1414
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
@@ -103,6 +103,9 @@ <h1>Bootstrap NavBar</h1>
103103
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
104104
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
105105

106-
<script src="js/navbar.js"></script>
106+
<script src="dist/js/bootstrap-navbar-dropdowns.min.js"></script>
107+
<script>
108+
$('.navbar').navbarDropdown();
109+
</script>
107110
</body>
108111
</html>

‎js/bootstrap-navbar-dropdowns.js‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,46 @@
1+
(function ($) {
2+
$.fn.navbarDropdown = function () {
3+
$(this).find('.dropdown-item.dropdown').on('click', function (e) {
4+
var $el = $(this).children('.dropdown-toggle');
5+
if ($el.length > 0 && $(e.target).hasClass('dropdown-toggle')) {
6+
var $parent = $el.offsetParent(".dropdown-menu");
7+
$(this).parent("li").toggleClass('open');
8+
9+
if (!$parent.parent().hasClass('navbar-nav')) {
10+
if ($parent.hasClass('show')) {
11+
$parent.removeClass('show');
12+
$el.next().removeClass('show');
13+
$el.next().css({"top": -999, "left": -999});
14+
} else {
15+
$parent.parent().find('.show').removeClass('show');
16+
$parent.addClass('show');
17+
$el.next().addClass('show');
18+
$el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4});
19+
}
20+
e.preventDefault();
21+
e.stopPropagation();
22+
}
23+
return this;
24+
}
25+
});
26+
27+
$(this).find('.dropdown').on('hidden.bs.dropdown', function () {
28+
$(this).find('li.dropdown').removeClass('show open');
29+
$(this).find('ul.dropdown-menu').removeClass('show open');
30+
});
31+
32+
return this;
33+
};
34+
}(jQuery));
35+
/*
136
$(document).ready(function () {
237
338
$('.navbar .dropdown-item.dropdown').on('click', function (e) {
439
var $el = $(this).children('.dropdown-toggle');
540
if ($el.length > 0 && $(e.target).hasClass('dropdown-toggle')) {
641
var $parent = $el.offsetParent(".dropdown-menu");
742
$(this).parent("li").toggleClass('open');
8-
43+
944
if (!$parent.parent().hasClass('navbar-nav')) {
1045
if ($parent.hasClass('show')) {
1146
$parent.removeClass('show');
@@ -30,3 +65,4 @@ $(document).ready(function () {
3065
});
3166
3267
});
68+
*/

‎package.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
{
22
"name": "bootstrap-navbar-dropdowns",
3-
"version": "4.0.3",
3+
"version": "4.0.4",
44
"description": "Twitter Bootstrap 4 Responsive Navbar with Multiple Dropdowns",
55
"main": "dist/js/index.js",
66
"scripts": {
77
"test": "npm run css; npm run js",
8+
"build": "npm run css; npm run js",
89
"css": "npm run css-compile; npm run css-minify",
910
"css-compile": "mkdir -p dist/css; cp -rf css/*.css dist/css/",
1011
"css-minify": "cleancss --level 1 --source-map --source-map-inline-sources --output dist/css/$npm_package_name.min.css dist/css/$npm_package_name.css",
11-
"js": "npm run js-compile; npm run js-minify",
12+
"js": "npm run js-compile; npm run js-minify; npm run js-uglify",
1213
"js-compile": "babel --out-dir dist/js/ js/*.js",
1314
"js-minify": "terser --compress --output dist/js/$npm_package_name.min.js dist/js/$npm_package_name.js",
15+
"js-uglify": "uglifyjs dist/js/$npm_package_name.min.js -c -m -e -o dist/js/$npm_package_name.min.js",
1416
"release-zip": "cd dist/ && zip -r9 $npm_package_name-$npm_package_version-dist.zip * && mv $npm_package_name-$npm_package_version-dist.zip .."
1517
},
1618
"repository": "fontenele/bootstrap-navbar-dropdowns",
@@ -37,6 +39,7 @@
3739
"@babel/core": "7.7.5",
3840
"@babel/preset-env": "7.7.6",
3941
"clean-css-cli": "4.3.0",
40-
"terser": "4.4.2"
42+
"terser": "4.4.2",
43+
"uglify-js": "^3.11.2"
4144
}
4245
}

0 commit comments

Comments
 (0)