Merge pull request #318 from matthojo/mobile-interactions

Improved mobile interactions

core/client/assets/lib/jquery-utils.js

@@ -5,7 +5,7 @@
 (function () {
     "use strict";
 
-    // UTILS
+    // ## UTILS
 
     /**
      * Allows to check contents of each element exactly
@@ -80,6 +80,66 @@
         return this;
     };
 
-    $('.overlay').hideAway(); // TODO: Move to a more sensible global file.
+    // ## GLOBALS
+
+    /**
+     * Hammer.js
+     */
+    var Hammer = $(document).hammer({stop_browser_behavior: { touchAction: true }});
+    Hammer.on("swiperight", "#global-header", function (event) {
+        if (window.matchMedia('(max-width: 400px)').matches) {
+            event.gesture.preventDefault();
+            $('body').addClass('off-canvas');
+        }
+    });
+
+    Hammer.on("swipeleft", "#main-menu", function (event) {
+        if (window.matchMedia('(max-width: 400px)').matches) {
+            event.gesture.preventDefault();
+            $('body').removeClass('off-canvas');
+        }
+    });
+
+    Hammer.on("tap swipeleft", ".manage .content-list ol li", function (event) {
+        if (window.matchMedia('(max-width: 800px)').matches) {
+            event.gesture.preventDefault();
+            $(".content-list").animate({right: "100%", left: "-100%", 'margin-right': "15px"}, 300);
+            $(".content-preview").animate({right: "0", left: "0", 'margin-left': "0"}, 300);
+        }
+    });
+
+    Hammer.on("swiperight", ".content-preview", function (event) {
+        if (window.matchMedia('(max-width: 800px)').matches) {
+            event.gesture.preventDefault();
+            $(".content-list").animate({right: "0", left: "0", 'margin-right': "0"}, 300);
+            $(".content-preview").animate({right: "-100%", left: "100%", 'margin-left': "15px"}, 300);
+        }
+    });
+
+    Hammer.on("tap swipeleft", ".settings .settings-menu li", function (event) {
+        if (window.matchMedia('(max-width: 800px)').matches) {
+            event.gesture.preventDefault();
+            $(".settings-sidebar").animate({right: "100%", left: "-102%", 'margin-right': "15px"}, 300);
+            $(".settings-content").animate({right: "0", left: "0", 'margin-left': "0"}, 300);
+        }
+    });
+
+    Hammer.on("swiperight", ".settings-content", function (event) {
+        if (window.matchMedia('(max-width: 800px)').matches) {
+            event.gesture.preventDefault();
+            $(".settings-sidebar").animate({right: "0", left: "0", 'margin-right': "0"}, 300);
+            $(".settings-content").animate({right: "-100%", left: "100%", 'margin-left': "15px"}, 300);
+        }
+    });
+
+
+    $('[data-off-canvas]').on('click', function (e) {
+        if (window.matchMedia('(max-width: 650px)').matches) {
+            e.preventDefault();
+            $('body').toggleClass('off-canvas');
+        }
+    });
+
+    $('.overlay').hideAway();
 
 }());

core/client/assets/sass/layouts/manage.scss

@@ -32,9 +32,6 @@
         background: #fff;
         box-shadow: $shadow;
 
-        @include breakpoint(900px) {
-            width:300px;
-        }
         @include breakpoint($tablet) {
             width:auto;
             right:0;
@@ -182,9 +179,11 @@
         border-left:$lightbrown 2px solid;
         background: #fff;
         box-shadow: $shadow;
-        @include breakpoint(900px) {
+        @include breakpoint($tablet) {
             width: auto;
-            left: 300px;
+            left: 100%;
+            right: -100%;
+            margin-left: 15px;
         }
 
         .unfeatured {

core/client/assets/sass/layouts/settings.scss

@@ -48,6 +48,7 @@
         left:0;
         bottom:0;
         z-index: 700;
+        background: #FFFFFF;
         box-shadow: $lightbrown 1px 0 0;
         @include breakpoint($tablet) {
             width:100%;
@@ -157,7 +158,15 @@
         right:0;
         left:20%;
         bottom:0;
-        @include breakpoint($tablet) { display: none; }
+        background: #FFFFFF;
+
+        @include breakpoint($tablet) {
+            display: none;
+            width: 100%;
+            left: 100%;
+            right: -100%;
+            margin-left: 15px;
+        }
 
         display: none;
         &.active {display:block;}

core/client/tagui.js

@@ -162,13 +162,6 @@
         $(e.currentTarget).remove();
     }
 
-    function handleClickOff(e) {
-        if (window.matchMedia('(max-width: 650px)').matches) {
-            e.preventDefault();
-            $('body').toggleClass('off-canvas');
-        }
-    }
-
     $(document).ready(function () {
         suggestions = $("ul.suggestions").hide(); // Initnialise suggestions overlay
 
@@ -182,7 +175,7 @@
             .on('keydown', handleTagKeyDown);
         $('ul.suggestions').on('click', "li", handleSuggestionClick);
         $('.categories').on('click', ".category", handleCategoryClick);
-        $('[data-off-canvas]').on('click', handleClickOff);
+
     });
 
 }());

core/server/views/default.hbs

@@ -11,7 +11,7 @@
         <meta name="author" content="">
         <meta name="HandheldFriendly" content="True">
         <meta name="MobileOptimized" content="320">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
         <meta name="apple-mobile-web-app-capable" content="yes" />
 
         <link rel="shortcut icon" href="/favicon.ico">
@@ -53,6 +53,7 @@
         <script src="/public/vendor/countable.js"></script>
         <script src="/public/vendor/to-title-case.js"></script>
         <script src="/public/vendor/packery.pkgd.min.js"></script>
+        <script src="/public/vendor/jquery.hammer.min.js"></script>
 
         <script src="/public/lib/jquery-utils.js"></script>
         <script src="/public/init.js"></script>