New handler for Carousel

kitchen-sink/app/asides/features.html

@@ -88,7 +88,7 @@
 
             <!-- Notifications -->
             <li>
-                <a href="#notification" data-router="section" data-async="app/sections/notification.html">
+                <a href="#notification" data-router="section">
                     <div class="tag right">8</div>
                     <strong>Notifications</strong>
                 </a>

kitchen-sink/app/events.carousel.js

@@ -1,5 +1,5 @@
 var carousel_example = Lungo.Element.Carousel($$('[data-control=carousel]')[0], function(index, element) {
-    Lungo.dom("section#carousel .subtitle span").html(index + 1);
+    Lungo.dom("section#carousel .title span").html(index + 1);
 });
 
 Lungo.Events.init({

kitchen-sink/app/sections/carousel.html

@@ -4,46 +4,41 @@
             <a href="#back" data-router="section" data-label="back"></a>
         </nav>
 
-        <div class="centered title with-subtitle">
-            Carousel
-            <small class="subtitle">Photo Nº<span>1</span></small>
-        </div>
+        <div class="centered title">Photo Nº<span>1</span></div>
 
         <nav class="right box">
             <a href="#" data-action="carousel" data-direction="left" data-icon="left"></a>
             <a href="#" data-action="carousel" data-direction="right" data-icon="right"></a>
         </nav>
     </header>
-    <article id="carousel-article" class="active">
-        <div data-control="carousel" class="carousel">
-            <div>
-                <div align="center">
-                    <img src="http://lorempixel.com/320/418/food/">
-                </div>
-                <div align="center">
-                    <img src="http://lorempixel.com/320/418/sports/">
-                </div>
-                <div align="center">
-                    <img src="http://lorempixel.com/320/418/people/">
-                </div>
-                <div align="center">
-                    <img src="http://lorempixel.com/320/418/abstract/">
-                </div>
-                <div align="center">
-                    <img src="http://lorempixel.com/320/418/city/">
-                </div>
-                <div align="center">
-                    <img src="http://lorempixel.com/320/418/transport/">
-                </div>
-                <div align="center">
-                    <img src="http://lorempixel.com/320/418/nature/">
-                </div>
-                <div align="center">
-                    <img src="http://lorempixel.com/320/418/fashion/">
-                </div>
-                <div align="center">
-                    <img src="http://lorempixel.com/320/418/technics/">
-                </div>
+    <article id="carousel-article" class="active block" data-control="carousel">
+        <div>
+            <div align="center">
+                <img src="http://lorempixel.com/320/418/food/" />
+            </div>
+            <div align="center">
+                <img src="http://lorempixel.com/320/418/sports/">
+            </div>
+            <div align="center">
+                <img src="http://lorempixel.com/320/418/people/">
+            </div>
+            <div align="center">
+                <img src="http://lorempixel.com/320/418/abstract/">
+            </div>
+            <div align="center">
+                <img src="http://lorempixel.com/320/418/city/">
+            </div>
+            <div align="center">
+                <img src="http://lorempixel.com/320/418/transport/">
+            </div>
+            <div align="center">
+                <img src="http://lorempixel.com/320/418/nature/">
+            </div>
+            <div align="center">
+                <img src="http://lorempixel.com/320/418/fashion/">
+            </div>
+            <div align="center">
+                <img src="http://lorempixel.com/320/418/technics/">
             </div>
         </div>
     </article>

kitchen-sink/index.html

@@ -223,9 +223,9 @@
             name: 'Kitchen Sink',
             version: '2.1',
             resources: ['app/sections/pull.html',
+                        'app/sections/notification.html',
                         'app/sections/carousel.html',
                         'app/asides/features.html']
-
         });
     </script>
     <script src="app/app.js"></script>

src/element/Lungo.Element.Carousel.js

@@ -46,18 +46,15 @@ Lungo.Element.Carousel = function(element, callback) {
     };
 
     var _setup = function() {
-        _instance.container.style.overflow = 'hidden';
-        _instance.element.style.listStyle = 'none';
-        _instance.element.style.margin = 0;
         _instance.slides = _instance.element.children;
         _instance.slides_length = _instance.slides.length;
         if (_instance.slides_length < 2) return null;
+
         _instance.width = ("getBoundingClientRect" in _instance.container) ?
                             _instance.container.getBoundingClientRect().width :
                             _instance.container.offsetWidth;
 
         if (!_instance.width) return null;
-        _instance.container.style.visibility = 'hidden';
         _instance.element.style.width = (_instance.slides.length * _instance.width) + 'px';
         var index = _instance.slides.length;
         while (index--) {

src/stylesheets/Lungo.widgets.styl

@@ -53,6 +53,9 @@
 .round
   border-radius( 4px )
 
+.block
+  display: block
+
 /* ================================  TAG  ================================ */
 .tag
   display: inline-block
@@ -66,6 +69,15 @@ size = 5px
   &.bottom
     margin-bottom: size
 
+
+/* ================================  CAROUSEL  ================================ */
+[data-control=carousel]
+  overflow: hidden
+  list-style: none
+  margin: 0
+  // article
+  //   display: block !important
+
 /* ================================  TEXT  ================================ */
 .text
   &.thin

src/stylesheets/css/Lungo.widgets.css

@@ -54,6 +54,9 @@
   -moz-border-radius: 4px;
   border-radius: 4px;
 }
+.block {
+  display: block;
+}
 /* ================================  TAG  ================================ */
 .tag {
   display: inline-block;
@@ -65,6 +68,12 @@
 .margin.bottom {
   margin-bottom: 5px;
 }
+/* ================================  CAROUSEL  ================================ */
+[data-control=carousel] {
+  overflow: hidden;
+  list-style: none;
+  margin: 0;
+}
 /* ================================  TEXT  ================================ */
 .text.thin {
   font-weight: 300;