Permalink
Browse files

Version 0.5

Improved class matching and added class toggle and add actions to the
cls method
  • Loading branch information...
kylebarrow committed Jul 25, 2012
1 parent 2646b02 commit 864474c27bab4ae1bb0205f0c78abae0d5f06ff1
Showing with 49 additions and 29 deletions.
  1. +11 −9 README.md
  2. +1 −1 chibi-min.js
  3. +37 −19 chibi.js
View
@@ -1,4 +1,4 @@
-# Chibi v0.4
+# Chibi v0.5
#### A tiny JavaScript micro-framework
@@ -10,13 +10,13 @@ Working on something a wee bit more complex? Unlike fat, grown-up frameworks, Ch
* Chibi is really tiny: 5KB minified, 2KB gzipped, small enough to stick inline on single page web apps, saving an extra HTTP request.
* Supports modern desktop and mobile browsers including Chrome, Firefox, Internet Explorer, Opera and Safari (see Browser Support below).
-* Supports creaky old browsers like IE6.
+* Supports creaky old browsers like IE7. Chibi most likely also supports IE6 but I really don't care.
* No animation cruft, instead use CSS transitions like a nice person.
* In modern browsers, Chibi typically executes DOM manipulation 20% to 50% faster than grown-up frameworks.
### The lumpy, chewy bits
-* Chibi's polyfill for `document.querySelectorAll()` is limited to browser CSS support and is not as fast of some dedicated selector engines. This means no `input[type=text]` or `p:nth-child(even)` selectors with IE6. Fortunately modern browser don't need this polyfill.
+* Chibi's polyfill for `document.querySelectorAll()` is limited to browser CSS support and is not as fast of some dedicated selector engines. This means no `input[type=text]` or `p:nth-child(even)` selectors with IE7. Fortunately modern browser don't need this polyfill.
* Ancient browsers that support neither `document.querySelectorAll()` nor `window.getComputedStyle` can bugger off.
### Browser Support
@@ -29,7 +29,7 @@ Chibi has been tested with and supports the following browsers:
* Chrome Android
* Firefox 3.5 or higher
* Firefox Mobile
-* Internet Explorer 6 or higher
+* Internet Explorer 7 or higher
* Internet Explorer Mobile 9 or higher
* Opera 10 or higher
* Opera Mini
@@ -106,7 +106,7 @@ $().loaded(foo);
**find** will return either a single DOM element (only one matching DOM element found), array of DOM elements (more than one matching DOM element found), or false (no matching DOM element found).
-**find** can optionally filter results by first, last, odd and even, useful when working with crappy browsers like IE6 with weak CSS pseudo support.
+**find** can optionally filter results by first, last, odd and even, useful when working with crappy browsers like IE7 with weak CSS pseudo support.
```html
<!DOCTYPE html>
@@ -236,12 +236,12 @@ p {display:none}
</html>
```
-#### $(selector).cls(*class*,*replace/add/remove*)
+#### $(selector).cls(*class(es)*,*replace/add/remove/toggle/has*)
*Gets or optionally sets the class for a selector.*
**cls** with no arguments will return either a class string (only one matching DOM element found) or array of class strings (more than one matching DOM element found).
-If only the *class* argument is specified, the default action is to replace any DOM element class with this class.
+If only the *class(es)* argument is specified, the default action is to replace any DOM element class with this class. If the *has* action is specified, Chibi returns true if the selector includes the *class(es)*.
```html
<!DOCTYPE html>
@@ -258,7 +258,9 @@ If only the *class* argument is specified, the default action is to replace any
<p>Foo</p>
<p class="mono">Bar</p>
<script>
- $('p').cls(); // returns classes set on all paragraph elements, as there is more than one paragraph element, an array ['','mono']
+ $('p').cls(); // returns classes set on all paragraph elements, as there is more than one paragraph element, an array ['', 'mono']
+ $('p').cls('mono','has'); // returns true if the paragraph element includes the class(es), as there is more than one paragraph element, an array [false, true]
+ $('p').cls('mono','toggle'); // toggles the mono class on all paragraph elements
$('p').cls('red bold'); // sets the class to "red" and "bold" to all paragraph elements, replacing any existing classes
$('p').cls('red bold','replace'); // also sets the class to "red" and "bold" to all paragraph elements, replacing any existing classes
$('p').cls('mono','add'); // adds the "mono" class to all paragraph elements
@@ -359,7 +361,7 @@ If only the *html* argument is specified, this will replace the inner HTML of th
<p>Bar</p>
<script>
function foo() {
- alert("I've been clicked");
+ // Do awesome
}
$('p').on('click',foo); // adds the 'foo' click event listener to all paragraphs
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -1,4 +1,4 @@
-/*Chibi v0.4, Copyright (C) 2012 Kyle Barrow
+/*Chibi v0.5, Copyright (C) 2012 Kyle Barrow
This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 3 of the License, or (at your option) any later version.
@@ -105,29 +105,23 @@ You should have received a copy of the GNU General Public License along with thi
// Polyfill querySelectorAll
d.querySelectorAll = function(selector) {
- var style, head, allnodes, selectednodes = [];
+ var style, head = d.getElementsByTagName('head')[0], allnodes, selectednodes = [];
style = d.createElement('STYLE');
style.type = 'text/css';
-
if (style.styleSheet) {
style.styleSheet.cssText = selector + ' {a:b}';
- if (d.getElementsByTagName('head').length === 0) {
- head = d.createElement('head');
- d.getElementsByTagName('html')[0].appendChild(head);
- }
-
- d.getElementsByTagName('head')[0].appendChild(style);
+ head.appendChild(style);
allnodes = d.getElementsByTagName('*');
for (var i = 0; i < allnodes.length; i++) {
(computeStyle(allnodes[i], 'a') === 'b') ? selectednodes.push(allnodes[i]) : 0;
}
- d.getElementsByTagName('head')[0].removeChild(style);
+ head.removeChild(style);
}
return selectednodes;
@@ -352,36 +346,60 @@ You should have received a copy of the GNU General Public License along with thi
},
// Get/Set/Add/Remove class
cls: function(classes, action) {
- var values = [], classarray, search;
+ var values = [], classarray, classname, search, has;
if (classes) {
+ // Trim any whitespace
classarray = classes.split(' ');
action = action || 'replace';
}
nodeLoop(function(elm) {
+
+ classname = elm.className;
+
if (classes) {
switch (action) {
case 'add':
- elm.className = elm.className + " " + classes;
+ elm.className = classname + " " + classes;
+ break;
+
+ case 'replace':
+ elm.className = classes;
break;
+ case 'has':
+ case 'toggle':
case 'remove':
+ has = true;
+
for (var i = 0; i < classarray.length; i++) {
- search = new RegExp(classarray[i], "g");
- elm.className = elm.className.replace(search, '');
+
+ search = new RegExp('\\b'+classarray[i]+'\\b', 'g');
+
+ if (action === "has") {
+ if (!classname.match(search)) {
+ has = false;
+ break;
+ }
+ }
+ else if (action === "toggle") {
+ elm.className = (elm.className.match(search))? elm.className.replace(search, '') : elm.className + " " + classarray[i];
+ }
+ else { // Replace
+ elm.className = elm.className.replace(search, '');
+ }
+
}
- break;
- case 'replace':
- elm.className = classes;
- break;
+ (action === "has")? values.push(has) : 0;
+ break;
}
}
else
{
- values.push(elm.className);
+ values.push(classname);
}
},nodes);

0 comments on commit 864474c

Please sign in to comment.