From b1237425884e4709a0fcbd406d97e6413646ceff Mon Sep 17 00:00:00 2001 From: Keplyx Date: Sat, 21 Apr 2018 20:36:11 +0200 Subject: [PATCH] Added swipe gesture support for drawer and image gallery --- .idea/jsLibraryMappings.xml | 2 +- assets/css/photos.css | 4 ++++ assets/css/sidenav.css | 7 ++++--- assets/css/style.css | 8 ++++++++ assets/scripts/photosScript.js | 23 +++++++++++++++++++++++ assets/scripts/sidenavScript.js | 23 ++++++++++++++++++++++- index.php | 1 + template.php | 6 ++++-- 8 files changed, 67 insertions(+), 7 deletions(-) diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml index ef65610..f487212 100644 --- a/.idea/jsLibraryMappings.xml +++ b/.idea/jsLibraryMappings.xml @@ -1,6 +1,6 @@ - + \ No newline at end of file diff --git a/assets/css/photos.css b/assets/css/photos.css index d87554a..c089bf9 100644 --- a/assets/css/photos.css +++ b/assets/css/photos.css @@ -168,6 +168,10 @@ position: fixed; display: block; z-index: 10; + /* Block selection of buttons (useful for mobile devices) */ + -webkit-user-select: none; /* Chrome all / Safari all */ + -moz-user-select: none; /* Firefox all */ + -ms-user-select: none; /* IE 10+ */ } #close_back { diff --git a/assets/css/sidenav.css b/assets/css/sidenav.css index 8de923c..6000b19 100644 --- a/assets/css/sidenav.css +++ b/assets/css/sidenav.css @@ -2,8 +2,8 @@ .sidenav { height: 100%; - width: 250px; - margin-left: -500px; /* change margin with JavaScript */ + width: 300px; + margin-left: -270px; /* change margin with JavaScript */ position: fixed; /* Stay in place */ z-index: 1000; top: 0; @@ -18,7 +18,8 @@ /* The navigation menu links */ .sidenav a { - padding: 8px 8px 8px 32px; + padding: 8px 0 8px 32px; + margin-right: 30px; text-decoration: none; font-size: 20px; font-family: 'Rubik', sans-serif; diff --git a/assets/css/style.css b/assets/css/style.css index 911e461..d01b7bc 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -326,6 +326,14 @@ Full-Width Styles color: black; } +#swipe_area { + height: 100%; + width: 30px; + background: #3a7eaa; + position: fixed; + top: 0; + left: 0; +} /******************************************************************************* Small Device Styles diff --git a/assets/scripts/photosScript.js b/assets/scripts/photosScript.js index 86d5816..510bf54 100644 --- a/assets/scripts/photosScript.js +++ b/assets/scripts/photosScript.js @@ -64,6 +64,29 @@ $(document).keydown(function(e) { e.preventDefault(); // prevent the default action (scroll / move caret) }); +/* + * Control images with swipes + */ +var img = document.querySelector('#photo_overlay'); +// Create a manager to manager the element +var manager = new Hammer.Manager(img); +// Create a recognizer +var Swipe = new Hammer.Swipe(); +// Add the recognizer to the manager +manager.add(Swipe); + +// Subscribe to the swipe event +manager.on('swipe', function(e) { + var direction = e.offsetDirection; + if (direction === 4) { // right + displayNext(-1); + } else if (direction === 2){ // left + displayNext(1); + } +}); + + + /* diff --git a/assets/scripts/sidenavScript.js b/assets/scripts/sidenavScript.js index 9ff7ccc..215a8bf 100644 --- a/assets/scripts/sidenavScript.js +++ b/assets/scripts/sidenavScript.js @@ -21,7 +21,7 @@ function openNav() { * and hide the back button overlay */ function closeNav() { - sidenav.css("margin-left", "-250px"); + sidenav.css("margin-left", "-270px"); backButton.removeClass("active_background"); disableHamburger(); menuOpen = false; @@ -46,3 +46,24 @@ function disableHamburger() { function enableHamburger() { hamburger.addClass("change"); } + +/* + * Open navigation menu when swiping right (if not swiping on an image) + */ +var img = document.querySelector('.sidenav'); +// Create a manager to manager the element +var manager = new Hammer.Manager(img); +// Create a recognizer +var Swipe = new Hammer.Swipe(); +// Add the recognizer to the manager +manager.add(Swipe); + +// Subscribe to the swipe event +manager.on('swipe', function(e) { + var direction = e.offsetDirection; + if (direction === 4) { // right + openNav(); + } else if (direction === 2) { // left + closeNav(); + } +}); diff --git a/index.php b/index.php index c5b7015..974b283 100644 --- a/index.php +++ b/index.php @@ -10,6 +10,7 @@ +
diff --git a/template.php b/template.php index 7ed7f7d..a72e27f 100644 --- a/template.php +++ b/template.php @@ -10,9 +10,10 @@ - - + + +
@@ -46,5 +47,6 @@ include("includes/sidenav.html"); +