Draggable aside

with dynamic keyframes

src/modules/Lungo.Aside.coffee

@@ -11,6 +11,8 @@ Lungo.Aside = do (lng = Lungo) ->
 
   C = lng.Constants
   _callback = undefined
+  CUSTOM_KF_SHOW = "__customKFShow__"
+  CUSTOM_KF_HIDE = "__customKFHide__"
   _customAsideAnimation = undefined
 
   ###
@@ -19,18 +21,23 @@ Lungo.Aside = do (lng = Lungo) ->
 
   @param    {string} <aside> Id
   ###
-  show = (aside_id, fixed = false) ->
+  show = (aside_id, fixed = false, fromX = -1) ->
     aside = lng.dom("##{aside_id}")
     if aside.length
       unless _alreadyOpen(aside_id)
         unless fixed
           # not fixed
-          fromX = 0
           lng.Element.Cache.aside = aside
           if lng.DEVICE is C.DEVICE.PHONE
             aside.addClass(C.CLASS.SHOW)
-            aside_transition = aside.data(C.TRANSITION.ATTR) or "left"
-            lng.Element.Cache.section.data("aside-#{aside_transition}", "show")
+            unless fromX is null
+              customAnimation = _createCustomAnimation(fromX)
+              lng.Element.Cache.section.style "-webkit-animation-name", customAnimation
+            else
+              aside_transition = aside.data(C.TRANSITION.ATTR) or "left"
+              lng.Element.Cache.section.data("aside-#{aside_transition}", "show")
+            # aside_transition = aside.data(C.TRANSITION.ATTR) or "left"
+            # lng.Element.Cache.section.data("aside-#{aside_transition}", "show")
           else
             aside.addClass(C.CLASS.SHOW)
             aside_section = lng.dom("[data-aside=#{aside_id}][data-children]")
@@ -53,13 +60,18 @@ Lungo.Aside = do (lng = Lungo) ->
   @method hide
   @param    {function} Callback
   ###
-  hide = (callback) ->
-    if lng.Element.Cache.aside
+  hide = (callback, fromX=null) ->
+    if lng.Element.Cache.aside or fromX
       _callback = callback
-      aside_transition = lng.Element.Cache.aside.data(C.TRANSITION.ATTR) or "left"
+      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").removeClass("aside-right")
-        lng.Element.Cache.section.data("aside-#{aside_transition}", "hide")
+        if fromX > 0
+          customAnimation = _createCustomAnimation(fromX, true)
+          lng.Element.Cache.section.removeClass("aside").removeClass("aside-right")
+          lng.Element.Cache.section.style "-webkit-animation-name", customAnimation
+        else
+          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
@@ -81,7 +93,7 @@ Lungo.Aside = do (lng = Lungo) ->
   ###
   animationEnd = (event) ->
     section = lng.dom(event.target)
-    aside_transition = lng.Element.Cache.aside.data(C.TRANSITION.ATTR) or "left"
+    aside_transition = lng.Element.Cache.aside?.data(C.TRANSITION.ATTR) or "left"
     if section.data("aside-#{aside_transition}") is "hide"
       lng.Element.Cache.aside.removeClass(C.CLASS.SHOW)
       lng.Element.Cache.aside = null
@@ -89,9 +101,12 @@ Lungo.Aside = do (lng = Lungo) ->
       if _callback then _callback.call _callback
       _callback = undefined
     else
-      className = if aside_transition.indexOf("right") is -1 then "aside" else "aside-right"
+      if section.vendor("animation")[0] isnt CUSTOM_KF_HIDE
+        className = if aside_transition.indexOf("right") is -1 then "aside" else "aside-right"
       section.removeAttr("style").removeAttr("data-aside-#{aside_transition}").addClass(className)
+
     if _customAsideAnimation
+      section.removeAttr("style")
       _customAsideAnimation.remove()
       _customAsideAnimation = undefined
 
@@ -108,6 +123,7 @@ Lungo.Aside = do (lng = Lungo) ->
       section = el.closest("section")
       aside = lng.dom("aside#" + el.data("aside"))
       section.swiping (gesture) ->
+        gesture.originalEvent.preventDefault()
         unless section.hasClass("aside") or section.hasClass("aside-right")
           xdiff = gesture.currentTouch.x - gesture.iniTouch.x
           ydiff = Math.abs(gesture.currentTouch.y - gesture.iniTouch.y)
@@ -122,11 +138,14 @@ Lungo.Aside = do (lng = Lungo) ->
 
       section.swipe (gesture) ->
         diff = gesture.currentTouch.x - gesture.iniTouch.x
+        diff = 256 if diff > 256
         ydiff = Math.abs(gesture.currentTouch.y - gesture.iniTouch.y)
         section.attr "style", ""
         if diff > MIN_XDIFF and started
-          show(aside.attr("id"), true, gesture.currentTouch.x)
-        else hide
+          show(aside.attr("id"), false, diff)
+        else
+          if started then hide(undefined, diff)
+          else hide()
         started = false
 
 
@@ -139,6 +158,29 @@ Lungo.Aside = do (lng = Lungo) ->
   _asideStylesheet = ->
     if lng.Element.Cache.aside?.hasClass(C.CLASS.RIGHT) then "#{C.CLASS.RIGHT}" else "  "
 
+  _createCustomAnimation = (x, forClose=false) ->
+    animationName = if forClose then CUSTOM_KF_HIDE else CUSTOM_KF_SHOW
+    _customAsideAnimation = document.createElement('style')
+    _customAsideAnimation.type = 'text/css'
+    unless forClose
+      rule = """
+        @-webkit-keyframes #{animationName} {
+          0%   { -webkit-transform: translateX(#{x}px); }
+          60%  { -webkit-transform: translateX(262px);  }
+          100% { -webkit-transform: translateX(256px);  }
+        }
+      """
+    else
+      rule = """
+        @-webkit-keyframes #{animationName} {
+          0%   { -webkit-transform: translateX(#{x}px); }
+          100% { -webkit-transform: translateX(0);      }
+        }
+      """
+    _customAsideAnimation.appendChild(document.createTextNode(rule))
+    document.getElementsByTagName("head")[0].appendChild(_customAsideAnimation)
+    return animationName
+
 
   show        : show
   hide        : hide