Loading element in header, footer & article

examples/test/app/events.js

@@ -16,8 +16,14 @@ App.Events = (function(lng, undefined) {
     $$('section#sec-1 header #btn-toggle-loading').tap(function(event) {
         var el = lng.dom(this);
 
-        el.children('.icon').hide();
-        lng.View.Element.loading(this, 'white');
+        if (el.children('.loading').length > 0) {
+            el.children('.icon').show();
+            lng.View.Element.loading(this);
+        } else {
+            el.children('.icon').hide();
+            lng.View.Element.loading(this, 'white');
+        }
+
     });
 
     //SPECIAL

examples/test/index.html

@@ -57,7 +57,7 @@
                 <a href="#profiles" data-target="aside" data-icon="users" data-label="User"></a>
                  -->
                  <a href="#" data-icon="cloud" id="btn-toggle-loading"></a>
-                <a href="#profiles" data-target="aside" data-icon="user"></a>
+                <a href="#profiles" data-target="aside" data-icon="user" data-count="1"></a>
             </nav>
 
             <nav class="onright plain ">
@@ -73,10 +73,13 @@
 
         <footer class="toolbar with-labels">
             <nav>
-                <a href="#nav-1" data-target="article" data-title="d" data-icon="settings" class="current" data-label="boxes" data-count="1"></a>
+                <a href="#nav-0" data-target="article" data-icon="refresh" class="current" data-label="loading">
+                    <span class="bubble count" data-loading="white"></span>
+                </a>
+                <a href="#nav-1" data-target="article" data-title="d" data-icon="settings" data-label="boxes" data-count="1"></a>
                 <a href="#nav-2" data-target="article" data-title="b" data-icon="refresh" data-count="12" data-label="Form"></a>
                 <a href="#nav-3" data-target="article" data-title="c"  data-icon="share" data-label="Emails" data-count="123"></a>
-                <a href="#nav-4" data-target="article" data-title="lists"  data-icon="inbox-full" data-label="lists"></a>
+                <a href="#nav-4" data-target="article" data-title="lists" data-label="lists" data-loading="white"></a>
             </nav>
         </footer>
 
@@ -90,6 +93,10 @@
             </nav>
         </footer>
         -->
+
+        <article id="nav-0" data-loading="black">
+        </article>
+
         <article id="nav-1" class="lisst">
             <div id = "prueba" class="box middle list  " style="background: url(http://placehold.it/320x200);">
             </div>

src/stylesheets/Lungo.layout.article.less

@@ -88,9 +88,10 @@ article {
             width: 66.7%;
         }
     }
-}
 
-a {
+    & > .loading {
+        //margin-top: 10%;
+    }
 }
 
 header:not(.extended) ~ article { top: @header-height; }

src/stylesheets/Lungo.layout.nav.less

@@ -22,9 +22,7 @@ nav {
         height:  @header_nav_height;
 
         & .icon {
-            //position: relative;
             font-size: 1.7em;
-            //display: inline-block;
         }
 
         & img {
@@ -37,15 +35,12 @@ nav {
             font-weight: bold;
         }
 
-        & .loading {
-            font-size: 20px;
-        }
     }
 
     & .bubble {
         position: relative;
         top:  -12px;
-        left: -5px;
+        left: -12px;
         margin-right: -20px;
     }
 
@@ -69,14 +64,16 @@ nav {
             }
         }
     }
-
-    &.toolbar {
-
-    }
 }
 
 header, footer {
-   &:not(.toolbar) nav .icon ~ abbr { margin-left: 4px; float: right; }
+    &:not(.toolbar) nav {
+        & .icon ~ abbr { margin-left: 4px; float: right; }
+        & .loading {
+            margin-top: .5em;
+            font-size: 1.6em;
+        }
+    }
 }
 
 .toolbar {
@@ -109,6 +106,11 @@ header, footer {
     & .bubble {
         top:  -56px;
         left: 4px;
+
+        & .loading {
+            top: 0;
+            font-size: 1.4em;
+        }
     }
 
     & abbr {
@@ -126,4 +128,9 @@ header, footer {
         white-space: nowrap;
         text-overflow: ellipsis;
     }
+
+    & .loading {
+        top: .1em;
+        font-size: 2.3em;
+    }
 }

src/stylesheets/Lungo.widgets.loading.less

@@ -10,16 +10,13 @@
 @import "mixins.less";
 
 .loading {
-    position:relative;
+    position: relative;
     left: 50%;
     height: 1em;
     width: 1em;
     margin-left: -.5em;
-    margin-top: .5em;
 
     .transform-origin(.5em .5em);
-    -webkit-animation:  rotatingLoader .5s  infinite  linear;
-    -moz-animation:  rotatingLoader .5s  infinite  linear;
     font-size: 48px;
 
     &.disable {
@@ -28,14 +25,10 @@
         display: none
     }
 
-    &.small { font-size: 20px;}
-    &.big { font-size: 64px; }
-
     & > span {
         left:         50%;
         margin-left:  -0.05em;
 
-
         &, &::before, &::after {
             display:                  block;
             position:                 absolute;
@@ -48,7 +41,6 @@
 
         &::before, &::after{ content: " "; }
 
-
         &.top{ .transform(rotate(0deg)); }
         &.right{ .transform(rotate(90deg)); }
         &.bottom{ .transform(rotate(180deg)); }
@@ -87,8 +79,9 @@
     }
 }
 
-section.current .loading {
-
+section.current .loading, .growl .loading {
+    -webkit-animation:  rotatingLoader .5s  infinite  linear;
+    -moz-animation:  rotatingLoader .5s  infinite  linear;
 }
 
 @-webkit-keyframes rotatingLoader{

src/view/Lungo.View.Element.js

@@ -74,7 +74,7 @@ LUNGO.View.Element = (function(lng, undefined) {
                 _bindAttribute(element, LUNGO.Attributes.Data.Loading, stylesheet);
             }
             else {
-                element.children('.loading').addClass('disabled');
+                element.children('.loading').remove();
             }
         }
     };

src/view/Lungo.View.Template.List.js

@@ -15,7 +15,7 @@ LUNGO.View.Template.List = (function(lng, undefined) {
 
     /**
      * Create a list based DataBind with a configuration object for an element <article>
-	 * if the config has a 'norecords' property it will display the norecords markup rather than nothing.
+     * if the config has a 'norecords' property it will display the norecords markup rather than nothing.
      *
      * @method create
      *
@@ -28,7 +28,7 @@ LUNGO.View.Template.List = (function(lng, undefined) {
             config.data = _order(config);
             _render(config);
         }
-	};
+    };
 
     /**
      * Append a list based DataBind with a configuration object for an element <article>

src/view/Lungo.View.Template.js

@@ -78,7 +78,7 @@ LUNGO.View.Template = (function(lng, undefined) {
      */
     var markup = function(template_id, data) {
         var template_markup = this.get(template_id);
-        return lng.View.Template.process(template_markup, data);
+        return lng.View.Template.Binding.process(template_markup, data);
     };
 
     /**
@@ -90,7 +90,7 @@ LUNGO.View.Template = (function(lng, undefined) {
      * @param {Object} Data for binding
      */
     var html = function(markup, data) {
-        return lng.View.Template.process(markup, data);
+        return lng.View.Template.Binding.process(markup, data);
     };
 
     return {