JavaScript/HTML5 data-* namespaces

html5-data-namespaces.js

/*

    <div id="foo" data-timepicker-pad="true" data-timepicker-labels-hours="HR" data-modal-color="#333"></div>

    http://www.jsfiddle.net/sixtyseconds/bxcLj/3/

*/

function _walk(parts, value, stack) {
    var part = parts.shift();
    if (parts.length > 0) {
        stack[part] = _walk(parts, value, {});
    } else {
        stack[part] = value;
    }
    return stack;
}

function _namespace(element, namespace) {
    var params = {}, key = 'data-' + namespace + '-';
    
    Array.each(element.attributes, function(attribute) {
        var name = attribute.name;
        if (name.contains(key)) {
            var parts = name.replace(key, '').split('-');
            Object.merge(params, _walk(parts, element.get(name), {}));
        }
    });
    
    return params;
}

console.log(_namespace(document.id('foo'), 'timepicker'));
console.log(_namespace(document.id('foo'), 'modal'));