Skip to content

Instantly share code, notes, and snippets.

@cyberstream

cyberstream/LICENSE.txt

Forked from 140bytes/LICENSE.txt
Created February 10, 2012 06:02
Show Gist options
  • Save cyberstream/1787092 to your computer and use it in GitHub Desktop.
Save cyberstream/1787092 to your computer and use it in GitHub Desktop.
Download ZIP
140byt.es -- Click ↑↑ fork ↑↑ to play!
Raw
README.md

140byt.es

A tweet-sized, fork-to-play, community-curated collection of JavaScript.

How to play

  1. Click the Fork button above to fork this gist.
  2. Modify all the files to according to the rules below.
  3. Save your entry and tweet it up!

Keep in mind that thanks to the awesome sensibilities of the GitHub team, gists are just repos. So feel free to clone yours and work locally for a more comfortable environment, and to allow commit messages.

Rules

All entries must exist in an index.js file, whose contents are

  1. an assignable, valid Javascript expression that
  2. contains no more than 140 bytes, and
  3. does not leak to the global scope.

All entries must also be licensed under the WTFPL or equally permissive license.

For more information

See the 140byt.es site for a showcase of entries (built itself using 140-byte entries!), and follow @140bytes on Twitter.

To learn about byte-saving hacks for your own code, or to contribute what you've learned, head to the wiki.

140byt.es is brought to you by Jed Schmidt, with help from Alex Kloss. It was inspired by work from Thomas Fuchs and Dustin Diaz.

Raw
annotated.js
HTMLElement.prototype.data = function(attr, val) {
/* If only the attribute parameter was passed to the function,
* then get data-{attr}. If data-{attr} is not set,
* then return false
*/
if (attr && typeof val != 'undefined') return this.setAttribute('data-' + attr, val);
/* If both the attribute and value parameters
* were passed to the function,
* then assign {val} to data-{attr} in the current element
*/
else if (attr) return this.getAttribute('data-' + attr) || false;
// if no parameters were passed, then return false
else return false;
}
Raw
index.js
HTMLElement.prototype.data=function(a,v){return(a&&typeof v!='undefined'?this.setAttribute('data-'+a,v):(a?this.getAttribute('data-'+a)||!1:!1))}
Raw
LICENSE.txt
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2012 Eli Mitchell <http://www.cyberstream.us>
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.
Raw
package.json
{
"name": "getOrSetHTML5DataAttributes",
"description": "Gets or sets a data-attribute in the given HTML element",
"keywords": [
"attribute",
"data",
"HTML5",
"DOM"
]
}
Raw
test.html
<!DOCTYPE html>
<title>Get/Set Data Attributes</title>
<div id="about_me" data-name="Eli Mitchell">About Me (click to see the address of my website)</div>
<p id="name">loading...</p>
<p id="website"></p>
<script>
HTMLElement.prototype.data=function(a,v){return(a&&typeof v!='undefined'?this.setAttribute('data-'+a,v):(a?this.getAttribute('data-'+a)||false:false))}
window.addEventListener('DOMContentLoaded', function() {
var about_me = document.getElementById('about_me'),
name_elem = document.getElementById('name'),
website_elem = document.getElementById('website');
name_elem.innerHTML = 'Hey, I\'m ' + about_me.data('name');
about_me.onclick = function() {
about_me.data('website', 'http://www.cyberstream.us');
website_elem.innerHTML = 'My website is ' + about_me.data('website');
}
}, false);
</script>
@bartaz
Copy link

bartaz commented Feb 10, 2012

You forgot about getAttribute in this.('data-' + attr)

@oroce
Copy link

oroce commented Feb 10, 2012

what about:
if( attr && typeof val == "undefined" ) return this.('data-' + attr) || false;

because (with your code) elem.data( "key", null ) works like a getter.

@cyberstream
Copy link
Author

Thanks for the comments guys! What do you think of it now?

@oroce
Copy link

oroce commented Feb 10, 2012

looks better:)

you can write !1 instead of false.

you don't need the else

so

HTMLElement.prototype.data = function(attr, val) {            
    /* If only the attribute parameter was passed to the function, 
     * then get data-{attr}. If data-{attr} is not set, 
     * then return false 
     */
    if (attr && typeof val != 'undefined') return this.setAttribute('data-' + attr, val);

    /* If both the attribute and value parameters 
     * were passed to the function, 
     * then assign {val} to data-{attr} in the current element
     */
    else if (attr) return this.getAttribute('data-' + attr) || !1;

    // if no parameters were passed, then return false
    return !1;
}

9 bytes less:)

@cyberstream
Copy link
Author

Man, I love JS! It has so many cool tricks. Thanks! I need to finish reading this article... https://github.com/jed/140bytes/wiki/Byte-saving-techniques

@oroce
Copy link

oroce commented Feb 10, 2012

Here's an another solution:

(function(attribute, data){
    HTMLElement.prototype.data = function(attr, val ) {
        if (attr && val != null ) return this["set"+attribute](data + attr, val);

        else if (attr) return this["get"+attribute](data + attr) || !1;

        return !1;
    }
})("Attribute","data-")

uglified version:

 (function(a,b){HTMLElement.prototype.data=function(c,d){return c&&d!=null?this["set"+a](b+c,d):c?this["get"+a](b+c)||!1:!1}})("Attribute","data-");

@oroce
Copy link

oroce commented Feb 10, 2012

and a smaller one:

HTMLElement.prototype.data = function(attr, val ) {
   return attr ? this[ (val != null ? "set" : "get" )+"Attribute"]("data-" + attr, val)||!1:!1;
}

uglified:

HTMLElement.prototype.data=function(a,b){return a?this[(b!=null?"set":"get")+"Attribute"]("data-"+a,b)||!1:!1};

@cyberstream
Copy link
Author

You are a genius! :)

@oroce
Copy link

oroce commented Feb 11, 2012

uupps we can save 2 more bytes:

HTMLElement.prototype.data = function(attr, val ) {
    return attr ? this[ (val != null ? "s" : "g" )+"etAttribute"]("data-" + attr, val)||!1:!1;
}

@cyberstream
Copy link
Author

LOL! This is fun.

Do you have any problem with me adding your code to my gist?

@cyberstream
Copy link
Author

If we uglify the params and remove unnecessary spaces, we save a few more bytes:

HTMLElement.prototype.data = function(a,v) {
    return a?this[(v!=null?"s":"g")+"etAttribute"]("data-"+a,v)||!1:!1;
}

@tsaniel
Copy link

tsaniel commented Feb 11, 2012

Save 2 bytes.

HTMLElement.prototype.data=function(a,v){return!!a&&this[(v!=null?"s":"g")+"etAttribute"]("data-"+a,v)||!1}

@cyberstream
Copy link
Author

@tsaniel nice! It still works fine, but it returns false when assigning a value, e.g. elem.data('country', 'United States'). Should we worry about return values in this case?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment