New system for check data-attributes

src/Lungo.Notification.js

@@ -46,7 +46,7 @@ Lungo.Notification = (function(lng, undefined) {
         if (title !== undefined) {
             markup = _markup(title, null, icon);
         } else {
-            var data_loading = lng.Attributes.Data.Loading.html;
+            var data_loading = lng.Attributes.Data.loading.html;
             markup = data_loading.replace(BINDING.START + BINDING.KEY + BINDING.END, 'icon white');
         }
 

src/attributes/Lungo.Attributes.Data.js

@@ -9,52 +9,43 @@
  */
 
 Lungo.Attributes.Data = {
-    Search: {
-        tag: 'search',
+    search: {
         selector: '*',
         html: '<input type="search" placeholder="{{value}}"/><a href="#" class="button" data-icon="search"></a>'
     },
-    Count: {
-        tag: 'count',
+    count: {
         selector: '*',
         html: '<span class="tag theme count">{{value}}</span>'
     },
-    Pull: {
-        tag: 'pull',
+    pull: {
         selector: 'section',
         html: '<div class="{{value}}" data-control="pull" data-icon="down" data-loading="black">\
                     <strong>title</strong>\
                 </div>'
     },
-    Progress: {
-        tag: 'progress',
+    progress: {
         selector: '*',
         html: '<div class="progress">\
                     <span class="bar"><span class="value" style="width:{{value}};"></span></span>\
                 </div>'
     },
-    Label: {
-        tag: 'label',
-        selector: 'a, button',
+    label: {
+        selector: '*',
         html: '<abbr>{{value}}</abbr>'
     },
-    Icon: {
-        tag: 'icon',
+    icon: {
         selector: '*',
         html: '<span class="icon {{value}}"></span>'
     },
-    Image: {
-        tag: 'image',
+    image: {
         selector: '*',
         html: '<img src="{{value}}" class="icon" />'
     },
-    Title: {
-        tag: 'title',
+    title: {
         selector: 'header',
         html: '<span class="title centered">{{value}}</span>'
     },
-    Loading: {
-        tag: 'loading',
+    loading: {
         selector: '*',
         html: '<div class="loading {{value}}">\
                     <span class="top"></span>\
@@ -63,9 +54,8 @@ Lungo.Attributes.Data = {
                     <span class="left"></span>\
                 </div>'
     },
-    Back: {
-        tag: 'back',
-        selector: 'header, footer',
+    back: {
+        selector: 'header',
         html: '<nav class="left"><a href="#back" data-router="section" class="left"><span class="icon {{value}}"></span></a></nav>'
     }
 };

src/boot/Lungo.Boot.Data.js

@@ -5,8 +5,9 @@
  * @namespace Lungo.Boot
  * @class Data
  *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- * @author Guillermo Pascual <pasku@tapquo.com> || @pasku1
+ * @author Javier Jimenez Villar <javi@tapquo.com>  || @soyjavi
+ * @author Guillermo Pascual <pasku@tapquo.com>     || @pasku1
+ * @author Ignacio Olalde <ina@tapquo.com>          || @piniphone
  */
 
 Lungo.Boot.Data = (function(lng, undefined) {
@@ -19,32 +20,31 @@ Lungo.Boot.Data = (function(lng, undefined) {
      *
      *
      */
-    var init = function() {
-        var attributes = lng.Attributes.Data;
+    var init = function(selector) {
+        var el = lng.dom(selector || document.body);
+        if (el.length > 0) _findDataAttributesIn(el);
+    };
 
-        for (var attribute in attributes) {
-            if (lng.Core.isOwnProperty(attributes, attribute)) {
-                _findElements(attributes[attribute]);
+    var _findDataAttributesIn = function(element) {
+        for (var key in lng.Attributes.Data) {
+            if (lng.Core.isOwnProperty(lng.Attributes.Data, key)) {
+                _findElements(element, key);
             }
         }
     };
 
-    var _findElements = function(attribute) {
-        var elements = lng.dom(attribute.selector);
-
-        for (var i = 0, len = elements.length; i < len; i++) {
-            var element = lng.dom(elements[i]);
-            _dataAttribute(element, attribute);
-        }
+    var _findElements = function(element, key) {
+        attribute = lng.Attributes.Data[key];
+        var selector = attribute.selector + "[data-" + key + "]";
+        element.find(selector).each(function(index, children) {
+            var el = lng.dom(children);
+            _bindDataAttribute(el, el.data(key), attribute.html);
+        });
     };
 
-    var _dataAttribute = function(element, attribute) {
-        var data = element.data(attribute.tag);
-
-        if (data) {
-            var html_binded = attribute.html.replace(BINDING.START + BINDING.KEY + BINDING.END, data);
-            element.prepend(html_binded);
-        }
+    var _bindDataAttribute = function(element, value, html) {
+        var html_binded = html.replace(BINDING.START + BINDING.KEY + BINDING.END, value);
+        element.prepend(html_binded);
     };
 
     return {

src/element/Lungo.Element.Count.js

@@ -16,7 +16,7 @@ Lungo.Element.count = function(selector, count) {
 
     if (element && count) {
         var binding = Lungo.Constants.BINDING.SELECTOR;
-        html = Lungo.Attributes.Data.Count.html.replace(binding, count);
+        html = Lungo.Attributes.Data.count.html.replace(binding, count);
         element.append(html);
     }
 };

src/element/Lungo.Element.Loading.js

@@ -18,7 +18,7 @@ Lungo.Element.loading = function(selector, stylesheet) {
 
         if (stylesheet) {
             var binding = Lungo.Constants.BINDING.SELECTOR;
-            html = Lungo.Attributes.Data.Loading.html.replace(binding, stylesheet);
+            html = Lungo.Attributes.Data.loading.html.replace(binding, stylesheet);
         }
         element.html(html);
     }