-
-
Save louisremi/1319121 to your computer and use it in GitHub Desktop.
c, an expressive className manipulation lib: c( elem, 'has/add/remove/toggle', class_name )
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // class manipulation library | |
| function( elem, verb, classname, attr, result ) { | |
| // systematically remove class name from className attribute | |
| result = elem[ | |
| attr = 'className' | |
| ].replace( | |
| eval('/ *\\b' + classname + '\\b/g') | |
| // in production environment, replace with the following safer line (+9B) | |
| //RegExp('(^| ) *'+ classname +' *( |$)','g') | |
| , '' ); | |
| return 'has' == verb ? result != elem[attr]: | |
| // all other verbs modify className attribute | |
| elem[attr] = { | |
| add: 1, | |
| toggle: result == elem[attr] | |
| }[ verb ] ? | |
| // verb is 'add' or ( verb is 'toggle' and class name wasn't already present in className attribute) | |
| result + ' ' + classname: | |
| // verb is anything else ('remove', 'getRidOf') or ( verb is 'toggle' and class name was already present in className attribute) | |
| result; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function(e,v,n,c,r){r=e[c='className'].replace(eval('/ *\\b'+n+'\\b/g'),'');return'has'==v?r!=e[c]:e[c]={add:1,toggle:r==e[c]}[v]?r+' '+n:r} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE | |
| Version 2, December 2004 | |
| Copyright (C) 2011 @louis_remi <http://louisremi.com> | |
| Everyone is permitted to copy and distribute verbatim or modified | |
| copies of this license document, and changing it is allowed as long | |
| as the name is changed. | |
| DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE | |
| TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION | |
| 0. You just DO WHAT THE FUCK YOU WANT TO. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "c", | |
| "description": "An expressive className manipulation lib: c( elem, 'has/add/remove/toggle', class_name )", | |
| "contributors": [ | |
| "louisremi", | |
| "atk", | |
| "tsaniel", | |
| "maettig" | |
| ], | |
| "keywords": [ | |
| "class", | |
| "className", | |
| "DOM" | |
| ] | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <title>Foo</title> | |
| <div id="elem" class="banana"></div> | |
| <pre><code><div id="elem" class="banana"></div></code></pre> | |
| <div>elem has banana?: <b id=t1>undefined</b></div> | |
| <div>elem has chocolate?: <b id=t2>undefined</b></div> | |
| <div>elem add cacao: <b id=t3>undefined</b></div> | |
| <div>elem remove banana: <b id=t4>undefined</b></div> | |
| <div>elem has banana?: <b id=t5>undefined</b></div> | |
| <div>elem toggle iceCream?: <b id=t6>undefined</b></div> | |
| <div>elem toggle cacao?: <b id=t7>undefined</b></div> | |
| <script> | |
| var c = function(e,v,n,c,r){r=e[c='className'].replace(eval('/ *\\b'+n+'\\b/g'),'');return'has'==v?r!=e[c]:e[c]={add:1,toggle:r==e[c]}[v]?r+' '+n:r}, | |
| $ = function(id) { return document.getElementById(id) }, | |
| elem = $("elem"); | |
| $("t1").innerHTML = !!c( elem, "has", "banana" ); | |
| $("t2").innerHTML = !!c( elem, "has", "chocolate" ); | |
| $("t3").innerHTML = c( elem, "add", "cacao" ); | |
| $("t4").innerHTML = c( elem, "remove", "banana" ); | |
| $("t5").innerHTML = !!c( elem, "has", "banana" ); | |
| $("t6").innerHTML = c( elem, "toggle", "iceCream" ); | |
| $("t7").innerHTML = c( elem, "toggle", "cacao" ); | |
| </script> |
Like the idea and the coverage (add,has,remove, including toggle) of this modifing class function :)
If you still like to enhance it, there is this odd thing with a space - as you "add/toggle" a new class to an element. It's not really a problem, but perhaps this could somehow be considered too (^_^)
Author
Thanks Autarc. There are only two characters left so it's a tricky problem ;^)
Besides @tsaniel's abusing regular expressions to find prime numbers this is one of my favorite 140byt.es snippets. It's incredible how much functionality is compressed in this toolkit.
I have a suggestion what to do with the remaining 2 bytes: Change eval('/\\b'+n+'\\b/g'),'') into eval('/ *\\b'+n+'\\b/g'),''). This will at least remove some of the spaces. Toggling the same class on and off will not add more and more spaces.
Author
Thanks maettig, I should have applied your suggestion earlier. The output is now much cleaner.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
No, thank you. It was really fun to help you golfing this one down :-)