forked from rebillar/site-accueil-insa
Added swipe gesture support for drawer and image gallery
This commit is contained in:
Keplyx
parent
7edca13675
commit
b123742588
8 changed files with 67 additions and 7 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="JavaScriptLibraryMappings">
|
||||
<file url="PROJECT" libraries="{all, jQuery-2.0.0, jquery, jquery-1.11.1, jquery-3.3.1, jquery.mobile-1.4.5}" />
|
||||
<file url="PROJECT" libraries="{all, hammer, jQuery-2.0.0, jquery, jquery-1.11.1, jquery-3.3.1, jquery-migrate-3.0.0, jquery-ui, jquery.mobile-1.4.5, jquery.mobile-1.5.0-alpha.1}" />
|
||||
</component>
|
||||
</project>
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/hamburger.css">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans|Work+Sans" rel="stylesheet">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
</head>
|
||||
<body id="main">
|
||||
<div id="back_button" onclick="closeNav()"></div>
|
||||
|
|
|
|||
|
|
@ -10,9 +10,10 @@
|
|||
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/hamburger.css">
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/planning_events.css">
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/photos.css">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
|
||||
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans|Work+Sans" rel="stylesheet">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
</head>
|
||||
<body id="main">
|
||||
<div id="back_button" onclick="closeNav()"></div>
|
||||
|
|
@ -46,5 +47,6 @@ include("includes/sidenav.html");
|
|||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script src="assets/scripts/sidenavScript.js"></script>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue