vergnet/site-accueil-insa
2
1
Fork 1
Code Issues Pull requests Releases 2 Wiki Activity

Added swipe gesture support for drawer and image gallery

Browse source
This commit is contained in:
Keplyx 2018-04-21 20:36:11 +02:00
parent 7edca13675
commit b123742588
8 changed files with 67 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.idea/jsLibraryMappings.xml
View file

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<project version="4"> <project version="4">
<component name="JavaScriptLibraryMappings"> <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> </component>
</project> </project>

4
assets/css/photos.css
View file

@ -168,6 +168,10 @@
position: fixed; position: fixed;
display: block; display: block;
z-index: 10; 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 { #close_back {

7
assets/css/sidenav.css
View file

@ -2,8 +2,8 @@
.sidenav { .sidenav {
height: 100%; height: 100%;
width: 250px; width: 300px;
margin-left: -500px; /* change margin with JavaScript */ margin-left: -270px; /* change margin with JavaScript */
position: fixed; /* Stay in place */ position: fixed; /* Stay in place */
z-index: 1000; z-index: 1000;
top: 0; top: 0;
@ -18,7 +18,8 @@
/* The navigation menu links */ /* The navigation menu links */
.sidenav a { .sidenav a {
padding: 8px 8px 8px 32px; padding: 8px 0 8px 32px;
margin-right: 30px;
text-decoration: none; text-decoration: none;
font-size: 20px; font-size: 20px;
font-family: 'Rubik', sans-serif; font-family: 'Rubik', sans-serif;

8
assets/css/style.css
View file

@ -326,6 +326,14 @@ Full-Width Styles
color: black; color: black;
} }
#swipe_area {
height: 100%;
width: 30px;
background: #3a7eaa;
position: fixed;
top: 0;
left: 0;
}
/******************************************************************************* /*******************************************************************************
Small Device Styles Small Device Styles

23
assets/scripts/photosScript.js
View file

@ -64,6 +64,29 @@ $(document).keydown(function(e) {
e.preventDefault(); // prevent the default action (scroll / move caret) 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);
}
});
/* /*

23
assets/scripts/sidenavScript.js
View file

@ -21,7 +21,7 @@ function openNav() {
* and hide the back button overlay * and hide the back button overlay
*/ */
function closeNav() { function closeNav() {
sidenav.css("margin-left", "-250px"); sidenav.css("margin-left", "-270px");
backButton.removeClass("active_background"); backButton.removeClass("active_background");
disableHamburger(); disableHamburger();
menuOpen = false; menuOpen = false;
@ -46,3 +46,24 @@ function disableHamburger() {
function enableHamburger() { function enableHamburger() {
hamburger.addClass("change"); 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();
}
});

1
index.php
View file

@ -10,6 +10,7 @@
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/hamburger.css"> <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> <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 href="https://fonts.googleapis.com/css?family=Nunito+Sans|Work+Sans" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico">
</head> </head>
<body id="main"> <body id="main">
<div id="back_button" onclick="closeNav()"></div> <div id="back_button" onclick="closeNav()"></div>

6
template.php
View file

@ -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/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/planning_events.css">
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/photos.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="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.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 href="https://fonts.googleapis.com/css?family=Nunito+Sans|Work+Sans" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico">
</head> </head>
<body id="main"> <body id="main">
<div id="back_button" onclick="closeNav()"></div> <div id="back_button" onclick="closeNav()"></div>
@ -46,5 +47,6 @@ include("includes/sidenav.html");
</footer> </footer>
</div> </div>
</body> </body>
<script src="assets/scripts/sidenavScript.js"></script> <script src="assets/scripts/sidenavScript.js"></script>
</html> </html>