Permalink
Browse files

version 0.7.0: use classList.toggle where avail, improve removeClass …

…fallback, support the each breaker, update docs
  • Loading branch information...
1 parent 1d9e1ee commit 88054fe6064883d2d2bcf67d457e1c915ebc0b02 @ryanve committed Sep 11, 2012
Showing with 47 additions and 27 deletions.
  1. +24 −9 README.md
  2. +1 −1 package.json
  3. +1 −1 test.html
  4. +17 −12 vibe.js
  5. +4 −4 vibe.min.js
View
@@ -1,19 +1,19 @@
[vibe](https://github.com/ryanve/vibe)
====
-**[vibe](https://github.com/ryanve/vibe)** is a [fast](http://jsperf.com/vibe) cross-browser [classList](https://developer.mozilla.org/en-US/docs/DOM/element.classList) module that you can drop into a base library or use as a standalone object.
+**[vibe](https://github.com/ryanve/vibe)** is a [fast](http://jsperf.com/vibe) cross-browser [classList](https://developer.mozilla.org/en-US/docs/DOM/element.classList) [module](https://npmjs.org/package/vibe) that you can mixin to a base library or use as a standalone object.
+
+**[CDN](http://airve.github.com)**: [dev](http://airve.github.com/js/vibe/vibe.js) | [min](http://airve.github.com/js/vibe/vibe.min.js)
```
$ npm install vibe
```
-**[CDN](http://airve.github.com)**: [dev](http://airve.github.com/js/vibe/vibe.js) - [min](http://airve.github.com/js/vibe/vibe.min.js)
-
# methods
### static
-fast simple versions are on the top-level:
+Cheap simple methods are on the top-level. Here **@param** `{Object}` **elem** must be a native element and **@param** `{string}` **className** is a CSS class, with **no** whitespace. If you pass `""`, no change occurs. No typechecking is done. Non-strings coherce to strings:
```js
vibe.addClass( elem, className )
@@ -23,13 +23,28 @@ vibe.hasClass( elem, className )
```
### chain
-jQuery-compatible versions are in the chain:
+jQuery-compatible-ish methods (designed to be mixed into a jQuery-like lib) are usable with standalone vibe via [.call](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/call). Here **@this** `{Object|Array}` is an array or array-like set of elements, and **@param** `{string|Array|Function}` **ssv** is an array or space-separated string of class names, or a function to determine its value. Functions are scoped such that `this` is the current element. If the function returns `false`, further set iterations cease via [break](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/break). If **ssv** is `null|undefined|whitespace|lengthless`, no change occurs:
+
+```js
+$(elems).addClass( ssv )
+$(elems).removeClass( ssv )
+$(elems).toggleClass( ssv )
+```
+standalone:
+```js
+vibe.fn.addClass.call( elems, ssv )
+vibe.fn.removeClass.call( elems, ssv )
+vibe.fn.toggleClass.call( elems, ssv )
+```
+
+As for `.hasClass`: **@param** `{string}` **className** is the name of a single CSS class (like the statics) and the **@return** is boolean. It returns `true` if **any** of the elements have the class. Otherwise it returns `false`:
```js
-vibe.fn.addClass( ssvClassNames )
-vibe.fn.removeClass( ssvClassNames )
-vibe.fn.toggleClass( ssvClassNames )
-vibe.fn.hasClass( className )
+$(elems).hasClass( className )
+```
+standalone:
+```js
+vibe.fn.hasClass.call(elems, className )
```
# license
View
@@ -1,7 +1,7 @@
{
"name": "vibe",
"description": "CSS classes for the masses",
- "version": "0.6.1",
+ "version": "0.7.0",
"homepage": "https://github.com/ryanve/vibe",
"author": "Ryan Van Etten <@ryanve>",
"keywords": ["css", "class", "classes", "classlist", "dom", "ender", "javascript", "js"],
View
@@ -1 +1 @@
-<!doctype html><html><head> <meta charset=utf-8> <title>vibe :: test</title> <link rel=stylesheet href="http://css3base.com/css/normalize.css"> <style> body{width:94%;padding:1em 3%;margin: 0 auto;color:#333} .test{margin:1em 0;height:2em} .magenta{background:#f09} .red{background:#f03} .yellow{background:#ff0} .white{background:#fff} </style> <script src="vibe.min.js"></script></head><body> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div><script>(function (w, d, vibe, console) { var hasConsole = !!(console && console.log); var els = d.getElementsByTagName('div'); var docElem = document.documentElement , classList = 'classList' , NATIVE = classList in docElem && !!docElem[classList].add && !!docElem[classList].remove && !!docElem[classList].contains; var log = hasConsole ? function (o) { console.log(o); } : function (o) { alert(o); }; log('native: ' + NATIVE ) log( typeof d.body.className ); log( vibe.addClass(d.body, 'magenta') || d.body.className ); log( vibe.toggleClass(d.body, 'red') || d.body.className ) log( vibe.fn.hasClass.call([d.body], 'red') !== vibe.fn.hasClass.call([d.body], 'yellow') ) log( vibe.toggleClass(d.body, 'yellow') || d.body.className ); log( vibe.fn.hasClass.call([d.body], 'yellow') ) log( vibe.fn.addClass.call(els, 'white magenta').length ) log( vibe.fn.removeClass.call(els, function () { return 'white'; }).length ) log( vibe.fn.toggleClass.call(els, 'white').length ) log( vibe.fn.hasClass.call(els, 'white') ) if ( hasConsole ) { log(vibe); }}(this, document, this.vibe, this.console));</script></body></html>
+<!doctype html><html><head> <meta charset=utf-8> <title>vibe :: test</title> <link rel=stylesheet href="http://css3base.com/css/normalize.css"> <style> body{width:94%;padding:1em 3%;margin: 0 auto;color:#333} .test{margin:1em 0;height:2em} .magenta{background:#f09} .red{background:#f03} .yellow{background:#ff0} .white{background:#fff} </style> <script src="vibe.js"></script></head><body> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div><script>(function (w, d, vibe, console) { var hasConsole = !!(console && console.log); var els = d.getElementsByTagName('div'); var docElem = document.documentElement , classList = 'classList' , NATIVE = classList in docElem && !!docElem[classList].toggle && !!docElem[classList].add && !!docElem[classList].remove && !!docElem[classList].contains; var log = hasConsole ? function (o) { console.log(o); } : function (o) { alert(o); }; log('native: ' + NATIVE ) log( typeof d.body.className ); log( vibe.addClass(d.body, 'magenta') || d.body.className ); log( vibe.toggleClass(d.body, 'red') || d.body.className ) log( vibe.fn.hasClass.call([d.body], 'red') !== vibe.fn.hasClass.call([d.body], 'yellow') ) log( vibe.toggleClass(d.body, 'yellow') || d.body.className ); log( vibe.fn.hasClass.call([d.body], 'yellow') ) log( vibe.fn.addClass.call(els, 'white magenta').length ) log( vibe.fn.removeClass.call(els, function () { return 'white'; }).length ) log( vibe.fn.toggleClass.call(els, 'white').length ) log( vibe.fn.hasClass.call(els, 'white') ) if ( hasConsole ) { log(vibe); }}(this, document, this.vibe, this.console));</script></body></html>
View
29 vibe.js
@@ -3,7 +3,7 @@
* @author Ryan Van Etten (c) 2012
* @link http://github.com/ryanve/vibe
* @license MIT
- * @version 0.6.1
+ * @version 0.7.0
*/
/*jslint browser: true, devel: true, node: true, passfail: false, bitwise: true, continue: true
@@ -23,9 +23,10 @@
, docElem = document.documentElement
, classList = 'classList'
, NATIVE = classList in docElem
+ && !!docElem[classList].contains
&& !!docElem[classList].add
&& !!docElem[classList].remove
- && !!docElem[classList].contains
+ && !!docElem[classList].toggle
, addClass = NATIVE ? function (el, c) {
'' === c || el[classList].add(c);
@@ -37,8 +38,12 @@
, removeClass = NATIVE ? function (el, c) {
'' === c || el[classList].remove(c);
} : function (el, c) {
- var classes = space + el.className.split(ssv).join(space) + space;
- el.className = classes.replace(space + c + space, space).replace(trimmer, '');
+ var s = '', classes = el.className.split(ssv), i = classes.length;
+ c = s + c; // use `s` to convert `c` to string ( `s` is repurposed below )
+ while ( i-- ) {// loop backwards ( but maintain the class order )
+ classes[i] && classes[i] !== c && (s = classes[i] + ((s ? space : s) + s));
+ }
+ el.className = s;
}
, hasClass = NATIVE ? function (el, c) {
@@ -50,7 +55,7 @@
}
, toggleClass = NATIVE ? function (el, c) {
- '' === c || el[classList][ el[classList].contains(c) ? 'remove' : 'add' ](c);
+ '' === c || el[classList].toggle(c);
} : function (el, c) {
(hasClass(el, c) ? removeClass : addClass)(el, c);
};
@@ -63,18 +68,18 @@
*/
function essEach (c, method, els) {
if ( null == c ) { return els; }
- var j, h, i = 0, l = els.length;
+ var j, n, i = 0, l = els.length;
if ( typeof c == 'function' ) {
while ( i < l ) {
- essEach( c.call(els[i]), method, [ els[i++] ] );
+ n = c.call( els[i] );
+ if ( n === false ) { break; }
+ essEach( n, method, [ els[i++] ] );
}
} else {
c = typeof c == 'string' ? c.split(ssv) : c;
- for ( h = c.length; i < l; i++ ) {
- if ( els[i] != null ) {
- for ( j = 0; j < h; j++ ) {
- method(els[i], c[j]);
- }
+ for ( n = c.length; i < l; i++ ) {
+ for ( j = 0; j < n; j++ ) {
+ method( els[i], c[j] );
}
}
}
View
Oops, something went wrong.

0 comments on commit 88054fe

Please sign in to comment.