Skip to content
This repository was archived by the owner on Feb 1, 2022. It is now read-only.

Warn about .pull-right or .pull-left within a navbar #189

Open
zacechola wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Warn about .pull-right or .pull-left within a navbar #189

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ca920c0
Warn about .pull-right or .pull-left within a navbar
zacechola Nov 15, 2014
4a2c6e7
rename function
Jan 16, 2015
b4cb245
More explicitly targeting components
Apr 6, 2015
ed4f576
Merge remote-tracking branch 'upstream/master' into quick_floats
Apr 6, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 62 additions & 7 deletions dist/browser/bootlint.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10332,6 +10332,7 @@ if (typeof define === 'function' && define.amd)
/*eslint-env node */

var cheerio = require('cheerio');
var parseUrl = require('url').parse;
var semver = require('semver');
var _location = require('./location');
var LocationIndex = _location.LocationIndex;
Expand Down Expand Up @@ -10683,19 +10684,27 @@ var LocationIndex = _location.LocationIndex;

// check for jQuery <script>s
var jqueries = $([
'script[src*="jquery.min"]',
'script[src*="jQuery.min"]',
'script[src*="jquery.js"]',
'script[src*="jQuery.js"]'
'script[src*="jquery"]',
'script[src*="jQuery"]'
].join(','));
if (!jqueries.length) {
reporter(NO_JQUERY);
return;
}
jqueries.each(function () {
var script = $(this);
var matches = script.attr('src').match(/\d+\.\d+\.\d+/g);
if (!matches) {
var pathSegments = parseUrl(script.attr('src')).pathname.split('/');
var filename = pathSegments[pathSegments.length - 1];
if (!/^j[qQ]uery(\.min)?\.js$/.test(filename)) {
return;
}
var matches = pathSegments.map(function (segment) {
var match = segment.match(/^\d+\.\d+\.\d+$/);
return match ? match[0] : null;
}).filter(function (match) {
return match !== null;
});
if (!matches.length) {
return;
}
var version = matches[matches.length - 1];
Expand Down Expand Up @@ -11095,6 +11104,12 @@ var LocationIndex = _location.LocationIndex;
reporter('Using `.pull-left` or `.pull-right` as part of the media object component is deprecated as of Bootstrap v3.3.0. Use `.media-left` or `.media-right` instead.', mediaPulls);
}
});
addLinter("W011", function lintMediaPulls($, reporter) {

@cvrebert cvrebert Jan 8, 2015

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Function name needs changing

var mediaPulls = $('.navbar .pull-left, .navbar .pull-right');

@cvrebert cvrebert Jan 8, 2015

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't seem specific enough. It's permissible to use the .pull-* classes within components that are within a navbar, but not on parts of the navbar itself.

@zacechola zacechola Jan 14, 2015

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

[
".navbar-nav.pull-right", 
".navbar-nav.pull-left", 
".navbar-text.pull-right", 
".navbar-text.pull-left", 
".navbar-btn.pull-right", 
".navbar-btn.pull-left", 
".navbar-form.pull-right", 
".navbar-form.pull-left", 
".navbar-link.pull-right", 
".navbar-link.pull-left"
]

This work? Obviously simplified with a forEach or map or something when building the selector...

Seems to fit with this:

Align nav links, forms, buttons, or text, using the .navbar-left or .navbar-right utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <ul> with the respective utility class applied.

if (mediaPulls.length) {
reporter('To align components in navbars with utility classes, use `.navbar-left` or `.navbar-right` instead.', mediaPulls);
}
});

exports._lint = function ($, reporter, disabledIdList, html) {
var locationIndex = IN_NODE_JS ? new LocationIndex(html) : null;
Expand Down Expand Up @@ -11190,4 +11205,44 @@ var LocationIndex = _location.LocationIndex;
}
})(typeof exports === 'object' && exports || this);

},{"./location":1,"cheerio":2,"semver":3}]},{},[4]);
},{"./location":1,"cheerio":2,"semver":3,"url":5}],5:[function(require,module,exports){
/*eslint-env node, browser */
/* jshint browser: true */
/**
* Simple lightweight shim of Node.js's `url.parse()`
* ( http://nodejs.org/docs/latest/api/url.html )
* for use within browsers.
*/
(function () {
'use strict';

// Only properties common to both browsers and Node.js are supported.
// For what browsers support, see https://developer.mozilla.org/en-US/docs/Web/API/URLUtils
var URL_PROPERTIES = [
'hash',
'host',
'hostname',
'href',
'pathname',
'port',
'protocol',
'search'
];

/**
* @param {string} urlStr URL to parse
* @returns {object} Object with fields representing the various parts of the parsed URL.
*/
function parse(urlStr) {
var anchor = document.createElement('a');
anchor.href = urlStr;
var urlObj = {};
URL_PROPERTIES.forEach(function (property) {
urlObj[property] = anchor[property];
});
return urlObj;
}
exports.parse = parse;
})();

},{}]},{},[4]);
6 changes: 6 additions & 0 deletions src/bootlint.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -780,6 +780,12 @@ var LocationIndex = _location.LocationIndex;
reporter('Using `.pull-left` or `.pull-right` as part of the media object component is deprecated as of Bootstrap v3.3.0. Use `.media-left` or `.media-right` instead.', mediaPulls);
}
});
addLinter("W011", function lintMediaPulls($, reporter) {
var mediaPulls = $('.navbar .pull-left, .navbar .pull-right');
if (mediaPulls.length) {
reporter('To align components in navbars with utility classes, use `.navbar-left` or `.navbar-right` instead.', mediaPulls);
}
});

exports._lint = function ($, reporter, disabledIdList, html) {
var locationIndex = IN_NODE_JS ? new LocationIndex(html) : null;
Expand Down
13 changes: 13 additions & 0 deletions test/bootlint_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -611,5 +611,18 @@ exports.bootlint = {
'should not complain about .media-left or .media-right classes'
);
test.done();
},

'pull classes inside navbar': function (test) {
test.expect(2);
test.deepEqual(lintHtml(utf8Fixture('navbar/pull-classes.html')),
['To align components in navbars with utility classes, use `.navbar-left` or `.navbar-right` instead.'],
'should complain about .pull-* classes in .navbar'
);
test.deepEqual(lintHtml(utf8Fixture('navbar/navbar-classes.html')),
[],
'should not complain about .navbar-left or .navbar-right classes'
);
test.done();
}
};
33 changes: 33 additions & 0 deletions test/fixtures/navbar/navbar-classes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Test</title>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="../../lib/jquery.min.js"></script>

<link rel="stylesheet" href="../../lib/qunit.css">
<script src="../../lib/qunit.js"></script>
<script src="../../../dist/browser/bootlint.js"></script>
<script src="../generic-qunit.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<a class="navbar-brand navbar-left" href="#">Brand</a>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</nav>
<div id="qunit"></div>
<ol id="bootlint"> </ol>
</body>
</html>

34 changes: 34 additions & 0 deletions test/fixtures/navbar/pull-classes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Test</title>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="../../lib/jquery.min.js"></script>

<link rel="stylesheet" href="../../lib/qunit.css">
<script src="../../lib/qunit.js"></script>
<script src="../../../dist/browser/bootlint.js"></script>
<script src="../generic-qunit.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<a class="navbar-brand pull-left" href="#">Brand</a>
<ul class="nav navbar-nav pull-right">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</nav>
<div id="qunit"></div>
<ol id="bootlint">
<li data-lint="To align components in navbars with utility classes, use `.navbar-left` or `.navbar-right` instead."></li>
</ol>
</body>
</html>