Add touch support for the menu on mobile devices

CHANGELOG.md

@@ -19,6 +19,7 @@ v0.12 (trunk)
  * Allow users to clear their information on the instance and leave it properly
  * Add NSFW filter configuration
  * Save Draft of publications in Publish and PublishBrief
+ * Add touch support to open the menu on mobile devices
 
 v0.11
 ---------------------------

app/assets/js/movim_tpl.js

@@ -5,6 +5,9 @@
  */
 
 var MovimTpl = {
+    dragged : false,
+    moving : false,
+    percent : false,
     init : function() {
         if(document.getElementById('back') != null)
             MovimUtils.hideElement(document.getElementById('back'));
@@ -121,10 +124,59 @@ var MovimTpl = {
     },
     toggleMenu : function() {
         MovimUtils.toggleClass('body > nav', 'active');
+    },
+    touchEvents: function() {
+        nav = document.querySelector('body > nav');
+
+        document.body.addEventListener('touchstart', function(event) {
+            startX = event.targetTouches[0].pageX;
+
+            if(
+            (
+                startX < 25 ||
+                (nav.classList.contains('active') && startX > document.body.clientWidth - 25)
+            )
+            && MovimTpl.dragged == false) {
+                nav.classList.add('moving');
+                MovimTpl.dragged = true;
+            }
+        }, true);
+
+        document.body.addEventListener('touchmove', function(event) {
+            moveX = event.targetTouches[0].pageX;
+
+            if(MovimTpl.dragged) {
+                event.preventDefault();
+                event.stopPropagation();
+
+                position = moveX - document.body.clientWidth;
+
+                MovimTpl.percent = 1 - Math.abs(moveX) / Math.abs(document.body.clientWidth);
+                nav.style.transform = 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, '+position+', 0, 0, 1)';
+            }
+        }, true);
+
+        document.body.addEventListener('touchend', function(event) {
+            nav.style.transform = '';
+
+            if(MovimTpl.dragged) {
+                nav.classList.remove('moving');
+
+                if(!nav.classList.contains('active')
+                && MovimTpl.percent < 0.80) {
+                    nav.classList.add('active');
+                } else if(MovimTpl.percent > 0.20) {
+                    nav.classList.remove('active');
+                }
+            }
+
+            MovimTpl.dragged = false;
+        }, true);
     }
 };
 
 movim_add_onload(function() {
     MovimTpl.init();
+    MovimTpl.touchEvents();
     document.body.addEventListener('click', MovimTpl.toggleContextMenu, false);
 });

themes/material/css/style.css

@@ -10,6 +10,7 @@
 * {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
+
 :focus {
     outline: 0;
 }
@@ -57,7 +58,7 @@ body > nav {
     background-color: #fefefe;
     width: 7rem;
     max-width: 95%;
-    transition: width 0.3s cubic-bezier(.4,0,.2,1);
+    /*transition: width 0.3s cubic-bezier(.4,0,.2,1);*/
     z-index: 2;
     position: absolute;
     overflow-y: auto;
@@ -98,13 +99,13 @@ body > nav li { /* Little hack for the navbar */
 }
 
 @media screen and (max-width: 1024px) {
-    body > nav:not(.active) {
+    body > nav:not(.active):not(.moving) {
         width: 45rem;
         transition: transform .3s cubic-bezier(.4,0,.2,1);
         transform: translateX(-100%);
     }
 
-    body > nav.active {
+    body > nav.active:not(.moving) {
         transition: transform .3s cubic-bezier(.4,0,.2,1);
         transform: translateX(0%);
     }