support camelized names in data() method

  - `data('fooBar')` reads from "data-foo-bar" attribute
  - data.js plugin is improved to store keys in camelCase form

Closes madrobby#471

Author: mislav

src/data.js

@@ -5,31 +5,45 @@
 // The following code is heavily inspired by jQuery's $.fn.data()
 
 ;(function($) {
-  var data = {}, dataAttr = $.fn.data,
+  var data = {}, dataAttr = $.fn.data, camelize = $.zepto.camelize,
     uuid = $.uuid = +new Date(),
     exp  = $.expando = 'Zepto' + uuid
 
+  // Get value from node:
+  // 1. first try key as given,
+  // 2. then try camelized key,
+  // 3. fall back to reading "data-*" attribute.
   function getData(node, name) {
     var id = node[exp], store = id && data[id]
-    return name === undefined ? store || setData(node) :
-      (store && store[name]) || dataAttr.call($(node), name)
+    if (name === undefined) return store || setData(node)
+    else {
+      if (store) {
+        if (name in store) return store[name]
+        var camelName = camelize(name)
+        if (camelName in store) return store[camelName]
+      }
+      return dataAttr.call($(node), name)
+    }
   }
 
+  // Store value under camelized key on node
   function setData(node, name, value) {
     var id = node[exp] || (node[exp] = ++uuid),
       store = data[id] || (data[id] = {})
-    if (name !== undefined) store[name] = value
+    if (name !== undefined) store[camelize(name)] = value
     return store
   }
 
-  function setDataAttributes(node, object) {
-    node.each(function(){ for (var key in object) setData(this, key, object[key]) })
-  }
-
   $.fn.data = function(name, value) {
     return value === undefined ?
-      this.length == 0 ? undefined :
-      $.isPlainObject(name) ? setDataAttributes(this, name) : getData(this[0], name) :
-      this.each(function(idx){ setData(this, name, value) })
+      // set multiple values via object
+      $.isPlainObject(name) ?
+        this.each(function(i, node){
+          $.each(name, function(key, value){ setData(node, key, value) })
+        }) :
+        // get value from first element
+        this.length == 0 ? undefined : getData(this[0], name) :
+      // set value on all elements
+      this.each(function(){ setData(this, name, value) })
   }
 })(Zepto)

src/zepto.js

@@ -29,7 +29,7 @@ var Zepto = (function() {
     tagSelectorRE = /^[\w-]+$/,
     toString = ({}).toString,
     zepto = {},
-    init, fragment, Z,
+    camelize, fragment, Z,
     tempParent = document.createElement('div')
 
   function matches(element, selector) {
@@ -60,7 +60,7 @@ var Zepto = (function() {
 
   function compact(array) { return array.filter(function(item){ return item !== undefined && item !== null }) }
   function flatten(array) { return array.length > 0 ? [].concat.apply([], array) : array }
-  function camelize(str)  { return str.replace(/-+(.)?/g, function(match, chr){ return chr ? chr.toUpperCase() : '' }) }
+  camelize = function(str){ return str.replace(/-+(.)?/g, function(match, chr){ return chr ? chr.toUpperCase() : '' }) }
   function dasherize(str) {
     return str.replace(/::/g, '/')
            .replace(/([A-Z]+)([A-Z][a-z])/g, '$1_$2')
@@ -423,7 +423,7 @@ var Zepto = (function() {
       return this.each(function(){ this.removeAttribute(name) })
     },
     data: function(name, value){
-      var data = this.attr('data-' + name, value)
+      var data = this.attr('data-' + dasherize(name), value)
       return data !== null ? data : undefined
     },
     val: function(value){
@@ -562,6 +562,7 @@ var Zepto = (function() {
   Z.prototype = $.fn
 
   // Export internal API functions in the `$.zepto` namespace
+  zepto.camelize = camelize
   $.zepto = zepto
 
   return $

test/data.html

@@ -16,7 +16,7 @@ <h1>Zepto data() tests</h1>
     Running… see browser console for results
   </p>
   <div id="fixtures">
-  <div id="data_attr" data-one="uno" data-two="due"></div>
+  <div id="data_attr" data-one="uno" data-two="due" data-foo-bar="baz"></div>
   <div id="data_full" data-mode="awesome"></div>
   <div id="data_obj" data-mode="awesome"></div>
   <ol id="data_list">
@@ -46,6 +46,20 @@ <h1>Zepto data() tests</h1>
         t.assertEqual('uno', el.data('one'))
       },
 
+      testCamelized: function(t){
+        var el = $('#data_attr')
+        t.assertEqual('baz', el.data('foo-bar'))
+        t.assertEqual('baz', el.data('fooBar'))
+
+        el.data('fooBar', 'bam')
+        t.assertEqual('bam', el.data('foo-bar'))
+        t.assertEqual('bam', el.data('fooBar'))
+
+        el.data('a-b', 'c')
+        t.assertEqual('c', el.data().aB)
+        t.assertUndefined(el.data()['a-b'])
+      },
+
       testNotChangingAttribute: function(t){
         var el = $('#data_attr')
         t.assertEqual('due', el.data('two'))
@@ -106,6 +120,21 @@ <h1>Zepto data() tests</h1>
         t.assertUndefined(all.mode)
       },
 
+      testGettingBlanks: function(t){
+        var el = $('#data_attr'),
+            store = el.data()
+
+        store.nil = null
+        store.undef = undefined
+        store.blank = ''
+        store.bool = false
+
+        t.assertNull(el.data('nil'))
+        t.assertUndefined(el.data('undef'))
+        t.assertIdentical('', el.data('blank'))
+        t.assertFalse(el.data('bool'))
+      },
+
       testSettingDataWithObj: function(t){
           var el = $('#data_obj')
 

test/zepto.html

@@ -49,7 +49,7 @@ <h1>Zepto DOM unit tests</h1>
   <div id="attr_remove" data-name="boom"></div>
   <form><input id="attr_val" value="Hello World"></form>
 
-  <div id="data_attr" data-blah="whatever" data-empty></div>
+  <div id="data_attr" data-foo="bar" data-foo-bar="baz" data-empty></div>
 
   <form id="attr_with_text_input">
     <input value="Default input">
@@ -1255,14 +1255,25 @@ <h1>Zepto DOM unit tests</h1>
       },
 
       testData: function(t) {
-        var els = $('#data_attr')
-        els.data('fun', 'hello')
-        t.assertEqual('hello', els.attr('data-fun'))
-
-        t.assertEqual('hello', els.data('fun'))
-        t.assertEqual('whatever', els.data('blah'))
-
-        t.assertUndefined($('body').data('does-not-exist'))
+        var el = $('#data_attr')
+        // existing attribute
+        t.assertEqual('bar', el.data('foo'))
+        t.assertEqual('baz', el.data('foo-bar'))
+        t.assertEqual('baz', el.data('fooBar'))
+
+        // camelCase
+        el.data('fooBar', 'bam')
+        t.assertEqual('bam', el.data('fooBar'))
+        t.assertEqual('bam', el.data('foo-bar'))
+
+        // new attribute
+        el.data('fun', 'hello')
+        t.assertEqual('hello', el.attr('data-fun'))
+        t.assertEqual('hello', el.data('fun'))
+
+        // blank values
+        t.assertIdentical('', el.data('empty'))
+        t.assertUndefined(el.data('does-not-exist'))
       },
 
       testVal: function(t) {