Fix #3 and update README

maael · Jul 29, 2015 · 70dd7a5 · 70dd7a5
1 parent 50b53d4
commit 70dd7a5
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@ A super small (only 2.7kB) javascript library to make html by chaining javascrip
 
 ```js
 var test = html()
-    .add('div', {className: 'container'})
+    .add('div', {className: 'container', data: { info: 'extraInformation' }})
         .contains('div', {className: 'header'})
             .contains('h5', {className: 'headerTitle', text: 'This is a header'}).end()
         .and('div', {className: 'content'})
@@ -17,11 +17,11 @@ var test = html()
 Produces -
 
 ```html
-<div class='container'>
-    <div class='header'>
-        <h5 class='headerTitle'>This is a header</h5>
+<div class="container" data-info="extraInformation">
+    <div class="header">
+        <h5 class="headerTitle">This is a header</h5>
     </div>
-    <div class='content'>
+    <div class="content">
         <p>This is the content</p>
     </div>
 </div>

diff --git a/html.js b/html.js
@@ -16,6 +16,15 @@ var html = (function() {
     }
     function makeEle(eTemp) {
         var element = document.createElement(eTemp.tag);
+        if(eTemp.hasOwnProperty('data')) {
+            var dataString = '';
+            for(var dataAttr in eTemp.data) {
+                if(eTemp.data.hasOwnProperty(dataAttr)) {
+                    element.dataset[dataAttr] = eTemp.data[dataAttr];
+                }
+            }
+            delete eTemp.data;
+        }
         for(var attr in eTemp) {
             if(eTemp.hasOwnProperty(attr)) {
                 element[attr] = eTemp[attr];
@@ -71,6 +80,7 @@ var html = (function() {
                 chunk = appendToLastAtLevel(chunk, level, element);
             }
         }
+        return chunk;
     }
     return {
         add: addEle,
@@ -86,4 +96,15 @@ if (typeof exports !== 'undefined') {
     exports = module.exports = html;
   }
   exports.html = html;
-}
+}
+
+
+var test = html()
+    .add('div', {className: 'container', data: { info: 'extraInformation' }})
+        .contains('div', {className: 'header'})
+            .contains('h5', {className: 'headerTitle', text: 'This is a header'}).end()
+        .and('div', {className: 'content'})
+            .contains('p', {text: 'This is the content'}).end()
+        .end()
+    .build();
+console.log(test)