Aside/router functionality

Aside hide callback to fix router problems when aside is open

example/navigation.html

@@ -40,17 +40,10 @@
     <aside id="a2" data-transition="right">
         <header data-title="a2"></header>
         <article id="a2a1" class="active list scroll">
-            <ul>
-                <li data-view-article="s1a1">show ARTICLE s1a1</li>
-                <li data-view-article="s1a2">show ARTICLE s1a2</li>
-                <li data-view-article="s1a1">show ARTICLE s1a1</li>
-                <li data-view-article="s1a2">show ARTICLE s1a2</li>
-                <li data-view-section="s2">show SECTION s2</li>
-                <li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li>
-                <li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li>
-                <li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li>
-                <li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li>
-            </ul>
+            <button data-router="back" class="tiny">back</button>
+            <button data-view-section="s1" class="tiny">s1</button>
+            <button data-view-section="s2" class="tiny">s2</button>
+            <button data-view-section="s3" class="tiny">s3</button>
         </article>
     </aside>
 
@@ -116,6 +109,11 @@
             history: false
         });
 
+        $$("[data-router=back]").tap(function(event) {
+            Lungo.Router.back();
+        });
+
+
     </script>
 </body>
 </html>

src/modules/Lungo.Aside.coffee

@@ -10,6 +10,7 @@ Initialize the <articles> layout of a certain <section>
 Lungo.Aside = do (lng = Lungo) ->
 
   C = lng.Constants
+  _callback = undefined
 
   ###
   Display an aside element with a particular <section>
@@ -26,9 +27,10 @@ Lungo.Aside = do (lng = Lungo) ->
   Hide an aside element with a particular section
   @method hide
   ###
-  hide = ->
+  hide = (callback) ->
     aside = lng.Element.Cache.aside
     if aside
+      _callback = callback
       aside_transition = aside.data(C.TRANSITION.ATTR)
       section = lng.Element.Cache.section
       section.data("aside-#{aside_transition}", "hide")
@@ -55,6 +57,8 @@ Lungo.Aside = do (lng = Lungo) ->
       lng.Element.Cache.aside.removeClass(C.CLASS.SHOW)
       lng.Element.Cache.aside = null
       section.removeAttr("data-aside-#{aside_transition}")
+      if _callback then _callback.call(@)
+      _callback = undefined
 
 
   ###

src/modules/Lungo.Constants.coffee

@@ -99,3 +99,4 @@ Lungo.Constants =
     DATABASE_TRANSACTION : "ERROR: Data.Sql >> "
     ROUTER               : "ERROR: The target does not exists >>"
     LOADING_RESOURCE     : "ERROR: Loading resource: "
+

src/modules/Lungo.Router.coffee

@@ -15,7 +15,6 @@ Lungo.Router = do (lng = Lungo) ->
   _history            = []
   _animating          = false
 
-
   ###
   Navigate to a <section>.
   @method   section
@@ -28,15 +27,12 @@ Lungo.Router = do (lng = Lungo) ->
       query = C.ELEMENT.SECTION + HASHTAG + section_id
       future = if current then current.siblings(query) else lng.dom(query)
       if future.length
-        if lng.DEVICE is C.DEVICE.PHONE and current?
-          _setSectionDirections future, current
-
-        lng.Section.show current, future
+        if lng.DEVICE is C.DEVICE.PHONE then _sectionPhone future, current
+        else _show future, current
         lng.Router.step section_id
         do _url unless Lungo.Config.history is false
         do _updateNavigationElements
 
-
   ###
   Return to previous section.
   @method   back
@@ -47,15 +43,11 @@ Lungo.Router = do (lng = Lungo) ->
     current = lng.Element.Cache.section
     query = C.ELEMENT.SECTION + HASHTAG + history()
     future = current.siblings(query)
-    if lng.DEVICE is C.DEVICE.PHONE
-      # do lng.Aside.hide
-      _setSectionDirections future, current, true
-      # if future.hasClass("aside") then lng.Aside.toggle()
-
-    lng.Section.show current, future
-    do _url unless Lungo.Config.history is false
-    do _updateNavigationElements
-
+    if future.length
+      if lng.DEVICE is C.DEVICE.PHONE then _sectionPhone future, current, true
+      else _show future, current, true
+      do _url unless Lungo.Config.history is false
+      do _updateNavigationElements
 
   ###
   Displays the <article> in a particular <section>.
@@ -76,7 +68,6 @@ Lungo.Router = do (lng = Lungo) ->
         do _url unless Lungo.Config.history is false
         do _updateNavigationElements
 
-
   ###
   Triggered when <section> animation ends. Reset animation classes of section and aside
   @method   animationEnd
@@ -89,7 +80,6 @@ Lungo.Router = do (lng = Lungo) ->
     section.removeAttr "data-#{C.ATTRIBUTE.DIRECTION}"
     _animating = false
 
-
   ###
   Create a new element to the browsing history based on the current section id.
   @method step
@@ -107,9 +97,17 @@ Lungo.Router = do (lng = Lungo) ->
   ###
   Private methods
   ###
-  _notCurrentTarget = (current, id) -> current?.attr(C.ATTRIBUTE.ID) isnt id
+  _sectionPhone = (future, current, backward = false) ->
+    callback = -> _show future, current, backward
+    if lng.Element.Cache.aside then lng.Aside.hide callback
+    else do callback
+
+  _show = (future, current, backward) ->
+    if current? then _setSectionDirections future, current, backward
+    lng.Section.show current, future
 
   _setSectionDirections = (future, current, isBack=false) ->
+    if not current? or not future.length then return false
     _animating = true
     dirPrefix = if isBack then "back-" else ""
     future.addClass(C.CLASS.SHOW)
@@ -117,6 +115,8 @@ Lungo.Router = do (lng = Lungo) ->
     if current.data(C.TRANSITION.ATTR) then current.data(C.ATTRIBUTE.DIRECTION, "#{dirPrefix}out")
     else current.removeClass(C.CLASS.SHOW)
 
+  _notCurrentTarget = (current, id) -> current?.attr(C.ATTRIBUTE.ID) isnt id
+
   _url = ->
     _hashed_url = ""
     _hashed_url += "#{section}/" for section in _history
@@ -132,7 +132,9 @@ Lungo.Router = do (lng = Lungo) ->
     nav = lng.Element.Cache.section.find(C.QUERY.ARTICLE_REFERENCE).addClass C.CLASS.HIDE
     nav.filter("[data-article*='#{article_id}']").removeClass C.CLASS.HIDE
 
-  _removeLast = -> _history.length -= 1
+  _removeLast = ->
+    if _history.length > 1
+      _history.length -= 1
 
   section : section
   back    : back

src/stylesheets/lungo.animation.slide.styl

@@ -4,35 +4,37 @@ SCALE = .8
 
 [data-transition="slide"]
   &[data-direction="in"]
+    z-index: 2
     vendor(animation-name, slideIn)
   &[data-direction="out"]
+    z-index: 1
     vendor(animation-name, slideOut)
   &[data-direction="back-in"]
+    z-index: 1
     vendor(animation-name, slideBackIn)
   &[data-direction="back-out"]
+    z-index: 2
     vendor(animation-name, slideBackOut)
 
 @keyframes slideIn
   from { transform: translateX(100%) }
   to   { transform: translateX(0) }
 
+// @keyframes slideOut
+//   from { transform: scale(1) }
+//   to   { transform: scale(SCALE) }
 @keyframes slideOut
-  from { transform: scale(1) }
-  to   { transform: scale(SCALE) }
+  from { transform: translateZ(0) rotateX(0); opacity: 1 }
+  to   { transform: translateZ(-200px) rotateX(20deg); opacity: 0.1 }
 
 @keyframes slideBackOut
   from { transform: translateX(0) }
   to   { transform: translateX(100%) }
 
-@keyframes slideBackIn
-  from { transform: scale(SCALE) }
-  to   { transform: scale(1) }
-
-
-// @keyframes slideOut
-//   from { transform: scale(1) }
-//   to   { transform: translateZ(-200px) rotateX(20deg); opacity: 0.1 }
-
 // @keyframes slideBackIn
-//   from { transform: translateZ(-200px) rotateX(20deg); opacity: 0.1 }
+//   from { transform: scale(SCALE) }
 //   to   { transform: scale(1) }
+@keyframes slideBackIn
+  from { transform: translateZ(-200px) rotateX(20deg); opacity: 0.1 }
+  to   { transform: translateZ(0) rotateX(0); opacity: 1 }
+