mathieu/CAU-Web-Fall-2018-Project-2
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add scroll to open history on mobile

Browse Source
This commit is contained in:
Mathieu Sanchez 2018-11-02 13:05:22 +09:00
parent 796b458a4e
commit cf15e3c61a
3 changed files with 83 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
index.html
View File

@ -1,12 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Calculator</title> <title>Calculator</title>
<link rel="stylesheet" type="text/css" href="ressources/materialize.min.css">
<script src="ressources/jquery-3.3.1.min.js"></script> <script src="ressources/jquery-3.3.1.min.js"></script>
<script src="ressources/materialize.min.css"></script>
<link rel="stylesheet" type="text/css" href="ressources/materialize.min.css">
<script src="ressources/materialize.min.js"></script>
<link rel="stylesheet" type="text/css" href="ressources/index.css"> <link rel="stylesheet" type="text/css" href="ressources/index.css">
<script src="ressources/index.js"></script> <script src="ressources/index.js"></script>
@ -99,8 +101,13 @@
<span>)</span> <span>)</span>
</div> </div>
</div> </div>
<div class="button-input"> <div class="parenthesis">
<span>/</span> <div class="button-input">
<span>/</span>
</div>
<div class="button-input">
<span>%</span>
</div>
</div> </div>
<div class="button-input"> <div class="button-input">
<span>*</span> <span>*</span>

5
ressources/index.css
View File

@ -1,5 +1,6 @@
body, html { body, html {
height: 100%; height: 100%;
overscroll-behavior: contain;
} }
* { * {
@ -110,6 +111,10 @@ body, html {
transition: font 0.3s ease; transition: font 0.3s ease;
} }
.display.error {
color: #c62828;
}
.display.big { .display.big {
font-size: 60px; font-size: 60px;
} }

66
ressources/index.js
View File

@ -191,3 +191,69 @@ $( document ).on( "click", "#delete-history", function () {
localStorage.setItem( "operations", JSON.stringify( operations ) ); localStorage.setItem( "operations", JSON.stringify( operations ) );
insertHistory(); insertHistory();
} ); } );
function swipedetect( el, callback ) {
let touchsurface = el,
swipedir,
startX,
startY,
distX,
distY,
threshold = 150, //required min distance traveled to be considered swipe
restraint = 100, // maximum distance allowed at the same time in perpendicular direction
allowedTime = 300, // maximum time allowed to travel that distance
elapsedTime,
startTime,
handleswipe = callback || function (swipedir) {
};
touchsurface.addEventListener('touchstart', function (e) {
var touchobj = e.changedTouches[0];
swipedir = 'none';
dist = 0;
startX = touchobj.pageX;
startY = touchobj.pageY;
startTime = new Date().getTime(); // record time when finger first makes contact with surface
// e.preventDefault()
}, false);
touchsurface.addEventListener('touchmove', function (e) {
// e.preventDefault() // prevent scrolling when inside DIV
}, false);
touchsurface.addEventListener('touchend', function (e) {
var touchobj = e.changedTouches[0];
distX = touchobj.pageX - startX; // get horizontal dist traveled by finger while in contact with surface
distY = touchobj.pageY - startY; // get vertical dist traveled by finger while in contact with surface
elapsedTime = new Date().getTime() - startTime; // get time elapsed
if (elapsedTime <= allowedTime) { // first condition for awipe met
if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint) { // 2nd condition for horizontal swipe met
swipedir = (distX < 0) ? 'left' : 'right' // if dist traveled is negative, it indicates left swipe
}
else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint) { // 2nd condition for vertical swipe met
swipedir = (distY < 0) ? 'up' : 'down' // if dist traveled is negative, it indicates up swipe
}
}
handleswipe(swipedir);
// e.preventDefault();
}, false)
}
$( window ).on( "load", function () {
swipedetect( document.getElementsByClassName( "display-container" )[0], function ( dir ) {
if ( dir === "down" ) {
$( ".container" ).addClass( "history" );
}
} );
let historyContainer = document.getElementsByClassName( "history-container" );
swipedetect( historyContainer[0], function ( dir ) {
if ( dir === "up" && ( ( historyContainer[0].scrollTop + historyContainer[0].offsetHeight ) === historyContainer[0].scrollHeight ) ) {
$( ".container" ).removeClass( "history" );
}
} )
} );