Aside gestures to open and close it

src/boot/Lungo.Boot.Events.js

@@ -14,6 +14,7 @@ Lungo.Boot.Events = (function(lng, undefined) {
     var CLASS = lng.Constants.CLASS;
     var ELEMENT = lng.Constants.ELEMENT;
     var SELECTORS = {
+        HREF_ASIDE: 'header a[href][data-router=aside]',
         HREF_TARGET: 'a[href][data-router]',
         HREF_TARGET_FROM_ASIDE: 'aside a[href][data-router]',
         INPUT_CHECKBOX: 'input[type=range].checkbox'
@@ -26,6 +27,9 @@ Lungo.Boot.Events = (function(lng, undefined) {
      *
      */
     var init = function() {
+        lng.dom(SELECTORS.HREF_ASIDE).each(function() {
+            lng.View.Aside.suscribeEvents(this);
+        });
         lng.dom(SELECTORS.HREF_TARGET_FROM_ASIDE).tap(_hideAsideIfNecesary);
         lng.dom(SELECTORS.HREF_TARGET).tap(_loadTarget);
         // lng.dom(SELECTORS.INPUT_CHECKBOX).tap(_changeCheckboxValue);

src/view/Lungo.View.Aside.js

@@ -12,6 +12,7 @@ Lungo.View.Aside = (function(lng, undefined) {
     var ELEMENT = lng.Constants.ELEMENT;
     var CLASS = lng.Constants.CLASS;
     var ATTRIBUTE = lng.Constants.ATTRIBUTE;
+    var MIN_XDIFF = parseInt(document.body.getBoundingClientRect().width / 3, 10);
 
     /**
      * Toggle an aside element
@@ -58,8 +59,8 @@ Lungo.View.Aside = (function(lng, undefined) {
      *
      * @method hide
      */
-    var hide = function() {
-        var aside = lng.Element.Cache.aside;
+    var hide = function(target) {
+        var aside = lng.Element.Cache.aside || target;
         if (aside) {
             lng.Element.Cache.section.removeClass(CLASS.ASIDE).removeClass(CLASS.RIGHT).removeClass(CLASS.SMALL);
 
@@ -75,6 +76,39 @@ Lungo.View.Aside = (function(lng, undefined) {
         }
     };
 
+    var suscribeEvents = function(href) {
+
+        var STARTED = false;
+        var a = lng.dom(href);
+        var section = a.closest("section");
+        var aside = lng.dom(a.attr("href"));
+
+        section.swiping(function(gesture) {
+            if(!section.hasClass("aside")) {
+                var xdiff =  gesture.currentTouch.x - gesture.iniTouch.x;
+                var ydiff =  Math.abs(gesture.currentTouch.y - gesture.iniTouch.y);
+                STARTED = STARTED ? true : xdiff > 3*ydiff && xdiff < 50;
+                if(STARTED) {
+                    xdiff = xdiff > 256 ? 256 : xdiff < 0 ? 0 : xdiff;
+                    aside.addClass(CLASS.SHOW);
+                    section.vendor('transform', 'translateX(' + xdiff + 'px)');
+                    section.vendor('transition-duration', '0s');
+                } else {
+                    section.attr('style', '');
+                }
+            }
+        });
+
+        section.swipe(function(gesture) {
+            var diff = gesture.currentTouch.x - gesture.iniTouch.x;
+            var ydiff =  Math.abs(gesture.currentTouch.y - gesture.iniTouch.y);
+            section.attr('style', '');
+            if(diff > MIN_XDIFF && STARTED) show(aside);
+            else hide(aside);
+            STARTED = false;
+        });
+    };
+
     var _findAside = function(aside_id) {
         var aside = null;
         var asides = lng.dom(ELEMENT.ASIDE);
@@ -106,6 +140,7 @@ Lungo.View.Aside = (function(lng, undefined) {
     };
 
     return {
+        suscribeEvents: suscribeEvents,
         toggle: toggle,
         show: show,
         hide: hide