First approach of cross-device navigation

example/flexbox.html

@@ -58,11 +58,10 @@
                 <a href="#layout-art4" data-router="article" data-icon="settings"></a>
             </nav>
         </footer>
-
     </section>
 
 
-    <section id='second' data-transition="slide" class="" data-aside="features"  class="hide">
+    <section id='second' data-transition="slide" data-aside="features" -data-child="third">
         <header data-title='second' data-back="home">
             <nav class="right">
                 <a href="#features2" data-action="aside" data-router="aside" data-icon="menu"></a>
@@ -73,8 +72,7 @@
     </section>
 
 
-    <!--
-    <section id='second' class="show" data-transition="slide" data-aside="features2" data-child="">
+    <section id='third' data-transition="slide" data-aside="features">
         <header data-title='second' data-back="home">
             <nav class="right">
                 <a href="#features2" data-action="aside" data-router="aside" data-icon="menu"></a>
@@ -83,7 +81,7 @@
 
         <article id='a' class='active'></article>
     </section>
-    -->
+
 
 
     <aside id="features" >
@@ -114,6 +112,9 @@
                 <li>
                     <a href="#second" data-router="section"><strong>Section 2</strong></a>
                 </li>
+                <li>
+                    <a href="#third" data-router="section"><strong>Section 3</strong></a>
+                </li>
             </ul>
         </article>
 

src/router/Lungo.Router.js

@@ -34,37 +34,52 @@ Lungo.Router = (function(lng, undefined) {
             var target = (current) ? current.siblings(query) : lng.dom(query);
 
             if (target.length > 0) {
-                // @todo: Analize Router
-
                 if (lng.DEVICE == DEVICE.PHONE) {
-                    if (current ) {
+                    if (current) {
                         _defineTransition(target, current);
                         current.removeClass(CLASS.SHOW).addClass(CLASS.HIDE);
                     }
                     _showPhoneSection(target);
 
                 } else {
+                    _showTabletSection(current, target);
+                }
 
-                    if (current && !current.data('child')) {
-                        current.addClass(CLASS.HIDE);
+                _cacheView(current, target);
 
-                        setTimeout(function() {
-                            current.removeClass(CLASS.SHOW);
-                        }, lng.Constants.TRANSITION.DURATION);
-                    }
+                lng.Router.History.add(section_id);
+            }
+        }
+    };
 
 
+    /**
+     * Return to previous section.
+     *
+     * @method back
+     */
+    var back = function() {
+        if (lng.DEVICE == DEVICE.PHONE && lng.Element.Cache.aside && lng.Element.Cache.aside.hasClass(CLASS.SHOW)) {
+            lng.View.Aside.hide();
+        }
+        lng.Router.History.removeLast();
 
-                    setTimeout(function() {
-                        target.addClass(CLASS.SHOW);
-                    }, lng.Constants.TRANSITION.DURATION);
-                }
+        var current = lng.Element.Cache.section;
+        var target = current.siblings(ELEMENT.SECTION + lng.Router.History.current());
 
-                _cacheView(current, target);
+        if (lng.DEVICE == DEVICE.PHONE) {
+            current.removeClass(CLASS.SHOW);
 
-                lng.Router.History.add(section_id);
-            }
+            setTimeout(function() {
+                current.removeClass(CLASS.HIDING);
+            }, lng.Constants.TRANSITION.DURATION);
+
+            _assignTransition(target, target.data('transition-origin'));
+            _showPhoneSection(target);
+        } else {
+            _showTabletSection(current, target);
         }
+        _cacheView(current, target);
     };
 
     /**
@@ -101,56 +116,22 @@ Lungo.Router = (function(lng, undefined) {
         }
     };
 
-    /**
-     * Return to previous section.
-     *
-     * @method back
-     */
-    var back = function() {
-        var current = lng.Element.Cache.section;
-
-        if (lng.DEVICE == DEVICE.PHONE && lng.Element.Cache.aside && lng.Element.Cache.aside.hasClass(CLASS.SHOW)) {
-            lng.View.Aside.hide();
-            setTimeout(function() {
-                _back(current);
-            }, lng.Constants.TRANSITION.DURATION);
-        } else {
-            _back(current);
-        }
-    };
-
-    var _back = function(current) {
-        current.removeClass(CLASS.SHOW).addClass(CLASS.HIDING);
-
-        setTimeout(function() {
-            current.removeClass(CLASS.HIDING);
-        }, lng.Constants.TRANSITION.DURATION);
-
-        lng.Router.History.removeLast();
-        target = current.siblings(ELEMENT.SECTION + lng.Router.History.current());
-
-        _assignTransition(target, target.data('transition-origin'));
-
-        _showPhoneSection(target);
-        _cacheView(current, target);
-    };
 
     var _showPhoneSection = function(target) {
         target.removeClass(CLASS.HIDE).addClass(CLASS.SHOW);
     };
 
     var _showTabletSection = function(current, target) {
-        if (current) {
+        if (current && !current.data('child')) {
             current.addClass(CLASS.HIDE);
-
             setTimeout(function() {
-                current.removeClass(CLASS.SHOW);
+                current.removeClass(CLASS.SHOW).removeClass(CLASS.HIDE);
             }, lng.Constants.TRANSITION.DURATION);
         }
 
         setTimeout(function() {
             target.addClass(CLASS.SHOW);
-        }, lng.Constants.TRANSITION.DURATION + 50);
+        }, lng.Constants.TRANSITION.DURATION );
     };
 
     var _cacheView = function(current, target) {

src/stylesheets/lungo.layout.elements.styl

@@ -17,11 +17,6 @@ header, footer
   height: HEADER_HEIGHT
   line-height: HEADER_HEIGHT
 
-  // display-box()
-  // box-pack(justify)
-  // box-orient(horizontal)
-  // overflow: hidden
-
   & > nav
     box-flex(0)
 

src/stylesheets/lungo.media.tablet.styl

@@ -26,10 +26,11 @@
     display: none
     opacity: 0
     transform translateX(100%)
-    -webkit-animation: showing TRANSITION_TIME TRANSITION_TIME
-    -webkit-animation-fill-mode: forwards
+
 
     &.show
+      -webkit-animation: showing TRANSITION_TIME TRANSITION_TIME
+      -webkit-animation-fill-mode: forwards
       display-box()
     &.hide
       -webkit-animation: hiding TRANSITION_TIME