Right asides support

example/static/asides/right.html

@@ -1,4 +1,4 @@
-<aside id="right" class="on-right">
+<aside id="right" data-transition="right">
     <header data-title="Example of Aside"></header>
     <article class="list active">
         <ul>

src/boot/Lungo.Boot.Events.coffee

@@ -102,10 +102,11 @@ Lungo.Boot.Events = do (lng = Lungo) ->
 
   _transitionEnd = (event) ->
     section = lng.dom(event.target)
+    hasDirection = section.data("direction")
     asideRelated = section.hasClass("asideHidding") or section.hasClass("asideShowing")
     shadowRelated = section.hasClass("shadowing") or section.hasClass("unshadowing")
 
-    if section.data("direction") or asideRelated or shadowRelated then lng.Router.animationEnd event
+    if hasDirection or asideRelated or shadowRelated then lng.Router.animationEnd event
     else lng.Aside.animationEnd event
 
 

src/modules/Lungo.Aside.coffee

@@ -39,7 +39,8 @@ Lungo.Aside = do (lng = Lungo) ->
       _callback = callback
       aside_transition = lng.Element.Cache.aside.data(C.TRANSITION.ATTR) or "left"
       if lng.DEVICE is C.DEVICE.PHONE
-        lng.Element.Cache.section.removeClass("aside").data("aside-#{aside_transition}", "hide")
+        lng.Element.Cache.section.removeClass("aside").removeClass("aside-right")
+        lng.Element.Cache.section.data("aside-#{aside_transition}", "hide")
       else
         lng.dom(".aside").removeClass("aside").addClass("asideHidding")
         lng.Element.Cache.aside = null
@@ -72,7 +73,10 @@ Lungo.Aside = do (lng = Lungo) ->
       if _callback then _callback.call _callback
       _callback = undefined
     else
-      section.removeAttr("data-aside-#{aside_transition}").addClass "aside"
+      unless aside_transition.indexOf("right") is -1
+        section.removeAttr("data-aside-#{aside_transition}").addClass "aside-right"
+      else
+        section.removeAttr("data-aside-#{aside_transition}").addClass "aside"
 
 
   ###

src/stylesheets/lungo.layout.styl

@@ -88,10 +88,10 @@ body
   /* ================================ SECTION ================================ */
   /* ========================================================================= */
   & > section
-    z-index: 2
     width: inherit
-    &:not(.show)
-      z-index: -1
+    z-index: -1
+    &.show
+      z-index: 1
 
   /* ========================================================================= */
   /* ================================= ASIDE ================================= */

src/stylesheets/lungo.media.phone.styl

@@ -14,6 +14,8 @@
     & > aside
       z-index: 0
       position: absolute
+      &:not(.show)
+        z-index: -1
 
     & > section
       display: none
@@ -21,6 +23,8 @@
         display: block
       &.aside
         transform translateX(ASIDE_WIDTH)
+      &.aside-right
+        transform translateX(-(ASIDE_WIDTH))
 
     & [data-transition], & [data-aside-transition]
       display-box()