Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Version 0.5

Improved class matching and added class toggle and add actions to the
cls method
  • Loading branch information...
commit 864474c27bab4ae1bb0205f0c78abae0d5f06ff1 1 parent 2646b02
@kylebarrow authored
Showing with 49 additions and 29 deletions.
  1. +11 −9 README.md
  2. +1 −1  chibi-min.js
  3. +37 −19 chibi.js
View
20 README.md
@@ -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
2  chibi-min.js
@@ -1 +1 @@
-/*Chibi v0.4, (C)2012 Kyle Barrow, GPLv3 Licensed*/(function(){"use strict";function o(){n=!0;for(var t=0;t<e.length;t++)e[t]();e=[]}function u(){r=!0;n||o();for(var e=0;e<t.length;e++)t[e]();t=[]}function a(e,t){var n=t.length;while(n--)e(t[n])}function f(e,t){return e.currentStyle?e.currentStyle[t]:s.getComputedStyle?s.getComputedStyle(e,null).getPropertyValue(t):null}function l(e,t){return encodeURIComponent(e).replace(/%20/g,"+")+"="+encodeURIComponent(t).replace(/%20/g,"+")}function c(e){var t=[],n=[];if(e)if(e.nodeType&&e.nodeType===1)t=[e];else if(typeof e=="object"||typeof e.length=="number"&&typeof e.item=="function")t=e;else if(typeof e=="string"){i.querySelectorAll||(i.querySelectorAll=function(e){var t,n,r,s=[];t=i.createElement("STYLE");t.type="text/css";if(t.styleSheet){t.styleSheet.cssText=e+" {a:b}";if(i.getElementsByTagName("head").length===0){n=i.createElement("head");i.getElementsByTagName("html")[0].appendChild(n)}i.getElementsByTagName("head")[0].appendChild(t);r=i.getElementsByTagName("*");for(var o=0;o<r.length;o++)f(r[o],"a")==="b"?s.push(r[o]):0;i.getElementsByTagName("head")[0].removeChild(t)}return s});t=i.querySelectorAll(e)}for(var r=0;r<t.length;r++)n[r]=t[r];return n}function h(e,t,n){try{e.style[t]=n}catch(r){}}function p(e){e=e.reverse();e.length===1?e=e[0]:0;return e}function d(e){var t="",n;if(e.constructor===Object){for(n in e)if(e.hasOwnProperty(n))if(e[n].constructor===Array)for(var r=0;r<e[n].length;r++)t+="&"+l(n,e[n][r]);else t+="&"+l(n,e[n])}else a(function(e){if(e.nodeName==="FORM")for(var r=0;r<e.elements.length;r++){n=e.elements[r];if(!n.disabled)switch(n.type){case"button":case"image":case"file":case"submit":case"reset":break;case"select-one":n.length>0?t+="&"+l(n.name,n.value):0;break;case"select-multiple":for(var i=0;i<n.length;i++)n[i].selected?t+="&"+l(n.name,n[i].value):0;break;case"checkbox":case"radio":n.checked?t+="&"+l(n.name,n.value):0;break;default:t+="&"+l(n.name,n.value)}}},e);t.length>0?t=t.substring(1):0;return t}function v(o){var u=c(o);return{ready:function(t){t&&(n?t():e.push(t))},loaded:function(e){e&&(r?e():t.push(e))},find:function(e){if(e){var t=[];switch(e){case"first":u.length>0?u=[u.shift()]:0;break;case"last":u.length>0?u=[u.pop()]:0;break;case"odd":for(var n=0;n<u.length;n+=2)t.push(u[n]);u=t;break;case"even":for(var n=1;n<u.length;n+=2)t.push(u[n]);u=t}}return u.length>0?u.length===1?u[0]:u:!1},hide:function(){a(function(e){e.style.display="none"},u)},show:function(){a(function(e){e.style.display="";f(e,"display")==="none"?e.style.display="block":0},u)},toggle:function(){a(function(e){if(f(e,"display")==="none"){e.style.display="";f(e,"display")==="none"?e.style.display="block":0}else e.style.display="none"},u)},remove:function(){var e=u.length;a(function(e){try{e.parentNode.removeChild(e)}catch(t){}},u);u=[]},css:function(e,t){var n=[];a(function(r){t?h(r,e,t):r.style[e]?n.push(r.style[e]):f(r,e)?n.push(f(r,e)):n.push(null)},u);if(n.length>0){n=n.reverse();n.length===1?n=n[0]:0;return n}},cls:function(e,t){var n=[],r,i;if(e){r=e.split(" ");t=t||"replace"}a(function(s){if(e)switch(t){case"add":s.className=s.className+" "+e;break;case"remove":for(var o=0;o<r.length;o++){i=new RegExp(r[o],"g");s.className=s.className.replace(i,"")}break;case"replace":s.className=e}else n.push(s.className)},u);if(n.length>0)return p(n)},html:function(e,t){var n=[],r,s;a(function(o){if(t){r=i.createElement("div");r.innerHTML=e;while(s=r.lastChild)try{t==="before"?o.parentNode.insertBefore(s,o):t==="after"&&o.parentNode.insertBefore(s,o.nextSibling)}catch(u){break}}else e?o.innerHTML=e:n.push(o.innerHTML)},u);if(n.length>0)return p(n)},attr:function(e,t){var n=[];a(function(r){if(e){e=e.toLowerCase();switch(e){case"style":t?r.style.cssText=t:r.style.cssText?n.push(r.style.cssText):n.push(null);break;case"class":t?r.className=t:r.className?n.push(r.className):n.push(null);break;default:t?r.setAttribute(e,t):r.getAttribute(e)?n.push(r.getAttribute(e)):n.push(null)}}},u);if(n.length>0)return p(n)},val:function(e){var t=[],n=[];typeof e!="undefined"&&typeof e!="object"&&(e=[e]);a(function(r){if(e)switch(r.nodeName){case"SELECT":for(var i=0;i<r.length;i++)for(var s=0;s<e.length;s++){r[i].selected="";if(r[i].value===e[s]){r[i].selected="selected";break}}break;case"INPUT":switch(r.type){case"checkbox":case"radio":r.checked="";for(var i=0;i<e.length;i++)if(r.value===e[i]){r.checked="checked";break}break;default:r.value=e[0]}break;case"TEXTAREA":case"BUTTON":r.value=e[0]}else switch(r.nodeName){case"SELECT":var o=n.length;n.push([]);for(var i=0;i<r.length;i++)r[i].selected?n[o].push(r[i].value):0;switch(n[o].length){case 0:n[o]=null;break;case 1:n[o]=n[o][0]}break;case"INPUT":switch(r.type){case"checkbox":r.checked?n.push(r.value):n.push(null);break;case"radio":var u=!1;for(var i=0;i<t.length;i++)if(t[i][0]===r.name){r.checked?n[t[i][1]]=r.value:0;u=!0}if(!u){t.push([r.name,n.length]);r.checked?n.push(r.value):n.push(null)}break;default:n.push(r.value)}break;case"TEXTAREA":case"BUTTON":n.push(r.value)}},u);if(n.length>0)return p(n)},on:function(e,t,n){o===s||o===i?u=[o]:0;a(function(r){i.addEventListener?n?r.removeEventListener(e,t,!1):r.addEventListener(e,t,!1):i.attachEvent&&(n?r.detachEvent("on"+e,t):r.attachEvent("on"+e,t))},u)},ajax:function(e,t,n,r){var i,t=t||"GET",o=d(u),a="_ts="+ +(new Date);s.XMLHttpRequest?i=new XMLHttpRequest:s.ActiveXObject&&(i=new ActiveXObject("Microsoft.XMLHTTP"));if(i){t=t.toUpperCase();e=r?t==="POST"?e+"?"+a:e+"?"+o+"&"+a:t==="POST"?e:e+"?"+o;i.open(t,e,!0);t==="POST"?i.setRequestHeader("Content-Type","application/x-www-form-urlencoded"):0;i.send(o);i.onreadystatechange=function(){if(i.readyState===4&&i.status===200&&n)try{n(i.responseText)}catch(e){}}}}}}var e=[],t=[],n=!1,r=!1,i=document,s=window;if(i.addEventListener){i.addEventListener("DOMContentLoaded",o,!1);s.addEventListener("load",u,!1)}else if(i.attachEvent){i.attachEvent("onreadystatechange",o);s.attachEvent("onload",u)}else s.onload=u;s.$=v})();
+/*Chibi v0.5, (C)2012 Kyle Barrow, GPLv3 Licensed*/(function(){"use strict";function o(){n=!0;for(var t=0;t<e.length;t++)e[t]();e=[]}function u(){r=!0;n||o();for(var e=0;e<t.length;e++)t[e]();t=[]}function a(e,t){var n=t.length;while(n--)e(t[n])}function f(e,t){return e.currentStyle?e.currentStyle[t]:s.getComputedStyle?s.getComputedStyle(e,null).getPropertyValue(t):null}function l(e,t){return encodeURIComponent(e).replace(/%20/g,"+")+"="+encodeURIComponent(t).replace(/%20/g,"+")}function c(e){var t=[],n=[];if(e)if(e.nodeType&&e.nodeType===1)t=[e];else if(typeof e=="object"||typeof e.length=="number"&&typeof e.item=="function")t=e;else if(typeof e=="string"){i.querySelectorAll||(i.querySelectorAll=function(e){var t,n=i.getElementsByTagName("head")[0],r,s=[];t=i.createElement("STYLE");t.type="text/css";if(t.styleSheet){t.styleSheet.cssText=e+" {a:b}";n.appendChild(t);r=i.getElementsByTagName("*");for(var o=0;o<r.length;o++)f(r[o],"a")==="b"?s.push(r[o]):0;n.removeChild(t)}return s});t=i.querySelectorAll(e)}for(var r=0;r<t.length;r++)n[r]=t[r];return n}function h(e,t,n){try{e.style[t]=n}catch(r){}}function p(e){e=e.reverse();e.length===1?e=e[0]:0;return e}function d(e){var t="",n;if(e.constructor===Object){for(n in e)if(e.hasOwnProperty(n))if(e[n].constructor===Array)for(var r=0;r<e[n].length;r++)t+="&"+l(n,e[n][r]);else t+="&"+l(n,e[n])}else a(function(e){if(e.nodeName==="FORM")for(var r=0;r<e.elements.length;r++){n=e.elements[r];if(!n.disabled)switch(n.type){case"button":case"image":case"file":case"submit":case"reset":break;case"select-one":n.length>0?t+="&"+l(n.name,n.value):0;break;case"select-multiple":for(var i=0;i<n.length;i++)n[i].selected?t+="&"+l(n.name,n[i].value):0;break;case"checkbox":case"radio":n.checked?t+="&"+l(n.name,n.value):0;break;default:t+="&"+l(n.name,n.value)}}},e);t.length>0?t=t.substring(1):0;return t}function v(o){var u=c(o);return{ready:function(t){t&&(n?t():e.push(t))},loaded:function(e){e&&(r?e():t.push(e))},find:function(e){if(e){var t=[];switch(e){case"first":u.length>0?u=[u.shift()]:0;break;case"last":u.length>0?u=[u.pop()]:0;break;case"odd":for(var n=0;n<u.length;n+=2)t.push(u[n]);u=t;break;case"even":for(var n=1;n<u.length;n+=2)t.push(u[n]);u=t}}return u.length>0?u.length===1?u[0]:u:!1},hide:function(){a(function(e){e.style.display="none"},u)},show:function(){a(function(e){e.style.display="";f(e,"display")==="none"?e.style.display="block":0},u)},toggle:function(){a(function(e){if(f(e,"display")==="none"){e.style.display="";f(e,"display")==="none"?e.style.display="block":0}else e.style.display="none"},u)},remove:function(){var e=u.length;a(function(e){try{e.parentNode.removeChild(e)}catch(t){}},u);u=[]},css:function(e,t){var n=[];a(function(r){t?h(r,e,t):r.style[e]?n.push(r.style[e]):f(r,e)?n.push(f(r,e)):n.push(null)},u);if(n.length>0){n=n.reverse();n.length===1?n=n[0]:0;return n}},cls:function(e,t){var n=[],r,i,s,o;if(e){r=e.split(" ");t=t||"replace"}a(function(u){i=u.className;if(e)switch(t){case"add":u.className=i+" "+e;break;case"replace":u.className=e;break;case"has":case"toggle":case"remove":o=!0;for(var a=0;a<r.length;a++){s=new RegExp("\\b"+r[a]+"\\b","g");if(t==="has"){if(!i.match(s)){o=!1;break}}else t==="toggle"?u.className=u.className.match(s)?u.className.replace(s,""):u.className+" "+r[a]:u.className=u.className.replace(s,"")}t==="has"?n.push(o):0}else n.push(i)},u);if(n.length>0)return p(n)},html:function(e,t){var n=[],r,s;a(function(o){if(t){r=i.createElement("div");r.innerHTML=e;while(s=r.lastChild)try{t==="before"?o.parentNode.insertBefore(s,o):t==="after"&&o.parentNode.insertBefore(s,o.nextSibling)}catch(u){break}}else e?o.innerHTML=e:n.push(o.innerHTML)},u);if(n.length>0)return p(n)},attr:function(e,t){var n=[];a(function(r){if(e){e=e.toLowerCase();switch(e){case"style":t?r.style.cssText=t:r.style.cssText?n.push(r.style.cssText):n.push(null);break;case"class":t?r.className=t:r.className?n.push(r.className):n.push(null);break;default:t?r.setAttribute(e,t):r.getAttribute(e)?n.push(r.getAttribute(e)):n.push(null)}}},u);if(n.length>0)return p(n)},val:function(e){var t=[],n=[];typeof e!="undefined"&&typeof e!="object"&&(e=[e]);a(function(r){if(e)switch(r.nodeName){case"SELECT":for(var i=0;i<r.length;i++)for(var s=0;s<e.length;s++){r[i].selected="";if(r[i].value===e[s]){r[i].selected="selected";break}}break;case"INPUT":switch(r.type){case"checkbox":case"radio":r.checked="";for(var i=0;i<e.length;i++)if(r.value===e[i]){r.checked="checked";break}break;default:r.value=e[0]}break;case"TEXTAREA":case"BUTTON":r.value=e[0]}else switch(r.nodeName){case"SELECT":var o=n.length;n.push([]);for(var i=0;i<r.length;i++)r[i].selected?n[o].push(r[i].value):0;switch(n[o].length){case 0:n[o]=null;break;case 1:n[o]=n[o][0]}break;case"INPUT":switch(r.type){case"checkbox":r.checked?n.push(r.value):n.push(null);break;case"radio":var u=!1;for(var i=0;i<t.length;i++)if(t[i][0]===r.name){r.checked?n[t[i][1]]=r.value:0;u=!0}if(!u){t.push([r.name,n.length]);r.checked?n.push(r.value):n.push(null)}break;default:n.push(r.value)}break;case"TEXTAREA":case"BUTTON":n.push(r.value)}},u);if(n.length>0)return p(n)},on:function(e,t,n){o===s||o===i?u=[o]:0;a(function(r){i.addEventListener?n?r.removeEventListener(e,t,!1):r.addEventListener(e,t,!1):i.attachEvent&&(n?r.detachEvent("on"+e,t):r.attachEvent("on"+e,t))},u)},ajax:function(e,t,n,r){var i,t=t||"GET",o=d(u),a="_ts="+ +(new Date);s.XMLHttpRequest?i=new XMLHttpRequest:s.ActiveXObject&&(i=new ActiveXObject("Microsoft.XMLHTTP"));if(i){t=t.toUpperCase();e=r?t==="POST"?e+"?"+a:e+"?"+o+"&"+a:t==="POST"?e:e+"?"+o;i.open(t,e,!0);t==="POST"?i.setRequestHeader("Content-Type","application/x-www-form-urlencoded"):0;i.send(o);i.onreadystatechange=function(){if(i.readyState===4&&i.status===200&&n)try{n(i.responseText)}catch(e){}}}}}}var e=[],t=[],n=!1,r=!1,i=document,s=window;if(i.addEventListener){i.addEventListener("DOMContentLoaded",o,!1);s.addEventListener("load",u,!1)}else if(i.attachEvent){i.attachEvent("onreadystatechange",o);s.attachEvent("onload",u)}else s.onload=u;s.$=v})();
View
56 chibi.js
@@ -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,21 +105,15 @@ 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('*');
@@ -127,7 +121,7 @@ You should have received a copy of the GNU General Public License along with thi
(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);
Please sign in to comment.
Something went wrong with that request. Please try again.