Skip to content

Commit d2eb84a

Browse files
Phil Hughescvrebert
Phil Hughes
authored and
cvrebert
committed
Warn about carousel controls/indicators with missing/wrong targets; fixes twbs#199
Closes twbs#203
1 parent 8935bc9 commit d2eb84a

File tree

5 files changed

+140
-1
lines changed

5 files changed

+140
-1
lines changed

‎src/bootlint.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -891,6 +891,18 @@ var LocationIndex = _location.LocationIndex;
891891
}
892892
});
893893
});
894+
addLinter("W014", function lintCarouselControls($, reporter) {
895+
var controls = $('.carousel-indicators > li, .carousel-control');
896+
controls.each(function (_index, cont) {
897+
var control = $(cont);
898+
var target = control.attr('href') || control.attr('data-target');
899+
var carousel = $(target);
900+
901+
if (!carousel.length || carousel.is(':not(.carousel)')) {
902+
reporter('Carousel controls and indicators should use `href` or `data-target` to reference an element with class `.carousel`.', control);
903+
}
904+
});
905+
});
894906

895907
exports._lint = function ($, reporter, disabledIdList, html) {
896908
var locationIndex = IN_NODE_JS ? new LocationIndex(html) : null;

‎test/bootlint_test.js‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -652,7 +652,6 @@ exports.bootlint = {
652652
);
653653
test.done();
654654
},
655-
656655
'outdated version of Bootstrap': function (test) {
657656
test.expect(5);
658657
test.deepEqual(lintHtml(utf8Fixture('outdated/bootstrap-css.html')),
@@ -671,5 +670,25 @@ exports.bootlint = {
671670
[],
672671
'should not complain about outdated libraries that just have "bootstrap" in their name.');
673672
test.done();
673+
},
674+
675+
'carousel control target': function (test) {
676+
test.expect(3);
677+
test.deepEqual(lintHtml(utf8Fixture('carousel/indicators.html')),
678+
[
679+
'Carousel controls and indicators should use `href` or `data-target` to reference an element with class `.carousel`.'
680+
],
681+
'should complain about incorrect indicator control targets.'
682+
);
683+
test.deepEqual(lintHtml(utf8Fixture('carousel/controls.html')),
684+
[
685+
'Carousel controls and indicators should use `href` or `data-target` to reference an element with class `.carousel`.'
686+
],
687+
'should complain about incorrect indicator control targets.'
688+
);
689+
test.deepEqual(lintHtml(utf8Fixture('carousel/valid.html')),
690+
[], 'should not complain about correct indicator control targets.'
691+
);
692+
test.done();
674693
}
675694
};

‎test/fixtures/carousel/controls.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<title>Test</title>
8+
<!--[if lt IE 9]>
9+
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
10+
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
11+
<![endif]-->
12+
<script src="../../lib/jquery.min.js"></script>
13+
14+
<link rel="stylesheet" href="../../lib/qunit.css">
15+
<script src="../../lib/qunit.js"></script>
16+
<script src="../../../dist/browser/bootlint.js"></script>
17+
<script src="../generic-qunit.js"></script>
18+
</head>
19+
<body>
20+
<div class="carousel slide" data-ride="carousel">
21+
<div class="carousel-inner" role="listbox">
22+
<div class="item">
23+
<div class="carousel-caption"></div>
24+
</div>
25+
</div>
26+
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
27+
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
28+
<span class="sr-only">Previous</span>
29+
</a>
30+
</div>
31+
<div id="qunit"></div>
32+
<ol id="bootlint">
33+
<li data-lint="Carousel controls and indicators should use `href` or `data-target` to reference an element with class `.carousel`."></li>
34+
</ol>
35+
</body>
36+
</html>

‎test/fixtures/carousel/indicators.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<title>Test</title>
8+
<!--[if lt IE 9]>
9+
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
10+
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
11+
<![endif]-->
12+
<script src="../../lib/jquery.min.js"></script>
13+
14+
<link rel="stylesheet" href="../../lib/qunit.css">
15+
<script src="../../lib/qunit.js"></script>
16+
<script src="../../../dist/browser/bootlint.js"></script>
17+
<script src="../generic-qunit.js"></script>
18+
</head>
19+
<body>
20+
<div class="carousel slide" data-ride="carousel">
21+
<ol class="carousel-indicators">
22+
<li data-target="#carousel-example-generic" data-slide-to="0"></li>
23+
</ol>
24+
<div class="carousel-inner" role="listbox">
25+
<div class="item">
26+
<div class="carousel-caption"></div>
27+
</div>
28+
</div>
29+
</div>
30+
<div id="qunit"></div>
31+
<ol id="bootlint">
32+
<li data-lint="Carousel controls and indicators should use `href` or `data-target` to reference an element with class `.carousel`."></li>
33+
</ol>
34+
</body>
35+
</html>

‎test/fixtures/carousel/valid.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<title>Test</title>
8+
<!--[if lt IE 9]>
9+
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
10+
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
11+
<![endif]-->
12+
<script src="../../lib/jquery.min.js"></script>
13+
14+
<link rel="stylesheet" href="../../lib/qunit.css">
15+
<script src="../../lib/qunit.js"></script>
16+
<script src="../../../dist/browser/bootlint.js"></script>
17+
<script src="../generic-qunit.js"></script>
18+
</head>
19+
<body>
20+
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
21+
<ol class="carousel-indicators">
22+
<li data-target="#carousel-example-generic" data-slide-to="0"></li>
23+
</ol>
24+
<div class="carousel-inner" role="listbox">
25+
<div class="item">
26+
<div class="carousel-caption"></div>
27+
</div>
28+
</div>
29+
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
30+
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
31+
<span class="sr-only">Previous</span>
32+
</a>
33+
</div>
34+
<div id="qunit"></div>
35+
<ol id="bootlint"></ol>
36+
</body>
37+
</html>

0 commit comments

Comments
 (0)