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

…fallback, support the each breaker, update docs
ryanve · Sep 11, 2012 · 88054fe · 88054fe
1 parent 1d9e1ee
commit 88054fe
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -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 )
+$(elems).hasClass( className )
-vibe.fn.removeClass( ssvClassNames )
+```
-vibe.fn.toggleClass( ssvClassNames )
+standalone:
-vibe.fn.hasClass( className )
+```js
+vibe.fn.hasClass.call(elems,  className )
 ```
 
 # license

diff --git a/package.json b/package.json
@@ -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"],

diff --git a/test.html b/test.html
@@ -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> 

diff --git a/vibe.js b/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;
+            var s = '', classes = el.className.split(ssv), i = classes.length;
-            el.className = classes.replace(space + c + space, space).replace(trimmer, '');
+            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++ ) {
+            for ( n = c.length; i < l; i++ ) {
-                if ( els[i] != null ) {
+                for ( j = 0; j < n; j++ ) {
-                    for ( j = 0; j < h; j++ ) {
+                    method( els[i], c[j] );
-                        method(els[i], c[j]);
-                    }
                 }
             }
         }

diff --git a/vibe.min.js b/vibe.min.js