From 8b6ce423001ef263e7ad58b91306c60c2a90448a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e=20Jaussoin?= <edhelas@movim.eu>
Date: Tue, 13 Jun 2017 00:09:29 +0200
Subject: [PATCH] Add touch support for the menu on mobile devices

---
 CHANGELOG.md                  |  1 +
 app/assets/js/movim_tpl.js    | 52 +++++++++++++++++++++++++++++++++++
 themes/material/css/style.css |  7 +++--
 3 files changed, 57 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 02bf23ee4..60c376d9a 100644
--- a/CHANGELOG.md
+++ b/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
 ---------------------------
diff --git a/app/assets/js/movim_tpl.js b/app/assets/js/movim_tpl.js
index 07860df5d..6170c284d 100644
--- a/app/assets/js/movim_tpl.js
+++ b/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);
 });
diff --git a/themes/material/css/style.css b/themes/material/css/style.css
index f1cba5e7b..a1052f2fe 100644
--- a/themes/material/css/style.css
+++ b/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%);
     }